/** Functions in this file should be written to be used by designers on 
 *  all sites. Please try to keep these well-commented and listed alphabetically.
 *  Please make sure to update TR.js on all sites.
 */
/** Takes a number as a string and adds commas as necessary
 *  Example call: addCommasTR(5000 + "") or addCommasTR(myNumber + "")
 */
function addCommasTR( str ) {
	var objRegExp  = new RegExp('(-?[0-9]+)([0-9]{3})');
	while(objRegExp.test(str)) {
		str = str.replace(objRegExp, '$1,$2');
	}
	return str;
}
/** Used to change between multiple tabs
 *  "groupName" is the start of the name of the elements, in most
 *  cases use "tr_tab"
 *  "tabCount" is the number of tabs you have
 *  "selectedTab" is the index of the tab you wish to make active
 *
 *  For this function to work, your tabs must be named tr_tab_0...tr_tab_N
 *  and the content for the tabs is in tr_tab_content_0...tr_tab_content_N
 *  where N is "tabCount"-1 and tr_tab is "groupName"
 * 
 *  Example call: onclick="changeTRTabs('tr_tab', 2, 1);return false;"
 */
function changeTRTabs(groupName, tabCount, selectedTab) {
	var currentTab = document.getElementById(groupName + "_" + selectedTab);
	var currentContent = document.getElementById(groupName + "_content_" + selectedTab);
	if(currentTab != null) currentTab.className = "current";
	if(currentContent != null) currentContent.style.display = "block";

	for(var i=0; i<tabCount; i++) {
		if(i==(selectedTab-0)) continue;
		var tempTab = document.getElementById(groupName + "_" + i);
		var tempContent = document.getElementById(groupName + "_content_" + i);
		if(tempTab != null) tempTab.className = "";
		if(tempContent != null) tempContent.style.display = "none";
	}
}
/** same as changeTRTabs, but moves the focus to the tab element */
function changeTRTabsAndFocus(groupName, tabCount, selectedTab) {
	changeTRTabs(groupName, tabCount, selectedTab);
	document.getElementById("tr_tab_" + selectedTab).scrollIntoView(true);
}
/** Used to display to a customer how many characters they have available
 *  to enter into a form.
 *  You will use the id of your textarea to name your message area.
 *  For example, if the textarea's id is "writereview", use "writereview_txtmsg" 
 *  as the id of the span that will contain the message text
 *  Example call: onkeyup="checkLengthTR(4000, this)" 
 *  onblur="checkLengthTR(4000, this)"
 */
function checkLengthTR(maxLength, myTextField) {
	var str = new String(myTextField.value);
	var len = str.length;
	var left = (maxLength - len)
	if((maxLength - len) < 0) {
		left = 0;
		myTextField.value=myTextField.value.substring(0, maxLength)
	}
	var showstr = "(" + addCommasTR(maxLength+"") + " characters maximum, " + addCommasTR(left+"") + " remaining)";
	document.getElementById(myTextField.id + '_txtmsg').innerHTML = showstr;
}
/** Used to hide any dom element (div, span, img, etc)
 *  The parameter (myID) is the ID of the object to hide
 *  Example call: onclick="hideTRObject('objectID');return false;"
 */
