var interval;
var speed = 700;
var easing = "easeInOutExpo";
var scrollable;
var contentStartY;
var aboutContentStartY;
var lastIndex = 0;
var moreProjectIndex = 0;
var numMoreProjects;
var moreProjectIndex2 = 0;
var numMoreProjects2;
var pages = ['home'];

$(document).ready(function()
{	
	$.ajax({
		type: "GET",
		url: "assets/xml/data.xml",
		dataType: "xml",
		success: parseXML
	});
});

$(window).load(function()
{
	position();
	$('.container').css({"visibility": "visible"});
	$('.container').css({"opacity": 0.0});
	$('.container').fadeTo(500, 1.0);
	$('#loader').css({"visibility": "hidden"});
	$("#quickNav").fadeOut(500);
	
	// calculate left margin for pagination based on # of slides
	$(".slides .pagination").each(function()
	{
		//console.log("Load - slides: "+$(this).find("li").length);
		
		var numSlides = $(this).find("li").length;
		var bulletSpacing = 2;
		var bulletsWidth = (24 * numSlides) + (bulletSpacing * (numSlides-1));
		var marginLeft = (490 - bulletsWidth) * 0.5;
		$(this).css({"margin-left": marginLeft});		
		
	});
	
	$(".slidesMore .pagination").each(function()
	{
		//console.log("Load - slidesMore: "+$(this).find("li").length);
		
		var numSlides = $(this).find("li").length;
		var bulletSpacing = 2;
		var bulletsWidth = (24 * numSlides) + (bulletSpacing * (numSlides-1));
		var marginLeft = (451 - bulletsWidth) * 0.5;
		$(this).css({"margin-left": marginLeft});		
		
	});
	
	$(".project").click(function()
	{
		//console.log("click: "+$(this).attr("index")+" : "+lastIndex);
		if(lastIndex != parseInt($(this).attr("index")))
		{
			seekTo(parseInt($(this).attr("index")));
		}
	});
	
	/*$(".desc a").each(function(){
		$(this).hover(function(){
			$(this).attr("startColor", $(this).css("color"));
			$(this).css("color", "#ffffff");
		},function(){
			$(this).css("color", $(this).attr("startColor"));
		});
	});*/
	
	$("#home").click(function()
	{
		//console.log("click: "+lastIndex);
		if(lastIndex != 0)
		{
			seekTo('0');
		}
	});
	
	$(this).keyup(function(event)
	{
		//console.log("key press: "+event.which+" : index: "+scrollable.getIndex());
		
		if(event.which == 36)
		{
			seekTo('0');
			return;
		}
		else if(event.which == 35)
		{
			gotoEnd();
			return;
		}
		
		var currentID = pages[scrollable.getIndex()];		
		if(currentID == 'home') return;
		
		//up
		if(event.which == 38)
		{
			if(currentID == 'moreWork')
			{
				prevMoreProject();
			}
			else if(currentID == 'moreWork2')
			{
				prevMoreProject2();
			}
			else
			{
				viewLess('#'+currentID+'_pc','#'+currentID);
			}
		}
		//down
		else if(event.which == 40)
		{
			if(currentID == 'moreWork')
			{
				nextMoreProject();
			}
			else if(currentID == 'moreWork2')
			{
				nextMoreProject2();
			}
			else
			{
				viewMore('#'+currentID+'_pc','#'+currentID);
			}
		}
	});
});

$(window).resize(function()
{
	position();
});

