function TabbedPane(selTabClass, unSelTabClass){
    // Two arrays, one of tabs, one of content
    this.tabs = new Array();
    this.panes = new Array();
    this.selectedTabClassName = selTabClass;
    this.unselectedTabClassName = unSelTabClass;

    // The addTab function requires a tab element and a content element and a
    // tab ID to associate the tab and the pane with each other.
    this.addTab = function(tab, pane)
    {
        if ( this.tabs.length != this.panes.length ) return false; // Internal error

        /*my code starts here*/   
       	var index=this.tabs.length;
        this.tabs[index]=document.getElementById(tab);
        this.panes[index]=document.getElementById(pane);

        // Add Click listeners to the tabs
        var IE = document.all;
        var tid = this.tabs[index];
        var t = this;
        
        //alert(this.tabs);

        if ( IE )
        {
            this.tabs[index].attachEvent( 'onclick', function(){ tabSelectEvent( t, tid ); } );
        }
        else
        {
            this.tabs[index].addEventListener( 'click', function(){ tabSelectEvent( t, tid ); }, false );
        }

        return true;
    };        

    // The selectTab function takes a tabID and attempts to select that tab. The current
    // tab will be deselected and if tabID is not valid, the user will end up with no selection.
    this.selectTab = function( tabID )
    {
        if ( this.tabs.length != this.panes.length ) return false; // Internal error
        
        // Search for currently selected tabs and hide its style       
        for ( var i = 0; i < this.tabs.length; i++ )
        {            
            if (this.tabs[i].className == this.selectedTabClassName && tabID!=null)
            {                
                //alert(this.unselectedTabClassName);
                this.tabs[i].className = this.unselectedTabClassName;
				
                /*reset the other classes*/
                var tabChildren=document.getElementById(this.tabs[i].id).childNodes;
				tabChildren[0].className=this.unselectedTabClassName+"_Left";
				tabChildren[0].childNodes[0].className=this.unselectedTabClassName+"_Right";
                
                if ( this.panes[i] != null ) 
                {                         
                    this.panes[i].style.display = 'none'; 
                    this.panes[i].style.visibility = 'hidden';             
                }
            }
        }
        
        // Show the newly selected tab and pane      
        for ( var i = 0; i < this.tabs.length; i++ )
        {            
            if (this.tabs[i].id == tabID.id)
            {                
                this.tabs[i].className = this.selectedTabClassName;
                /*reset the other classes*/
                var selectedTab=document.getElementById(this.tabs[i].id).childNodes;
				selectedTab[0].className=this.selectedTabClassName+"_Left";
				selectedTab[0].childNodes[0].className=this.selectedTabClassName+"_Right";
                
                this.panes[i].style.display="block";
                this.panes[i].style.visibility="visible";
            }
        }
        return false;
    };
}

function tabSelectEvent(el, tabid){
    el.selectTab(tabid);
}