//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
	init:   function() {

		//collect the variables
		/*scroller.docH = document.getElementById("thumbs").offsetHeight;
		scroller.contH = document.getElementById("thumbsContainer").offsetHeight;
		scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;

		//calculate height of scroller and resize the scroller div
		//(however, we make sure that it isn't to small for long pages)
		if (scroller.contH == scroller.scrollAreaH) 
		{
			scroller.scrollH = scroller.contH - 50;
		}
		else 
		{
			scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
		//}
		
		//if(scroller.scrollH < 15) scroller.scrollH = 15;
		document.getElementById("scroller").style.height = Math.round(scroller.scrollH) + "px";

		//what is the effective scroll distance once the scoller's height has been taken into account
		scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);

		//make the scroller div draggable
		Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);

		//add ondrag function
		document.getElementById("scroller").onDrag = function (x,y) {
			var scrollY = parseInt(document.getElementById("scroller").style.top);
			var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
			document.getElementById("thumbs").style.top = docY + "px";
		}*/
		scroller.docW = document.getElementById("thumbs").offsetWidth;
		scroller.contW = document.getElementById("thumbsContainer").offsetWidth;
		scroller.scrollAreaW = document.getElementById("scrollArea").offsetWidth;

		//calculate height of scroller and resize the scroller div
		//(however, we make sure that it isn't to small for long pages)
		if (scroller.docW <= scroller.contW) 
		{
			scroller.scrollW = scroller.contW - 2;
		}
		else 
		{
			scroller.scrollW = (scroller.contW * scroller.scrollAreaW) / scroller.docW;
		}
		
		//if(scroller.scrollH < 15) scroller.scrollH = 15;
		document.getElementById("scroller").style.width = Math.round(scroller.scrollW) + "px";
		if (BrowserDetect.browser == "Explorer" && BrowserDetect.version <= 6)
		{
			var d = document.getElementById("scrollerMiddle");
			if (d) 
			{
				d.style.position = 'relative';
				d.style.left = '5px';
				d.style.top = '-14px';
				d.style.width = (Math.round(scroller.scrollW) - 10) + 'px';
			}
		}

		//what is the effective scroll distance once the scoller's height has been taken into account
		scroller.scrollDist = Math.round(scroller.scrollAreaW-scroller.scrollW-34);
		
		//make the scroller div draggable
		Drag.init(document.getElementById("scroller"),null,0,scroller.scrollDist,0,0);

		//add ondrag function
		document.getElementById("scroller").onDrag = function (x, y) 
		{
			if (scroller.scrollDist == 0) { return; }
			var scrollX = parseInt(document.getElementById("scroller").style.left);
			var docX = 0 - (scrollX * (scroller.docW - scroller.contW) / scroller.scrollDist);
			document.getElementById("thumbs").style.left = docX + "px";
		}
		
		document.getElementById("scroller").onDragEnd = function(x, y)
		{
			if (Drag.obj.speed == 0) { return; }
			scroller.endDragW = scroller.contW/Drag.obj.speed;
			var s = document.getElementById("scroller").style;
			var left = parseInt(s.left);
			var width = parseInt(s.width);
			if (scroller.endDragW < 0 && left + scroller.endDragW < 0)
			{
				scroller.endDragW = -left;
			}
			else if (left + width + scroller.endDragW > scroller.contW - 2)
			{
				scroller.endDragW = scroller.contW - left - width - 2;
			}
			scroller.endDragX = Math.floor(left + scroller.endDragW);
			endDrag();
		}
		
		document.getElementById("scroller").onDragStart = function(x, y)
		{
			if (timeoutHandle != null) { clearTimeout(timeoutHandle); }
			timeoutHandle = null;
		}
	}

}

timeoutHandle = null;

function endDrag() 
{
	var scrollX = parseInt(document.getElementById("scroller").style.left);
	if (scrollX == scroller.endDragX) 
	{ 
		timeoutHandle = null; 
		return; 
	}
	scroller.endDragW /= 2; 
	scrollX += scroller.endDragW;
	if ((scroller.endDragW < 0 && scrollX < scroller.endDragX) ||
		(scroller.endDragW > 0 && scrollX > scroller.endDragX))
	{
		scrollX = scroller.endDragX;
	}
	document.getElementById("scroller").style.left = scrollX + "px";
	document.getElementById("scroller").onDrag(0, 0);
	timeoutHandle = setTimeout('endDrag();', 65);
}

onload = scroller.init;

function ProductImage(imgTopId, imgBottomId, descContainerId, descTopId, descBottomId, hiddenId)
{
	this.imgTop = document.getElementById(imgTopId);
	this.imgBottom = document.getElementById(imgBottomId);
	this.descContainer = document.getElementById(descContainerId);
	this.descTop = document.getElementById(descTopId);
	this.descBottom = document.getElementById(descBottomId);
	this.hidden = null;
	if (hiddenId != '') { this.hidden = document.getElementById(hiddenId); }
}

ProductImage.prototype.updateOpacity = function()
{
	this.imgTop.style.opacity = this.imgTop.style.MozOpacity = (100-this.opacity)/100;
	this.imgTop.style.filter = 'alpha(opacity=' + (100-this.opacity) + ');';
	this.imgBottom.style.opacity = this.imgBottom.style.MozOpacity = this.opacity/100;
	this.imgBottom.style.filter = 'alpha(opacity=' + this.opacity + ');';
	this.descContainer.style.opacity = this.descContainer.style.MozOpacity = this.descOpacity/100;
	this.descContainer.style.filter = 'alpha(opacity=' + this.descOpacity + ');';
}

ProductImage.prototype.animate = function() 
{
	this.opacity += 5;
	this.descOpacity += this.descOpacityDelta;
	this.updateOpacity();
	if (this.opacity == 100)
	{
		this.imgTop.src = this.imgBottom.src;
		this.imgTop.alt = this.imgBottom.alt;
		return;
	}
	if (this.descOpacity == 0)
	{
		this.descOpacityDelta = -this.descOpacityDelta;
		this.descTop.innerHTML = this.descBottom.innerHTML = this.newDesc;
	}
	cw = new CCallWrapper(this, 0, 'animate');
	CCallWrapper.asyncExecute(cw);
}

ProductImage.prototype.change = function(src, alt, desc, id) 
{
	this.opacity = 0;
	this.descOpacity = 100;
	this.descOpacityDelta = -10;
	this.updateOpacity();
	
	this.imgBottom.src = src;
	this.imgBottom.alt = alt;
	this.newDesc = desc;
	if (this.hidden != null) { this.hidden.value = id; }
	
	cw = new CCallWrapper(this, 0, 'animate');
	CCallWrapper.asyncExecute(cw);
}