var SITE = {
	CONTENT_OPEN_WIDTH:300,
	CONTENT2_OPEN_WIDTH:700,
	CONTENT2_CLOSE_WIDTH:0,
	BG_COUNT:2
}

var vars = {
	content2_open:false,
	cur_project_id:-1,
	site_data:null,
	images_to_load:0,
	slideshow_visible:false,
	images_array:null
}

$(document).ready(init);

function init()
{
	$("body").css("background-image",'url("images/site/bg' + Math.ceil(Math.random() * SITE.BG_COUNT) + '.jpg")');
	
	$("#loading").css("visibility","visible");
	$("#loading").css("margin-left",-Math.round($("#loading").width() / 2));
	$("#loading").css("margin-top",-Math.round($("#loading").height() / 2));
	
	$(window).resize(documentResize);
	loadData1();
}

function siteReady()
{
	documentResize();
	
	$("#loading").css("display","none");
	
	$("#fade").animate({
							opacity:0
						},
						1000,
						"linear",
						fadeOutComplete
						);
}

function loadData1()
{
	$.getJSON("data/sitedata.json",data1Complete);
}

function data1Complete(dta,code)
{
	vars.site_data = dta;
	
	buildMenus();
	buildImages();
}

function afterBuildImages()
{
	siteReady();
}

function buildImages()
{
	var len = vars.site_data.length;
	var i = 0;
	var dta;
	var img;
	
	vars.images_array = [];
	vars.images_to_load = len;
	
	while(i < len)
	{
		dta = vars.site_data[i];
		
		img = $('<img width="700" height="400" alt="' + dta.nom + '" />');
		img.load(imageLoaded);
		img.attr("src",dta.img);
		img.css("opacity",0);
		img.css("position","absolute");
		img.css("top",0);
		img.css("left",0);
		
		vars.images_array.push(img);
		
		$("#images").append(img);
				
		i++;	
	}
}

function imageLoaded()
{
	vars.images_to_load--;
	
	if(vars.images_to_load == 0)
	{
		afterBuildImages();	
	}	
}

function buildMenus()
{
	var len = vars.site_data.length;
	var i = 0;
	var dta;
	var span;
	
	while(i < len)
	{
		dta = vars.site_data[i];
		
		span = '<span class="menuitem">• <a href="#portfolio/' + dta.nom.replace(/ /g,'-') + '" onclick="proj(' + i + ');">' + dta.nom + '</a></span>';
		
		$("#menu1").append(span);	
		
		i++;	
	}
}

function animIn()
{
	$("#line").animate({
							height:"100%"
						 },
						 500,
						 "swing"
						 );
						 
	$("#header").delay(250).animate({
							left:"0"
						 },
						 500,
						 "swing"
						 );		
						 
	$("#menu1").delay(350).animate({
							left:"0"
						 },
						 500,
						 "swing"
						 );
						 
	$("#menu2").delay(450).animate({
							left:"0"
						 },
						 500,
						 "swing"
						 );	
						 
	$("#copy").delay(550).animate({
								left:"0"
							 },
							 500,
							 "swing"
							 );						 			 
}

function proj(id)
{
	if(id == vars.cur_project_id) return;
	
	vars.cur_project_id = id;
	
	//setHash(vars.cur_project_id);
	setProject();
}

/*function setHash(val)
{
	window.location.hash = val;
}*/

function setProject()
{
	if(!vars.content2_open)
	{
		openContent2();
	}
	else
	{
		slideshow();
	}	
}

function openContent2()
{
	$("#content2").animate({
								"width":SITE.CONTENT2_OPEN_WIDTH,
								"padding-right":10
							},
							500,
							"swing",
							afterOpenContent2
							);	
							
	$("#slide").animate({
						"left":Math.round((SITE.CONTENT2_OPEN_WIDTH - SITE.CONTENT_OPEN_WIDTH) / 2)
						},
						500,
						"swing"
						);					
}

function closeContent2()
{
	$("#content2").animate({
								"width":SITE.CONTENT2_CLOSE_WIDTH,
								"padding-right":0
							},
							500,
							"swing",
							afterCloseContent2
							);	
							
	$("#slide").animate({
						"left":-Math.round(SITE.CONTENT_OPEN_WIDTH / 2)
						},
						500,
						"swing"
						);	
}

function afterCloseContent2()
{
	vars.content2_open = false;	
	vars.cur_project_id = -1;
	killSlideshow();
}

function afterOpenContent2()
{
	vars.content2_open = true;
	setProject();
}

function killSlideshow()
{
	var len = vars.images_array.length;
	var i = 0;
	
	while(i < len)
	{
		$(vars.images_array[i]).stop();	
		$(vars.images_array[i]).css("opacity",0);
		
		i++;	
	}
	
	$("#title").stop();
	$("#title").css("opacity",0);
	
	$("#desc").stop();
	$("#desc").css("opacity",0);
}

function slideshow()
{
	killSlideshow();
	
	$(vars.images_array[vars.cur_project_id]).animate({
															"opacity":1
														},
														200,
														"linear"
														);	
	
	var dta = vars.site_data[vars.cur_project_id];
														
	$("#title").html(
					'<span id="nom">' + dta.nom + '</span>' + 
					(dta.url != undefined ? ' - <span id="url"><a href="' + dta.url + '" target="_blank">' + dta.url + '</a></span>' : '')
					);
					
	$("#desc").html(
					dta.desc + 
					(dta.desc2 != undefined ? '<br/>' + dta.desc2 : '')
					);				
														
	$("#title").delay(100).animate({
										"opacity":1
									},
									200,
									"linear"
									);	
									
	$("#desc").delay(200).animate({
										"opacity":1
									},
									200,
									"linear"
									);																						
}

function documentResize(evt)
{
	var wH = $(window).height();
	var cH = $("#content").height();
	var c2H = $("#content2").height();
	
	$("#content").css("top",Math.round((wH / 2) - (cH / 2)));
	
	$("#content2").css("top",Math.round((wH / 2) - (c2H / 2)));
	
	$("#main").css("left",Math.round($(window).width() / 2));
}

function fadeOutComplete()
{
	$("#fade").css("display","none");
	
	animIn();
}