var Zoomify = Class.create({
	// Should support a product image, a zoom image and a view box of any size or position on page
	initialize: function(container) {
		// Identify containers
		this.container = container;
		this.productImage = this.container.down('.image_wrap'); 
		this.box = this.container.down('.zoom_box'); 
		this.zoomImage = this.box.down('.zoom_image');
		this.magnify_box = $('magnify');
		
		// Reusable Calculations
		
		var prodDim = {width: 496, height: 359};
		var zoomDim = {width: 2600, height: 1850};
		var boxDim = {width: 437, height: 408};
		var magboxDim = {width: 73, height: 68};
		
		this.widthRatio = zoomDim.width / prodDim.width;
		this.heightRatio = zoomDim.height / prodDim.height;
		this.zoomBoxOffsetY = boxDim.height / this.heightRatio * 0.5;
		this.zoomBoxOffsetX = boxDim.width / this.widthRatio * 0.5;
		this.wrapOffset = this.productImage.cumulativeOffset();
		this.rightConstraint = prodDim.width - magboxDim.width;
		this.bottomConstraint = prodDim.height - magboxDim.height;
		
		// Observe mousemove over our product image
		this.setup();
	},
	setup: function() {
		new HoverDelay(this.productImage,{
			delay   : 0.4,
			enterCb: this.show.bind(this),
			leaveCb: this.hide.bind(this)
		});
		
		this.productImage.observe('mousemove', this.onMouseOverProductImage.bind(this));
	},
	show: function(ev) {
		this.box.style.visibility = "visible";
		this.magnify_box.show();
	},
	hide: function(ev) {
		this.box.style.visibility = "hidden";
		this.magnify_box.hide();
	},
	magnify: function(pointer) {
		//Constrain the box
        var top = Math.min(
                    Math.max(pointer[1]-65, this.wrapOffset[1]), 
                    this.wrapOffset[1]+this.bottomConstraint);
		
        var left = Math.min(
                    Math.max(pointer[0]-60, this.wrapOffset[0]), 
                    this.wrapOffset[0]+this.rightConstraint);

		this.magnify_box.setStyle({'top':top+'px','left':left+'px'});
		return [left, top];
	},
	onMouseOverProductImage: function(ev) {
		var pointer = this.magnify([Event.pointerX(ev), Event.pointerY(ev)]);

		// Account for the position of the product image on the page, and the dimensions of the zoom view box
		xpos = pointer[0] - this.wrapOffset[0]; // - this.zoomBoxOffsetX;
		ypos = pointer[1] -  this.wrapOffset[1]; //  - this.zoomBoxOffsetY;
		
		// Move the zoom image into position within zoom view box according to the ratio of zoom to product image dimension
		leftOffset = -1 * this.widthRatio * xpos;
		topOffset = -1 * this.heightRatio * ypos;
		this.zoomImage.style.left = leftOffset + "px";
		this.zoomImage.style.top = topOffset + "px";
	}
});

document.observe('dom:loaded', function(){
    if($('tabs'))
        new Tabs($('tabs'), $$('.togglers li'), $$('.tab_content'), 0);


    if(window.location.href.indexOf("engraving") > 0){
        $$('.togglers li').each(function(n) {
            n.removeClassName('active');
            lastone=n;
        });
        lastone.addClassName('active');

        $$('.tab_content').each(function(n) {
            n.removeClassName('active');
            lastone=n;
        });
        lastone.addClassName('active');
    }


    if($('overlay_chimes'))
        new CenteredPop($('utility_hear'), $('overlay_chimes'), {
            modal: true
        });
		
    $$('.product_image_box').each(function(elem) {
        new Zoomify(elem);
    });
	
    /*
	$$('#module_process .step').each(function(el) {
		new ProcessAnimator(el);
	});*/
    if($('module_process_bell'))
        p = new PageSlide($('steps'), 10, {
            next:$('btn_next'),
            prev:$('btn_prev'),
            width:770
        });
		
    if($('module_process_quartz'))
        p = new PageSlide($('steps'), 7, {
            next:$('btn_next'),
            prev:$('btn_prev'),
            width:770
        });
});