// copyright codesteed.com 2010


/**************************************************************************************
globals and constants
**************************************************************************************/

var workHtml = {
	project : "\
		<div id=\"projectHero\">\
			{0}\
		</div>\
		<div id=\"galleryInfo\">\
			<div id=\"galleryThumbs\">\
				<ul>\
				{1}\
				</ul>\
			</div>\
			{2}\
		</div>",
	projectContainer : "<div id=\"projectViews\"></div>",
	vimeo: {
		height:360,
		width:640,
		swf: "http://vimeo.com/moogaloop.swf",
		params: {
			allowfullscreen : true,
			allowscriptaccess : "always",
			movie : "http://vimeo.com/moogaloop.swf"
		},
		flashVars : {
			clip_id : '',//specify on use e.g. 13385663
			server : "vimeo.com",
			show_title : 1,
			show_byline : 1,
			show_portrait : 0,
			color : "c9ff23",
			fullscreen : 1,
			autoplay : 0,
			loop : 0		
		}
	}
};

var globals = {
	projectAnimationDistance : "900px",
	firstLoad : false,
	bulletOn : "images/heroNavOn.png",
	bulletOff : "images/heroNavOff.png",
	fuzzcoTimer : 8000,
	imageWidth : 950,
	currentProjectId : null,
	dividerHomePageMargin : 10
}

var store = [];
/*
store contains each project:
 {
	id : string,
	images : int,
	projectView : string (html),
	gridViewItem : string (html),
	vimeoClipId : string (numeric)
} */

Array.prototype.getVal = function(id)
{
	for(var i=0;i<this.length;i++)
	{
		if(this[i].id == id)
			return this[i];
	}
}

/**************************************************************************************
startup
**************************************************************************************/

$().ready(function () {
	globals.projectAnimationDistance = $("body").width() + "px";
	var fn = window.location.pathname.search("work.htm") > -1 ? WorkHandler : HeroHandler;
	$.get('data/projects.xml', {}, fn);
	SetTwitterLinkTargets();
	$("#twitter_update_list").change(SetTwitterLinkTargets);
	if ($("#blog").html() == "")
		$("#blog").html("<li>Coming soon</li>");
});

function HeroHandler(xml)
{
	$("#fc").html("");
	var added = 0;
	$(xml).find("item").each(function (i, el) {
		if ($(el).attr("hero") == "true")
		{
			$("#fc").append(BuildHero(
				$(el).attr("heroImage"),
				$(el).attr("id"))
			);
			$(".select").append(BuildHeroBullet(i));
		}
		if (!$(el).attr("homePage"))
		{
			$("#recentWork ul").append(BuildRecentWorkItem(
				$(el).attr("id"),
				$(el).attr("h3"),
				$(el).attr("p") ? "<p>" + $(el).attr("p") + "</p>" : $(el).text(),
				added
			));
			added++;
		}
	});
	$("#divide").height($("#rightBox").height() + globals.dividerHomePageMargin);
	setTimeout('featured()', globals.fuzzcoTimer);
}

function WorkHandler(xml)
{
	$(xml).find("item").each(function(i, el){
		
		var projectItem = {
			id : $(el).attr("id"), 
			images : $(el).attr("images"),
			filter : $(el).attr("filter"),
			vimeoClipId : $(el).attr("vimeoClipId")
		}
		var projectThumbHtml = BuildRecentWorkItem(
			$(el).attr("id"),
			$(el).attr("h3"),
			$(el).attr("p") ? "<p>" + $(el).attr("p") + "</p>" : $(el).text()
		);
		projectItem.gridViewItem = projectThumbHtml;
		store.push(projectItem);
		
	});
	
	var id = GetSelectedProjectId();
	if(id)
	{
		globals.firstLoad = true;
		$("#dynamicContent").html(workHtml.projectContainer);
		ShowProject(id);
		globals.firstLoad = false;
	}
	else
	{
		$("#dynamicContent").html("<div id=\"gridView\"></div>")
		SetFilteredElements('all');
		ShowGrid();
	}
}


/**************************************************************************************
markup production
**************************************************************************************/


function BuildHero(image, id)
{
	return "\
	<div class=\"item\">\
		<a class=\"image\" href=\"work.htm?yo={0}\">\
			<img alt=\"\" src=\"{1}\"/>\
		</a>\
	</div>".replace(/\{0\}/gi, id).replace(/\{1\}/gi, image);
}

function BuildHeroBullet(index)
{
	return "\
	<a onclick=\"featured_click(this);\">\
		<img alt=\"\" src=\"" + (index == 0 ? globals.bulletOn : globals.bulletOff) + "\"/>\
	</a>";
}

