//----------------------------------------------------------------------
//  Globals
	
	var stretchers;
	var togglers;
	var myAccordion;
	var moreSlider;
	var qtEmbedded = false;	
	var statusCheckLoop;
	
	addEvent( window, 'DOMContentLoaded', domLoadedInit );			
	Event.observe( window , 'load' , windowLoadedInit );
	
	_uacct = "UA-1273266-7";
	urchinTracker();
	
//----------------------------------------------------------------------
//  call this init when DOM is loaded

	function domLoadedInit()
	{		
		togglers = $$( '#sections h2 a' );
		togglers.each( function( item )
		{
			item.addClassName( 'closed' );
		});
		
		stretchers = $$( 'div.content' );
		stretchers.each( function( item )
		{
			item.setStyle({
				height: '0',
				overflow: 'hidden'
			});
		});
	
		myAccordion = new Fx.Accordion( togglers, stretchers,
		{ 
			opacity: false,
			start: false,
			transition: Fx.Transitions.quadOut,
			
			onActive: function( toggler , i )
			{
				toggler.removeClassName( 'closed' );
			},
		
			onBackground: function( toggler , i )
			{
				toggler.addClassName( 'closed' );
			}
		});
		
		var workViewerHTML = '<h2></h2>';
		workViewerHTML += '<div id="displayDiv"></div>';
		workViewerHTML += '<p id="extLink"></p>';
		workViewerHTML += '<img id="moreButton" class="" src="img/work_x.gif" width="20" height="20" />';
		workViewerHTML += '<div id="moreDiv"></div >';
		$( 'workViewer' ).update( workViewerHTML );
		
		initWorkLinks();
		initMoreButton();
	}
	
	
//----------------------------------------------------------------------
//  call this init when window is loaded to spring accordion and load 
//  featured project
	
	function windowLoadedInit()
	{
		function checkHash()
		{
			var found = false;
			var url = window.location.toString();
			$$('#sections h2 a').each( function(link, i)
			{
				if ( url == link.href )
				{
					myAccordion.showThisHideOpen(i);
					found = true;
				}
			});
			return found;
		}
	
		if ( !checkHash() )
			myAccordion.showThisHideOpen(0);
		
		//chooseProject( $$( '#workList li.featured a' )[0] );
		initFeatured();
	};
	
	
//----------------------------------------------------------------------
//  call this to init work links

	function initWorkLinks()
	{
		var anchors = $( 'workList' ).getElementsByTagName( 'a' );
		for ( i = 0 ; i < anchors.length ; i++ )
		{
			Event.observe( anchors[i] , 'click', function( e )
			{
				Event.stop( e );
				chooseProject( this )
			}.bindAsEventListener( anchors[i] ) );
		}
	}
	
	
//----------------------------------------------------------------------
//  call this to init more button

	function initMoreButton()
	{
		moreSlider = new Fx.Opacity( 'moreDiv' , {
			duration: 500,
			wait: false
		}).show();
		
		Event.observe( $( 'moreButton' ), 'click', function( e )
		{
			Event.stop( e );
			toggleMore();
		}.bindAsEventListener( $( 'moreButton' ) ) );	
	}

	
//----------------------------------------------------------------------
//  call this to toggle the more

	function toggleMore()
	{		
		if( $( 'moreButton' ).hasClassName( 'closed' )  )
		{
			$( 'moreButton' ).src = $( 'moreButton' ).src.sub( 'arrow.gif', 'x.gif', 1);
			$( 'moreButton' ).toggleClassName( 'closed' );
			moreSlider.hide();
			moreSlider.toggle();
		}
		else
		{
			$( 'moreButton' ).src = $( 'moreButton' ).src.sub( 'x.gif', 'arrow.gif', 1);
			$( 'moreButton' ).toggleClassName( 'closed' );
			moreSlider.show();
			moreSlider.toggle();
		}		
	}


//----------------------------------------------------------------------
//  call this to preload featured prohect
	
	function initFeatured()
	{
		featuredLink = $$( '#workList li.featured a' )[0];
		
		// Select the new button
		
		if ( $$( '#workList a.down' )[0] )
		{
			$$( '#workList a.down' )[0].down().setStyle({
				opacity: 1
			});
			$$( '#workList a.down' )[0].removeClassName( 'down' );
		}
		featuredLink.addClassName( 'down' );
		featuredLink.down().setStyle({
			opacity: 0.5
		});
		
		// update the work info
		
		var title = featuredLink.up().down( '.title' ).innerHTML;
		var client = featuredLink.up().down( '.client' ).innerHTML;
		var more = featuredLink.up().down( '.more' ).innerHTML;	
		var thumbPath = featuredLink.down().src.sub( 'h=59&w=79&ca=center', 'h=376&w=480&ca=center', 1 );
		
		$$( '#workViewer h2' )[0].update( "<span class='title'>" + title + "</span> / " + client );

		$( 'moreDiv' ).update( "<p>" + more + "</p>" );
		$( 'extLink' ).update( "<a href='" + featuredLink.href + "'>download link</a>" );
		//loadQT( aLink.href, 'video' );
		
		var clickToPlayHTML = "<a id='playLink' title='click to play' href='" + featuredLink.href + "' onclick='loadQT( this.href, \"video\" ); return false;'>";
		clickToPlayHTML += "<img id='playButton' alt='click to play' src='/img/play_small.png' width='120' height='120' />";
		clickToPlayHTML += "</a>";
		clickToPlayHTML += "<img id='featureImage' src='" + thumbPath + "' />";
		
		$( 'displayDiv' ).update( clickToPlayHTML );
	}			
		


