// author SS, 17 Sept 2008

// configuration and set up

// each set of tabs is an array of the tab names.  You can see how this relates to the HTML below.
var tabSet1 = ["a","b","c"];
var tabSet2 = ["d","e","f","g","h"];

function onloadHandler()
{
	// this call gets the tabs from the URL (this allows deep-linking)
  var vals = getHashValues('URL');
	
	// then you set the initial tabs to either the one set by the URL or an alternative.
	// if you don't specify a tab, then the first one will be shown automatically.
  var initTab1 = vals.tab1 || ''; // initial tab is tab1=__ (from URL) OR blank (i.e., first tab will show; in this case, tab "a")
  var initTab2 = vals.tab2 || 'd'; // initial tab is tab2=__ (from URL) or tab "e"

	// these calls initialize the tabs
  initTabSet(tabSet1,initTab1);
  initTabSet(tabSet2,initTab2);
}

$(document).ready(onloadHandler);

// below is the code to handle the tabs
function initTabSet(tabSet,initTab)
{
  if(tabSet == null || tabSet.length <= 0) { return; }
  if(initTab == null || initTab == "") { initTab = tabSet[0]; }
  var tabFlag = false;

  var i;
  for(i = 0; i < tabSet.length; i++)
  {
    var tabSelector = '#' + tabSet[i] + '-tab';
    var contentSelector = '#' + tabSet[i] + '-content';
    var selectFunction = function(event) { showTab(event.data.tabSet,event.data.tab); }
    $(tabSelector).bind('click',{ "tabSet" : tabSet, "tab" : tabSet[i] },selectFunction);
    
    if(tabSet[i] == initTab)
    {
      $(tabSelector).attr({ "class": "tab-on" });
      $(contentSelector).css({ "display": "block" });
      tabFlag = true;
    }
    else
    {
      $(tabSelector).attr({ "class": "tab-off" });
      $(contentSelector).css({ "display": "none" });
    }
  }

  // if no tab was selected, it means that initTab was not a valid tab.  so select the first tab
  if(tabFlag == false)
  {
    $('#' + tabSet[0] + '-tab').click();
  }
}


function showTab(tabSet,tab)
{
  var i;
  for(i = 0; i < tabSet.length; i++)
  {
    if(tabSet[i] == tab)
    {
      $('#' + tabSet[i] + '-tab').attr({ "class" : "tab-on" });
      $('#' + tabSet[i] + '-content').css({ "display" : "block" });
    }
    else
    {
      $('#' + tabSet[i] + '-tab').attr({ "class" : "tab-off" });
      $('#' + tabSet[i] + '-content').css({ "display" : "none" });
   }
  }
}

function getHashValues(src)
{
  var srcStr;
  if(src == null || src == '') { src = 'HASH'; }
  if(src == 'HASH')
  {
    if(window.location.hash.length <= 1)
    {
      return {};
    }
    var h = window.location.hash;
    srcStr = h.substr(1,h.length);
  }
  else
  {
    // src == 'URL'
    var str = window.location.search;
    var end = str.indexOf('#');
    if(end <= 0) { end = str.length; }
    srcStr = str.substring(1,end);
  }
  
  var pairs = srcStr.split('&');
  var values = {};
  var i;
  for(i = 0; i < pairs.length; i++)
  {
    var d = pairs[i].split('=');
    values[d[0]] = d[1];
  }
  
  return values;
}