var delaySpeed = 2;
var smoove = 2.5;
var isinferior = (navigator.appName.indexOf('Microsoft') >= 0) && (parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf('MSIE')+5)) < 7);

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function popElement(initX, initY, initOpacity, targetX, targetY, targetOpacity, id, callerID) {
	this.x = initX;
	this.y = initY;
	this.opacity = initOpacity;
	
	this.initVals = new Array(initX, initY, initOpacity);
	this.targetVals = new Array(targetX, targetY, targetOpacity);		
	
	this.domID = id;
	this.domObj = document.getElementById(id);
	
	this.arrayIndex = callerID;
	
	this.show = function() { this.initTween(this.targetVals[0], this.targetVals[1], this.targetVals[2]) };
	this.hide = function() { this.initTween(this.initVals[0], this.initVals[1], this.initVals[2]) };
	this.getOBJ = function() { return this.domObj }
}


popElement.prototype.delta = function(currentVal, targetVal) { return (currentVal - targetVal) / smoove; }

popElement.prototype.tweenByChange = function(changeTop, changeLeft, changeTransparency) {

	targetTop = this.y + changeTop;
	targetLeft = this.x + changeLeft;
	targetTransparency = this.opacity + changeTransparency;

	this.initTween(targetTop, targetLeft, targetTransparency);
}

popElement.prototype.initTween = function(targetTop, targetLeft, targetTransparency) {
	if (targetTop != 'xxx') this.targetY = targetTop; else this.targetY = this.y;
	if (targetLeft != 'xxx') this.targetX = targetLeft; else this.targetX = this.x;
	if (targetTransparency != 'xxx') this.targetOpacity = targetTransparency; else this.targetOpacity = this.opacity;

	if ((this.opacity == 0) && (targetTransparency > 0)) {this.domObj.style.visibility = "visible";}
	
	this.tween();
}

popElement.prototype.tween = function() {
	deltaX = this.delta(this.x, this.targetX);
	deltaY = this.delta(this.y, this.targetY);
	
	deltaOpacity = this.delta(this.opacity, this.targetOpacity);

	/*alert("deltaX = " + deltaX + "\n" + 
				"deltaY = " + deltaY + "\n" + 
				"deltaOpacity = " + deltaOpacity
				);*/
	
	if (Math.abs(deltaX) < 1) {	interimX = this.targetX; } 
						 else {	interimX = this.targetX + deltaX; }
	if (Math.abs(deltaY) < 1) { interimY = this.targetY; }
						 else {	interimY = this.targetY + deltaY; }
	if (Math.abs(deltaOpacity) < 1) { interimOpacity = this.targetOpacity; }
						 			 else { interimOpacity = this.targetOpacity + deltaOpacity; }

	this.setCoords(interimX, interimY);
	
	if (interimOpacity != this.opacity)
		this.setOpacity(interimOpacity);
	
	if ((this.x != this.targetX) || (this.y != this.targetY) || (this.opacity != this.targetOpacity))
		this.tweenDelay = setTimeout("dynaBox['"+this.arrayIndex+"'].tween()", delaySpeed);
}

popElement.prototype.setCoords = function(left, top) {
	this.y = top;
	this.x = left;
	
	this.domObj.style.top = this.y + "px";
	this.domObj.style.left = this.x + "px";	

}

popElement.prototype.setOpacity = function(transparency) {
	this.opacity = transparency;

	if (window.ActiveXObject && !isinferior) this.domObj.style.filter = "alpha(opacity=" + this.opacity + ")";
	this.domObj.style.opacity = this.opacity/100;	
	
	if (this.opacity == 0) this.domObj.style.visibility = "hidden";
}

function show(obj) {
	document.getElementById(obj).style.display = "";
}

function hide(obj) {
	document.getElementById(obj).style.display = "none";
}

var dynaBox = new Array();
		
// try to prevent over-scrolling
var totalTiles; // how many image tiles do we have
var tileWidth = 4; // how many full tiles can we see
var leftTile = 1; // what is the left-most tile -- if it is 1, don't show the prev arrow
var rightTile = 5; // what is the right-most tile -- if it = totalTiles, don't show the next arrow
var intervalDelay = 1500;

