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, hintEl){
 this.containerEl = $(imageEl).parentNode;
 this.imageEl = $(imageEl);
 this.handleEl = $(handleEl);
 this.trackEl = $(trackEl);
 this.hintEl = $(hintEl);

 this.containerDim = Element.getDimensions(this.containerEl);
 this.imageDim = Element.getDimensions(this.imageEl);

 this.imageDim.ratio = this.imageDim.width/this.imageDim.height;

 this.floorZoom = 1;

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


 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));

},

 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 ? '1000' : '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));

 this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
 if(this.containerDim.ratio){
 this.imageEl.style.height = (this.imageZoom*this.containerDim.width*this.containerDim.ratio)+'px'; // for safari
 }

 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;
 },

 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;
 },

 contain: function (x,y,draggable) {

 var dim = Element.getDimensions(draggable.element);

 var xMin = 0, xMax = this.containerDim.width-dim.width;
 var yMin = 0, yMax = this.containerDim.height-dim.height;

 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];
 }
}