/* Simple tabs with ajax support */

var Tabs = Class.create({
  initialize: function(id, options){    
    this.container = $(id);
    this.options = Object.extend({
		  onChange: function(){}
		}, options || {});
    
    var self = this;
    var handler = this.clickHandler.bind(this);
    this.container.select('li').each((function(tabItem){
      tabItem.down('a').observe('click', handler);
      this.getTabBox(tabItem).hide();
    }).bind(this));
    this.setSelected();
  },
  setSelected: function(){
    var targets = /#(.+)$/.exec(window.location);    
    if(targets && targets[1]){
      var tab_link = this.container.select('li a').find(function(link){
        var href = link.href.substr(link.href.lastIndexOf('#') + 1);
        return href == targets[1];
      });
      
      if (tab_link){
        this.loadTabBox(tab_link.up('li'));
        return;
      }
    }
    
    var tab;
    
    if (this.options['select']) {
      tab = this.container.down('a[href=\'#' + this.options['select'] + '\']').up();      
    }
    else {
      tab = this.container.down('li') // Selects the first one by default
    }

    this.loadTabBox(tab);  
  },
  clickHandler: function(event){
    var tabLink = event.element();
  	tabLink.blur();
    event.stop();
    
    var tab = tabLink.up('li');	
  	if (tab.hasClassName('selected')) {    
  		return;
  	}
    
    this.loadTabBox(tab);        
  },
  loadTabBox: function(tab){
    var tabBox = this.getTabBox(tab);
    
    if(tabBox && tabBox.getAttribute('data-url') && !tabBox.hasClassName('loaded') && !tabBox.hasClassName('loading')){
      // Load via Ajax
      this.loadTabContent(tab, tabBox);
    } else {
      this.switchToTab(tab);
    }    
  },
  switchToTab: function(tab){
  	// Unselect the old tab
  	var oldTab = this.container.down('.selected')
    if(oldTab){
    	oldTab.removeClassName('selected');    
      var oldTabBox = this.getTabBox(oldTab);
      if (oldTabBox) oldTabBox.hide();  
    }
        
  	// Select the new tab	
  	tab.addClassName('selected');
    
    var newTabBox = this.getTabBox(tab);
    if (newTabBox) newTabBox.show();
    
    // OnChange callback
    this.options['onChange'](this.getTabId(tab));
  },
  getTabId: function(tab){
    var href = tab.down('a').href;
    var tabId = href.substr(href.lastIndexOf('#') + 1);
    return tabId;    
  },
  getTabBox: function(tab){
    return $(this.getTabId(tab));
  },
  loadTabContent: function(tab, tabBox){
    var url = tabBox.getAttribute('data-url');
    tab.addClassName('loading');
    new Ajax.Updater( tabBox.id, url, {
  			method: 'get',
        evalScripts: true,
        onComplete: (function(){
          tab.removeClassName('loading');
          tabBox.addClassName('loaded');
          this.switchToTab(tab);
        }).bind(this)
  	});    
  }
});