function BuildRecentWorkItem(id, h3, p, i)
{
	return "\
	<li onclick=\"GoTo('{0}');\">\
		<div class=\"thumbBox {1}\">\
			<img src=\"data/{2}/thumb.jpg\"/>\
			<h3>{3}</h3>\
			{4}\
		</div>\
	</li>".replace(/\{0\}/gi,id)
		  .replace(/\{1\}/gi, (i!=null && i%3==2) ? "last" : "")
		  .replace(/\{2\}/gi,id)
		  .replace(/\{3\}/gi,h3)
		  .replace(/\{4\}/gi,p);
}


/**************************************************************************************
project methods
TODO: refactor object in another file.
**************************************************************************************/


function ShowProject(id)
{	
	globals.currentProjectId = id;
	var stored = store.getVal(id);
	if(!stored.projectView)
	{
		$.get("data/" + id + "/copy.txt",{},function(copy){
			if(copy != "")
			{
				var imagesHtml = GetCurrentProjectMainContent();
				var stored = store.getVal(id);
				stored.projectView = workHtml.project.replace(/\{0\}/gi, imagesHtml.main)
					.replace(/\{1\}/gi, imagesHtml.thumbs)
					.replace(/\{2\}/gi, copy);
				SetProjectHtml(stored);
			}
			else
			{
				viewingProject = null;
				alert("Oops: tried to show you '" + id +"', but the files were missing!")
				SetFilteredElements(currentFilter);
				ShowGrid();
			}
		});
	}
	else
	{
		SetProjectHtml(stored);
	}
	$("#projBtns").fadeIn(500);
	
	// set up the hover event or the disabled pngs for next/prev buttons
	if(globals.firstLoad)
		SetFilteredElements('all');
	RegisterPagingButtons(currentFilteredProjectIds && currentFilteredProjectIds.length>1);
	
	$("#projectPrevious").click(function(){
		ShowNeighbourProject(false, id);
	});
	
	$("#projectNext").click(function(){
		ShowNeighbourProject(true, id);
	});
}

function SetProjectHtml(stored)
{
	var el = $("#projectViews").hide().html(stored.projectView);
	var vimeo = el.find("#vimeo");
	if(vimeo.length>0)
	{
		workHtml.vimeo.flashVars.clip_id = stored.vimeoClipId;
		swfobject.embedSWF(workHtml.vimeo.swf, "vimeo", workHtml.vimeo.width, workHtml.vimeo.height, "9.0.0", "", workHtml.vimeo.flashVars, workHtml.vimeo.params);
	}
	el.fadeIn(500);
	$("#backButton").show().click(function(){
		SetFilteredElements(currentFilter);
		ShowGrid();
	});
}

function ShowNeighbourProject(direction, id)
{
	if(currentFilteredProjectIds && currentFilteredProjectIds.length>1)
	{
		for(var i=0;i<currentFilteredProjectIds.length;i++)
			if(currentFilteredProjectIds[i] == id)
			{
				var selectIndex = (direction ? i+1 : i-1);
				if(selectIndex < 0)
					selectIndex = currentFilteredProjectIds.length-1;
					
					// animate the current project out to left or right, then animate the new one in :D
				$("#projectViews").animate({"margin-left": (direction ? "-" : "") + globals.projectAnimationDistance, opacity:0.5}, 200, function(){
					ShowProject(currentFilteredProjectIds[selectIndex % currentFilteredProjectIds.length]);
					$("#projectViews").css({"margin-left": (direction ? "" : "-") + globals.projectAnimationDistance}).animate({"margin-left":"0", opacity:1}, 200);
				});
				break;
			}
	}
	else
		return null;
}

function GetCurrentProjectMainContent()
{
	var returnValue = {thumbs : "", main : ""};
	var id = GetSelectedProjectId();
	var imageCount = store.getVal(id).images;
		
	if(store.getVal(id).vimeoClipId)
	{	// make div for swf.
		returnValue.main += "<div id=\"vimeoContainer\"><div id=\"vimeo\"></div></div>";
		returnValue.thumbs += "<img alt=\"\" src=\"data/" + id + "/vimeo.jpg\"/>";
	}
	for(var i=1;i<=imageCount;i++)
	{
		var src = "data/" + id + "/big" + i + ".jpg";
		returnValue.main += "<img alt=\"\" src=\"" + src + "\" style=\""+(returnValue.main == "" ? "" : "display:none;")+"\"\" />";//style=\""+(returnValue.main == "" ? "opacity:1;" : "opacity:0;")+"\"
		
		src = "data/" + id + "/small" + i + ".jpg";
		returnValue.thumbs += "<img alt=\"\" src=\"" + src + "\"/>";
	}
	return returnValue;
}

function GetSelectedProjectId()
{
	if(globals.currentProjectId != null)
		return globals.currentProjectId;
	var id;
	var str = window.location.search.search("yo=");
	if(str > 0)
		id = window.location.search.substr(str+3,window.location.search.length-(str+3));
	if(id != "")
		return id;
}



