// Zoomy 1.0 -- simple image zoom + drag widget, uses prototype (sort of)
// (c) 2006 kernel9, by Arthur Langereis (arthur .at. kernel9 @dot@ com)

function Zoomy(img, imgBox, slider, sliderBox, highresImageSrc, fullW, fullH) {
	this.DRAG_NONE = 0;
	this.DRAG_VIEW = 1;
	this.DRAG_SLIDER = 2;

	this.SetZoom = function(zoom) {
		var zoomW, zoomH;
		
		if(this._img.width>=(this._imgInitialWidth+50) && !this._setToHighRes) {
			if (!this._highResIsPreloaded) {
				if (!this._highResIsObserving)
					Event.observe(this._highresImage, "load", function(){this.makeHighRes();}.bind(this));
				this._highResIsObserving = true;
			}
			else
				this.makeHighRes();
		}
		else if(this._img.width<=(this._imgInitialWidth+50) && this._setToHighRes) {
			this.makeLowRes();
		}
		
		
		if(this._ratioW >= this._ratioH) {
			zoomH = this._clipH + ((this._fullH - this._clipH) * zoom);
			zoomW = zoomH * this._mult;
		} else {
			zoomW = this._clipW + ((this._fullW - this._clipW) * zoom);
			zoomH = zoomW * this._mult;
		}

		this._zoom = zoom;
		var oldW = this._curW || this._img.width, oldH = this._curH || this._img.height;

		this._img.width = this._curW = Math.round(zoomW);
		this._img.height = this._curH = Math.round(zoomH);
		
		this.MoveBy(-((this._curW - oldW) / 2), -((this._curH - oldH) / 2));

		this._slider.style.left = Math.round(this._sliderW * this._zoom) + "px";
	};

	this.MoveBy = function(dX, dY) {
		this._offX = Math.max(Math.min(0.0, this._offX + dX), -(this._curW - this._clipW));
		this._offY = Math.max(Math.min(0.0, this._offY + dY), -(this._curH - this._clipH));
		this._img.style.left = Math.floor(this._offX) + "px";
		this._img.style.top = Math.floor(this._offY) + "px";
	};

	this.StartDrag = function(e) {
		this._dragMode = (Event.element(e) == this._img) ? this.DRAG_VIEW : this.DRAG_SLIDER;
		this._dragX = Event.pointerX(e);
		this._dragY = Event.pointerY(e);
		Event.stop(e);
	};
	this.EndDrag = function() { this._dragMode = this.DRAG_NONE; };
	this.Drag = function(e) {
		if(!Event.isLeftClick(e)) this._dragMode = this.DRAG_NONE;
		if(this._dragMode == this.DRAG_NONE) return;

		var mX = Event.pointerX(e), mY = Event.pointerY(e);
		var dX = mX - this._dragX, dY = mY - this._dragY;
		this._dragX = mX; this._dragY = mY;

		if(this._dragMode == this.DRAG_VIEW)
			this.MoveBy(dX, dY);
		else
			this.SetZoom(Math.max(0.0, Math.min(1.0, this._zoom + (dX / this._sliderW))));
	};
	this.JumpZoom = function(e) {
		if(this._dragMode != this.DRAG_NONE) return;
		
		function GetAbsoluteLeft(elem) {
			var left = 0;
			while(elem.offsetParent) { left += elem.offsetLeft; elem = elem.offsetParent; }
			return left;
		}

		var mX = this._dragX = Event.pointerX(e), mY = this._dragY = Event.pointerY(e);
		this.SetZoom(Math.max(0.0, Math.min(1.0, (mX - (this._slider.offsetWidth / 2) - GetAbsoluteLeft(this._sliderBox)) / this._sliderW)));
		this._dragMode = this.DRAG_SLIDER;
	};
	this.ButtonZoomStart = function(e) {
		var mode = Event.element(e).id;
		var self = this;
		this._ButtonZoomInterval = setInterval(function(){
			if (self._zoom>=1 && mode=='zoomin') return; 
			if (self._zoom>=1 && mode=='zoomin2') return; 
			if (self._zoom<=0 && mode=='zoomout') return;
			var d = (mode=='zoomin' || mode=='zoomin2')? 0.03:-0.03;
			self._zoom+=d;
			if (self._zoom>1 && (mode=='zoomin' || mode=='zoomin2')) self._zoom=1; if (self._zoom<0 && mode=='zoomout') self._zoom=0;
			self.SetZoom(self._zoom);
		}, 30);
		Event.stop(e);
	};
	this.ButtonZoomEnd = function () {
		clearInterval(this._ButtonZoomInterval);
	};
	this.preloadHighResSource = function () {	// only to speed things up.
		this._highresImage = document.createElement('img');
		this._highresImage.src = this._highresImageSrc;

		Event.observe(this._highresImage, "load", function(){this._highResIsPreloaded=true;}.bind(this));
		
		Event.stopObserving(this._slider, "mouseover", this.preloadHighResSource);
		Event.stopObserving(this._sliderBox, "mouseover", this.preloadHighResSource);
		Event.stopObserving(this._zoominButton, "mouseover", this.preloadHighResSource);
		Event.stopObserving(this._zoomin2Button, "mouseover", this.preloadHighResSource);
		Event.stopObserving(this._zoomoutButton, "mouseover", this.preloadHighResSource);
	};
	this.makeHighRes = function () {
		this._img.src = this._highresImageSrc;
		this._setToHighRes = true;
	};
	this.makeLowRes = function () {
		this._img.src = this._imgSrc;
		this._setToHighRes = false;
	}
	this.setSources = function (lowres, highres) {
		this._imgSrc = lowres;
		this._highresImageSrc = highres;
		if (this._setToHighRes) 
			this._img.src = this._highresImageSrc;
		else
			this._img.src = this._imgSrc;			
	};
	this.getSources = function () {
		return {lowsrc:this._imgSrc, highsrc:this._highresImageSrc};
	}
	
	function ElOrID(eoi) { return (typeof(eoi)=="string") ? $(eoi) : eoi; }
	this._img = ElOrID(img); this._imgBox = ElOrID(imgBox);
	this._imgSrc = this._img.src;
	this._imgInitialWidth = this._img.width;
	this._slider = ElOrID(slider); this._sliderBox = ElOrID(sliderBox);

	this._zoominButton = $('zoomin');
	this._zoomin2Button = $('zoomin2');
 this._zoomoutButton = $('zoomout');
	
	this._imgBox.className += " activated";
	this._sliderBox.className += " activated";

	this._setToHighRes = false;
	this._highresImageSrc = highresImageSrc;
	this._highResIsObserving = false;
	this._highResIsPreloaded = false;
	this._fullW = fullW; this._fullH = fullH;

	this._clipW = this._imgBox.offsetWidth; this._clipH = this._imgBox.offsetHeight;
	this._ratioW = this._fullW / this._clipW; this._ratioH = this._fullH / this._clipH;
	if(this._ratioW >= this._ratioH) this._mult = this._fullW / this._fullH; else this._mult = this._fullH / this._fullW;
	
	this._sliderW = this._sliderBox.offsetWidth - this._slider.offsetWidth;

	this._dragMode = this.DRAG_NONE; this._offX = 0; this._offY = 0;
	Event.observe(this._img, "mousedown", this.StartDrag.bind(this));
	Event.observe(this._slider, "mousedown", this.StartDrag.bind(this));
	Event.observe(this._sliderBox, "mousedown", this.JumpZoom.bind(this));
	
	Event.observe(this._zoominButton, "mousedown", this.ButtonZoomStart.bind(this));
	Event.observe(this._zoomin2Button, "mousedown", this.ButtonZoomStart.bind(this));
	Event.observe(this._zoomoutButton, "mousedown", this.ButtonZoomStart.bind(this));	
	Event.observe(this._zoominButton, "mouseup", this.ButtonZoomEnd.bind(this));
	Event.observe(this._zoomin2Button, "mouseup", this.ButtonZoomEnd.bind(this));
	Event.observe(this._zoomoutButton, "mouseup", this.ButtonZoomEnd.bind(this));	
	
	this.preloadHighResSource = this.preloadHighResSource.bind(this);	// must name because of later removal
	Event.observe(this._slider, "mouseover", this.preloadHighResSource);
	Event.observe(this._sliderBox, "mouseover", this.preloadHighResSource);
	Event.observe(this._zoominButton, "mouseover", this.preloadHighResSource);
	Event.observe(this._zoomin2Button, "mouseover", this.preloadHighResSource);
	Event.observe(this._zoomoutButton, "mouseover", this.preloadHighResSource);
		
	var isPOS = (navigator.appVersion.match(/\bMSIE\b/));

	Event.observe(isPOS ? document.body : window, "mousemove", this.Drag.bind(this));
	Event.observe(isPOS ? document.body : window, "mouseup", this.EndDrag.bind(this));
	if(isPOS) Event.observe(document.body, "dragstart", function(e){ Event.stop(e); e.returnValue = false; return false; });
	if(isPOS) Event.observe(document.body, "selectstart", function(e){return false; });

	this.SetZoom(0.0);
}
Zoomy.Install = function(img, imgBox, slider, sliderBox, highresImage, fullW, fullH){ return new Zoomy(img, imgBox, slider, sliderBox, highresImage, fullW, fullH); }









