var currentPaneStyle = 0;
var currentTab = 0;
var toCamelCaseExp = /-[a-zA-Z]{1}/;

function tabstrip()
{
   this.tabs = new Array();
   this.add = addTab;
   this.write = writeTabstrip;
}

function tab(caption,content)
{
  this.setId = setId;
  this.caption = caption;
  this.content = content;
  this.write = writeTab;
  this.writeContent = writePane;
}

function addTab(tab)
{
  tab.setId("tab" + this.tabs.length);
  this.tabs[this.tabs.length] = tab;
}

function setId(id)
{
  this.id = id;
}

function showPane(div)
{

  if(currentTab != 0)
  {
  	/** Change Previously Selected Submenu Color Back to Normal*/
    currentTab.style.backgroundColor = "#0f1891";
    currentTab.style.color = "#ffffff";
  }

  /** Change Submenu Color to White and font to Black*/
  var id = div.id;
  var color = getSubMenuColor(div, id);
  div.style.background = color;
  currentTab = div;

  if(currentPaneStyle != 0)
  currentPaneStyle.display = "none";
  var paneId = "pn_" + div.id;
  var objPaneStyle = document.getElementById(paneId).style;
  objPaneStyle.display = "inline";
  currentPaneStyle = objPaneStyle;
}

function writePane()
{
  document.write("<div class='pane' id='pn_" + this.id + "'>" + this.content + "</div>");
}

function writeTab()
{
   document.write("<td class='tabs' valign='middle'><div class='tabs' id='" + this.id + "' onmouseover='onMouseOver(this)'" + " onmouseout='onMouseOut(this)'"  + " onclick='showPane(this)'>" + this.caption + "</div></td>");
}

function writeTabstrip()
{
  document.write("<div class='tabstrip'><table class='tabs' cellpadding='0' cellspacing='4'><tr>");
  
  for(var i = 0; i < this.tabs.length; i++)
  {
    this.tabs[i].write();
  }
  
  document.write("</tr></table></div>");
  
  for(var k = 0; k < this.tabs.length; k++)
  {
    this.tabs[k].writeContent();
  }
  
}

function onMouseOut(obj)
{
  var paneId = "pn_" + obj.id;
  var objPaneStyle = document.getElementById(paneId).style;
  var status = document.getElementById(paneId).style.display;
  
  if (status != "inline"){
  	var visibility = obj.style.visibility;
	obj.style.background= "#0f1891";
	obj.style.color = "#ffffff";
  }
}

function onMouseOver(obj)
{
  var id = obj.id;
  var color = getSubMenuColor(obj, id);
  obj.style.background = color;
}

function getStyle(el, style) {
   	
   	if(!document.getElementById) return;
   
  	var value = el.style[toCamelCase(style)];
   
    if(!value)
        if(document.defaultView)
            value = document.defaultView.
                 getComputedStyle(el, "").getPropertyValue(style);
       
        else if(el.currentStyle)
            value = el.currentStyle[toCamelCase(style)];
     
     return value;
}

/** toCamelCase(input)
 * Converts string input to a camel cased version of itself.
 * For example:
 * toCamelCase("z-index"); // returns zIndex
 * toCamelCase("border-bottom-style"); // returns borderBottomStyle.
 */

function toCamelCase(input) {
    var ret = input;
    var exp = toCamelCaseExp;
    
    for(var match = ret.match(exp); match != null; match = ret.match(exp)) {
        ret = ret.replace(match[0], match[0].toUpperCase().substring(1));
    }
    
    return ret;
}

function getSubMenuColor(obj, tab) {
  var color = "#ffffff";
  var id = obj.id;
  switch(id)
  {
  	case "tab0":
		color = "#367A7A";
	  	break;
  	
  	case "tab1":
	  	color = "#716BA0";
	  	break; 
  	
  	case "tab2":
	  	color = "#036BA3";
	  	break; 
  	
  	case "tab3":
	  	color = "#918662";
	  	break; 
  	
  	case "tab4":
	  	color = "#862D35";
	  	break;
  }
  return color;
}