/* ---------------------------------------------------------------------------
					
	80/20
	http://8020studio.com
	
--------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
	=setup
--------------------------------------------------------------------------- */

var companyName = "80/20";

var animationSpeed = 500;
var scrollSpeed = 500;
var fadeDelay = 100;
var currentWork = "";
var nextWork = "";

/* --------------------------------------------------------------------------
	=functions
--------------------------------------------------------------------------- */

function getWorkDetails(project) {
	return $("#work-"+project);
}

function getWorkLink(project) {
	return $("#work-list-"+project+" a");
}

function showWorkDetails(project, animate) {
	if ($("#work-list a.selected").attr("href")) {
		currentWork = getWorkDetails($("#work-list a.selected").attr("href").replace("\#",""));
	}
	nextWork = getWorkDetails(project);

	if (!getWorkLink(project).hasClass("selected")) {
		
		// dynamically add all images for selected project
		$.each(projectImages[project], function(i, projectImage) {
			loadProjectImage("img/"+projectImages[project][i].file, projectImages[project][i].alt, $(".project-image-"+project+"-"+(i*1+1)));
		});
		
		// fade out displayed work, if it exists
		if (currentWork) {currentWork.fadeOut(animationSpeed);}
		
		// fade in selected work
		nextWork.delay(fadeDelay).fadeIn(animationSpeed);
		// set selected flag
		$("#work-list a.selected").removeClass("selected");
		getWorkLink(project).addClass("selected");
		
		// change height of work
		$("#work-container").animate({
			height: nextWork.outerHeight()
		}, scrollSpeed );
		
		// fade in close project button
		$("#close-project").fadeIn(animationSpeed);
		// fade in work title the lazy way
		$("#work-name").fadeOut(animationSpeed/2);
		$("#work-name").empty();
		$("#work-name").append(" / "+$("h2", getWorkDetails(project)).text());
		$("#work-name").fadeIn(animationSpeed/2);
		
		// update document title
		document.title = companyName+" — "+$("h2", getWorkDetails(project)).text();
	}
	
	// scroll to top of work
	$.scrollTo("#work", scrollSpeed);
}

function hideWorkDetails() {
	currentWork = getWorkDetails($("#work-list a.selected").attr("href").replace("\#",""));
	
	// fade out displayed work
	currentWork.fadeOut(animationSpeed);
	// remove selected flag
	$("#work-list a.selected").removeClass("selected");
	
	// hide work section
	$("#work-container").delay(fadeDelay).animate({
		height: 0
	}, animationSpeed );
	
	// fade out close project button
	$("#close-project").fadeOut(animationSpeed);
	// fade out work title
	$("#work-name").fadeOut(animationSpeed);
	
	// update document title
	document.title = companyName;
}

function setupCloseProjectButton() {
	$("#work > header").append("<p id=\"close-project\"><a href=\"#index\">Close Project</a></p>");
	$("#close-project").click(function() {
		hideWorkDetails();
	});
}

function setUpProjectImages() {
	$.each(projectImages, function(project, projectImages) { 
		$.each(projectImages, function(i, projectImage) { 
			if (i>0) {
				$(".screenshots ul", getWorkDetails(project)).append("<li><img src=\"img/loading.gif\" alt=\"empty\" class=\"empty project-image-"+project+"-"+(i*1+1)+"\" /></li>");
			}
		});
	});
}

function setUpWorkListHook() {
	$(".project-name").after("<span class=\"project-extra\"></span>");
}

function setUpProjectSlider() {
	$("#work-list a").each(function(){
		var project = $(this).attr("href").replace("\#","");
		// fragile
		$(".screenshots", getWorkDetails(project)).easySlider({
			speed: animationSpeed,
			project: project
		});
	});
}

function loadProjectImage(src, alt, target) {
	if ($(target).hasClass("empty")) {
		$("<img />")
			.attr("src", src)
			.attr("alt", alt)
			.bind("imgload",
				function() {
					target.before($(this))
						.fadeOut(animationSpeed*0,
						function() {
							target.remove();
						}
					);
				}
			);
	}
}

/* --------------------------------------------------------------------------
	=onload
--------------------------------------------------------------------------- */

$(function() {

	// update ids so that scroll animation works
	$(".work-details").each(function(){
		$(this).attr("id","work-"+$(this).attr("id"));
	});

	// on click events for showing work
	$("#work-list a").click(function() {
		showWorkDetails($(this).attr("href").replace("\#",""));
	});
	
	// setup
	setupCloseProjectButton();
	setUpProjectImages();
	setUpWorkListHook();
	setUpProjectSlider();

	// display work if there is a valid hash in the url
	var project = location.hash.replace("\#","");
	if (getWorkDetails(project).length) {
		showWorkDetails(project, true);
	}


});

function closeProject() {
    $('.closeProject').css('display','none');
    $('#workContainer').html('');
}