// Set up global variables for scripts

// Spacing between the left hand side of each tab - setting too small will cause tabs to overlap
// This is read directly from the CSS file
var tabSpacing = 0;

// Height of the tab - adjust to match the height of your tab image and text
// This is read directly from the CSS file
var tabHeightOffset = 0;

// Holds the number of tabs within the container
var numTabs = 0;

//====================================================================================
function getStringWidth(elemID){
	// Create temporary element and measure
	// full width of inner Text
	if(!elemID) return false;
	var cssRule = getCSSRule("."+elemID.className);
	var sp = document.createElement("span");
	// ===
	//sp.style.backgroundColor = "lightblue";
	//var space = document.createElement("span");space.innerHTML = " ";
	// ===
	// duplicate font styling
	sp.style.visibility = 'hidden';
	sp.style.fontFamily = elemID.style.fontFamily;
	if(!sp.style.fontFamily && cssRule) sp.style.fontFamily = cssRule.style.fontFamily;

	sp.style.fontSize = elemID.style.fontSize;//alert(sp.style.fontSize);
	if(!sp.style.fontSize && cssRule) sp.style.fontSize = cssRule.style.fontSize;

	sp.style.fontWeight = elemID.style.fontWeight;//alert(sp.style.fontWeight);
	if(!sp.style.fontWeight && cssRule) sp.style.fontWeight = cssRule.style.fontWeight;

	sp.style.fontVariant = elemID.style.fontVariant;
	if(!sp.style.fontVariant && cssRule) sp.style.fontVariant = cssRule.style.fontVariant;

	sp.style.fontStyle = elemID.style.fontStyle;
	if(!sp.style.fontStyle && cssRule) sp.style.fontStyle = cssRule.style.fontStyle;

	// duplicate padding values affecting width
	if(elemID.style.paddingLeft){
		sp.style.paddingLeft = elemID.style.paddingLeft;
	} else if(cssRule && cssRule.style.paddingLeft) {
		sp.style.paddingLeft = cssRule.style.paddingLeft;
	}
	if(elemID.style.paddingRight){
		sp.style.paddingRight = elemID.style.paddingRight;
	} else if(cssRule && cssRule.style.paddingRight) {
		sp.style.paddingRight = cssRule.style.paddingRight;
	}

	sp.innerHTML = elemID.innerHTML;
	//
	document.body.appendChild(sp);//document.body.appendChild(space);
	var fullWidth = sp.offsetWidth;
	if(document.all) fullWidth += parseInt(sp.style.paddingLeft) + parseInt(sp.style.paddingRight);
	document.body.removeChild(sp);
	return fullWidth;
}
//====================================================================================
function getCSSWidth(elemID){
	if(!elemID) return false;
	var cssRule = getCSSRule(elemID);
	var cssWidth = cssRule.style.width;

	if(cssRule && cssWidth){
		widthUnits = cssWidth.substr(String(parseFloat(cssWidth)).length);
		cssWidth = parseFloat(cssWidth);
		if(!isNaN(cssWidth)) return Array(cssWidth, widthUnits);
	}
	return false;
}
//====================================================================================
function initTabs(parContainer, autoResize) {

	countTabs(parContainer);
	if(numTabs==0) return;

	tabHeight = tabHeightOffset;
	cssRule = getCSSRule(".pageTabs");
	parentTop = getTopPos(parContainer);


	if (cssRule != false) {
		// Read the 'tabSpacing' and 'tabHeightOffset' settings from the CSS rule
		// tabSpacing = parseFloat(cssRule.style.tabSpacing);**** Mozilla NOT
		//tabHeightOffset = parseFloat(cssRule.style.tabHeightOffset);**** Mozilla NOT
		tabSpacing = parseFloat(cssRule.style.marginLeft);
		cssRule.style.marginLeft = "0px";
		tabHeightOffset = parseFloat(cssRule.style.marginTop);
		fontPixelSize = parseFloat(cssRule.style.fontSize);

		// work out the height of the tab cell and load into 'tabHeight'
		aryHeight = cssRule.style.height.split("px");
		tabHeight = tabHeight + parseFloat(aryHeight[0]);

		// work out the width of the tab cell and add to 'tabSpacing'
		aryWidth = cssRule.style.width.split("px");
		//tabSpacing = tabSpacing + parseFloat(aryWidth[0]);
		defWidth = parseFloat(aryWidth[0]);
	}


	// Adjust tab top position relative to the container named in parContainer
	for (i = 1; i <= numTabs ; i++) {
		tabElem = document.getElementById('tab'+i);
		tabElem.className = 'pageTabs';
		tabElem.style.top = parentTop + "px";
		document.getElementById('content'+i).className = 'pageTabContent';
	}


	// Work out the left position of the container
	contLeft = 20;	//getLeftPos(parContainer);

	// Position first tab element
	var tabWidth;
	tabElem = document.getElementById('tab1');
	tabLeft = (getLeftPos('tab1') + contLeft)//;alert("tab1 left: "+tabLeft);
	newContentLeft = tabLeft;	// for IE better store here
	tabElem.style.left = tabLeft + "px";
	tabElem.className = "pageTabs";
	tmp = "document.getElementById('tab1').onclick = function anonymous() {focusTab(1,'" + parContainer + "')};";
	eval(tmp);
	//autoResize = true;
	if(autoResize){
		// AUTO RESIZE
		//labelPixLen = tabElem.innerHTML.length*fontPixelSize;
		var labelPixLen = Math.ceil(getStringWidth(tabElem)/10)*10;//Math.ceil(tabElem.offsetWidth/10)*10;
		//if(labelPixLen%10) labelPixLen = (parseInt(labelPixLen/10)+1)*10;
		tabElem.className += " tw" + labelPixLen;
		tabWidth = labelPixLen;
		//tabElem.style.width = tabWidth + "px";
		//alert("calculated: "+labelPixLen+"\nprop: "+tabElem.offsetWidth);
		//
	} else {
		cssRule = getCSSRule("#tab1");
		(cssRule && cssRule.style.width) ? tabWidth = parseFloat(cssRule.style.width) : tabWidth = defWidth;
	}

	// Position the rest tab elements
	for (i = 2; i <= numTabs ; i++) {
		//alert("Item:"+i+"\nPrevious Left:"+tabLeft+"\nPrevious Width:"+tabWidth);
		tabElem = document.getElementById('tab'+i);
		tabLeft = tabLeft + tabWidth + tabSpacing;//alert("tab"+i+" left: "+tabLeft);
		tabElem.style.left = tabLeft + "px";
		tabElem.className = "pageTabs";//alert("tab"+i+": "+tabElem.innerHTML);
		tmp = "document.getElementById('tab'+i).onclick = function anonymous() {focusTab(" + i + ",'" + parContainer + "')};";
		eval(tmp);
		if(autoResize){
			// AUTO RESIZE
			//labelPixLen = tabElem.innerHTML.length*fontPixelSize;
			labelPixLen = Math.ceil(getStringWidth(tabElem)/10)*10;//alert(labelPixLen)
			//if(labelPixLen%10) labelPixLen = (parseInt(labelPixLen/10)+1)*10;
			//alert("calculated: "+labelPixLen+"\noffsetWidth: "+tabElem.offsetWidth+"\nclientWidth: "+tabElem.clientWidth+"\n________\ngetStringWidth()\n"+getStringWidth(tabElem));
			tabElem.className += " tw" + labelPixLen;
			tabWidth = labelPixLen;
			//tabElem.style.width = tabWidth + "px";
			//
		} else {
			cssRule = getCSSRule("#tab"+i);
			(cssRule && cssRule.style.width) ? tabWidth = parseFloat(cssRule.style.width) : tabWidth = defWidth;
		}
		tabElem.style.zIndex = -i;
		//cssRule = getCSSRule("#tab"+i);
		//(cssRule && cssRule.style.width) ? tabWidth = parseFloat(cssRule.style.width) : tabWidth = defWidth;
	}

	// Position tabs across the page, allowing 'tabSpacing' between the left of each one
	/*
	for (i = 1; i <= numTabs ; i++) {
		offset = ((i-1) * tabSpacing) + contLeft;
		tabElem = document.getElementById('tab'+i);
		tabElem.style.left = (getLeftPos('tab'+i) + offset) + "px";
		tabElem.className = "pageTabs";
		tmp = "document.getElementById('tab'+i).onclick = function anonymous() {focusTab(" + i + ",'" + parContainer + "')};";
		eval(tmp);
	}*/


	// Save the top position of the first tab, and add 'tabHeight' for top position of content
	newContentTop = getTopPos('tab1') + tabHeight;

	// Save the left position of the first tab and deduct 10px as the left hand side of the content box
	//newContentLeft = getLeftPos('tab1'); //- 10;

	// Move each content box to the top-left of the container, but underneath the tabs
	for (i = 1; i <= numTabs ; i++) {
		contElem = document.getElementById('content' + i);
		contElem.style.top = newContentTop+"px";
		contElem.style.left = newContentLeft+"px";
	}

	// Set container width
	cssRule = getCSSRule(".pageTabContent");
	if (cssRule != false) {
		document.getElementById(parContainer).style.width = parseFloat(cssRule.style.width) + contLeft + "px";
	}

	// Make 'tab1' the current tab
	focusTab(1, parContainer);
}
//====================================================================================
function focusTab(idNum, parContainer) {
	var tabId = 'tab' + idNum;
	var conId = 'content' + idNum;

	var tabEle = document.getElementById(tabId);
	var conEle = document.getElementById(conId);

	for (var i = 1; i <= numTabs; i++) {
		tabElem = document.getElementById('tab'+i);
		contElem = document.getElementById('content' + i);
		if (i != idNum) {
			//tabElem.className = "pageTabs";
			tabElem.className = tabElem.className.replace("-active", "");
			tabElem.style.zIndex = numTabs-i;	//2;
			//tabElem.style.borderStyle = "none";

			contElem.className = "pageTabContent";
			contElem.style.zIndex = 1;
			contElem.style.display = "none";
		} else {
			document.getElementById('content' + i).style.display = "block";

			// See if there is an 'active' rule for the tabs, and apply it to the active tab
			//cssRule = getCSSRule(".pageTabs-active");
			var currClass = tabElem.className;
			if(currClass.indexOf("-active")==-1) tabElem.className += "-active";
			//if (cssRule != false) document.getElementById('tab' + i).className = "pageTabs pageTabs-active";

			// See if there is an 'active' rule for the content, and apply it to the active content pane
			cssRule = getCSSRule(".pageTabContent-active");
			if (cssRule != false) document.getElementById('content' + i).className = "pageTabContent pageTabContent-active";
		}
	}

	document.getElementById(parContainer).style.height = conEle.offsetHeight+25+"px";

	conEle.style.zIndex = numTabs-1;	//3;
	tabEle.style.zIndex = numTabs;	//4;
}
//====================================================================================
function countTabs(parContainer) {
	numTabs = 0;
	var tabContainer = document.getElementById(parContainer);
	if(tabContainer){
		for (i = 0; i <= tabContainer.childNodes.length - 1; i++) {
			nodeID = tabContainer.childNodes[i].id;
			if (nodeID && nodeID.substr(0,3)=="tab") numTabs = numTabs + 1;
		}
	}
}
//====================================================================================
function getLeftPos(id){
	var x = 0;
	elem = document.getElementById(id);

	while(elem){
		x += elem.offsetLeft;
		elem = elem.offsetParent;
	}

	return x;
}

