/**
 * COMMON DHTML FUNCTIONS
 * These are handy functions I use all the time.
 *
 * By Seth Banks (webmaster at subimage dot com)
 * http://www.subimage.com/
 *
 * Up to date code can be found at http://www.subimage.com/dhtml/
 *
 * This code is free for you to use anywhere, just keep this comment block.
 */

/**
 * X-browser event handler attachment and detachment
 * TH: Switched first true to false per http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
 *
 * @argument obj - the object to attach event to
 * @argument evType - name of the event - DONT ADD "on", pass only "mouseover", etc
 * @argument fn - function to call
 */
function addEvent(obj, evType, fn){
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, false);
    return true;
 } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
 } else {
    return false;
 }
}
function removeEvent(obj, evType, fn, useCapture){
  if (obj.removeEventListener){
    obj.removeEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.detachEvent){
    var r = obj.detachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}

/**
 * Code below taken from - http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/
 *
 * Modified 4/22/04 to work with Opera/Moz (by webmaster at subimage dot com)
 *
 * Gets the full width/height because it's different for most browsers.
 */
function getViewportHeight() {
	if (window.innerHeight!=window.undefined) return window.innerHeight;
	if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
	if (document.body) return document.body.clientHeight; 

	return window.undefined; 
}
function getViewportWidth() {
	var offset = 17;
	var width = null;
	if (window.innerWidth!=window.undefined) return window.innerWidth; 
	if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; 
	if (document.body) return document.body.clientWidth; 
}

/**
 * Gets the real scroll top
 */
function getScrollTop() {
	if (self.pageYOffset) // all except Explorer
	{
		return self.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop)
		// Explorer 6 Strict
	{
		return document.documentElement.scrollTop;
	}
	else if (document.body) // all other Explorers
	{
		return document.body.scrollTop;
	}
}
function getScrollLeft() {
	if (self.pageXOffset) // all except Explorer
	{
		return self.pageXOffset;
	}
	else if (document.documentElement && document.documentElement.scrollLeft)
		// Explorer 6 Strict
	{
		return document.documentElement.scrollLeft;
	}
	else if (document.body) // all other Explorers
	{
		return document.body.scrollLeft;
	}
}

function swapImage(series, imgId, color, fileName) {

	/*****************************************
		series: classic, sprint, or surge.  Cannot be null.
		imgId: id attribute of each thumbnail to determine the correct color to display.
		color: the color attribute is set to display the proper image in the more views popup
		fileName: a manual file override that lets us refer to a the material image which is used by the classic and sprint
		"more views" popup box.
	
	******************************************/
	
	//Override the default filename if needed.  
	if(fileName!=null) {
		//This is the file path for default image rollovers
		var prefix = "images/products/_popups/more-views/";
		document.getElementById("imgLarge").src = prefix + fileName;
	}else if(color!=null){
		//Because each color will be shown in the popup, we need to account for the color in the image path
		var prefix = "images/products/" + series + "/" + color + "/_popup/";
		document.getElementById("imgLarge").src = prefix + imgId + "-large.jpg";
	}else{
		//This is the file path with only the series changing.
		var prefix = "images/products/" + series + "/_popup/more-views/";
		document.getElementById("imgLarge").src = prefix + imgId + "-large.jpg";
	}
}


function swapColor(SKU, productid) {
	
	/*****************************************
	swapColor has two main functions - 1 is to swap product image on the main product page, the second is to indicate which color to use in the popup. by setting the hidden field "color" and then referring to that when we build the "more views" popup.
	
	*****************************************/
	var prefix = 'images/products/' + SKU + '/';
	
	document.getElementById("color").value = SKU;
	
	document.getElementById("productImage").src = prefix + '/large.jpg';
	

}
