//nemTab.js
//2008 Paul Graves paul.graves@nemisys.uk.com
//Nemisys tabs with ajax request feature.
      
var nemTabs = new Class({
    initialize: function(el){
        this.nemTabs = el;
        this.tabs = new Array();
        this.tabHandles = new Array();
        this.currentTab=0;
        
        this.tabBar = new Element("DIV",{'class':'nemTabBar'});
        this.tabList = new Element("DIV",{'class':'nemTabList'});
        this.tabList.setStyle('width',0);
        this.nemTabs.grab(this.tabBar,'top');
        this.tabBar.grab(this.tabList,'top');
        
        this.nemTabs.getElements('.nemTab').each((function(el){
                                                                this.tabs.push(new nemTab(el,this.tabs.length));  
                                                               }).bind(this));
        //get the width of the tablist
        var tabsWidth=0;                                                       
        this.tabList.getElements('.nemTabHandle').each((function(el){tabsWidth+=el.getSize().x+el.getStyle('margin-right').toInt()+el.getStyle('margin-left').toInt();}).bind(this))
        this.tabList.setStyle('width',tabsWidth+50);                                                       
                     
        //build the scroller element if the tabs overlap the width             
        if(this.tabList.getStyle('width').toInt()-60>this.tabBar.getStyle('width').toInt()){   
            this.scrollFx = new Fx.Scroll(this.tabBar);                                            
            this.scroller = new Element("DIV",{'class':'nemTabScroll'});
            this.nemTabs.grab(this.scroller,'top');
            this.scrollRight = new Element("A",{'html':'>>','class':'nemScrollLeft','events':{'click':(function(){
                                                                                              this.scrollFx.start(this.tabBar.getScroll().x+50,0);
                                                                                             }).bind(this)}});    
            this.scroller.grab(this.scrollRight,'top');           
            this.scrollLeft = new Element("A",{'html':'<<','class':'nemScrollRight','events':{'click':(function(){
                                                                                              this.scrollFx.start(this.tabBar.getScroll().x-50,0);
                                                                                             }).bind(this)}});    
            this.scroller.grab(this.scrollLeft,'top');    
        }                                                                                             
    }
});

//nemTab class
var nemTab = new Class({
    initialize: function(el,id){
        this.tab = el; 
        this.parent = this.tab.getParent(".nemTabs");
        this.tabList = this.parent.getFirst(".nemTabBar").getFirst(".nemTabList");
        this.id = id;
        
        this.content = this.tab.getFirst(".nemTabContent");
        this.handle = new Element("SPAN",{'class':'nemTabHandle','html':'<span class="title">'+el.title+'</span>','events':{'click': (function(){this.handleClicked();}).bind(this)}});        
        this.tabList.grab(this.handle,'bottom');
        
        //this tab is not set to visible
        if(this.tab.getProperty('visible')!='true'){
            this.content.hide();
        }else{
            this.handle.addClass('nemTabActive');
            this.getContent();
            currentTab=this.id;
        }    
    },
    handleClicked:function(){
        this.hideOtherTabs();
        this.content.show();
        this.handle.addClass('nemTabActive');
        this.getContent();
    },
    hideOtherTabs: function(){        
        currentTab=this.id;
        //hide all other tabs that are siblings of this tab
        this.parent.getElements('.nemTab').each(function(item,index){item.getFirst(".nemTabContent").hide();});
        this.parent.getElements('.nemTabHandle').each(function(item,index){item.removeClass('nemTabActive');});
        
    },
    getContent: function(){
        if(this.content.getProperty('location')){
            var updateRequest = new Request({method:'post',async:true,url:this.content.getProperty('location'),onSuccess: (function(txt) {this.content.set('html', txt);this.content.focus();}).bind(this)});
            updateRequest.send("date="+Date());
            this.content.removeProperty('location');
        }
    }
});