function initMediaViewer() {
	var thumbs = document.getElementById("thumbs");		
	count = thumbs.getElementsByTagName("img").length;
	thumbs.style.width = 102 * count + "px";

	// initX, initY, initOpacity, targetX, targetY, targetOpacity, id, callerID
	dynaBox["thumbs"] = new popElement(5,0,100,0,0,100,"thumbs","thumbs");
	
	var thumbLinks = thumbs.getElementsByTagName("a");
	totalTiles = thumbLinks.length;

	// check to see if we need next/previous buttons
	if (leftTile == 1) { disableButton("prev"); }
	if (rightTile >= totalTiles) { disableButton("next"); }
	
	for (var i=0; i<thumbLinks.length; i++) {
		thumbLinks[i].onmouseover = function() {
			//Sorry for using the rel for this, my Standarista brothers, but sometimes design trumps semantics.
			launchThumbDescription(this, this.getAttribute('rev'));
			//if (this.className != 'thickbox') {
			//	totalTiles--;
			//}
		}
		thumbLinks[i].onmouseout = function() {
			clearThumbDescription();
		}
	}
}

function doNothing() {
	return false;
}

function disableButton(btn) {
	// switch images
	switch (btn) {
		case "prev":
			document.getElementById(btn).src = "/images/shared/blank.gif";
			break;
		case "next":
			document.getElementById(btn).src = "/images/shared/blank.gif";
			break;
	}
	
	// disable onclick
	document.getElementById(btn).onclick = doNothing;
}

function enableButton(btn) {
	// switch images
	switch (btn) {
		case "prev":
			document.getElementById(btn).src = "/images/shared/mediabar_left_arrow.gif";
			document.getElementById(btn).onclick = prevButton;
			break;
		case "next":
			document.getElementById(btn).src = "/images/shared/mediabar_right_arrow.gif";
			// enable onclick
			document.getElementById(btn).onclick = nextButton;
			break;
	}
}

function prevButton() {
	dynaBox['thumbs'].tweenByChange(0,102,100);
	updateButtonInfo(-1);
}

function nextButton() {
	dynaBox['thumbs'].tweenByChange(0,-102,100);
	updateButtonInfo(1);
}

function updateButtonInfo(num) {
	// update page level variables
	leftTile = leftTile + num;
	rightTile = rightTile + num;
	
	// activate/deactivate buttons as needed
	if (leftTile == 1) { disableButton("prev"); } else { enableButton("prev"); }
	if (rightTile >= totalTiles) { disableButton("next"); } else { enableButton("next"); }
	
	/*
	// update debugging info
	document.getElementById("leftInfo").innerHTML = leftTile;
	document.getElementById("rightInfo").innerHTML = rightTile;
	*/
}

function launchThumbDescription(linkElement, descText) {
	
	if (document.getElementById("thumbDescription")) {
		clearThumbDescription();
	}
	
	var bodyDiv = document.getElementById("body");
	var wrapper = document.getElementById("wrapper");
	var wrapperLeft = getRealLeft(wrapper);
	
	var thumbDescription = document.createElement("div");
	thumbDescription.setAttribute('id', 'thumbDescription');
	thumbDescription.style.display = "none";
	var top = getRealTop(document.getElementById('thumbs'));
	var left = getRealLeft(linkElement);
	thumbDescription.style.top = top - 32 + "px";
	thumbDescription.style.left = left + (linkElement.offsetWidth/2) - 25 + "px";
	thumbDescription.style.display = 'none';
	var thumbDescText = document.createElement("p");
	var textNode = document.createTextNode(descText);
	thumbDescText.appendChild(textNode);
	thumbDescription.appendChild(thumbDescText);
	bodyDiv.appendChild(thumbDescription);
	//alert("linkElement: " + left + " thumbs: " + getRealLeft(wrapper));
	if (left >= wrapperLeft && left < wrapperLeft + 544)  {
		thumbDescription.style.display = "block";
	}
}

function clearThumbDescription() {
	var bodyDiv = document.getElementById("body")
	var thumbDescription = document.getElementById("thumbDescription")
	if(thumbDescription) {
		var rubbish = bodyDiv.removeChild(thumbDescription);
	}
}

function changeZoomImage(imageFileName, current_model_year) {	
	var bikeImage = document.getElementById('bikeImage');
	var bc2 = document.getElementById('bc2');
	var bikeImageLarge = bc2.firstChild.firstChild;
	
	if (bikeImageLarge) {
	} else {
		bikeImageLarge = bc2.lastChild.firstChild;
	}
	
	bikeImage.src = '/images/bikes/'+current_model_year+'/large/'+imageFileName;
	bikeImageLarge.src = '/images/bikes/'+current_model_year+'/xl/'+imageFileName;

	return false;
}

function launchFeature(url, width, height) {
	window.open(url, 'feature', 'width='+width+',height='+height);
	return false;
}

function youtube(url) {
	window.open(url, "trek_youtube", "status=1,toolbar=0,resizable=1,width=450,height=375");
}