//====================================================================================
function getTopPos(id){
	var y = 0;
	elem = document.getElementById(id);

	while(elem){
		y += elem.offsetTop;
		elem = elem.offsetParent;
	}

	return y;
}
//====================================================================================

function getCSSRule(ruleName, deleteFlag) {		// Return requested style obejct
   if (document.styleSheets) {			// If browser can play with stylesheets
      for (var i=0; i<document.styleSheets.length; i++) {	// For each stylesheet
         var styleSheet=document.styleSheets[i];	// Get the current Stylesheet
         var ii=0;					// Initialize subCounter.
         var cssRule=false;				// Initialize cssRule.
         do {					// For each rule in stylesheet
            if (styleSheet.cssRules) {			// Browser uses cssRules?
               cssRule = styleSheet.cssRules[ii];		// Yes --Mozilla Style
            } else {					// Browser usses rules?
               cssRule = styleSheet.rules[ii];		// Yes IE style.
            }					// End IE check.
            if (cssRule)  {				// If we found a rule...
               if (cssRule.selectorText==ruleName) {	// Does current rule match ruleName?
                  if (deleteFlag=='delete') {		// Yes.  Are we deleteing?
                     if (styleSheet.cssRules) {		// Yes, deleting...
                        styleSheet.deleteRule(ii);		// Delete rule, Moz Style
                     } else {				// Still deleting.
                        styleSheet.removeRule(ii);		// Delete rule IE style.
                     }					// End IE check.
                     return true;				// return true, class deleted.
                  } else {				// found and not deleting.
                     return cssRule;			// return the style object.
                  }					// End delete Check
               }					// End found rule name
            }					// end found cssRule
            ii++;					// Increment sub-counter
         } while (cssRule)				// end While loop
      }						// end For loop
   }						// end styleSheet ability check
   return false;					// we found NOTHING!
}						// end getCSSRule
//====================================================================================
function killCSSRule(ruleName) {			// Delete a CSS rule
   return getCSSRule(ruleName,'delete');		// just call getCSSRule w/delete flag.
}						// end killCSSRule
//====================================================================================
function addCSSRule(ruleName) {				// Create a new css rule
   if (document.styleSheets) {				// Can browser do styleSheets?
      if (!getCSSRule(ruleName)) {				// if rule doesn't exist...
         if (document.styleSheets[0].addRule) {			// Browser is IE?
            document.styleSheets[0].addRule(ruleName, null,0);	// Yes, add IE style
         } else {						// Browser is IE?
            document.styleSheets[0].insertRule(ruleName+' { }', 0);	// Yes, add Moz style.
         }							// End browser check
      }							// End already exist check.
   }							// End browser ability check.
   return getCSSRule(ruleName);				// return rule we just created.
}
//====================================================================================