////////////////////
//  TABBED PANEL  //
////////////////////
var tabs_back = document.getElementById("tabs");
var panelcount;
var currenttab = 0;
var images = Array();
var tabs = Array();
var panels = Array();



////////////////////////
//  PUBLIC FUNCTIONS  //
////////////////////////
function buildPanel(imgBaseName)
{
    var panelsChildren = document.getElementById("panel").childNodes;
    var tabsChildren = document.getElementById("tabs").childNodes

    for (var i in tabsChildren)
    {
        if (tabsChildren[i].nodeName == "A")
        {
            tabs[tabs.length] = tabsChildren[i];
        };
    };

    for (var j in panelsChildren)
    {
        if (panelsChildren[j].className == "content_panel")
        {
            panels[panels.length] = panelsChildren[j];
        };
    };
    
    for (var index in tabs)
    {
      images[index] = Array();

      for (var itwo in panels)
      {
          // PRELOAD IMAGES 
          var i1 = Number;
          i1 = Number(index) + 1;
          var i2 = Number;
          i2 = Number(itwo) + 1;
          var thispath = imgBaseName + i1 + i2 + ".gif";
          images[index][itwo] = new Image;
          images[index][itwo].src = thispath;
      };
      
      tabs[index].index = index;
      
      // ADD CLICK, ROLLOVER, AND ROLLOUT EVENTS
      addEvent( tabs[index], 'click', function() { return tab_click(this.index) } );
      addEvent( tabs[index], 'mouseout', function() { return tab_out(this.index) } );
      addEvent( tabs[index], 'mouseover', function () { return tab_over(this.index) } );


      // HIDE ALL BUT 1ST PANEL 
      if (index != 0)
      {
        panels[index].style.display = "none";
      }

    };
    
    var newValue = ("url('" + images[0][0].src + "');");
    tabs_back.style.backgroundImage = "url(" + images[0][0].src + ")";
};


function tab_over(index)
{
    var thisImage = "url(" + String(images[currenttab][index].src + ")");
    tabs_back.style.backgroundImage = thisImage;
};

function tab_out(index)
{
    var thisImage = "url(" + String(images[currenttab][currenttab].src + ")");
    tabs_back.style.backgroundImage = thisImage;
};

function tab_click(index)
{
    var thisImage = "url(" + String(images[index][index].src) + ")";
    tabs_back.style.backgroundImage = thisImage;
    currenttab = index;

    displayPanel(index);
};



function displayPanel(index)
{
    for (var i in panels)
    {
        if(i == index)
        {
          panels[i].style.display = "block";
        }
        else
        {
          panels[i].style.display = "none";
        };
    };
};








function addEvent(element, type, handler) {
  // assign each event handler a unique ID
  if (!handler.$$guid) handler.$$guid = addEvent.guid++;
  // create a hash table of event types for the element
  if (!element.events) element.events = {};
  // create a hash table of event handlers for each element/event pair
  var handlers = element.events[type];
  if (!handlers) {
    handlers = element.events[type] = {};
    // store the existing event handler (if there is one)
    if (element["on" + type]) {
      handlers[0] = element["on" + type];
    }
  }
  // store the event handler in the hash table
  handlers[handler.$$guid] = handler;
  // assign a global event handler to do all the work
  element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;

function removeEvent(element, type, handler) {
  // delete the event handler from the hash table
  if (element.events && element.events[type]) {
    delete element.events[type][handler.$$guid];
  }
};

function handleEvent(event) {
  // grab the event object (IE uses a global event object)
  event = event || window.event;
  // get a reference to the hash table of event handlers
  var handlers = this.events[event.type];
  // execute each event handler
  for (var i in handlers) {
    this.$$handleEvent = handlers[i];
    this.$$handleEvent(event);
  }
};