function hideTRObject(myID)  {
	var el = document.getElementById(myID);
	el.style.display = "none";
	//needed for Safari 2.0.2
	if(navigator.userAgent.indexOf("Safari") != -1 &&
	   navigator.userAgent.indexOf("Mac") != -1) {
		window.resizeTo(self.outerWidth + 1, self.outerHeight);
		window.resizeTo(self.outerWidth - 1, self.outerHeight);
	}
}
/** Opens an informational style dialogue box.
 *  myHref - path to page to open in the dialogue
 *  myTitle - title for the dialogue
 *  myWidth - width of the dialogue, "default" and "" are valid
 *  myHeight - height of the dialogue, "default" and "" are valid. Consider
 *             setting this value on longer dialogues
 *  "default" and "" will use the settings specified in this method
 *  Example call:
 *    onclick="openInfoBox(this.href, this.title, '300', '')"; return false;
 */
 function openInfoBox(myHref, myTitle, myWidth, myHeight) {
	var defaultWidth="405";
	var boxHeight = myHeight;
	var boxWidth = myWidth;
	var windowHeight = "575";
	if(typeof(window.innerWidth) == 'number' ) { //Non-IE
		windowHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode'            
		windowHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible
		windowHeight = document.body.clientHeight;
	}
	if(myHeight == "default" || myHeight == "" || myHeight == null) boxHeight = "";
	if(myWidth == "default" || myWidth == "" || myWidth == null) boxWidth = defaultWidth;
	if(boxHeight != "" && (windowHeight-20) < (boxHeight-0)) boxHeight = windowHeight-20;
	if(boxHeight != "" && boxWidth != "") {
		Modalbox.show(myHref, {title: myTitle, height: boxHeight, width: boxWidth});
	} else if(boxWidth != "") {
		Modalbox.show(myHref, {title: myTitle, width: boxWidth});
	} else {
		Modalbox.show(myHref, {title: myTitle});
	}
	//detect switching from warning style
	if(Modalbox.options.warningStyle == true) {
		Modalbox.options.warningStyle = false;
		Modalbox.options.overlayClose=true;
		if(document.getElementById("MB_overlay")) document.getElementById("MB_overlay").observe("click", Modalbox.hideObserver);
		if(document.getElementById("MB_captionRed")) document.getElementById("MB_captionRed").id = "MB_caption";
		if(document.getElementById("MB_headerRed")) document.getElementById("MB_headerRed").id = "MB_header";
		if(document.getElementById("MB_closeRed")) document.getElementById("MB_closeRed").id = "MB_close";
		if(document.getElementById("MB_close")) document.getElementById("MB_close").innerHTML ="<span>&times;</span>";
	}
 }