function parseXML(xml)
{	
	var pageIndex = 1;
	
	// main projects
	$(xml).find("projects").find("project").each(function()
	{
		var id = $(this).attr("id");
		var url = $(this).attr("url"); 
		var textColor = $(this).attr("textColor");
		var bgColor = $(this).attr("bgColor");
		var fwa = $(this).find("fwa").attr("url");
		var bgImage = $(this).find("backgroundImage").attr("url");
		var title = $(this).find("title").text();
		var subTitle = $(this).find("subTitle").text();
		var contentHeader = $(this).find("content").find("header").text();
		var contentText = $(this).find("content").find("text").text();
		var role = $(this).find("content").find("role").text();
		var company = $(this).find("content").find("company").text();
		var year = $(this).find("content").find("year").text();
		var moreBtnColor = $(this).find("moreBtn").attr("textColor");
		var moreBtnArrowImage = $(this).find("moreBtn").attr("arrowImage");
		var viewMore = "viewMore('#"+id+"_pc','#"+id+"');";
		var viewLess = "viewLess('#"+id+"_pc','#"+id+"');";
		var statsColor1 = $(this).find("content").find("stats").attr("color1");
		var statsColor2 = $(this).find("content").find("stats").attr("color2");
		
		pages.push(id);
		
		$(".items").append(
			"<div id='"+id+"' index='"+pageIndex+"' class='project'><div class='projectBg'><img src='"+bgImage+"' /></div><div id='"+id+"_pc' class='projectContent' style='background-color:"+bgColor+"'><div class='content'><div class='slides'><div class='slides_container'></div></div><div class='desc' style='color:"+textColor+"'><h1>"+contentHeader+"</h1><p>"+contentText+"</p></div><div class='stats'><h3>Role:</h3><h4>"+role+"</h4><h3>Company:</h3><h4>"+company+"</h4><h3>Year:</h3><h4>"+year+"</h4></div></div></div><div class='projectDescription'><span class='projectHeader' style='color:"+textColor+"'><h1>WORK</h1><h4>Project:<img src='assets/img/spacer.gif' width='244' height='1' /><a href='"+url+"' target='_blank'>Visit</a></h4><h2>"+title+"</h2><h5>"+subTitle+"</h5></span><div class='more'><a href='#' onClick="+viewMore+"><img src='assets/img/details.png' class='nav' name='details' /></a></div><div class='closeBtn'><a href='#' onClick="+viewLess+"><img src='assets/img/close.png' class='nav' name='close' /></a></div></div></div>"
		);
		
		pageIndex++;
		
		$(this).find("slides").find("slide").each(function()
		{
			if($(this).attr("isVideo") != null)
			{
				$(".slides_container:last").append($(this).text());
			}
			else
			{
				$(".slides_container:last").append("<img src='"+$(this).attr("url")+"' width='490' height='298' />");
			}
		});
		
		$(".stats:last h3").css({"color": statsColor1});
		$(".stats:last h4").css({"color": statsColor2});
		
		if(fwa != "")
		{
			$(".projectDescription:last").append(
				"<div class='fwa'><img src='"+fwa+"' /></div>"
			);
		}
	});
	
	// more work
	var moreColor = $(xml).find("moreWork").attr("moreColor");
	var workColor = $(xml).find("moreWork").attr("workColor");
	bgColor = $(xml).find("moreWork").attr("bgColor");
	moreBtnColor = $(xml).find("moreWork").find("moreBtn").attr("textColor");
	moreBtnArrowImage = $(xml).find("moreWork").find("moreBtn").attr("arrowImage");
	statsColor1 = $(xml).find("moreWork").find("stats").attr("color1");
	statsColor2 = $(xml).find("moreWork").find("stats").attr("color2");
	
	pages.push("moreWork");
	
	$(".items").append(
		"<div id='moreWork' index='"+pageIndex+"' class='project'><div class='moreHeader'><span class='projectHeader'><span class='moreWork_more' style='color:"+moreColor+"'>MORE</span><span class='moreWork_work' style='color:"+workColor+"'>WORK</span></span><div class='moreNav'><a href='#' onClick='prevMoreProject();'><img src='assets/img/moreUp.png' class='nav' name='moreUp' /></a><br /><br /><a href='#' onClick='nextMoreProject();'><img src='assets/img/moreDown.png' class='nav' name='moreDown' /></a></div></div><div class='moreProjects'><div class='moreProjectsContainer'></div></div></div>"
	);
	
	pageIndex++;
	
	$("#moreWork").css({"background-color": bgColor});
	
	$(xml).find("moreWork").find("project").each(function(){
		
		title = $(this).find("title").text();
		role = $(this).find("role").text();
		company = $(this).find("company").text();
		year = $(this).find("year").text();
		fwa = $(this).find("fwa").attr("url");
		url = $(this).attr("url");
		
		$("#moreWork .moreProjectsContainer").append(
			"<div class='project'><div class='moreProjectHeader'>"+title+"</div><br /><div class='slidesMore'><div class='slides_container'></div></div><div class='statsMoreProjects'><h3>Role:</h3><h4>"+role+"</h4><h3>Company:</h3><h4>"+company+"</h4><h3>Year:</h3><h4>"+year+"</h4><h4><a href='"+url+"' target='_blank' class='moreLink'>Visit</a></h4></div></div>"
		);
		
		$(this).find("slides").find("slide").each(function()
		{			
			if($(this).attr("isVideo") != null)
			{
				$(".slides_container:last").append($(this).text());
			}
			else
			{
				$(".slides_container:last").append("<img src='"+$(this).attr("url")+"' width='451' height='298' />");
			}
		});
		
		$(".statsMoreProjects:last h3").css({"color": statsColor1});
		$(".statsMoreProjects:last h4").css({"color": statsColor2});
		
		if(fwa != "")
		{
			$(".project:last").append(
				"<div class='morefwa'><img src='"+fwa+"' /></div>"
			);
		}
	});
	
	// more work 2
	moreColor = $(xml).find("moreWork2").attr("moreColor");
	workColor = $(xml).find("moreWork2").attr("workColor");
	bgColor = $(xml).find("moreWork2").attr("bgColor");
	moreBtnColor = $(xml).find("moreWork2").find("moreBtn").attr("textColor");
	moreBtnArrowImage = $(xml).find("moreWork2").find("moreBtn").attr("arrowImage");
	statsColor1 = $(xml).find("moreWork2").find("stats").attr("color1");
	statsColor2 = $(xml).find("moreWork2").find("stats").attr("color2");
	
	pages.push("moreWork2");
	
	$(".items").append(
		"<div id='moreWork2' index='"+pageIndex+"' class='project'><div class='moreHeader'><span class='projectHeader'><span class='moreWork_more' style='color:"+moreColor+"'>MORE</span><span class='moreWork_work' style='color:"+workColor+"'>WORK</span></span><div class='moreNav'><a href='#' onClick='prevMoreProject2();'><img src='assets/img/moreUp.png' class='nav' name='moreUp' /></a><br /><br /><a href='#' onClick='nextMoreProject2();'><img src='assets/img/moreDown.png' class='nav' name='moreDown' /></a></div></div><div class='moreProjects'><div class='moreProjectsContainer'></div></div></div>"
	);
	
	pageIndex++;
	
	$("#moreWork2").css({"background-color": bgColor});
	
	$(xml).find("moreWork2").find("project").each(function(){
		
		title = $(this).find("title").text();
		role = $(this).find("role").text();
		company = $(this).find("company").text();
		year = $(this).find("year").text();
		fwa = $(this).find("fwa").attr("url");
		url = $(this).attr("url");
		var video = $(this).find("video").text();
		
		$("#moreWork2 .moreProjectsContainer").append(
			"<div class='project'><div class='moreProjectHeader'>"+title+"</div><br /><div class='video'>"+video+"</div><div class='statsMoreProjects'><h3>Role:</h3><h4>"+role+"</h4><h3>Company:</h3><h4>"+company+"</h4><h3>Year:</h3><h4>"+year+"</h4><h4><a href='"+url+"' target='_blank' class='moreLink'>Visit</a></h4></div></div>"
		);
		
		$(".statsMoreProjects:last h3").css({"color": statsColor1});
		$(".statsMoreProjects:last h4").css({"color": statsColor2});
		
		if(fwa != "")
		{
			$(".project:last").append(
				"<div class='more2fwa'><img src='"+fwa+"' /></div>"
			);
		}
	});
	
	id = "about";
	url = $(xml).find("about").attr("url");
	bgColor = $(xml).find("about").attr("bgColor");
	bgImage = $(xml).find("about").find("backgroundImage").attr("url");
	textColor = $(xml).find("about").attr("textColor");
	moreBtnColor = $(xml).find("about").find("moreBtn").attr("textColor");
	moreBtnArrowImage = $(xml).find("about").find("moreBtn").attr("arrowImage");
	title = $(xml).find("about").find("title").text();
	subTitle = $(xml).find("about").find("subTitle").text();
	contentHeader = $(xml).find("about").find("content").find("header").text();
	contentText = $(xml).find("about").find("content").find("text").text();
	var viewMore = "viewMore('#"+id+"_pc','#"+id+"');";
	var viewLess = "viewLess('#"+id+"_pc','#"+id+"');";
	var recTitle = $(xml).find("about").find("content").find("recognition").find("recHeader").text();
	var totalFWA = $(xml).find("about").find("content").find("recognition").find("fwa").attr("total");
	var sotdFWA = $(xml).find("about").find("content").find("recognition").find("fwa").attr("sotd");
	var sotmFWA = $(xml).find("about").find("content").find("recognition").find("fwa").attr("sotm");
	var fwaImage = $(xml).find("about").find("content").find("recognition").find("fwa").attr("img"); 
	
	pages.push(id);
	
	$(".items").append(
		"<div id='"+id+"' index='"+pageIndex+"' class='project' style='background-color:#434343'><div class='projectBg'><img src='"+bgImage+"' /></div><div id='"+id+"_pc' class='projectContent' style='background-color:"+bgColor+"'><div id='aboutHands'><img src='assets/img/hands.png' /></div><div class='content'><div class='desc' style='color:"+textColor+"'><h1>"+contentHeader+"</h1><p>"+contentText+"</p></div><div id='recognition' style='color:"+textColor+"'><p class='recTitle'>"+recTitle+"</p><div id='awardsLine'><div class='fwaTotal'>"+totalFWA+"</div><div class='fwaImg'><img src='"+fwaImage+"' /></div><div class='awards'>Awards<br/><div class='subText'>and counting&hellip;</div></div><div class='sot'>"+sotdFWA+"<div class='subText'>Site of the Day</div></div><div class='sot'>"+sotmFWA+"<div class='subText'>Site of the Month</div></div></div><div id='books'></div><div id='continued'><div class='line'></div><br/>To be continued&hellip;</div></div></div></div><div class='projectDescription'><div class='getInTouch' style='color:"+textColor+"'>Get in touch<br/><a href='mailto:aster@synthesis01.com'><img src='assets/img/email.png' class='nav' name='email' /></a><a href='http://www.linkedin.com/profile/view?id=14279338' target='_blank'><img src='assets/img/linkedin.png' class='nav' name='linkedin' /></a></div><span class='projectHeader' style='color:"+textColor+"'><h1>ABOUT</h1><h4>Identity:</h4><h2>"+title+"</h2><h5>"+subTitle+"</h5></span><div id='aboutEnd'></div><div class='more'><a href='#' onClick="+viewMore+"><img src='assets/img/details.png' class='nav' name='details' /></a></div><div class='closeBtn'><a href='#' onClick="+viewLess+"><img src='assets/img/close.png' class='nav' name='close' /></a></div></div></div>"
	);
	
	$(xml).find("about").find("book").each(function(){
		
		var bookImage = $(this).attr("img");
		var bookURL = $(this).attr("url");
		var bookTitle = $(this).attr("title");
		
		$("#books").append(
			"<div class='book'><a href='"+bookURL+"' target='_blank'><img src='"+bookImage+"' /></a><br/><span class='label'>"+bookTitle+"</span></div>"
		);
	
	});
		
	//$("#about").css({"background-color": bgColor});
	
	// init
	init();
}

