/*
 * Simple Table Control.
 * ====================
 *
 * How it works.
 * ------------
 * 
 * The constructor takes two arguments:
 *    - control_id - the id of an empty ul that will be used to control the tabs.
 *    - tabs - an array of hashes that control the class names of the tabs and
 *             the titles of tabs.
 *
 * In the html you would habe.
 * 
 * <ul id='tabs'></ul><!-- this is where the tabs will be added -->
 * <div class="tab1">.....</div>
 * <div class="tab2">.....</div>
 * <div class="abc">....</div>
 *
 * In  Javascrtip you would have.
 *
 * new TabControl('tabs', 
 *     [{id: 'tab1', name: 'Tab 1'},
 *      {id: 'tab2', name: 'Tab 2'},
 *      {id: 'abc', name: 'ABC Tab'}]);
 *
 * The tab ul will have li's added for each tab.  The tab that is 
 * currently selected will have a "current-tab" style added
 */
var TabControl = Class.create({
   _templates: {
      tab: new Template('<a href=\"\">#{name}</a>')
   },
         
   handleClick: function(e) {
      var elt = e.element();
      
      if (elt.tagName == 'A') {
         e.stop();
         var tab = elt.up('li');         
         this.showTab(tab.id);
      }
   },

   showTab: function(tab) {
   		if(document.getElementById("tab_current")) {
	  		document.getElementById("tab_current").value = tab;
                        if(document.getElementById('tab_search')) {
                           window.location = "/search/results.me?tab_current=" + tab;
                        }
	 	 }
		 if(document.getElementById("helpText")) {
	  		document.getElementById("helpText").innerHTML = '';
	 	 }
                 
		 
      if (tab == this.current_id) {
         return;
      }
      
      var tabElement = $(tab);
      if ( ! tabElement ) return;
      
      tabElement.addClassName('current-tab');
	  
      $(this.current_id).removeClassName('current-tab');
      
	  this.current_id = tab;
      this.updateVisible();
	  addTabs(this.current_id);
   },
   
   updateVisible: function() {
      this.tabs.each(function(tab) {
	  	//alert(this.current_id + ', ' + tab.id);
            if (this.current_id == tab.id) {
               $$("." + tab.id).each(function(e) { e.show(); });
            } else {
               $$("." + tab.id).each(function(e) { e.hide(); });
            }
      }.bind(this));
   },
   
   initialize: function(control_id, tabs, tabNumber){
   
   	this.control_id = control_id;
   	this.tabs = tabs;
   	//alert(control_id+', '+tabs.length+', '+imgNumber);
				if (tabs.length > 0) {
					this.current_id = tabNumber;
					
					this.tabs.each(function(tab){
						var newLi = new Element('li', {
							id: tab.id
						});
						var l_curImg = document.createElement('div');
							l_curImg.id = 'leftCorner'+tab.id;
							l_curImg.className = 'leftCorner_tab';
                                                        
			
						var r_curImg = document.createElement('div');
							r_curImg.id = 'rightCorner'+tab.id;
                                                        r_curImg.className = 'rightCorner_tab';

						newLi.update(this._templates.tab.evaluate(tab));
						$(this.control_id).appendChild(newLi);
						newLi.appendChild(l_curImg);
						newLi.appendChild(r_curImg);
				
					}.bind(this));

					$(this.current_id).addClassName('current-tab');
					//addTabs(this.current_id);
					this.updateVisible();
					$(this.control_id).observe('click', this.handleClick.bindAsEventListener(this));
				
				}
			}
});