var currentProject = null;
var promoIndex = 0;
var projectCount = 0;

var projectsPerPage = 3;

function hideButtons()
{
	//console.log( "hideButtons" );
	$(".work .backButton").hide();
	$(".work .nextButton").hide();
}

function updateButtons()
{
	
	//console.log( "updateButtons: promoIndex: " + promoIndex + " count: " + projectCount);
	
	if ( promoIndex <= 0 )
	{
		$(".work .backButton").hide();
	}
	else
	{
		//console.log( "updateButtons: show back button" );
		$(".work .backButton").show();
	}
	
	if ( promoIndex + projectsPerPage >= projectCount )
	{
		$(".work .nextButton").hide();
	}
	else
	{
		$(".work .nextButton").show();
	}
}

function backPromosClickHandler(e) {
	e.preventDefault();
	if ( promoIndex <= 0 )
	{
		return;
	}
	
	promoIndex-=projectsPerPage;
	if( promoIndex < 0 )
	{
		promoIndex = 0;
	}
	
	var pos = -promoIndex * 290;
	$(".work #project-list ul").animate( { "left" : String(pos)+"px" }, 400 );
	updateButtons();
	
}

function nextPromosClickHandler(e) {
	e.preventDefault();
	
	if ( promoIndex >= projectCount-1 )
	{
		return;
	}
	
	promoIndex+=projectsPerPage;
	
	var pos = -promoIndex * 290;
	$(".work #project-list ul").animate( { "left" : String(pos)+"px" }, 400 );
	
	updateButtons();
}

function outroComplete()
{
	$(this).hide();
}

function projectOutroComplete()
{
	$(this).hide();
		//.parent().hide();
	updateButtons();
}



function handleChange(event) {
	var path = event.path;
	
	//console.log( "handleChange: path: " + path );
	path = path.substr( 1 );
	
	//console.log( "handleChange: path after: " + path );
	if( path != "" )
	{
		
		var project = $("#project-detail .project[id=" + path + "]" );
		if( project.length > 0 )
		{
			// show project detail
			hideButtons();
			//$("#project-list").hide();
			$("#project-list").animate( { "left": "-900px" }, { duration: '400', complete : outroComplete } );
			//$("#project-detail").show();
			
			//currentProject = $("#project-detail[id=" + path + "]" ).show();
				//.css("left", "950px" )
				//.show()
				//.animate( { "left": "0px" }, '400' );
			currentProject = project.parent()
				.css("left", "900px" )
				.show()
				.animate( { "left": "0px" }, '400' );
				
			//console.log( "handleChange: currentProject: " + currentProject);
			return;
		}
		
	}
		
	
	// show project list
	//$("#project-list").show();
	//$("#project-detail").hide();
	
	if ( currentProject != null )
	{
		currentProject.animate( { "left": "900px" }, { duration: '400', complete : projectOutroComplete } );
		
		//alert( typeof destroyWorkReel + " == 'function?' " + ( typeof destroyWorkReel == 'function' ) );
		if( typeof destroyWorkReel == 'function' )
		{
			destroyWorkReel();
		}
		currentProject = null;
		
		$("#project-list").css("left", "-900px" )
			.show()
			.animate( { "left": "0px" }, '400' );
	}
	else
	{
		$("#project-list").css("left", "900px" )
			.show()
			.animate( { "left": "0px" }, {duration : '400', complete : updateButtons  } );
	}
	
}

function thumbClickHandler(e) {
	e.preventDefault();
	
	var thumb = $(this);
	
	var id = thumb.find("a").attr("id") + "-img";
	
	//alert("thumbClickHandler src: " + src );
	
	if( id.indexOf( "reel" ) != -1 )
	{
		createWorkReel( id, "/media/graphics/WOTW_470x235.flv" );
	}
	else if( typeof destroyWorkReel == 'function' )
	{
		destroyWorkReel();
	}
	
	thumb.parent().parent().find("ul.image-list").find("img,span,object").each( function( index ) {
		var me = $(this);
		var myID = me.attr( "id" )
		if( myID == id || myID == id + "-swf" )
		{
			$(this).show();
		}
		else
		{
			if( myID.indexOf( "reel" ) != -1 )
			{
				//console.log( "thumbClickHandler:" + id + " myID: " +myID );
				//var parent = me.parent();
				//me.detach();
				//parent.append( "<span id='" + myID + "' />");
				//
			}
			$(this).hide();
		}
	});
	
	thumb.parent().find(".selected").removeClass( "selected" );
	
	thumb.find("a").addClass("selected" );
}

function thumbOver() {
	$(this).addClass( "over" );
}

function thumbOut() {
	$(this).removeClass( "over" );
}

$(function() {
	
	// project list
	projectCount = $(".work #project-list li").length;
	
	//console.log("init: projectCount: " + projectCount );
	
	$(".work a.backButton")
		.click(backPromosClickHandler)
		.css({backgroundPosition: "0px 0px"})
		.mouseover(function() {
            $(this).stop().animate({backgroundPosition:"-20px 0px"}, {duration: 400})
        })
        .mouseout(function() {
            $(this).stop().animate({backgroundPosition:"0px 0px"},  {duration: 300})
        });
	$(".work a.nextButton")
		.click(nextPromosClickHandler)
		.css({backgroundPosition: "-20px 0px"})
		.mouseover(function() {
            $(this).stop().animate({backgroundPosition:"0px 0px"}, {duration: 400})
        })
        .mouseout(function() {
            $(this).stop().animate({backgroundPosition:"-20px 0px"},  {duration: 300})
        });
	
	// project details
	// thumbnail
	$("#project-detail").hide();
	$(".work #project-detail .links li:first-child a").addClass("selected");
	$(".work #project-detail .links li")
		.hover(thumbOver, thumbOut)
		.click( thumbClickHandler )
		
	
	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);
});