var optionalMoreImages = Class.create();

optionalMoreImages.prototype = {


	initialize: function() {
		this.optionalImageCount = new Array();
	},
	
	setCount: function (color, count) {
		this.optionalImageCount['_'+color] = {count:count, currIndex:0};
	},
	
	setColor: function (color) {
		this.color = color;
	},
	
	setProducId: function (id) {
		this.productId = id;
	},
	
	createButton: function() {
		this.button = $('nextImage');
		this.button.onclick = function(){this.nextImage();}.bind(this);
	},
	
	refreshState: function () {
		// show/hide button
		if (this.optionalImageCount['_'+this.color].count == 0) {this.button.style.display = 'none'; return;}
		this.button.style.display = 'block';
		
		// record default image src current color
		if (!this.optionalImageCount['_'+this.color].defaultImage) {
			this.optionalImageCount['_'+this.color].defaultImageLow = window.zmy.getSources().lowsrc;
			this.optionalImageCount['_'+this.color].defaultImageHigh = window.zmy.getSources().highsrc;
		}
		
		// reset index
		this.optionalImageCount['_'+this.color].currIndex = 0;

	},
	
	nextImage: function () {
		if (this.optionalImageCount['_'+this.color].currIndex == this.optionalImageCount['_'+this.color].count) {
			var lowSrc = this.optionalImageCount['_'+this.color].defaultImageLow;
			var highSrc = this.optionalImageCount['_'+this.color].defaultImageHigh;
		} else {
			var lowSrc = '/productImage/optionalProductMedium?productId='+this.productId+'&colorFeatureId='+this.color+'&index='+this.optionalImageCount['_'+this.color].currIndex;
			var highSrc = '/productImage/optionalProductLarge?productId='+this.productId+'&colorFeatureId='+this.color+'&index='+this.optionalImageCount['_'+this.color].currIndex;
		}
		window.zmy.setSources(lowSrc,highSrc);
		this.optionalImageCount['_'+this.color].currIndex++;
		if (this.optionalImageCount['_'+this.color].currIndex > this.optionalImageCount['_'+this.color].count)
			this.optionalImageCount['_'+this.color].currIndex = 0;
	}
		
}


















