var aktiveExplosionsgrafik = 1;

function ladeExplosionsgrafik(imgSrc, nr) {
	// hide current navi button
	$('subnaviLink' + aktiveExplosionsgrafik).removeClassName('subnaviOn');
	// set active button
	$('subnaviLink' + nr).addClassName('subnaviOn');
	aktiveExplosionsgrafik = nr;
	// hide image, reset zoom an load new image
	Effect.Fade('imageE', {
		afterFinish: (function() {
 
			// show loading progress
			$('imageEContainer').setStyle({background: '#fff url(images/loader_image_zoomer.gif) no-repeat 212px 116px'});

			// load image
			var newImage = null;
			newImage = new Image();
			newImage.onload = function() {
				//alert("geladen " + this.src + " / alt = " + $('imageE').src);   
				// hide loading progress
				$('imageEContainer').setStyle({'background-image': 'none'});
				// set new image
				$('imageE').src = imgSrc;
				// reset zoom
				explosionsgrafik_zoom.resetZoom();				
				// show image
				Effect.Appear('imageE');
			};
			newImage.src = imgSrc;
			//$('imageE').src = newImage.src;
			//Effect.Appear('imageE');
			// hide loading progress
			//$('imageEContainer').setStyle({'background-image': 'none'});
			// reset zoom
			// explosionsgrafik_zoom.resetZoom();
		})
    });
}


var aktiveArtikelgrafik = 1;

function ladeArtikelgrafik(imgSrc, nr) {
	// hide current navi button
	$('subnaviLink' + aktiveArtikelgrafik).removeClassName('subnaviOn');
	// set active button
	$('subnaviLink' + nr).addClassName('subnaviOn');
	aktiveArtikelgrafik = nr;
	// hide image, reset zoom an load new image
	Effect.Fade('image', {
		afterFinish: (function() {
 
			// show loading progress
			$('imageContainer').setStyle({background: '#fff url(images/loader_image_zoomer.gif) no-repeat 212px 116px'});

			// load image
			var newImage = null;
			newImage = new Image();
			newImage.onload = function() {
				//alert("geladen " + this.src + " / alt = " + $('image').src);   
				// hide loading progress
				$('imageContainer').setStyle({'background-image': 'none'});
				// set new image
				$('image').src = imgSrc;
				// reset zoom
				explosionsgrafik_zoom.resetZoom();				
				// show image
				Effect.Appear('image');
			};
			newImage.src = imgSrc;
			//$('image').src = newImage.src;
			//Effect.Appear('image');
			// hide loading progress
			//$('imageContainer').setStyle({'background-image': 'none'});
			// reset zoom
			// explosionsgrafik_zoom.resetZoom();
		})
    });
}


function showZoom(objectID) {
	$(objectID).setStyle({'display': 'none'});
	$(objectID).setStyle({'visibility': 'visible'});
	$(objectID).show();
}

function hideZoom(objectID) {
	$(objectID).hide();
}


/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-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.
 *
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
if(typeof Product=='undefined') {
    var Product = {};
}

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

Product.Zoom = Class.create();
/**
 * Image zoom control
 *
 * @author      Magento Core Team <core@magentocommerce.com>
 */
