// 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 initTabs(parContainer) {

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

	if (cssRule != false) {
		// Read the 'tabSpacing' and 'tabHeightOffset' settings from the CSS rule
		tabSpacing = parseFloat(cssRule.style.tabSpacing);
		tabHeightOffset = parseFloat(cssRule.style.tabHeightOffset);

		// 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]);
	}
	
	contLeft = getLeftPos(parContainer);
	
	// Adjust tab top position relative to the container named in parContainer
	for (i = 1; i <= numTabs ; i++) {
		document.getElementById('tab'+i).className = 'pageTabs';
		document.getElementById('content'+i).className = 'pageTabContent';
		document.getElementById('tab'+i).style.top = getTopPos(parContainer);
	}
	
	
	// Work out the left position of the container
	contLeft = getLeftPos(parContainer);


	// Position tabs across the page, allowing 'tabSpacing' between the left of each one
	for (i = 1; i <= numTabs ; i++) {
		offset = ((i-1) * tabSpacing) + contLeft;
		tableft = 0; //getLeftPos('tab'+i)
		document.getElementById('tab'+i).style.left = tableft + offset;
		document.getElementById('tab'+i).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 = 180;//getLeftPos('tab1') - 10;


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

	// 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++) {
		if (i != idNum) {
			document.getElementById('tab' + i).className = "pageTabs";
			document.getElementById('tab' + i).style.zIndex = 2;
			document.getElementById('tab' + i).style.borderStyle = "none";

			document.getElementById('content' + i).className = "pageTabContent";
			document.getElementById('content' + i).style.zIndex = 1;
			document.getElementById('content' + i).style.display = "none";

			document.getElementById(parContainer).style.height = document.getElementById('content'+idNum).offsetHeight + 22;
		} 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");
			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 = document.getElementById('content'+idNum).offsetHeight;

	conEle.style.zIndex = 3;
	tabEle.style.zIndex = 4;
}


function countTabs(parContainer) {
	numTabs = 0;
	for (i = 0; i <= document.getElementById(parContainer).childNodes.length - 1; i++) {
		if (document.getElementById(parContainer).childNodes[i].id.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.
}