dojo.require("dojo.html.*");
	dojo.require("dojo.event.*");
	dojo.require("dojo.style.*");
	
	var buttons = new Array();
	var buttonLock = new Array();
	
	var panels = new Array();
			
	function setupIndexPage()
	{	
		setupEpisodeButtons();
		setupFormalMenu();
	}
	
	/* */
	function setupFormalMenu()
	{
	
		var aboutPanel = dojo.byId('aboutPanel');
		var aboutButtonOver = dojo.html.getElementsByClass('buttonOver', aboutPanel )[0];
				
		dojo.event.connect( aboutButtonOver, 'onclick', function( event )
		{
			var aboutPanel = dojo.byId('aboutPanel');	
			var left 		= dojo.style.totalOffsetLeft( aboutPanel );
			var top 		= dojo.style.totalOffsetTop( aboutPanel );
			var height 	= dojo.style.getPixelValue( aboutPanel, 'height');
			
			var end = ( top < 0 ) ? [ left, 0 ] : [ left, -height]; 
			
			var curve = new dojo.math.curves.Line( [ left, top ], end);
			var anim = new dojo.animation.Animation( curve, 500 );
			
			dojo.event.connect(anim, "onAnimate", function(e) {
					aboutPanel.style.top = e.y + 'px';
			});
			
			anim.play();
			
		});
		
	}
	
	var episodeIcons = new Array();
	var episodeIconsOver = new Array();
	
	/* */
	function setupEpisodeButtons()
	{
	
		var buttonPanel = dojo.byId('episodeButtonGroup');		
		var butDiv;
		var icons;
		var frames = new Array();
		var i=0;
		
		buttons = dojo.html.getElementsByClass('episodeButton');
		icons 	= dojo.html.getElementsByClass('buttonIcon');
		frames	= dojo.html.getElementsByClass('buttonBackground');
		
		for( var i in icons ){
			if( dojo.html.hasClass( icons[i], 'buttonOver' )){
				episodeIconsOver.push( icons[i] );
				dojo.event.connect( icons[i], 'onmouseout', episodeMenuOnMouseOut );
			}else{
				episodeIcons.push( icons[i] );
				dojo.event.connect( icons[i], 'onmouseover', episodeMenuOnMouseOver );
			}
		}
		
	}
	
	/** */
	function episodeMenuOnMouseOver( event )
	{
		var index=event; // by default treat event param as a number
		// if the event is an event object then get the targets id

		if( !dojo.lang.isNumber(event) ){
			var id = dojo.html.getEventTarget(event).id;
			index = id.charAt( id.length-1 );
		}
		--index;
		
		if( !buttonLock[index] ){
			buttonLock[index] = true;
			if( episodeIcons[index]) 			episodeIcons[index].style.display = 'none';
			if( episodeIconsOver[index]) 	episodeIconsOver[index].style.display = 'inline';
		}
		
	}
	
	/** */
	function episodeMenuOnMouseOut( event )
	{		
		var index=event; // by default treat event param as a number
		// if the event is an event object then get the targets id
		if( !dojo.lang.isNumber(event) ){
			var id = dojo.html.getEventTarget(event).id;
			index = id.charAt( id.length-1 );
		}
		--index;
		
		if( episodeIcons[index]) 			episodeIcons[index].style.display = 'inline';
		if( episodeIconsOver[index]) 	episodeIconsOver[index].style.display = 'none';
		
		buttonLock[index] = false;
		
	}