Product.Zoom.prototype = {
    initialize: function(imageEl, trackEl, handleEl, zoomInEl, zoomOutEl){
        this.containerEl = $(imageEl).parentNode;
        this.imageEl = $(imageEl);
        this.handleEl = $(handleEl);
        this.trackEl = $(trackEl);
		// abstand des bildes zum rand des zoom-fensters
		this.containerPadding = 15;
        // this.hintEl = $(hintEl);

        this.containerDim = Element.getDimensions(this.containerEl);
		this.containerDim.ratio = this.containerDim.width/this.containerDim.height;
        this.imageDim = Element.getDimensions(this.imageEl);
		this.imageDim.ratio = this.imageDim.width/this.imageDim.height;

        this.floorZoom = 1;

		// set maximum zoom factor
        if (this.imageDim.width > this.imageDim.height) {
            this.ceilingZoom = this.imageDim.width / this.containerDim.width;
        } else {
            this.ceilingZoom = this.imageDim.height / this.containerDim.height;
        }

		// image smaller than the view port > hide zoom buttons
        if (this.imageDim.width < this.containerDim.width && this.imageDim.height < this.containerDim.height) {
            this.trackEl.up().hide();
            // this.hintEl.hide();
            this.containerEl.removeClassName('main-product-img');
            return;
        }

        this.imageX = 0;
        this.imageY = 0;
        this.imageZoom = 1;

        this.sliderSpeed = 0;
        this.sliderAccel = 0;
        this.zoomBtnPressed = false;

        // this.showFull = false;
        // this.selects = document.getElementsByTagName('select');

        this.draggable = new Draggable(imageEl, {
            starteffect:false,
            reverteffect:false,
            endeffect:false,
            snap:this.contain.bind(this)
        });

        this.slider = new Control.Slider(handleEl, trackEl, {
            axis:'horizontal',
            minimum:0,
            maximum:Element.getDimensions(this.trackEl).width,
            alignX:0,
            increment:1,
            sliderValue:0,
            onSlide:this.scale.bind(this),
            onChange:this.scale.bind(this)
        });

        this.scale(0);

        //Event.observe(this.imageEl, 'dblclick', this.toggleFull.bind(this));
		// modifiziert von I. Lozina 11.09.2008
        Event.observe(this.imageEl, 'dblclick', this.resetZoom.bind(this));

        Event.observe($(zoomInEl), 'mousedown', this.startZoomIn.bind(this));
        Event.observe($(zoomInEl), 'mouseup', this.stopZooming.bind(this));
        Event.observe($(zoomInEl), 'mouseout', this.stopZooming.bind(this));

        Event.observe($(zoomOutEl), 'mousedown', this.startZoomOut.bind(this));
        Event.observe($(zoomOutEl), 'mouseup', this.stopZooming.bind(this));
        Event.observe($(zoomOutEl), 'mouseout', this.stopZooming.bind(this));
    },

	// modifiziert von I. Lozina 11.09.2008
    resetZoom: function () {
        this.scale(0);
        this.slider.setValue(0);
        return this;
    },

	/*
    toggleFull: function () {
        this.showFull = !this.showFull;
        //TODO: hide selects for IE only

        for (i=0; i<this.selects.length; i++) {
            this.selects[i].style.visibility = this.showFull ? 'hidden' : 'visible';
        }
        val_scale = !this.showFull ? this.slider.value : 1;
        this.scale(val_scale);

        this.trackEl.style.visibility = this.showFull ? 'hidden' : 'visible';
        this.containerEl.style.overflow = this.showFull ? 'visible' : 'hidden';
        this.containerEl.style.zIndex = this.showFull ? '999' : '9';

        return this;
    },
	*/

    scale: function (v) {

        var centerX = (this.containerDim.width*(1-this.imageZoom)/2-this.imageX)/this.imageZoom;
        var centerY = (this.containerDim.height*(1-this.imageZoom)/2-this.imageY)/this.imageZoom;

        this.imageZoom = this.floorZoom+(v*(this.ceilingZoom-this.floorZoom));

		/* ORIGINAL-VERSION
		if (this.imageDim.width > this.imageDim.height) {
			this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
		} else {
			this.imageEl.style.height = (this.imageZoom*this.containerDim.height)+'px';
		};
		*/

		
		// modifiziert von I. Lozina 11.09.2008
		/* 
			- setze die bildgroesse in abhaengigkeit von dem proportionenverhaeltnis der objekthoehe und -breite
			- integriere "containerPadding" in die berechnung der bildgroesse
		*/
		if (this.imageDim.ratio < this.containerDim.ratio) {
			this.imageEl.style.height = (this.imageZoom*this.containerDim.height-this.containerPadding)+'px';
			// set also width for safari 2 mac
			this.imageEl.style.width = ((this.imageZoom*this.containerDim.height-this.containerPadding)*this.imageDim.ratio)+'px';
		} else {
			this.imageEl.style.width = (this.imageZoom*this.containerDim.width-this.containerPadding)+'px';
			// set also height for safari 2 mac
			this.imageEl.style.height = ((this.imageZoom*this.containerDim.width-this.containerPadding)/this.imageDim.ratio)+'px';
			//alert("Ratio = " + this.imageDim.ratio + " / WIDTH = " + this.imageEl.style.width + " / HEIGHT " + ((this.imageZoom*this.containerDim.width-this.containerPadding)*this.imageDim.ratio)+'px');
		};
		// ende

        this.imageX = this.containerDim.width*(1-this.imageZoom)/2-centerX*this.imageZoom;
        this.imageY = this.containerDim.height*(1-this.imageZoom)/2-centerY*this.imageZoom;

        this.contain(this.imageX, this.imageY, this.draggable);

        return true;
    },

    contain: function (x,y,draggable) {

        var dim = Element.getDimensions(draggable.element);
		
		var xMin = 0 + this.containerPadding, xMax = this.containerDim.width-dim.width;
		var yMin = 0 + this.containerPadding, yMax = this.containerDim.height-dim.height;

		// modifiziert von I. Lozina 16.08.2008
		// > zentriere das bild, dass sich innerhalb des zoom-fensters befindet
		if (xMax > 0) {
			xMax = xMax / 2;
		} else {
			// > padding  zum linken und rechten rand hinzufuegen
			xMin = xMin + this.containerPadding;
			xMax = xMax - this.containerPadding;
		};

		if (yMax > 0) { 
			yMax = yMax / 2;
		} else {
			// > padding zum oberen und unteren rand hinzufuegen
			yMin = yMin + this.containerPadding;	
			yMax = yMax - this.containerPadding;	
		}
		// ende

        x = x>xMin ? xMin : x;
        x = x<xMax ? xMax : x;
        y = y>yMin ? yMin : y;
        y = y<yMax ? yMax : y;

        this.imageX = x;
        this.imageY = y;

        this.imageEl.style.left = this.imageX+'px';
        this.imageEl.style.top = this.imageY+'px';

        return [x,y];
    },

    startZoomIn: function()
    {
        this.zoomBtnPressed = true;
        this.sliderAccel = .002;
        this.periodicalZoom();
        this.zoomer = new PeriodicalExecuter(this.periodicalZoom.bind(this), .05);
        return this;
    },

    startZoomOut: function()
    {
        this.zoomBtnPressed = true;
        this.sliderAccel = -.002;
        this.periodicalZoom();
        this.zoomer = new PeriodicalExecuter(this.periodicalZoom.bind(this), .05);
        return this;
    },

    stopZooming: function()
    {
        if (!this.zoomer || this.sliderSpeed==0) {
            return;
        }
        this.zoomBtnPressed = false;
        this.sliderAccel = 0;
    },

    periodicalZoom: function()
    {
        if (!this.zoomer) {
            return this;
        }

        if (this.zoomBtnPressed) {
            this.sliderSpeed += this.sliderAccel;
        } else {
            this.sliderSpeed /= 1.5;
            if (Math.abs(this.sliderSpeed)<.001) {
                this.sliderSpeed = 0;
                this.zoomer.stop();
                this.zoomer = null;
            }
        }
        this.slider.value += this.sliderSpeed;

        this.slider.setValue(this.slider.value);
        this.scale(this.slider.value);

        return this;
    }

}