var Ticker = Class.create({
    initialize: function(tempHolder, tempTarget, tempSource, tempClass) {

    	this.interval = 0;	
        this.target = $(tempTarget);
		this.source = $(tempSource);
		this.className = tempClass;
    	this.titles = $$('.'+this.className+' li');
        this.options = Object.extend({
			updateRate: 6
		});
		
		width = 0;
		this.titles.each(function(el){
			width+= el.getWidth();
		});
		
    	if(width > $(tempHolder).getWidth()){
			this.start();
    	}
    },
    start: function() {
    	this.effect();
		this.interval = new PeriodicalExecuter(function() {
	    	this.effect();
		}.bind(this), this.options.updateRate);
    },
    effect: function() {
    	
    	var options = Object.extend({
    		style: 'left: -' + this.titles[0].getWidth() + 'px',
    		duration: 2,
    		afterFinish: function(){
    			var li = new Element("li");
    			li.innerHTML = this.titles[0].innerHTML;
    			$(this.source).insert(li);

				$(this.target).setStyle('left: 0px');
				$(this.titles[0]).remove();
				
    			this.titles = $$('.'+this.className+' li');
				
	    	}.bind(this)
    	});
    	new Effect.Morph(this.target,options);
    }
});


var Ticker2 = Class.create({
    initialize: function(tempHolder, tempTarget, tempSource, tempClass) {

    	this.interval = 0;	
    	this.target = $(tempTarget);
    	this.source = $(tempSource);
    	this.className = tempClass;
    	this.titles = $$('.'+this.className+' li');
    	this.options = Object.extend({
    	  updateRate: 6
    	});
		
		height = 0;
		this.titles.each(function(el){
			height+= el.getHeight();
		});
		
    	if(height > $(tempHolder).getHeight()){
			this.start();
    	}
    },
    start: function() {
    	this.effect();
		this.interval = new PeriodicalExecuter(function() {
	    	this.effect();
		}.bind(this), this.options.updateRate);
    },
    effect: function() {
    	
    	var options = Object.extend({
    		style: 'top: -' + this.titles[0].getHeight() + 'px',
    		duration: 2,
    		afterFinish: function(){
    			var li = new Element("li");
    			li.innerHTML = this.titles[0].innerHTML;
    			$(this.source).insert(li);

				$(this.target).setStyle('top: 0px');
				$(this.titles[0]).remove();
				
    			this.titles = $$('.'+this.className+' li');
				
	    	}.bind(this)
    	});
    	new Effect.Morph(this.target,options);
    }
});