/********************************************************************************
 * To use this js, one js named "hw.js" is required.
 * 
 * The trigger items, the target items and span items should be mapped in size.
 *
 * The html structure of the trigger item and span item should be like below:
 * <li class="jsTab">
 *	<a class="jsTabTrigger" href="#">
 *		<span class="jsTabSpan">Overview</span>
 *	</a>
 * </li>
 *
 * The html structure of the target item should be like below:
 * <div class="jsTabTarget">content to show and hide.</div>
 *
 ********************************************************************************/

HW.Tab = {
	currentClass:'selected',
	tabClass:'jsTab',
	tabTargetClass:'jsTabTarget',
	tabTriggerClass:'jsTabTrigger',
	tabMarkerClass:'jsMarker',
	tabItems:[],
	tabTargetItems:[],
	tabTriggerItems:[],
	tabTriggerSpans:[],
	tabTriggerSpansClass: 'jsTabSpan',
	
	update:function(){
		var triggerLength = this.tabTriggerItems.length;
		var targetLength = this.tabTargetItems.length;
		var tabLength = this.tabItems.length;
		// keep track which tab is chosen
		var index = -1;		
		// find out which tab is chosen
		for(var i=0; i<triggerLength; i++){
			// if the tabMarkerClass is in the <span>
			if(HW.hasClass(this.tabTriggerSpans[i],this.tabMarkerClass)){
				index = i;
				// remove the current class to keep the integrity
				// that this class will be used once only for all trigger items.
				HW.removeClass(this.tabTriggerSpans[i],this.tabMarkerClass);
				break;
			}
			// if the tabMarkerClass is in the <a>
			if(HW.hasClass(this.tabTriggerItems[i],this.tabMarkerClass)){
				index = i;
				// remove the current class to keep the integrity
				// that this class will be used once only for all trigger items.
				HW.removeClass(this.tabTriggerItems[i],this.tabMarkerClass);
				break;
			}
		}
		// show the corresponding target and hide the rest of targets
		for(var i=0; i<targetLength; i++){
			(i===index)? HW.show(this.tabTargetItems[i]) : HW.hide(this.tabTargetItems[i]);	
		}		
		// highlight the corresponding tab
		for(var i=0; i<tabLength; i++){
			if(i===index){
				if(!HW.hasClass(this.tabItems[i],this.currentClass)){
					HW.addClass(this.tabItems[i],this.currentClass);	
				}
			}
			else{
				if(HW.hasClass(this.tabItems[i],this.currentClass)){
					HW.removeClass(this.tabItems[i],this.currentClass);	
				}
			}
		}		
		
	},
		
	init:function(){
		this.tabItems = $$(this.tabClass,document.body,'li');
		this.tabTriggerItems = $$(this.tabTriggerClass,document.body,'a');
		this.tabTargetItems = $$(this.tabTargetClass,document.body,'div');
		this.tabTriggerSpans = $$(this.tabTriggerSpansClass,document.body,'span');
		// no further processing when (empty trigger items or empty target items) and
		// (the number of trigger items is not the same as the number of target items)
		// in addition, no further processing if tab does not exist
		var triggerLength = this.tabTriggerItems.length;
		var targetLength = this.tabTargetItems.length;
		if(this.tabItems.length>0 && triggerLength>0 && targetLength>0 && triggerLength===targetLength ){
			
			// listen interactive events
			for(var i=0; i<triggerLength; i++){
				
				HW.attachEvent(this.tabTriggerItems[i],'click',function(e){
					e=e||window.event;
					var target = e.srcElement||e.target;
					// prevent default action
					HW.preventDefault(e);
					// perform desire operation
					HW.addClass(target,HW.Tab.tabMarkerClass);
					HW.Tab.update();
				});
			}
			// show only the first target
			for(var i=0; i<targetLength; i++){
				(i===0)? HW.show(this.tabTargetItems[i]) : HW.hide(this.tabTargetItems[i]);						
			}
			// highlight the first tab
			HW.addClass(this.tabItems[0],this.currentClass);			
		}		
	}
	
};


HW.onload(function(){
	HW.Tab.init();
});