/*
 * Plasma Tabs - Library for tab controlled navigation in Plasma.
 * Copyright (C) 1995-2006 IonicWeb, LLC.  All rights reserved.
 *
 * This library is only available for use as part of the Plasma 2007
 * Web Application Server by IonicWeb, LLC.  Any other use is currently
 * prohibited.  For more information and license options for this
 * work, please send requests to info@ionicweb.com. 
 *
 * The Plasma license is found at http://ionicweb.com/plasma/license
 */

/*
 * Display Tabs - Displays the master tab set for a tab navigator/
 * screen/section selector.
 *
 * ATTRIBUTES:
 *
 * tab_props - This object contains all information required to generate ther
 *             tab screen including:
 *             width - The physical width of the tab set.
 *             image_path - current path to images based on Plasma URI
 *             prefix - Supports multiple instances of tabs in a single screen.
 *             open_override - Override tab open function
 *             tabs - Array of tab objects
 *             tab - Tab object contains in the tabs array with attribures:
 *                 width - width of tab
 *                 title - tab title
 */
function displayTabs(tab_props)
{
    var rows = 1;
    if ( tab_props.rows && tab_props.rows > 1 )
        rows = tab_props.rows;
        
    var tab_color = "ddddcc";
    if ( tab_props.color && tab_props.color != "" )
        tab_color = tab_props.color;

    var items = tab_props.tabs.length / rows;
    var cur_item = 0;
    
    var start_item = 0;

    if ( !tab_props.default_item )
        tab_props.default_item = 0;
    
    for ( var r=0; r < rows; r++ ) {
    
        var row_items = items;
        
        //Start Tab Table

        document.write("<table border=0 cellpadding=0 cellspacing=0><tr>");
        for ( var i=0; i < r; i++ ) {
            document.write("<td>&nbsp;</td>");
        }
        document.write("<td>");
        document.write("<table width=" + tab_props.width + " cellpadding=0 cellspacing=0 border=0>");
    
        //Set Tab background/form
        document.write("<tr>");
        for ( var i=0; i < row_items; i++ ) {
            document.write("<td height=1 style=\"background-color:white;\"></td>");
            document.write("<td height=1 style=\"background-color:aaaaaa;\"></td>");
            document.write("<td height=1 style=\"background-color:white;\"></td>");
            document.write("<td height=1 style=\"background-color:white;\"></td>");
        }
        document.write("</tr>");

        //Display actual tabs
        document.write("<tr>");
        var total_width = 0;

        var openTabScreenFunction = "openTabScreen";
        if ( tab_props.open_override )
            openTabScreenFunction = tab_props.open_override;
            
        for ( var i=0; i < row_items; i++ ) {
            var tab = tab_props.tabs[cur_item];
            var tab_tag = tab_props.prefix + "_tab" + cur_item;

            total_width = total_width + tab.width;
            
            if ( cur_item == tab_props.default_item ) {
                document.write("<td id=\"" + tab_tag + "_1\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" ><img  height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-left.gif\"></td>");
                document.write("<td width=\"" + tab.width + "\" id=\"" + tab_tag + "_2\" onClick=\"" + openTabScreenFunction + "(" + start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"white-space:nowrap; cursor:default; background-color:white;\" background=\"" + tab_props.image_path + "tabset-saag-bg.gif\">&nbsp;&nbsp;<font id=\"" + tab_tag + "_font\" style=\"font-family: Verdana, Arial, Helvetica, sans-serif; color:black; font-size:8pt;\">" + tab.title + "</font>&nbsp;&nbsp;</td>");
                document.write("<td id=\"" + tab_tag + "_3\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" ><img  height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-right.gif\"></td>");
            } else {
                document.write("<td id=\"" + tab_tag + "_1\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"border-bottom: 1px solid #aaaacc; background-color:" + tab_color + "; \" ><img height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-left.gif\"></td>");
                document.write("<td width=\"" + tab.width + "\" id=\"" + tab_tag + "_2\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"white-space:nowrap; cursor:pointer; border-bottom: 1px solid #aaaacc; background-color:" + tab_color + ";\">&nbsp;&nbsp;<font id=\"" + tab_tag + "_font\" style=\"font-family: Verdana, Arial, Helvetica, sans-serif; color:black; font-size:8pt; text-decoration:underline\">" + tab.title + "</font>&nbsp;&nbsp;</td>");
                document.write("<td id=\"" + tab_tag + "_3\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"border-bottom: 1px solid #aaaacc; background-color:" + tab_color + ";\" ><img height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-right.gif\"></td>");
            }
            if ( i < row_items - 1 )
                document.write("<td width=1 style=\"border-bottom: 1px solid #aaaacc; background-color:white;\"></td>");
            else
                document.write("<td width=" + (tab_props.width - total_width) + " style=\"border-bottom: 1px solid #aaaacc;\">&nbsp;</td>");
                
            cur_item++;
        }
        start_item = cur_item;

        document.write("</tr>");
        //End Tab Table
        document.write("</table>");
        document.write("</td></tr></table>");

    }
    
}

function displayTabs_String(tab_props)
{
    var rows = 1;
    if ( tab_props.rows && tab_props.rows > 1 )
        rows = tab_props.rows;

    var items = tab_props.tabs.length / rows;
    var cur_item = 0;

    var start_item = 0;
    var tab_text = "";

    var tab_color = "ddddcc";
    if ( tab_props.color && tab_props.color != "" )
        tab_color = tab_props.color;

    for ( var r=0; r < rows; r++ ) {
    
        var row_items = items;
        
        //Start Tab Table

        tab_text = tab_text + "<table border=0 cellpadding=0 cellspacing=0><tr>";
        for ( var i=0; i < r; i++ ) {
            tab_text = tab_text + "<td>&nbsp;</td>";
        }
        tab_text = tab_text + "<td>";
        tab_text = tab_text + "<table width=" + tab_props.width + " cellpadding=0 cellspacing=0 border=0>";
    
        //Set Tab background/form
        tab_text = tab_text + "<tr>";
        for ( var i=0; i < row_items; i++ ) {
            tab_text = tab_text + "<td height=1 style=\"background-color:white;\"></td>";
            tab_text = tab_text + "<td height=1 style=\"background-color:aaaaaa;\"></td>";
            tab_text = tab_text + "<td height=1 style=\"background-color:white;\"></td>";
            tab_text = tab_text + "<td height=1 style=\"background-color:white;\"></td>";
        }
        tab_text = tab_text + "</tr>";

        //Display actual tabs
        tab_text = tab_text + "<tr>";
        var total_width = 0;

        var openTabScreenFunction = "openTabScreen";
        if ( tab_props.open_override )
            openTabScreenFunction = tab_props.open_override;
            
        for ( var i=0; i < row_items; i++ ) {
            var tab = tab_props.tabs[cur_item];
            var tab_tag = tab_props.prefix + "_tab" + cur_item;

            total_width = total_width + tab.width;
            
            if ( cur_item == tab_props.default_item ) {
                tab_text = tab_text + "<td id=\"" + tab_tag + "_1\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" ><img  height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-left.gif\"></td>";
                tab_text = tab_text + "<td width=\"" + tab.width + "\" id=\"" + tab_tag + "_2\" onClick=\"" + openTabScreenFunction + "(" + start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"white-space:nowrap; cursor:default; background-color:white;\" background=\"" + tab_props.image_path + "tabset-saag-bg.gif\">&nbsp;&nbsp;<font id=\"" + tab_tag + "_font\" style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size:8pt;\">" + tab.title + "</font>&nbsp;&nbsp;</td>";
                tab_text = tab_text + "<td id=\"" + tab_tag + "_3\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" ><img  height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-right.gif\"></td>";
            } else {
                tab_text = tab_text + "<td id=\"" + tab_tag + "_1\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"border-bottom: 1px solid #aaaacc; background-color:" + tab_color + "; \" ><img height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-left.gif\"></td>";
                tab_text = tab_text + "<td width=\"" + tab.width + "\" id=\"" + tab_tag + "_2\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"white-space:nowrap; cursor:pointer; border-bottom: 1px solid #aaaacc; background-color:" + tab_color + ";\">&nbsp;&nbsp;<font id=\"" + tab_tag + "_font\" style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size:8pt; text-decoration:underline\">" + tab.title + "</font>&nbsp;&nbsp;</td>";
                tab_text = tab_text + "<td id=\"" + tab_tag + "_3\" onClick=\"" + openTabScreenFunction + "(" +  start_item + "," + cur_item + "," + row_items + "," + tab_props.tabs.length + ",'" + tab_props.image_path + "','" + tab_props.prefix + "');\" style=\"border-bottom: 1px solid #aaaacc; background-color:" + tab_color + ";\" ><img height=15 width=2 src=\"" + tab_props.image_path + "tabset-saag-right.gif\"></td>";
            }
            if ( i < row_items - 1 )
                tab_text = tab_text + "<td width=1 style=\"border-bottom: 1px solid #aaaacc; background-color:white;\"></td>";
            else
                tab_text = tab_text + "<td width=" + (tab_props.width - total_width) + " style=\"border-bottom: 1px solid #aaaacc;\">&nbsp;</td>";
                
            cur_item++;
        }
        start_item = cur_item;

        tab_text = tab_text + "</tr>";
        //End Tab Table
        tab_text = tab_text + "</table>";
        tab_text = tab_text + "</td></tr></table>";

        return tab_text;
    }
    
}


/*
 * Open Tab Screen - Properly displays the selected tab screen and closes
 * the non selected tab screens when a tab is clicked.
 *
 * ATTRIBUTES:
 *
 * tab_idx    - The index of the tab that was clicked.
 * total_tabs - The total number of tabs available.
 * image_path - The Plasma URI specific path to images.
 */
function openTabScreen(start_item, tab_idx, total_tabs, total_all_tabs, image_path, tab_prefix)
{
    for ( var i=0; i < total_all_tabs; i++ ) {

        var screen_tag_tags = tab_prefix + "_tab" + i;
        var screen_tag_scrn = tab_prefix + "_scrn_tab_tag" + i;
        
        var t_1 = document.getElementById(tab_prefix + "_tab" + i + "_1");
        var t_2 = document.getElementById(tab_prefix + "_tab" + i + "_2");
        var t_3 = document.getElementById(tab_prefix + "_tab" + i + "_3");

        t_1.style.borderBottom = "1px solid #aaaacc";
        t_2.style.borderBottom = "1px solid #aaaacc";
        t_3.style.borderBottom = "1px solid #aaaacc";

        var scrn_tag = document.getElementById(screen_tag_scrn);
        var tag_2 = document.getElementById(screen_tag_tags + "_2");
        var font_tag = document.getElementById(screen_tag_tags + "_font");
        font_tag.style.textDecoration = "underline";
        tag_2.background = "";
        tag_2.style.backgroundColor = "ddddcc";
        tag_2.style.cursor = "pointer";
        scrn_tag.style.display = "none";
    }

    for ( var i=0; i < total_tabs; i++ ) {
        
        var screen_tag_tags = tab_prefix + "_tab" + (i+start_item);
        var screen_tag_scrn = tab_prefix + "_scrn_tab_tag" + (i+start_item);

        var scrn_tag = document.getElementById(screen_tag_scrn);
        var tag_2 = document.getElementById(screen_tag_tags + "_2");
        var font_tag = document.getElementById(screen_tag_tags + "_font");
        
        if ( tab_idx == (i+start_item) ) {
            font_tag.style.textDecoration = "";
            tag_2.background = image_path + "tabset-saag-bg.gif";
            tag_2.style.backgroundColor = "white";
            tag_2.style.cursor = "default";
            scrn_tag.style.display = "";

            var t_1 = document.getElementById(tab_prefix + "_tab" + i + "_1");
            var t_2 = document.getElementById(tab_prefix + "_tab" + i + "_2");
            var t_3 = document.getElementById(tab_prefix + "_tab" + i + "_3");

            t_1.style.borderBottom = "";
            t_2.style.borderBottom = "";
            t_3.style.borderBottom = "";
    
        }
    }
}