//----------------------------------------------------------------------
//  call this to choose a work project
	
	function chooseProject( aLink )
	{
		// Select the new button
		
		if ( $$( '#workList a.down' )[0] )
		{
			$$( '#workList a.down' )[0].down().setStyle({
				opacity: 1
			});
			$$( '#workList a.down' )[0].removeClassName( 'down' );
		}
		aLink.addClassName( 'down' );
		aLink.down().setStyle({
			opacity: 0.5
		});
		
		// update the work info
		
		var title = aLink.up().down( '.title' ).innerHTML;
		var client = aLink.up().down( '.client' ).innerHTML;
		var more = aLink.up().down( '.more' ).innerHTML;	
		
		$$( '#workViewer h2' )[0].update( "<span class='title'>" + title + "</span> / " + client );
		
		if ( aLink.hasClassName( 'video' ) )
		{	
			$( 'moreDiv' ).update( "<p>" + more + "</p>" );
			$( 'extLink' ).update( "<a href='" + aLink.href + "'>download link</a>" );
			loadQT( aLink.href, 'video' );
		}
		
		else
		{
			var imgLinks = aLink.up().down( '.imageList' ).getElementsBySelector( 'a' );
			var imgLinksHTML = "<ul id='imgLinks'>"
			for ( i = 0 ; i < imgLinks.length ; i++ )
			{
				//alert( imgLinks[ i ].href );
				var thumbPath = imgLinks[ i ].href.sub( 'h=376&w=480&ca=center', 'h=25&w=35&ca=center', 1 );
				imgLinksHTML += "<li>";
				imgLinksHTML += "<a href='" + imgLinks[ i ].href + "' onclick='loadWebImg( this ); return false;'>";
				imgLinksHTML += "<img src='" + thumbPath + "' width='35' height='25' />";
				imgLinksHTML += "</a></li>";
			}
			imgLinksHTML += "</ul><div class='clear'></div>";
			
			$( 'moreDiv' ).update( imgLinksHTML + "<p>" + more + "</p>" );
			
			if( aLink.hasClassName( 'web'  ) )
				$( 'extLink' ).update( "<a href='" + aLink.href + "' target='_blank'>view website</a>" );
			else 
				$( 'extLink' ).update( "" );
			
			//loadQT( imgLinks[ 0 ].href, 'image' );
			loadWebImg( $$( '#imgLinks a' )[0] )
		}
		
	}			
		
		
//----------------------------------------------------------------------
//  call this to load a QT
	
	function loadQT( filepath, type )
	{
		// if no QT has been embedded yet
		if( !qtEmbedded  )
		{
			writeQT( filepath, type );
		}
		
		// if QT has been embedded and is IE using object tags
		else if ( document.movie.tagName == "OBJECT" )
		{
			//alert ( document.movie.GetPluginStatus() )
			document.movie.Stop();
			writeQT( filepath, type );
		}	
		
		// if QT has been embedded and not IE using object tags
		else
		{
			//alert ( document.movie.GetPluginStatus() )
			document.movie.Stop();
			document.movie.SetResetPropertiesOnReload( false );
			if ( type == 'video' )
				document.movie.SetControllerVisible( true );
			else if ( type == 'image' )
				document.movie.SetControllerVisible( false );
				
			if ( statusCheckLoop ) {
				//$( 'debug' ).update( 'webloop stopped' );
				statusCheckLoop.stop();
			}
			
			document.movie.SetURL( filepath );
			
			statusCheckLoop = new PeriodicalExecuter( statusCheck, .5 );
			//$( 'debug' ).update( 'webloop started' );
		}		
	}
	
	
//----------------------------------------------------------------------
//  call this to load a web image

	function loadWebImg( aLink )
	{	
		if ( $$( '#imgLinks a.down' )[0] )
		{
			$$( '#imgLinks a.down' )[0].down().setStyle({
				opacity: 1
			});
			$$( '#imgLinks a.down' )[0].removeClassName( 'down' );	
		}
		aLink.addClassName( 'down' );
		aLink.down().setStyle({
			opacity: 0.5
		});
		
		loadQT( aLink.href , 'image' );
	}


//----------------------------------------------------------------------
//	This function tests to see if the hash value in the url has changed
//  and loads the new page if it has

function statusCheck()
{
	//$( 'movieStatus' ).update( document.movie.GetPluginStatus() );
	if ( document.movie.GetPluginStatus() == "Playable" || document.movie.GetPluginStatus() == "Complete"  )
	{
		statusCheckLoop.stop();
		document.movie.Play();
		//$( 'debug' ).update( "webloop stopped" );
	}
}


//----------------------------------------------------------------------
//  hard embed a QT
	
	function writeQT( filepath, type )
	{
		var myQTObject = new QTObject( filepath, 'movie', '480', '376' );
		myQTObject.addParam( 'bgcolor' , '#393939' );
		myQTObject.addParam( 'enablejavascript', 'true' );
		myQTObject.addParam( 'name', 'movie' );
		
		if ( type == "video" )
			myQTObject.addParam( "controller", "true" );
		else if ( type == "image" )
			myQTObject.addParam( "controller", "false" );
			
		//myQTObject.addParam( 'autoplay', 'false' );
		myQTObject.write( 'displayDiv' );
			
		qtEmbedded = true;
	}