var hhtTabs = new Class ({
	
	init:function(tab_area){
		
		this.tab_area = tab_area;
		this.buttons  = $ES('div.hht_tab_buttons a.hht_tab_button',this.tab_area);
				
		this.contents = $ES('.hht_tab_contents .hht_tab_content',this.tab_area);
		
			// add events
		for (var k = 0; k<this.buttons.length; k++){
			var button = new Element( this.buttons[k] );
			button.addEvent('click', this.click_tab.bindWithEvent(this ) );
		}
		
			// set size
		var tab_area_width = false;
		if ( tab_area.getProperty('hht:tab_fullwidth')=="true" ){
			var tab_area_size  = tab_area.getSize();
			tab_area_width = tab_area_size.size.x;
		}		
		
		if ( tab_area.getProperty('hht:tab_width') ){
			tab_area_width = parseInt( tab_area.getProperty('hht:tab_width') );			
		}
		
		if (tab_area_width)	{
			var button_padding = 8;
			var button_width = Math.round( (tab_area_width - (this.buttons.length * button_padding ) ) / this.buttons.length );
			var first_button_width  =  tab_area_width - button_padding - ( (button_width + button_padding) * (this.buttons.length -1 ) );
			for (var k = 0; k<this.buttons.length; k++){
				var button = new Element( this.buttons[k] );
				if (k>0){
					$E('span' , button).setStyle('width', '' + button_width + 'px' );
				} else {
					
					$E('span' , button).setStyle('width', '' + first_button_width + 'px' );
				}
			}
		}
				
			// activate first tab
		/*	
		if (buttons.length > 0){
			var tab_id = buttons[0].getProperty('hht:tab_id');
			this.activate_tab(tab_id, tab_area);
		}
		*/
		
	},
	
	click_tab:function (event, area){
		event = new Event(event);
		target = new Element(event.target);
		while (!target.hasClass('hht_tab_button') && target.getParent() ){
			target = target.getParent();
		}
		if (target.hasClass('hht_tab_button') ){ 
			var tab_id = target.getProperty('hht:tab_id');
			if (tab_id){ //activate preloaded tab
				this.activate_tab(tab_id);
				event.stop();
			} else if ( target.getProperty('hht:tab_ajax_url') ) { //activate ajax tab
					// open tab if already there
				if ( !target.hht_tab_id ) {
						// create tab
					var tab = new Element('div');
					tab.addClass ('hht_tab_content');
					tab.setText('loading content');
					tab.injectInside( $E('.hht_tab_contents',this.tab_area) ); 
						// set ids 					
					tab.id = 'hht_tab_' + Math.round( Math.random() * 99999 );
					target.hht_tab_id = tab.id;
						// start ajax loading 
					new Ajax(
						target.getProperty('hht:tab_ajax_url'), 
						{
							method: 'get',
							update: tab
						}
					).request();
				} 
				
					// activate tab
				if ( target.hht_tab_id ) {
					this.activate_tab(target.hht_tab_id);
				}	
				
				
				event.stop();
			} else { // use as normal link
				// let the event roll
			}
			
		}
	},
	
	activate_tab:function (tab_id){

		if (tab_id  ){
				//activate buttons
			var buttons  = $ES('.hht_tab_buttons .hht_tab_button',this.tab_area);
			for (var i=0 ; i<buttons.length ; i++){
				var button = new Element( this.buttons[i]);
				if (button.getProperty('hht:tab_id')==tab_id){
					button.addClass('active');
				} else {
					button.removeClass('active');
				}
			}
				// activate contents
			var contents = $ES('.hht_tab_contents .hht_tab_content',this.tab_area);
			for (var i =0 ; i<contents.length ; i++){
				var content = new Element(contents[i]);
				if (content.getProperty('id')==tab_id){
					content.addClass('active');
				} else {
					content.removeClass('active');
				}
			}	
		}
	}
	
});

window.addEvent('load', function()	{		
	$ES('div.hht_tabbed_area').each(function(tabbed_area){
		tabbed_area.hht_tabs = new hhtTabs();
		tabbed_area.hht_tabs.init(tabbed_area);
	});
});