// Tabs.js - simple HTML tabbed panes, with rounded corners
//
// Using these routines is very easy.
//
// 1) In your HTML, make an element for the tabs to appear in:
//
//        <div id="tabs"></div>
//
// 2) Load the routines into your code:
//
//        <script src="ntabs.js" type="text/javascript"></script>
//
// 3) Create a Tabs object, passing it the HTML element:
//
//        var tabs = new Tabs( document.getElementById( 'tabs' ) );
//
//    If you want to set the foreground and background colours, add them
//    as a second argument, in hexadecimal format:
//
//        var tabs = new Tabs( document.getElementById( 'tabs' ), 
//			 "#48D1CC,#C3B371" );
//
//    Similarly, a third element (make the second empty if necessary) is 
//    the width of the tab frame; using "100%" to this will cause the tabs 
//    to fit inside their containing element.
// *** THIS IS WRONG.  DOCUMENT OPTIONS ***
//
// 4) Call the Add method for each pane you want to add.  The arguments are
//    the name of the tab, and a routine to call when the tab first gets 
//    activated:
//
//        tabs.Add( 'Tab One', TabOneActivate );
//
//    If you provide a third option "always", then the routine will be called
//    every time the tab is activated, not just when it is created.
//
//    If, instead of a function, you give it the ID of an element in the 
//    document then that item will become the tab contents
//
// 5) Declare the tab activation routines.  They get passed the HTML element
//    where the pane should go.  The first time each routine is called,
//    it should create the pane's contents:
//
//        function TabOneActivate( paneElement )
//            {
//            if ( paneElement.innerHTML == '' )
//                paneElement.innerHTML = 'This is tab one.'
//            }
//
// That's it!  Everything else happens automatically.
//
//
// The current version of this code is always available at:
// http://www.acme.com/javascript/
//
//
// Copyright © 2006 by Jef Poskanzer <jef@mail.acme.com>.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions
// are met:
// 1. Redistributions of source code must retain the above copyright
//    notice, this list of conditions and the following disclaimer.
// 2. Redistributions in binary form must reproduce the above copyright
//    notice, this list of conditions and the following disclaimer in the
//    documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
// ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
// FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
// DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
// OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
// HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
// LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
// OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
// SUCH DAMAGE.
//
// For commentary on this license please see http://www.acme.com/license.html

// This version June-November 2007 by Nick Atty:
//   uses solid colours
//   rounded corners
//   hides undisplayed items (so form submission works)
//   supports nested tabs
//   can pass a pre-existing div into a tab
//   can have backgrounds with legends

var Tabs = new Object;
Tabs = function (element, options)
    {
    this.element = element;
    this.inactive = '#ADD8E6';
    this.active = '#87CEFA';
    var legend = '';

    if(typeof(options) == 'string') {
      var a = options.split(',');
      this.active = a[1];
      this.inactive = a[0];
    }
    if(typeof(options) == 'object') {
      if(options.active)
        this.active = options.active;
      if(options.inactive)
        this.inactive = options.inactive;
      if(options.legend)
        legend = options.legend;
    }

    // We create the following structure inside the supplied element:
    // <table border="0" cellpadding="0" cellspacing="0">
    //   <tbody>
    //     <tr>
    //       <td align="left">
    //         <div>
    //           (tabs go here in divs)
    //         </div>
    //       </td>
    //     </tr>
    //     <tr>
    //       <td>
    //         <div>
    //           (panels go here)
    //         </div>
    //       </td>
    //     </tr>
    //   </tbody>
    // </table>
    // 

    var table1Element = document.createElement( 'table' );
    table1Element.border = '0';
    table1Element.cellPadding = '0';
    table1Element.cellSpacing = '0';

    // create the legend frame if necessary.  We use a table so that it
    // expands to fit the inner table that is the tabs.
    if(legend) {
      var fE1 = document.createElement('table');
      var fE2 = document.createElement('tbody');
      fE1.appendChild(fE2);
      var fE3 = document.createElement('tr');
      fE2.appendChild(fE3);
      element.appendChild(fE1);
      var frameElement = document.createElement('td');
      fE3.appendChild(frameElement);
      var uborder = document.createElement('div');
      uborder.innerHTML = '<b class="rtop"><b class="r9"></b><b class="r6"></b><b class="r4"></b><b class="r3"></b><b class="r2-2"></b><b class="r1-3"></b></b>';
      frameElement.appendChild(uborder);
      var legendElement = document.createElement('div');
      legendElement.className = 'ntabs-legend';
      legendElement.style.textAlign = 'center';
      legendElement.innerHTML = legend;
      legendElement.style.backgroundColor = '#aaffaa';
      frameElement.appendChild(legendElement);
      var boxElement = document.createElement('div');
      boxElement.style.paddingLeft = '20px';
      boxElement.style.paddingRight = '20px';
      boxElement.style.paddingBottom = '10px';
      boxElement.style.backgroundColor = '#aaffaa';
      frameElement.appendChild(boxElement);
      boxElement.appendChild( table1Element );
      if(options.lowerbox) {
        var lbox = document.createElement('div');
	lbox.style.backgroundColor='#aaffaa';
	lbox.style.paddingLeft='100px';
	lbox.id = options.lowerbox;
	frameElement.appendChild(lbox);
      }
      var lborder = document.createElement('div');
      lborder.innerHTML = '<b class="rtop"><b class="r1-3"></b><b class="r2-2"></b><b class="r3"></b><b class="r4"></b><b class="r6"></b><b class="r9"></b></b>';      
      frameElement.appendChild(lborder);
    } else {
      element.appendChild( table1Element );
    }
 
   var tbody1Element = document.createElement( 'tbody' );
    table1Element.appendChild( tbody1Element );

    var tr1Element = document.createElement( 'tr' );
    tbody1Element.appendChild( tr1Element );

    var td1Element = document.createElement( 'td' );
    td1Element.align = 'left';
    tr1Element.appendChild( td1Element );

    var div1Element = document.createElement('div');
    div1Element.style.cssText = 'margin-left: 15px';
    td1Element.appendChild( div1Element );

    var tr3Element = document.createElement( 'tr' );
    tbody1Element.appendChild( tr3Element );

    var td4Element = document.createElement( 'td' );
    td4Element.style.cssText = Tabs.tabStyle;
    td4Element.innerHTML = '<b class="rtop"><b class="r9"></b><b class="r6"></b><b class="r4"></b><b class="r3"></b><b class="r2-2"></b><b class="r1-3"></b></b>';
    td4Element.style.background = this.active;
    tr3Element.appendChild( td4Element );
    var paneElement = document.createElement('div');
    paneElement.style.cssText = Tabs.panesStyle;
    td4Element.appendChild(paneElement);
    if(options == 'all') {
      var trailer = document.createElement('b');
      trailer.className = 'rbot';
      trailer.innerHTML = '<b class="r1-3"></b><b class="r2-2"></b><b class="r3"></b><b class="r4"></b><b class="r6"></b><b class="r9"></b>';
      td4Element.appendChild(trailer);
    }
    Tabs.Corners(td4Element); 
    this.tabsElement = div1Element;
    this.panesElement = paneElement;

    this.items = [];
    this.activeItem = null;

    };