function init()
{		
	$(".all").scrollable({"speed":speed, "easing":easing, "keyboard":true});
	
	$(".slides").slides({
		generateNextPrev: false,
		pagination: true,
		generatePagination: true,
		slideEasing: easing,
		slideSpeed: 500
	});
	
	$(".slidesMore").slides({
		generateNextPrev: false,
		pagination: true,
		generatePagination: true,
		slideEasing: easing,
		slideSpeed: 500
	});
	
	contentStartY = $('.projectContent').css("top");
	aboutContentStartY = $('#about .projectContent').css("top");
	
	scrollable = $(".all").data("scrollable");
	
	numMoreProjects = $("#moreWork .moreProjectsContainer .project").length;
	numMoreProjects2 = $("#moreWork2 .moreProjectsContainer .project").length;
	
	position();
	
	setOnBeforeSeek(true);
	
	scrollable.onSeek = function(){
		var index = this.getIndex();
		if(index > 0){
			$("#prevArrow").show();
			$("#nextArrow").css({"left": 756});
			if(index == this.getSize()-1){
				$("#nextArrow").hide();	
			}else{
				$("#nextArrow").show();
			}
			
			$("#quickNav").fadeIn(250);
		}else{
			$("#prevArrow").hide();
			$("#nextArrow").show();
			$("#nextArrow").css({"left": 750});
			$("#quickNav").fadeOut(250, function(){ $("#quickNav").hide(); });
		}
		$("#arrowNav").fadeIn(150);
		
		this.getConf().keyboard = true;
		
		lastIndex = index;
	};
	
	/*$(".container").keydown(function(evt){
		e.preventDefault();
		console.log("keypress: "+evt.which);
	});*/
	
	$(".nav").mouseover(function(){
		$(this).attr("src", "assets/img/" + $(this).attr("name") + "_over.png");
	});
	
	$(".nav").mouseout(function(){
		$(this).attr("src", "assets/img/" + $(this).attr("name") + ".png");
	});
}

