/*
 * $Id: tabifier.js,v 0.4 2006/03/07 19:29:02 dankogai Exp dankogai $
 */

if ( typeof(DK) == 'undefined' ) DK = function() {};

var tabClassName;
var tabBottom;
var tabGap;
var tabPadding;
var tabCloseColor;
var tabOpenColor;
var tabBodyColor;

DK.Tabifier = function (){
  function $(id){ return document.getElementById(id) }
  this.inited = 0;
  if (!tabClassName) tabClassName  = 'tab';
  if (!tabBottom)  tabBottom  = '4px';
  if (!tabGap)     tabGap     = '1em';
  if (!tabPadding) tabPadding = '0.5em';
  if (!tabCloseColor) tabCloseColor = '#ccc';
  if (!tabOpenColor)  tabOpenColor  = '#fff';
  if (!tabBodyColor)  tabBodyColor  = '#fff';
  
  this.close = function(n){
    n.style.border = "solid 1px";
    n.style.borderColor = "#000";
    n.style.backgroundColor = tabCloseColor;
    n.style.marginBottom = 0;
    n.style.marginRight = tabGap;
    n.style.padding = tabPadding;
    n.style.paddingBottom = tabBottom;
    n.style.fontWeight = 'normal';
  }
  this.open = function(n){
    n.style.border = "solid 1px";
    n.style.borderColor = "#000 #000 #fff #000";
    n.style.backgroundColor = tabOpenColor;
    n.style.marginBottom = 0;
    n.style.marginRight = tabGap;
    n.style.padding = tabPadding;
    n.style.paddingBottom = tabBottom;
    n.style.fontWeight = 'bold';
  }
  this.pick = function(tabID){
    if (! document.getElementById) return;
    var headerID = tabID + '.header';
    for (var n = $('tabheader').firstChild; n ; n = n.nextSibling){
      if (n.nodeName != 'SPAN') continue;
      (n.id == headerID) ? this.open(n) : this.close(n);
    }
    $('tabbody').innerHTML = $(tabID).innerHTML;
  };
  var ua = navigator.userAgent;
  this.init = function(){
    if (this.inited) return;
    var tabcount = 0;
    var tabtitle = {};
    var divs = document.getElementsByTagName("DIV");
    for (var i = 0; i < divs.length; i++ ){
       if (divs[i].className != tabClassName) continue;
       divs[i].style.display = 'none';
       divs[i].id            = tabClassName + tabcount++;
       var title = divs[i].getAttribute('title') || divs[i].id;
       tabtitle[divs[i].id] = title;
       // <span id="tab0.header" onclick="tab.pick('tab0')">tab0</span>
       var span = document.createElement("span");
       span.id = divs[i].id + '.header';
       span.setAttribute('onclick', 'tab.pick(\''+divs[i].id+'\')');
       span.innerHTML = title;
       $('tabheader').appendChild(span);
    }
    $('tabbody').style.border =  'solid 1px #000';
    $('tabbody').style.marginTop = tabBottom;
    $('tabbody').style.backgroundColor = tabBodyColor;
    $('tabbody').style.padding   = '0.5em';
    $('tabheader').style.margin  = 0;
    $('tabheader').style.padding = 0;
    if (!ua.match(/KHTML/) && ua.match(/Gecko/i)){ /* so subtle */
      $('tabheader').style.lineHeight = '100%';
    }
    this.pick(tabClassName + 0);
    this.inited = 1;
  };
  return this;
}

var tab = new DK.Tabifier();
window.onload = function(e){ tab.init() }