Tabs.tabStyle = 'margin: 0px; margin-left: 10px; border: 0; padding: 0; float:left';
Tabs.panesStyle = 'margin: 0; border: 0; padding: 1em;';

Tabs.globalItems = [];

Tabs.prototype.Add = function (name, activateCallback, options) {

  var globalItemId = Tabs.globalItems.length;

  var tabElement = document.createElement( 'div' );
  tabElement.style.cssText = Tabs.tabStyle;
  tabElement.style.backgroundColor = this.inactive;
  tabElement.innerHTML = '<b class="rtop"><b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1-1"></b></b>';
  tabElement.innerHTML += '&nbsp;<a class="ntab-link" href="javascript:Tabs.Switch(' + globalItemId + ')">' + name + '</a>&nbsp;';
  this.tabsElement.appendChild(tabElement);
  Tabs.Corners(tabElement);
  if(typeof(activateCallback) == 'string') {
    var pane = document.getElementById(activateCallback);  
    pane.style.display = "none";
    var item = new Tabs.Item( this, name, null, tabElement, pane, "never");    
    this.panesElement.appendChild(pane);
  } else {
    var paneElement = document.createElement( 'div' );
    var item = new Tabs.Item( this, name, activateCallback, tabElement, paneElement, options );
  }
  this.items.push( item );
  Tabs.globalItems.push( item );

  if ( this.items.length == 1 )
    item.Activate();
};

Tabs.Item = function (parent, name, activateCallback, tabElement, paneElement, options) {
    this.parent = parent;
    this.name = name;
    this.activateCallback = activateCallback;
    this.tabElement = tabElement;
    this.paneElement = paneElement;
    this.neverCall = false;
    if(typeof(options) != 'undefined' && options != null && options != "") {
      if(options.find("always"))
        this.alwaysCall = true;
      if(options.find("never"))
        this.neverCall = true;
    }
};

Tabs.Item.prototype.Activate = function ()
    {
    if ( this.parent.activeItem != null ) {
      this.parent.activeItem.tabElement.style.backgroundColor = this.parent.inactive;
      this.parent.activeItem.paneElement.style.display = "none";
      Tabs.Corners(this.parent.activeItem.tabElement); 
    }
    this.parent.activeItem = this;
    if(this.paneElement.innerHTML == '' && this.neverCall != true)
      this.parent.panesElement.appendChild( this.paneElement );
    this.tabElement.style.backgroundColor = this.parent.active;
    if((this.alwaysCall || this.paneElement.innerHTML == '') && this.neverCall != true)
      this.activateCallback( this.paneElement );
    this.parent.activeItem.paneElement.style.display = "block";
    this.parent.activeItem.paneElement.style.backgroundColor = this.parent.active;
    this.parent.activeItem.tabElement.blur();  // remove dotted outline
    Tabs.Corners(this.parent.activeItem.tabElement); 
   };


Tabs.Switch = function ( globalItemId )
    {
    Tabs.globalItems[globalItemId].Activate();
    };

Tabs.Corners = function(item) {
  var fg = item.style.backgroundColor;
  var bits = item.getElementsByTagName("b");
  var bg = getBackground(item.parentNode);
  for (var i = 0; i < bits.length; i++) { 
    var q = bits[i].getAttribute("class");
    if(q == 'rtop' || q == 'rbot') {
      bits[i].style.background = bg;
    } else {
      bits[i].style.background = fg;       
    }
  }
};

function getBackground(el) {
  if (el.currentStyle) {
    var y = el.currentStyle["backgroundColor"];
  } else if (document.defaultView.getComputedStyle) {
    var y = document.defaultView.getComputedStyle(el,null).getPropertyValue("background-color");
  }
  if(y != 'transparent')
    return y;
  return getBackground(el.parentNode); 
}

String.prototype.find=function(what){
  return(this.indexOf(what)>=0 ? true : false);
}