//- ProductZoom -//
var ProductZoom = Class.create({
    initialize: function(init) {
        if (init) {
            if (init.imageId) {
                this.imageId = init.imageId;
                this.src = $(this.imageId).src;
                this.alt = $(this.imageId).alt;
            }
            else {
                throw 'imageId information is required.';
            }
            if (init.zoomBoxDimensions) {
                if (init.zoomBoxDimensions.width) {
                    this.zoomBoxWidth = init.zoomBoxDimensions.width;
                }
                if (init.zoomBoxDimensions.height) {
                    this.zoomBoxHeight = init.zoomBoxDimensions.height;
                }
            }
            if (init.noPreviewAvailable) {
                this.noPreviewImageuri = init.noPreviewAvailable;
            }
            else {
                throw 'zoomBoxDimensions information is required.';
            }
            this.distortion = 0;
            if (init.distortion) {
                this.distortion = init.distortion;
            }
        }
        else {
            throw 'Init information is required.';
        }
        var container = $(this.imageId).up().setStyle({ position: 'relative', zoom: 1 }); // zoom fixes ie6
        //+
        this._updateFullImageDimensions();
        this._updatePreviewImageDimensions();
        //+
        this.ratio = this.previewWidth / this.fullWidth;
        //+
        var offset = this._getCumulativeOffset();
        //+
        var imgPos = $(this.imageId).positionedOffset();
        this.overlayBox = new Element('div', { id: this.imageId + 'OverlayBox' }).addClassName('overlayBox').setStyle({
            left: imgPos[0] + 'px', //offset.left + 'px',
            top: imgPos[1] + 'px' //offset.top + 'px'
        })
            .insert(this.fog = new Element('div', { id: this.imageId + 'Fog' }).addClassName('fog').setStyle({
                'opacity': 0
            }))
            .insert(this.handleBox = new Element('div', { id: this.imageId + 'HandleBox' }).addClassName('handleBox').setStyle({
                width: (this.zoomBoxWidth * this.ratio) + 'px',
                height: (this.zoomBoxHeight * this.ratio) + 'px'
            })
                .insert(this.handleImage = new Element('img', {
                    id: this.imageId + 'HandleImg',
                    src: this.src,
                    alt: this.alt
                }).addClassName('handleImg')
                )
            ).observe('mousemove', this._handleBoxMove.bind(this));
        //+
        this.zoomBox = new Element('div', { id: this.imageId + 'ZoomBox' }).addClassName('zoomBox').setStyle({
            width: this.zoomBoxWidth + 'px',
            height: this.zoomBoxHeight + 'px',
            zIndex: -10,
            visibility: 'hidden'
        })
            .insert(this.zoomImg = new Element('img', {
                id: this.imageId + 'ZoomImg',
                src: this.src,
                alt: 'view image'
            }).addClassName('zoomImg')
            );
        //+
        this._updateElementDimensions();
        this._updateZoomBoxPosition();
        //+
        this.overlayBox.observe('mouseover', this._overlayBoxEnter.bind(this)).observe('mouseout', this._overlayBoxLeave.bind(this))
        //+
        var body = document.getElementsByTagName('body')[0];
        body = $(this.imageId).up().setStyle({ position: 'relative' });

        container.appendChild(this.overlayBox);
        container.appendChild(this.zoomBox);
        //+
    },

    _handleBoxMove: function(evt) {
        var offset = this.overlayBox.cumulativeOffset();
        var left = offset.left;
        var top = offset.top;
        //+
        var x = Event.pointerX(evt) - left;
        var y = Event.pointerY(evt) - top;
        //+ check bounds
        var handleBoxDimensions = this.handleBox.getDimensions();
        var leftHandleBoxSide = (x - handleBoxDimensions.width / 2);
        var topHandleBoxSide = (y - handleBoxDimensions.height / 2);
        var rightHandleBoxSide = (x + handleBoxDimensions.width / 2);
        var bottomHandleBoxSide = (y + handleBoxDimensions.height / 2);
        if (leftHandleBoxSide < 0) {
            x = handleBoxDimensions.width / 2;
        }
        if (topHandleBoxSide < 0) {
            y = handleBoxDimensions.height / 2;
        }
        if (rightHandleBoxSide > this.previewWidth) {
            x = this.previewWidth - (handleBoxDimensions.width / 2);
        }
        if (bottomHandleBoxSide > this.previewHeight) {
            y = this.previewHeight - (handleBoxDimensions.height / 2);
        }
        //+ move handleBox
        this.handleBox.setStyle({
            left: (x - handleBoxDimensions.width / 2) + 'px',
            top: (y - handleBoxDimensions.height / 2) + 'px'
        });
        //+ move handleImage (reverse)
        this.handleImage.setStyle({
            left: (-1 * (x - handleBoxDimensions.width / 2)) - 1 + 'px',
            top: (-1 * (y - handleBoxDimensions.height / 2)) - 1 - this.distortion + 'px'
        });
        //+ move zoomImg (reverse)
        this.zoomImg.setStyle({
            left: (-1 * (x - handleBoxDimensions.width / 2) / this.ratio) - 3 + 'px',
            top: (-1 * (y - handleBoxDimensions.height / 2) / this.ratio) - 3 + 'px'
        });
    },

    _overlayBoxEnter: function(evt) {
        if (this.src.indexOf(this.noPreviewImageuri) > -1) return;
        this.overlayBox.setStyle({ visibility: 'visible' });
        this.handleBox.setStyle({ visibility: 'visible' });
        this.zoomBox.setStyle({
            visibility: 'visible',
            zIndex: 10
        });
        this.fog.setStyle({ 'opacity': 0 });
    },

    _overlayBoxLeave: function(evt) {
        this.handleBox.setStyle({ visibility: 'hidden' });
        this.zoomBox.setStyle({
            visibility: 'hidden',
            zIndex: -10
        });
        this.fog.setStyle({ 'opacity': 0 });
    },

    _updateFullImageDimensions: function() {
        var newImg = new Element('img', { src: this.src });
        this.fullWidth = newImg.width;
        this.fullHeight = newImg.height;
    },

    _updatePreviewImageDimensions: function() {
        this.previewDimensions = $(this.imageId).getDimensions();
        this.previewHeight = this.previewDimensions.height;
        this.previewWidth = this.previewDimensions.width;
    },

    _getCumulativeOffset: function() {
        return $(this.imageId).cumulativeOffset();
    },

    _updateZoomBoxPosition: function() {
        var offset = this._getCumulativeOffset();
        this.zoomBox.setStyle({
            //left: (offset.left + this.previewWidth) + 'px',
            //top: (offset.top + this.previewHeight - 266) + 'px'
            top: 0,
            right: (0 - this.previewWidth - 50) + 'px'
        });
    },

    _updateElementDimensions: function() {
        this.overlayBox.setStyle({
            width: this.previewWidth + 'px',
            height: this.previewHeight + 'px'
        });
        //+
        this.fog.setStyle({
            width: this.previewWidth + 'px',
            height: this.previewHeight + 'px'
        });
        //+
        this.handleImage.setAttribute('width', this.previewWidth);
        this.handleImage.setAttribute('height', this.previewHeight);
        //+
        this.zoomImg.setAttribute('width', this.fullWidth);
        this.zoomImg.setAttribute('height', this.fullHeight);
    },

    _updateImageSource: function() {
        this.zoomImg.src = this.src;
        this.handleImage.src = this.src;
        //+
        this._updateFullImageDimensions();
        this._updatePreviewImageDimensions();
        //+
        this._updateElementDimensions();
        //+
        this._updateZoomBoxPosition();
    },

    updateImageSource: function(src) {
        this.src = src;
        $(this.imageId).src = this.src;
        this._updateImageSource();
        $(this.imageId).observe('load', this._updateImageSource.bind(this));
    }
});
function _getCumulativeOffsetIE6() {
    var offset = $(this.imageId).cumulativeOffset();
    //offset.top = offset.top - 130; 
    return offset;
}