/*
* Copyright (c) 2009 uggbootsaustraliamade.com.au
* MIT License [http://www.opensource.org/licenses/mit-license.php]
*/

var ImageZoom = {

    makeZoomable: function(param) {

        var BigImgSrc = param.bimg;
        this.orgImg = $(param.orgImg);
		

        if (this.moveDiv == null) {
            this.moveDiv = new Element('div', {
                'id': 'moveDiv',
                'class': 'moveDiv'
            });
            document.body.appendChild(this.moveDiv);
        }


        if (this.zoomBox == null) {
            this.zoomBox = new Element('div', {
                'id': 'zoomDiv',
                'class': 'zoomDiv'
            });

            document.body.appendChild(this.zoomBox);
        }

        if (this.hideDiv == null) {
            this.hideDiv = new Element('div', {
                'id': 'hideDiv',
                'class': 'hideDiv'
            });
            this.moveDiv.appendChild(this.hideDiv);
        }


        if (this.moveBox == null) {
            this.moveBox = new Element('div', {
                'id': 'moveBox',
                'class': 'moveBox'
            });
            this.moveDiv.appendChild(this.moveBox);
        }


        if (this.moveImg == null) {
            this.moveImg = new Element('img', {
                'id': 'moveImg',
                'class': 'moveImg'
            });
            this.moveBox.appendChild(this.moveImg);
        }
        this.moveImg.src = this.orgImg.src;

        var parent = this;

        if (this.zoomImg == null) 
		{
            this.zoomImg = new Element('img', { src: BigImgSrc,
                id: 'zoomImg',
                'class': 'zoomImg'
            }).observe('load', function() {
                parent.setupImageBorder();
            });

			
            this.zoomBox.appendChild(this.zoomImg);
        }
        else 
		{
			
            this.zoomImg.src = BigImgSrc;
			//this.zoomImg.load();
        }


        this._mouseover = this.mouseOverHandler.bind(this);
        this._mouseout = this.mouseOutHandler.bind(this);
        this._mousemove = this.mouseMoveHandler.bind(this);

        Event.observe(this.hideDiv, "mouseover", this._mouseover);
        Event.observe(this.moveBox, "mouseover", this._mouseover);
        Event.observe(this.moveBox, "mouseout", this._mouseout);
    },

    setupImageBorder: function() {

        //alert('this.zoomImg.src' + this.zoomImg.src);

        var dragWidth = this.orgImg.offsetWidth - this.moveBox.offsetWidth;
        var dragHeight = this.orgImg.offsetHeight - this.moveBox.offsetHeight;

        var zoomWidth = this.zoomImg.width - this.zoomBox.offsetWidth;
        var zoomHeight = this.zoomImg.height - this.zoomBox.offsetHeight;

        this.widthScale = Math.abs(zoomWidth / dragWidth);
        this.heightScale = Math.abs(zoomHeight / dragHeight);

        this.halfWidth = this.moveBox.offsetWidth / 2;
        this.halfHeight = this.moveBox.offsetHeight / 2;

        this.enableZoom = true;


        var ImagePos = Position.cumulativeOffset(this.orgImg);

        this.ImageBorder = { left: ImagePos[0], top: ImagePos[1], right: ImagePos[0] + this.orgImg.offsetWidth, btm: ImagePos[1] + this.orgImg.offsetHeight };
        this.hideDiv.style.width = this.orgImg.offsetWidth;
        this.hideDiv.style.height = this.orgImg.offsetHeight;

        this.moveDiv.style.width = this.orgImg.offsetWidth;
        this.moveDiv.style.height = this.orgImg.offsetHeight;

        this.dragBound = { left: 0, right: this.hideDiv.offsetWidth - 2 * this.halfWidth, top: 0, btm: this.hideDiv.offsetHeight - 2 * this.halfHeight };

        this.moveDiv.setStyle({ left: ImagePos[0], top: ImagePos[1], display: 'block' });

        this.moveImg.style.width = this.orgImg.offsetWidth;
        this.moveImg.style.height = this.orgImg.offsetHeight;
        this.moveImg.style.left = ImagePos[0];
        this.moveImg.style.top = ImagePos[1];

        var offsetValue = 65;

        var zoomBoxTop = ImagePos[1];
        this.zoomBox.setStyle({ left: ImagePos[0] + this.orgImg.offsetWidth + 3, top: zoomBoxTop+7 });

    },
    mouseOutHandler: function(e) {
        if (!this.enableZoom) {
            Event.stopObserving(this.hideDiv, 'mouseout', this._mouseout);
            return;
        }
        Event.stopObserving(document.body, "mousemove", this._mousemove);
        if (this.fadeEffect)
            this.fadeEffect.cancel();
        this.moveBox.style.visibility = "hidden";
        this.zoomBox.setStyle({ zIndex: "-10", opacity: 0, filter: 'alpha(opacity:0)', visibility: "hidden" });
        this.hideDiv.setStyle({ opacity: 0, filter: 'alpha(opacity:0)' });
    }, mouseOverHandler: function(e) {

        if (!this.enableZoom) {
            Event.observe(this.hideDiv, "mouseout", this._mouseout);
            return;
        }
        Event.observe(document.body, "mousemove", this._mousemove);
        this.moveBox.style.visibility = "visible";
        this.zoomBox.setStyle({ zIndex: "5000", opacity: 0, filter: "alpha(opacity:0)", visibility: "visible" });
        this.fadeEffect = new Effect.Opacity(this.zoomBox.id, { duration: 0.5, from: 0, to: 1 });
        this.hideDiv.setStyle({ opacity: .50, filter: "alpha(opacity:50)" });
    },
    mouseMoveHandler: function(e) {
        var x = Event.pointerX(e), y = Event.pointerY(e);
        x = x - this.halfWidth - this.ImageBorder.left;
        y = y - this.halfHeight - this.ImageBorder.top;
        var left = x > this.dragBound.right ? this.dragBound.right : x < this.dragBound.left ? 0 : x;
        var top = y > this.dragBound.btm ? this.dragBound.btm : y < this.dragBound.top ? 0 : y;
        this.moveBox.setStyle({ left: left + "px", top: top + "px" });
        this.moveImg.setStyle({ left: -left - 1 + "px", top: -top + "px" });
        this.zoomImg.setStyle({ left: -left * this.widthScale + "px", top: -top * this.heightScale + "px" });
        var pointerXCheck = Event.pointerX(e) - this.ImageBorder.left;
        var pointerYCheck = Event.pointerY(e) - this.ImageBorder.top;
        if (pointerXCheck > this.orgImg.offsetWidth || pointerXCheck < 0 || pointerYCheck > this.orgImg.offsetHeight || pointerYCheck < 0) {
            this.mouseOutHandler(e);
        }

    }
}

    
function makeZoomable(img) {
 var zoomSrc = img.getAttribute("zoomsrc");
 if (zoomSrc) {
     ImageZoom.makeZoomable({ orgImg: img.id, bimg: zoomSrc });
    }
}


window.onload = function() {
	
    makeZoomable(document.forms[0].productImage);
}