var EventInfoTab = Class.create({

	initialize: function(expand,preselectedTab,id) {
	this.textunits = new Array();
	
	//expand determines if the info should show expanded by default
	 if(expand != undefined)
		 this.expand = expand;
	else
		this.expand = false;
			 
	 this.id = id;
	 //default tab
	 if(preselectedTab == undefined )
		 this.selectedTab = "";   //will select the first tab when starting rendering
	 else
		 this.selectedTab = preselectedTab;
	 
	 if(getCookie('tab'+id)!= "")
		 this.selectedTab = getCookie('tab'+id);
	 
	 this.tabs = new Hash();
	 
	 this.contentTemplate = new Template('<div id="event_info_content_body-#{id}" class="tab-content" style="#{display}">' +
			 '<div> <div id="info_content_text" class="event_info_content">#{content}</div> </div>'+
			 '<div class="viewLinks" style="">'+
				'<span id="event_info_moreLink" class="moreLink highlight event-info-more" style="display:none" href="javascript:void(0)" style="">#{see_more}</span>'+
				'<span id="event_info_lessLink" class="moreLink-open highlight event-info-less" style="display: none;" href="javascript:void(0)">#{see_less}</span>'+
			  '</div>'+ 
	 		'</div>');
	 
	},

	addTab: function(tab){
	 this.tabs.set(tab.id,tab);
	},

	getContentBodyId:function(id)
	{
		return 'event_info_content_body-'+id;
	},
	
	renderHTML:function(){
		var htmlString = "";

		var Css = "";
		var tabsArr = this.tabs.values();
		if(this.selectedTab =="")
			this.selectedTab = tabsArr[0].id;
		//tabs
		for(var i=0; i<tabsArr.length ;i++)
		{		
			Css ="infoModule-item";
			if(tabsArr[i].id==this.selectedTab)
				Css = "highlight-border infoModule-item-on highlight";
										
			var id = "info_item_tab_" + tabsArr[i].id;			
			htmlString += '<div id="'+ id +'" name="'+ tabsArr[i].id +'" class="'+ Css +'">' + 
				'<a id="tab-label" class="highlight" href="javascript:void(0)">'+ tabsArr[i].label +'</a> </div>';					
		}

		$("event_info_module_item_list").innerHTML = htmlString;
		
		htmlString = "";

		//content
		var style = "";
		var tab;
		for(var i=0; i<tabsArr.length ;i++)
		{	
			tab = tabsArr[i];	
			var id = this.getContentBodyId(tab.id)
		
		htmlString += this.contentTemplate.evaluate(
					{
							id:tab.id,
							content:tab.content,
							display:style,
							see_more:this.textunits['SEE_MORE'],
							see_less:this.textunits['SEE_LESS']
					});		
		}
		
		$("event_info_box").innerHTML = htmlString;

		this.expandOrCollapse();
		
		//hide all but the active tab
		for(var i=0;i<tabsArr.length;i++)
		{
			if(tabsArr[i].id != this.selectedTab)
				$(this.getContentBodyId(tabsArr[i].id)).hide();
		}	
				
	},

	

	
	
	addEventListeners:function(){		
		
		Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
		Prototype.Browser.IE7 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7;
		Prototype.Browser.IE8 = Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7;
		
       $('event_info_module_item_list').observe('click',this.activateTab.bindAsEventListener(this));
       
       $('event_info_module_item_list').observe('mouseover',this.activateTab.bindAsEventListener(this));
       
       if(!Prototype.Browser.IE8)
    	   $('event_info_module_item_list').observe('mouseout',this.activateTab.bindAsEventListener(this));
      //See more
		var moreLinks = $$('.moreLink');
		for(var i = 0; i<moreLinks.length;i++)
		{	
			moreLinks[i].observe('click', function(event){
				var elem = event.findElement('span').up('div').up('div');
				expand(elem);
				
			});
		}
      //See less
		var lessLinks = $$('.moreLink-open');
		for(var i = 0 ;i<lessLinks.length;i++)
		{
			lessLinks[i].observe('click', function(event){
				var elem = event.findElement('span').up('div').up('div');
				collapse(elem);
			});
		}		
		
		 	
      	  	
	},

	activateTab:function(event){

		var elem;
	
		if(event.type == 'mouseout' )  // if there is a specific tab we want to activate
			elem = $("info_item_tab_"+this.selectedTab);	
		
		if (!elem)
			elem = event.findElement('div');   

		if(event.type == 'click' )  // set active tab
		{	
			this.selectedTab = elem.readAttribute('name');
			setCookie('selectedtab'+this.id,this.selectedTab);
		}
		  //if it is a mousout event   //TODO any better way to handle?
	     	if (elem.hasClassName("highlight-border")) {
	    		// clicked the active tab, do nothing
	    		return false;
	    	}	
	     	else
	     	{
	         	         	         	
	         	var code = 'eventtab_' + elem.readAttribute('id');
	    		//dcsMultiTrack('DCS.dcsuri', code,'WT.ti', code);
	    		
				//switch tab
	    		var oldSelection = $$('.infoModule-item-on');
	    		if (oldSelection.length > 0) {
		         	var oldSelectionName = oldSelection[0].readAttribute('name');
		         	oldSelection[0].removeClassName("highlight-border");
		         	oldSelection[0].removeClassName("infoModule-item-on");
		         	oldSelection[0].removeClassName("highlight");		
		         	oldSelection[0].addClassName("infoModule-item");
				    var oldContent = $(this.getContentBodyId(oldSelectionName));
				    oldContent.toggle();
	    		}

	         	elem.removeClassName("infoModule-item");
	         	elem.addClassName("highlight-border");
	         	elem.addClassName("infoModule-item-on");
	         	elem.addClassName("highlight");

			    //display content
			    var activeTab = elem.readAttribute('name');
			    $(this.getContentBodyId(activeTab)).toggle();
			    
		
			}
	},

	setTU:function(name,value) {
		this.textunits[name] = value;
	},
	
	expandOrCollapse:function(){
		
		var elems = $$('.tab-content');
		
		for(var i = 0;i<elems.length;i++)
		{
			//if default is set to expand it shoul only expand when content overflows
			var elem = elems[i];
			var height = elem.firstDescendant().getHeight();
			if(this.expand && height >100)
				expand(elem); 
			else 
			{
				collapse(elem);
				if(height<100){
					elem.down('span[id=event_info_moreLink]').hide();
					elem.down('span[id=event_info_lessLink]').hide();					 
				}
			}
		}	
	}
	
});


function expand(elem)
{   	  
	  elem.setStyle("height: auto;");	
	  
	  elem.down('span[id=event_info_lessLink]').show();
   	  elem.down('span[id=event_info_moreLink]').hide();
	
}

 
function collapse(elem)
{	  
	  elem.setStyle("height: 114px;");

	  elem.down('span[id=event_info_moreLink]').show();	  	  
 	  	
	  elem.down('span[id=event_info_lessLink]').hide();
}