var ss_timercode=0;
var myEVplr;
var events,hilights;
var event_plr = Class.create({
	// plays the auto show 
	play: function()
	{
			this.play_c=true;
			this.transition_effect(false);
	},
	// pauses the show
	pause: function()
	{
		this.play_c=false;
		this.hbshow=false;
	},
	stop: function()
	{
		alert('stopped');		
	},
	
	//when you click on any events from calander it just goes there with transition effect set to false
	// and pauses the slideshow.... sets the current mode to event
	goto: function(ev_no)
	{
		this.pause();
		this.ss_cur_mode='ev';
		this.evnt_cntr=ev_no;
		this.transition_effect(false);	
	},
	// self explanatory... decrements the event/highlight counter depending on whatever current mode is set
	previous: function()
	{
		if(this.transition_allow)
		{
			if(this.ss_cur_mode=='ev')
				this.evnt_cntr--;
			else if(this.ss_cur_mode=='hl')
				this.hl_cntr--;
			else
				this.hb_cntr--;
			this.couter_wrap();
			this.transition_effect(true);
		}
	},
	
	// self explanatory... increments the event/highlight counter depending on whatever current mode is set
	next: function()
	{	
		if(this.transition_allow)
		{
			if(this.ss_cur_mode=='ev')
				this.evnt_cntr++;
			else if(this.ss_cur_mode=='hl')
				this.hl_cntr++;
			else
				this.hb_cntr++;
			this.couter_wrap();
			this.transition_effect(true);
		}
	},

/*this is where the slideshow loop happens
gets custom delay of event/highlights/category and sets it and 
calls next() after that much delay
before doing that swaps the layer since we just came from transition_effect() function
clearstimeout so we dont get multiple next() calling... which will create chaotic behaviour in SLideShow
if auto slideshow play was allowed only the puts delay other wise will just go to next event without any delay*/
	swap: function()
	{
			
			this.layer_mnt();
			this.transition_allow=1;

			clearTimeout(ss_timercode);
			if(this.play_c)
				ss_timercode=setTimeout ("myEVplr.next();", this.delay );
	},
	
	/*pending function... when no events or highlights are there.. set default image
	not done yet... however noevent_array is already loaded with the default image
	just load that image with show_loader*/
	noEventsFound: function()
	{
		
	},
	
	/*initializer... gets called when class instanciated
	Parameters:
	ratio:# of highlights, ratio:#of events, first play 'ev'/'hl', Hibrid slideshow on true/false)*/
	initialize: function(r_hl,r_ev, init_mode, hbshow){
		
		this.mnt0=document.getElementById('show_lyr0');
		this.mnt1=document.getElementById('show_lyr1');
		
		this.delay=3000;
		this.transition_del=1500;			// adjust the delay based on transition effect you choose. some effects take more time some less
										// dont need to be perfect just set it approximately
		this.transition_allow=1;
		this.evnt_cntr=0;
		this.hl_cntr=0;
		this.play_c=false;
		this.act_show_lyr=0;				// current active layer out of 2 slidehow layers
		
		
		events.pop(); hilights.pop();		// got extra images at the end of these arrays
		this.cache_images();
		this.ratio_hl=r_hl;					// this sets the default slideshow ratio between event and highlight during hi-brid mode
		this.ratio_ev=r_ev;	
		this.ratio_hl_ctr=0;this.ratio_ev_ctr=0;
		this.ss_cur_mode=init_mode;			
		this.hbshow=hbshow;							// hbshow= 1 /0
		
		this.resetShow();
		
	},
	
	/*resets the show counters... 
	clears out pending transitions and 
	plays the show based on whatever mode is present
	gets called at beginning & when tabs are clicked*/
	resetShow: function()
	{
		this.init_ss_texts();
		clearTimeout(ss_timercode);
		this.evnt_cntr=0;
		this.hl_cntr=0;
		this.hb_cntr=0;
		this.act_show_lyr=0;
		
		if(!hilights.length)		// if no events or highlights then set the ratio accordingly
			this.ratio_hl=0;
		if(!events.length)
			this.ratio_ev=0;
		if(!this.ratio_ev && !this.ratio_hl)
			this.noEventsFound();
		
		this.play();
	},
	
	/*initializes the tab text... nothing too fency here*/
	init_ss_texts: function()
	{

		document.getElementById('hl_text').innerHTML="Highlight "+ hilights.length;
		document.getElementById('ev_text').innerHTML="Event "+  events.length;
	},
	
	/*this is where tab texts counter and tabs gets updated.. 
	tabs: active/passive based on whaterver category you click on*/
	update_tab_text: function()
	{
		var evtxt= document.getElementById('ev_text');
		var hltxt= document.getElementById('hl_text');
		
		if(this.ss_cur_mode=='ev' && events.length!=0)
		{
			evtxt.innerHTML="Event "+ (this.evnt_cntr+1) +" of " + events.length;
			document.getElementById('ev_li').className="active";
			document.getElementById('hl_li').className="passive";
		}
		else if(this.ss_cur_mode=='hl' && hilights.length!=0)
		{
			hltxt.innerHTML="Highlight "+ (this.hl_cntr+1) +" of " + hilights.length;
			document.getElementById('ev_li').className="passive";
			document.getElementById('hl_li').className="active";
		}

	},

	/*this is called when you click tab box ont he slideshow box.. 
	currently we have 2 category event and hilights
	Parameters: name: 'ev' or 'hl' 
	this will set the category mode "ss_cur_mode" which is used to change the tabs-active/passive 
	and to load relevent category content
	pauses the slideshow and resets the mode counter to start from beginning*/
	tab_clicked: function(name)
	{	
		myEVplr.pause();
		this.ss_cur_mode=name;
		this.resetShow();		
		//document.getElementById("np_blank").focus()
	},
	
	/*This is where we do transition effect... 
	but before we call transition which takes about 1.5 to 2 second, (depending on effect)
	we need to load new content behind the active layer so when transition is over 
	the behind layer with new content gets visible
	Parameters: ply: tells the function whether to play transition or not
	after transition it will call main loop function swap() after given transition delay "transition_del" 
	set transition delay in init() function*/
	transition_effect: function(ply)
	{
			var mylyr;
			this.show_loader();
			this.update_tab_text();
			
			this.transition_allow=0;
			
			if(!this.act_show_lyr)		// layer 0// load it on non active layer
				mylyr='show_lyr0';//$('show_lyr0').fade();
			else
				mylyr='show_lyr1';//$('show_lyr1').fade();
				
			if(ply)
			{
				Effect.Shrink(mylyr);
				setTimeout ("myEVplr.swap();", this.transition_del );
			}
			else
			{
				$(mylyr).hide();
				setTimeout ("myEVplr.swap();", 0 );
			}
	},

	/*since we are using transition effect.. we need 2 layers (Layer1, Layer2 with z index..once at front and one in back)
	one layer performs transition effect while other layer gets ready with new content behind the layer 1
	so once the transition effect gets over we need to bring layer 2 in front and layer 1 to back
	This is what this function dose...swaps the z-inedx of both layers after transition gets done*/
	layer_mnt: function()
	{
		if(!this.act_show_lyr)		// layer 0
		{
			this.mnt0.className ="zindx0";
			this.mnt1.className ="zindx1";
			this.act_show_lyr=1;
			$('show_lyr0').show();
		}
		else					// layer 1
		{
			this.mnt0.className ="zindx1";
			this.mnt1.className ="zindx0";
			this.act_show_lyr=0;
			$('show_lyr1').show();
		}
	},
	
	/* lets say we have 5 events we play 1..2 ..3 .. 4..5 ..
	after 5 we have to wrap it to event 1...also when we are on event 1 and 
	hit preveous we need to go to last event which is 5... this is what this function does*/
	couter_wrap: function()
	{
		if(this.evnt_cntr==-1)						// wrap event counter if needed
			this.evnt_cntr=events.length-1; 
		else if (this.evnt_cntr==events.length) 
			this.evnt_cntr=0;
			
		if(this.hl_cntr==-1)
			this.hl_cntr=hilights.length-1; 		// wrap Highlights counter if needed
		else if (this.hl_cntr==hilights.length)
			this.hl_cntr=0;	

	},
	
	/*This is the URL loader... it fetches next event/highlights or content 
	based on Current MOde (ie. events, highlights or other catefory)
	and calls loadContent function with content URL*/
	show_loader:function()
	{	
		this.callHibridShow();
		var evtlength = events.length;
		var hilightlength = hilights.length;
		if(this.ss_cur_mode=='ev')
		{
			if(evtlength >0){
				this.loadContent(events[this.evnt_cntr][9],events[this.evnt_cntr][8]);
				this.delay=events[this.evnt_cntr][10];
			}
		}
		else if(this.ss_cur_mode=='hl')
		{
			if(hilightlength>0){
				this.loadContent(hilights[this.hl_cntr][9],hilights[this.hl_cntr][8]);
				this.delay=hilights[this.hl_cntr][10];
			}
		}
	},
	
	
	/*Loads the content based on the url
	   currnetly support image and swf formats
	   To support additional formats just as 
	   else if(new format) condition and provide html embed tag with url*/
	loadContent:function(lnk,url)
	{
		var m_content='';
		var pos = url.lastIndexOf(".")+1;
		var ext = url.substr(pos);
		if(ext=='jpg' || ext=='gif' || ext=='png')
		{
			m_content='<a href=\"'+lnk+'\"><img src=\"'+url +'\" border=0 alt=\"'+events[this.evnt_cntr][13]+'\"></a>';		
		}
		else if(ext=='swf')
			m_content= '<object classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' codebase=\'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0\' width=\'448px\' height=\'150px\'><param name=\'movie\' value=\''+url+'\' /><param name=\'wmode\' value=\'opaque\'><param name=\'quality\' value=\'high\' /><embed src=\''+url+'\' quality=\'high\' pluginspage=\'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash\' type=\'application/x-shockwave-flash\' width=\'448px\' height=\'150px\' wmode=\'opaque\'></embed></object>';

		if(!this.act_show_lyr)		// layer 0// load it on non active layer
			this.mnt1.innerHTML=m_content;
		else
			this.mnt0.innerHTML=m_content;
			
	}

	,
	callHibridShow:function()
	{
		// if hibrid show variable is not set then return
		// hbshow is set while instanciating myEVplr class.. 
		//refer to index.jsp javascript code comment for more details on hibrid show
		if(!this.hbshow)				
			return false;
		if(this.ss_cur_mode=='ev' && this.ratio_ev != 0)
		{
			if(this.ratio_ev_ctr != this.ratio_ev )
				this.ratio_ev_ctr++;
			else
			{
				this.ratio_ev_ctr=0;
				this.ss_cur_mode='hl';	
				this.ratio_hl_ctr++;
			}			
		}
		else if(this.ss_cur_mode=='hl' && this.ratio_hl != 0)
		{	
			if(this.ratio_hl_ctr != this.ratio_hl)
				this.ratio_hl_ctr++;
			else
			{
				this.ratio_hl_ctr=0;
				this.ss_cur_mode='ev';	
				this.ratio_ev_ctr++;
			}	
		}
	},
	cache_images:function()
	{
		var theimages= new Array();
		for (i=0;i<events.length;i++)
		{	
			theimages[i] = new Image;
			theimages[i].src=events[i][8];
		}
	
	}
});