/**************************************************************************************
grid methods
TODO: refactor object in another file.
**************************************************************************************/

var currentFilter;
var currentFilteredProjectIds = [];

//allows fadeing the grid when switching to showing a project
function HideGrid(callback)
{
	var grid = $("#gridView");
	if(grid.length>0)
		grid.fadeOut(500, callback);
	else
		callback(params);
}

function SetFilteredElements(filter)
{
	// set currentFilter value for first page load
	currentFilter = filter ? filter : 'all';
	// set an empty array of filtered ids to page project view by
	currentFilteredProjectIds = [];
	
	for(var i=0;i<store.length;i++)
	{
		if(store[i].filter == currentFilter || currentFilter == "all")
			currentFilteredProjectIds.push(store[i].id);
	}
}

function ShowGrid(button)
{	
	// diable the back button which is for project view only
	$("#backButton").unbind("click").fadeOut(500);
	
	// set the correct underlines
	if(button && $(button).hasClass("button"))
		$(button).addClass("underline").siblings().removeClass("underline");
	
	var tofade = $("#projectViews");
	if(tofade.length>0)
	{
		$("#projectViews, #projBtns").fadeOut(500, function(){
			var el = BuildGrid(button);
			// reset and show
			$("#gridView").hide().html(el).fadeIn(500);
		});
	}
	else
	{
		var el = BuildGrid(button);
		$("#projBtns").fadeOut(500);
		// reset and show
		$("#gridView").hide().html(el).fadeIn(500);
	}
}

function BuildGrid(filter)
{
	// clear old grid view
	$("#dynamicContent").html("<div id=\"gridView\"></div>");
	
	// build html
	var el = "";
	for(var i=0;i<store.length;i++)
	{
		if(store[i].filter == currentFilter || currentFilter == "all")
			el += store[i].gridViewItem;
	}
	return el;
}


/**************************************************************************************
button event handler methods
**************************************************************************************/

function RegisterPagingButtons(active)
{
	$("#projectPrevious").unbind().attr("src","images/prevPieceBtn.png").css("cursor","pointer");
	$("#projectNext").unbind().attr("src","images/nextPieceBtn.png").css("cursor","pointer");
	if(active)
	{
		$("#projectPrevious").bind('mouseover mouseout', function(event) {
			if (event.type == 'mouseover')
				$(this).attr("src","images/prevPieceBtn_hover.png")
			else
				$(this).attr("src","images/prevPieceBtn.png")
		});
		$("#projectNext").bind('mouseover mouseout', function(event) {
			if (event.type == 'mouseover')
				$(this).attr("src","images/nextPieceBtn_hover.png")
			else
				$(this).attr("src","images/nextPieceBtn.png")
		});
	}
	else
	{
		$("#projectPrevious").attr("src","images/prevPieceBtn_disabled.png").css("cursor","default");
		$("#projectNext").attr("src","images/nextPieceBtn_disabled.png").css("cursor","default");
	}
}

$(window).bind('load', function () {
    $("#galleryThumbs img").live("click",function(){
		var i = $(this).index();
		var showing = $("#projectHero").children().filter(function(el){
			var $this = $(this);
			return $this.is(":visible");
		}); // get the single element with opacity 1

		if(i == showing.index())
			return;
	
		var notShowing = $($("#projectHero").children()[i]);
		if(showing[0].id == "vimeoContainer")
			showing.hide();
		else
			showing.fadeOut();
		notShowing.fadeIn();
	
	})
});

function GoTo(id)
{
	if(window.location.pathname.search('work.htm') > 0)
	{
		HideGrid(function(){
			$("#dynamicContent").html(workHtml.projectContainer)
			ShowProject(id);
		});
	}
	else
		window.location = "work.htm?yo=" + id;
}

function PopulateRss(xml)
{
	if(xml!="") {

		var titles = [];
		var xd;
		if ($.browser.webkit && window.DOMParser)
		{
			var parser = new DOMParser();
			xd = parser.parseFromString(xml, "text/xml");
		}
		else if($.browser.msie)
		{
			xd = new ActiveXObject('MSXML.DomDocument');
            xd.async = false;
            xd.loadXML(xml);
		}
        if (xd)
           	$(xd).find("title").each(function (i, el) {
           		titles.push($(el).text())
           	});

		$(xml).find("entry").each(function (i, el) {
			if (i < 5)
			{
				var title;
				if (titles.length>0)
					title = titles[i+1];
				else
					title = $(el).find("title").html();
				$("#blog").append("<li><a target=\"_blank\" href=\""
				+ $(el).find("link[rel=alternate]").attr("href")
				+ "\">"
				+ title
				+ "</a></li>");
			}
		});
	}
}

function SetTwitterLinkTargets()
{
	$("#twitter_update_list a").attr("target", "_blank");
}