function onSeekStart()
{
	clearInterval(interval);
	interval = undefined;
	
	// check if not at last item
	if(scrollable.getIndex() != lastIndex){
		scrollable.getConf().keyboard = false;
		$("#arrowNav").fadeOut(150);
	}
	
	var offset;
	if(scrollable.getIndex() > 0){
		offset = ($(document).width() - $(".project").width()) * .5;
	}else{
		offset = 0;
	}
	
	$(".all").animate( {left: offset}, speed, easing );
}

function setOnBeforeSeek(add)
{
	if(scrollable == undefined) return;
	
	if(add)
	{
		scrollable.onBeforeSeek = function()
		{	
			if(interval != undefined) return;
			clearInterval(interval);
			interval = undefined;
			interval = setInterval(onSeekStart, 10);
		};
	}
	else
	{
		scrollable.onBeforeSeek = null;
	}
}

function seekTo(index)
{
	scrollable.seekTo(index, speed);
}

function gotoEnd()
{
	//speed * (scrollable.getItems().length * 0.5)
	scrollable.end(speed);
}

function viewMore(id, divID)
{
	//console.log("viewMore: "+id+" : "+divID);
	
	var offset = 400;
	// move WORK up
	$(divID + ' .projectDescription h1').animate({"margin-top": -offset}, speed, easing);
	// move everything below WORK down to appear still
	$(divID + ' .projectDescription h1').next().animate({"margin-top": offset}, speed, easing);
	
	var bgOffset = (divID == "#about") ? -500 : -200;
	
	$(divID + ' .projectBg').animate({"top": bgOffset}, speed, easing);
	
	// animate content up
	$(id).animate({"top":-837}, speed, easing);
	
	// hide more button
	$(divID + ' .more').css({"visibility": "hidden"});
	
	// show close button
	$(divID + ' .closeBtn').css({"visibility": "visible"});
}

