/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    Varien
 * @package     js
 * @copyright   Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
if(typeof Product=='undefined') {
    var Product = {};
}

/*
Copyright (c) <year> <copyright holders>

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

 */
/********************* IMAGE ZOOMER ***********************/

Product.Zoom = Class.create();
/**
 * Image zoom control
 *
 * @author      Magento Core Team <core@magentocommerce.com>
 */
Product.Zoom.prototype = {
    initialize: function(element, trackEl, handleEl, zoomInEl, zoomOutEl, hintEl){
        
		$$('.zoom').first().hide();
		
		this.image    = $(element);
        this.element    = $$('.product-image-zoom').first();

		this.source     = {
            large: this.image.src
        }
		
		this.selected = 'small';

        this.options = Object.extend({
            trigger:        null,
            afterZoomIn:    null,
            afterZoomOut:   null
        }, {});

        this.position = this.element.cumulativeOffset();

		this.dimensions = {
            small: {
                width: this.element.getWidth(),
                height: this.element.getHeight()
            },
            big: {
                width: this.image.getWidth(),
                height: this.image.getHeight()
            }
        }
		this.coefficient = this.dimensions.big.width/this.dimensions.small.width;
		this.image.setStyle({width: this.dimensions.small.width + 'px', height: this.dimensions.big.height/this.coefficient + 'px'});
		
//		$$('.product-img-box').first().setStyle({height: this.dimensions.big.height, width: this.dimensions.big.width});
        
		this.scaleReportX = 1;
		this.scaleReportY = 1;


		// Large image preloading
        this.preload        = new Image();
        this.preload.src    = this.source.large;
        this.preload.onload = this.loaded.bind(this);

		this.loadingGif = new Image();
		this.loadingGif.id = 'loading';
		this.loadingGif.src = $('media_path').getValue() + '/loading.gif';
		this.loadingGif.setStyle({
			left: ((this.element.getWidth()/2) - 18) + 'px',
			top: ((this.element.getHeight()/2) - 18) + 'px'
		})

		this.loadingGif.hide();
		this.element.appendChild(this.loadingGif);

        // Wrappers

		this.scroller = (new Element('div')).setStyle({
            overflow: 'hidden',
            width: this.dimensions.small.width + 20 + 'px',
            height: this.dimensions.small.height + 20 + 'px'
        });

        this.element.wrap(this.scroller);

        this.wrapper = (new Element('div').setStyle({
            overflow: 'hidden',
            width: this.dimensions.small.width + 'px',
            height: this.dimensions.small.height + 'px'
        }));

        this.scroller.wrap(this.wrapper);


        // Zoom onclick on additional trigger
        if (this.options.trigger) {
            $(this.options.trigger).observe('click', this.click.bindAsEventListener(this));
        }
        
//        this.element.observe('click',       this.click.bindAsEventListener(this));
        document.observe('mousemove',   this.move.bindAsEventListener(this));
    },


    click: function (event) {
    },


    move: function (event) {
		if((event.pointerX() > this.position.left) && (event.pointerX() < this.position.left + this.dimensions.small.width) && (event.pointerY() > this.position.top) && (event.pointerY() < this.position.top + this.dimensions.small.height)) {
			if(this.selected == 'small') {

				if (this.element.loaded) {
					this.image.setStyle({width: this.dimensions.big.width + 'px', height: this.dimensions.big.height + 'px'});
					this.element.setStyle({height: this.dimensions.big.height + 20 + 'px', width: this.dimensions.big.width + 20 + 'px', overflow: 'hidden'});
					this.element.show();
					if (this.options.afterZoomIn) {
						this.options.afterZoomIn();
					}
					this.selected = 'big';
				} else {                    
					this.element.hide();
					// Periodically check if target image has loaded
					this.click.bind(this).delay(0.5, event);
				}
			}
			var x = event.pointerX() - this.position.left;
			var y = event.pointerY() - this.position.top;
			this.scroller.scrollLeft = x * this.scaleReportX - x;
			this.scroller.scrollTop  = y * this.scaleReportY - y;
		} else {
			if(this.selected == 'big') {
				this.image.setStyle({width: this.dimensions.small.width + 'px',  height: this.dimensions.big.height/this.coefficient + 'px'});
				this.element.setStyle({height: this.dimensions.small.height + 'px', width: this.dimensions.small.width + 'px', overflow: 'hidden'});
				if (this.options.afterZoomOut) {
					this.options.afterZoomOut();
				}
				this.selected = 'small';
				this.scroller.scrollLeft = 0;
				this.scroller.scrollTop  = 0;
			}
		}
    },


    loaded: function () {
        this.element.loaded = true;
        this.scaleReportX = this.dimensions.big.width / this.dimensions.small.width;
        this.scaleReportY = this.dimensions.big.height / this.dimensions.small.height;
    }
}

function popWin(url,win,para) {
	var splittedArray = url.split('/');
	var imgId = splittedArray[splittedArray.length-2];
	var preload    = new Image();
	preload.src    = $('image' + imgId).getValue();
	preload.onload = loaded;
	$('image').src = $('image' + imgId).getValue();
	$('loading').show();
}

function loaded() {
	$('loading').hide();
}