/*  notetab.js - Javascript notetab control
 *
 *  TO DO:  Accept a Hover-image
 *  TO DO:  Get rid of globals so we can use more than one of these per page
 * 
 *  Usage:  
 *    > Include this file in the HEAD section of your JSP/HTML, along with the following:
 *          <style type="text/css">
 *              .pane { display:none; }
 *              div.tabs { cursor:hand; }
 *          </style>
 *
 *    > Then add something like this to your BODY section:
 *
 *      var ts = new tabstrip();
 *      ts.addTab (new tab (null, "Product Features / Warranty",
 *              "../common/images/PFW_active.gif",
 *              "../common/images/PFW_passive.gif"));
 *
 *      ts.addTab (new tab (null, "Colors / Finishes & Prices",
 *          "../common/images/CFP_active.gif", 
 *          "../common/images/CFP_passive.gif"));
 *      
 *      ts.write();
 *   </script>
 *    
 *   <!-- You'll have to manually match the ID's with the respective tab number [pn_tabN] like so: -->
 *   <div id="pn_tab0" class="pane"> Contents of first pane </div>
 *   <div id="pn_tab1" class="pane"> Contents of second pane</div>
 *
 *   <script type="text/javascript"> ts.initiate(); </script>
 */

var currentPaneStyle = 0;
var currentTab = 0;
var ntabs= 0;   // may NOT always be same as tabs.length; used by tab()
// var dbg1= document.getElementById("dbg").text1;
// dbg1.value= ntabs;



// 
// tabstrip() - see filecomment
// 
function tabstrip() {
    this.tabs = new Array();
    this.addTab = addTab;
    this.write = writeTabstrip;
    this.initiate= initiate;
}


// 
// tab() - create a new notetab.
// content: if not null, this is used as the contents of the notetab pane
// alttext: if not null, sets the alttext of the notetab images
// imgActive/imgPassive: Path to images for selected/unselected notetabs
// 
function tab(content, alttext, imgActive, imgPassive) {
    this.setId = setId;
    this.write = writeTab;
    this.writePane = writePane;
    
    this.content = content;
    altstuff= ((alttext == null)
        ? ""
        : " alt=\"" + alttext + "\" ");

    this.imgActive= "<img name=\"tab" + ntabs + "a\" id=\"tab" + ntabs
        + "a\" src=\"" + imgActive + "\"" + altstuff + " style=\"display:none\">";
    
    this.imgPassive= "<img name=\"tab" + ntabs + "p\" id=\"tab" + ntabs
        + "p\" src=\"" + imgPassive + "\"" + altstuff + " style=\"display:block; cursor:pointer; cursor:hand;\">";

    ntabs++;
}


// 
// tabstrip::addTab() - add tab to internal array.  
// pass in a tab() object
// 
function addTab(tab) {
    tab.setId("tab" + this.tabs.length);
    this.tabs[this.tabs.length] = tab;
}


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


// 
// Show/hide active/passive image for newly selected (div) and previously selected (current) notetabs
// 
function showPane(div) {

    if (currentTab != 0) {
        document.getElementById(currentTab.id + "a").style.display= "none";
        document.getElementById(currentTab.id + "p").style.display= "block";
    }
    
    document.getElementById(div.id + "a").style.display= "block";
    document.getElementById(div.id + "p").style.display= "none";

    currentTab = div;

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


// unrelated kludge for firefox - hidden section doesn't recede after expanding/collapsing DIV table cells
function refreshPane() {
    showPane (currentTab);
}


// 
// tab::writePane() - render the notetab contents
// If content is null, this is never called, allowing you to drop in your own content.
// See filecomment for details.
// 
function writePane() {
    document.write("<div class='pane' id='pn_" + this.id + "'>" + this.content + "</div>");
}


// 
// tab::write() - render the notetab header
// 
function writeTab() {
    document.write("<td><div id=\"" + this.id 
        + "\" onclick=\"showPane(this)\" class=\"product-tab\">" 
        + this.imgActive 
        + this.imgPassive 
        + "</div></td>");
}


// 
// tabstrip::write() - call this to render the notetab headers
// spacerWidth is LHS padding
// See also: initiate()
// 

function writeTabstrip(spacerWidth) {
    document.write("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"  width=\"100%\" ><tr>");
    if (spacerWidth > 0)
        document.write("<td><img src=\"../common/images/spacer.gif\" width=\"" + spacerWidth + "\" height=\"1\" alt=\"\" border=\"0\"></td>");
    for (var i=0; i<this.tabs.length; i++) {
        this.tabs[i].write();
    }

    document.write("</tr></table>");

    // Pane contents were passed in a variable?
    if (this.tabs[0].content != null) {
        for (var k=0; k<this.tabs.length; k++) {
            this.tabs[k].writePane();
        }

        initiate();
    } // else don't forget to call initiate() when done!

}

/*


function writeTabstrip(spacerWidth) {
    document.write("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>");
    if (spacerWidth > 0)
        document.write("<td><img src=\"../common/images/spacer.gif\" width=\"" + spacerWidth + "\" height=\"1\" alt=\"\" border=\"0\"></td>");
    for (var i=0; i<this.tabs.length; i++) {
        this.tabs[i].write();
    }

    document.write("</tr></table>");

    // Pane contents were passed in a variable?
    if (this.tabs[0].content != null) {
        for (var k=0; k<this.tabs.length; k++) {
            this.tabs[k].writePane();
        }

        initiate();
    } // else don't forget to call initiate() when done!

}



*/


// 
// tabstrip::initiate() - Show the first tab.  
// Call this after calling tabstrip.write() IFF you're handling your own text
// (i.e. you passed in "null" as the first arg to a new tab())
// 
function initiate() { 
    showPane(document.getElementById("tab0"));
}