function viewLess(id, divID)
{
	// move WORK up
	$(divID + ' .projectDescription h1').animate({"margin-top": 0}, speed, easing);
	// move everything below WORK up to appear still
	$(divID + ' .projectDescription h1').next().animate({"margin-top": 0}, speed, easing);
	
	$(divID + ' .projectBg').animate({"top": 0}, speed, easing);
	
	// animate content up
	$(id).animate({"top":(divID == "#about") ? aboutContentStartY : contentStartY}, speed, easing);
	
	// hide more button
	$(divID + ' .more').css({"visibility": "visible"});
	
	// show close button
	$(divID + ' .closeBtn').css({"visibility": "hidden"});
}

function nextMoreProject()
{
	if(moreProjectIndex < numMoreProjects-1)
	{
		moreProjectIndex++;
		var offset = -420 * moreProjectIndex;
		$("#moreWork .moreProjectsContainer").animate({"margin-top": offset}, speed, easing);
	}
}

function prevMoreProject()
{
	if(moreProjectIndex > 0)
	{
		moreProjectIndex--;
		var offset = -420 * moreProjectIndex;
		$("#moreWork .moreProjectsContainer").animate({"margin-top": offset}, speed, easing);
	}
}

function nextMoreProject2()
{
	if(moreProjectIndex2 < numMoreProjects2-1)
	{
		moreProjectIndex2++;
		var offset = -420 * moreProjectIndex2;
		$("#moreWork2 .moreProjectsContainer").animate({"margin-top": offset}, speed, easing);
	}
}

function prevMoreProject2()
{
	if(moreProjectIndex2 > 0)
	{
		moreProjectIndex2--;
		var offset = -420 * moreProjectIndex2;
		$("#moreWork2 .moreProjectsContainer").animate({"margin-top": offset}, speed, easing);
	}
}

function getInTouch()
{
	window.location.href = "mailto:aster@synthesis01.com";
}

function position()
{
	setOnBeforeSeek(false);
	
	var docWidth = $(document).width();
	var docHeight = $(document).height();
	var homeWidth = $("#homeContent").width();
	var homeHeight = $("#homeContent").height();
	var padding = (docWidth - $("#homeFg").width()) * .5;
	
	//$("#container").css("height", docHeight + 5);
	
	$("#homeContent").css({"padding-left": padding, "padding-right": padding, "margin-left" : 0});
	
	if(scrollable != undefined && scrollable.getIndex() > 0)
	{
		
		scrollable.seekTo(scrollable.getIndex(), 0);
		var offset = ($(document).width() - $(".project").width()) * .5;
		$(".all").stop();
		$(".all").css({"left": offset});
	}
	
	$(".all").css({"margin-top" : ((docHeight - homeHeight) * 0.5) + 40});
	$("#nav").css({"top": $("#homeFg").position().top + 256, "left": $("#homeFg").position().left + 790});
	//$("#arrowNav").css({"left": (docWidth - $("#arrowNav").width()) * .5, "top": (docHeight - $("#arrowNav").height()) * .5});
	//$("#arrowNav").css({"left":"50%", "top":"50%", "margin-left":-($("#arrowNav").width() * .5), "margin-top":-($("#arrowNav").height() * .5)});
	setOnBeforeSeek(true);
}