/** Opens a modalbox to display an image
 *  myHref - path to image
 *  myTitle - title for the dialogue
 *  width - optional
 *  height - optional
 */
 function openImageBox(myHref, myTitle, width, height) {
	var node = document.createElement("IMG");
	node.src = myHref;
	var myWidth = 600;
	var myHeight = 400;
	if(!(width&&height) && node.width != '0') {
		myWidth = node.width + 20;
		myHeight = node.height + 45;
		var maxHeight = 575;
		if(typeof(window.innerWidth) == 'number') {
			maxHeight = window.innerWidth;
		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {   
			maxHeight = document.documentElement.clientHeight;
		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {         
			maxHeight = document.body.clientHeight;
		}
		if(myHeight > maxHeight) myHeight = maxHeight;
	}
	if(width) myWidth = width-0+20;
	if(height) myHeight = height;
	var myDiv = document.createElement("DIV");
	myDiv.appendChild(node);
	Modalbox.show(myDiv, {title: myTitle, width: myWidth, height: myHeight});
 }
/** Opens a warning style dialogue box.
 *  myHref - path to page to open in the dialogue
 *  myTitle - title for the dialogue
 *  myWidth - width of the dialogue, "default" and "" are valid
 *  myHeight - height of the dialogue, "default" and "" are valid. Consider
 *             setting this value on longer dialogues
 *  "default" and "" will use the settings specified in this method
 *  Example call:
 *    onclick="openInfoBox(this.href, this.title, '300', '')"; return false;
 */
 function openWarningBox(myHref, myTitle, myWidth, myHeight) {
	var wasInfoStyle = false;
	if(Modalbox.options.warningStyle == false) wasInfoStyle = true;
	var defaultWidth="405";
	var boxHeight = myHeight;
	var boxWidth = myWidth;
	if(myHeight == "default" || myHeight == "" || myHeight == null) boxHeight = "";
	if(myWidth == "default" || myWidth == "" || myWidth == null) boxWidth = defaultWidth;
	if(boxHeight != "" && boxWidth != "") {
		Modalbox.show(myHref, {title: myTitle, height: boxHeight, width: boxWidth, warningStyle: true});
	} else if(boxWidth != "") {
		Modalbox.show(myHref, {title: myTitle, width: boxWidth, warningStyle: true});
	} else {
		Modalbox.show(myHref, {title: myTitle, warningStyle: true});
	}
	//detect switching from warning style
	if(wasInfoStyle == true) {
		Modalbox.options.overlayClose=false;
		if(document.getElementById("MB_caption")) document.getElementById("MB_caption").id = "MB_captionRed";
		if(document.getElementById("MB_header")) document.getElementById("MB_header").id = "MB_headerRed";
		if(document.getElementById("MB_close")) document.getElementById("MB_close").id = "MB_closeRed";
		if(document.getElementById("MB_closeRed")) document.getElementById("MB_closeRed").innerHTML ="";
	}
 }
/** Used to show a div by clicking a link and changes the style of the 
 *  clicked link so that the arrow points down when open and right when
 *  closed.
 *  "link" is the id of the clicked link
 *  "div" is the div that we want to show/hide
 *  This call requires prototype and effects.js to be included on the page
 *  Example call: onclick="pointBulletDownTR(this.id,'shopcategories');return false;"
 */
function pointBulletDownTR(link,div) {
	toggleVisibility(div);
	if(document.getElementById(link).className != "openedup") {
		document.getElementById(link).className = "openedup";
	} else {        
		document.getElementById(link).className = "";
	}
}
/** Used in a pop-up window so that when the link is clicked, the parent
 *  window is redirected and the pop-up closes
 *  The parameter (myHref) is where you want the parent window to redirect to
 *  Example call: onclick="redirectAndClosePopUp(this.href)"
 */
function redirectAndClosePopUp(myHref) {
	if(opener) {
		opener.location=myHref;
		self.close();
		return false;
	} else {
		return true;
	}
}
/** Used to show (un-hide) and dom element (div, span, img, etc)
 *  The parameter (myID) is the ID of the object to show
 *  The parameter (showInline) is optional and if true, it will display the object inline
 *  Example call: onclick="showTRObject('objectID');return false;"
 *  Example call: onclick="showTRObject('objectID', true);return false;"
 */
function showTRObject(myID, showInline)  {
	var el = document.getElementById(myID);
	if(showInline){
		el.style.display = "inline";
	}else{
		el.style.display = "block";
	}
	//needed for Safari 2.0.2
  	if(navigator.userAgent.indexOf("Safari") != -1 &&
     	   navigator.userAgent.indexOf("Mac") != -1) {
		window.resizeTo(self.outerWidth + 1, self.outerHeight);
		window.resizeTo(self.outerWidth - 1, self.outerHeight);
	}
}
/** Used to hide a button and display a "loading" text message
 *  Example call: stopMultiSubmit('buttonID', false) where buttonID is the 
 *  ID of the button to hide and false indicates to use block rather than
 *  inline. This requires a span with id "loading" and a class of
 *  "loadingMsg" which is initially hidden. It also requires a line of
 *  window.formSubmitted = "false" on the page to begin.
 */
function stopMultiSubmit(buttonID, showInline) {
	if(window.formSubmitted == "true") return false;
	window.formSubmitted = "true";
	if(document.getElementById(buttonID)) {
		hideTRObject(buttonID);
		showTRObject("loading", showInline);
	}
	return true;
}
/** used to toggle an element's visibility between shown and hidden
 *  The parameter (myID) is the ID of the object whose visibility you
 *  want to toggle
 *  Example call: onclick="toggleVisibility('objectID');return false;"
 */
function toggleVisibility(myID, showInline) {
	if(document.getElementById(myID).style.display == "none") {
		if(showInline){
			showTRObject(myID, true);
		}else{
			showTRObject(myID);
		}
	} else {
		hideTRObject(myID);
	}
}

/** used to toggle an element's class
 *  The parameter (myID) is the ID of the object whose class you want to toggle
 *  The parameters (class1) and (class2) are the classes you want to toggle
	Example call: onclick="changeClass('objectID','red','blue');return false;"
	* If the object's class was 'red' it will switch to 'blue and vice versa
*/
function changeClass(myID, class1, class2){
	document.getElementById(myID).className = (document.getElementById(myID).className == class1) ? class2:class1 ;
}