/**
 * TabControl JavaScript Class
 *
 * Copyright Peter M. Laurina 2008
 * The use or modification of this property
 * is strictly prohibited unless with written
 * permission from myself, the author.  For
 * questions, please contact me via email at
 * pete at zionvier dot com 
 */


/**
 * Constructor for the TabControl
 * 
 * @param divID   The div in the html code to be taken over by this control
 * @param iconLoc The path to the icon images used for the control
 */
function TabControl(divID, iconLoc) 
{
    this.iconPath = iconLoc;  //where are the icons?
    this.tabs = new Array();  //all the tabs
    this.selectedTab = null;  //the tab currently selected
    this.div = document.getElementById(divID); //take over the div
        
    this.tabClass = "zv_tabdiv";  //the class for the container of the tabs
    this.tabDisplayClass = "zv_tabDisplay"; //The class for the display area
    this.tabBarClass = "zv_tabbar";
    this.tabBaseClass = "zv_tabBase";
    this.tabalinkCommonClass = "zv_tabalinkCommon";
    this.tabalinkClass = "zv_tab_alink"; //the class for the tabs themselves
    this.tabselectedalinkClass = "zv_tabselectedalink"; //class for selected tabs
    this.tabImgClass = "zv_tabImg";
    this.tabCapSpanClass = "zv_tabCapSpan";
    
    this.tabBase = document.createElement('div');
    this.tabBase.className = this.tabBaseClass;
    this.tabsDiv = document.createElement('div');
    this.tabsDiv.className = this.tabClass;
    this.displayDiv = document.createElement('div');
    this.displayDiv.className = this.tabDisplayClass;
    
    var tab = document.createElement('div');
    tab.className = this.tabBarClass;
    tab.appendChild(this.tabBase);
    tab.appendChild(this.tabsDiv);
    this.div.appendChild(tab);
    this.div.appendChild(this.displayDiv);
    
    this.clickHandler = null; //This holds the function to execute when an object is clicked.
    
    //Send the right click command to my function instead of the browsers
    if ( isIE ) //Not sure if this needs to get done for IE7 or if IE7 is normal now.
      this.div.attachEvent("oncontextmenu", TabControl.onContextClick );   
    else
      this.div.addEventListener("contextmenu", TabControl.onContextClick, false); 
}

/*
 * on right click... stop it!
 */
TabControl.onContextClick = function( event )
{
    Utils.stopEvent(event); 
}

/*
 * Add a tab to the control
 * 
 * @param divID   The div that will be displayed when the tab is clicked
 * @param cmd     The command associated with this tab, this can be used later in a switch statement handling the onclick event for the tabs.  This needs to be unique for each tab on this controls instance
 * @param icon    What icon should be displayed on the tab?  null is allowed if you don't want an icon
 * @param caption This is what's displayed on the tab itself
 * 
 * @returns       Returns the reference to the tab that was just created
 */
TabControl.prototype.addTab = function(divID, cmd, icon, caption)
{
    var tab = new TabObject(this, divID, cmd, icon, caption);
    this.tabs[cmd] = tab;
    
    this.tabsDiv.appendChild(tab.alink); //put that tab into the control for real
    return tab;
}

TabControl.prototype.addSpace = function(width)
{
    var space = '<a style="width:' + width + 'px;" class="zv_tabSpace" href="#"><span class="zv_tabCapSpan"/></a>';
    this.tabsDiv.innerHTML += space;
}

TabControl.prototype.select = function(tabCmd)
{
    if (this.tabs[ tabCmd ] != null)
      this.tabs[tabCmd].select();  //call the select method of that tab
}

TabControl.prototype.getSelected = function()
{        
    return  this.selectedTab;
}

TabControl.prototype.unSelect = function()
{        
    if ( this.selectedTab != null )
      this.selectedTab.unSelect(); 
}

/**
 * Allows you to define your own event handler function for the onClick
 * event.
 * 
 * @param clickHandler  a pointer to a function to get called
 */
TabControl.prototype.onClick = function( clickHandler )
{
    this.clickHandler = clickHandler;
}

TabControl.onTabControlClick = function ( event )
{  
    var obj = Utils.getObjFromEvent(event);

    //object that has tab
    while ( obj != null && obj.tab == null )
    obj = obj.parentNode;

    if ( obj == null )
    return;

    //stop the bubble effect
    obj.blur();
    Utils.stopEvent( event ); 

    //grab the tab and controller
    var tab = obj.tab;
    var tabControl = tab.tabControl;

    //if the tab that was clicked is already the selected tab, there's nothing to do
    if ( tabControl.selectedTab == tab )
    return;

    //call the function the user set to handle click events
    if ( tabControl.clickHandler != null )
    tabControl.clickHandler( tabControl, tab, event );

    //be sure to select the tab that was selected.
    tab.select();
}



/**
 * TabObject  These get placed into the TabControl when you do an AddTab
 */

function TabObject(tabControl, divID, cmd, icon, caption)
{
    this.tabControl = tabControl;
    this.divID = divID;
    this.cmd = cmd;
    this.icon = icon;
    this.capion = caption;
    this.isLoaded = false;
    
    this.alink = null; //contains the entire link
    
    this.iconImg = document.createElement('img');
    this.iconImg.src = Strings.makeUrlPath( this.tabControl.iconPath, (icon==null)?"ico-none.gif" : icon );
    Utils.addClassName(this.iconImg, this.tabControl.tabImgClass );
    if (icon==null)
       this.iconImg.style.width = "1px";
   
    this.capSpan = document.createElement('span');
    this.capSpan.innerHTML = caption;
    Utils.addClassName(this.capSpan, this.tabControl.tabCapSpanClass);
    if (icon==null)
       this.capSpan.style.marginLeft = "1px";
   
    this.alink = document.createElement("A");
    this.alink.href = "#";  
    this.alink.className = this.tabControl.tabalinkCommonClass;
    Utils.addClassName(this.alink, this.tabControl.tabalinkClass)
    this.alink.appendChild(this.iconImg);
    this.alink.appendChild(this.capSpan);
    
    this.alink.tab = this; //look at myself so I can find me later

    if ( isIE )                                  
      this.alink.attachEvent("onclick", TabControl.onTabControlClick );            
    else
      this.alink.addEventListener("click", TabControl.onTabControlClick, false);   
  
    this.tabControl.displayDiv.appendChild(document.getElementById(divID));
}

TabObject.prototype.select = function()
{        
    if ( this.tabControl.selectedTab == this)
        return;

    if ( this.tabControl.selectedTab != null )
    {
         this.tabControl.selectedTab.unSelect();   
    }

    Utils.removeClassName(this.alink, this.tabControl.tabalinkClass);
    Utils.addClassName( this.alink, this.tabControl.tabselectedalinkClass );

    if ( !Strings.isEmpty( this.divPanelId ) )
        Utils.showDiv( this.divPanelId );

    this.tabControl.selectedTab = this;
    Utils.showDiv(this.tabControl.selectedTab.divID);
}

TabObject.prototype.loaded = function()
{
    this.isLoaded = true;
}

TabObject.prototype.unSelect = function()
{
    if ( this.tabControl.selectedTab == this )
    {
        Utils.hideDiv(this.tabControl.selectedTab.divID);
        this.tabControl.selectedTab = null;
    } 
    
    Utils.addClassName(this.alink, this.tabControl.tabalinkClass);
    Utils.removeClassName( this.alink, this.tabControl.tabselectedalinkClass );
    
    
    if ( !Strings.isEmpty( this.divID ) )
        Utils.hideDiv( this.divID );
}