var photos = [];
var asidePos;
var imgPath;
var curIndex;
var loadLock;

$.fn.image = function (src, f){
	return this.each(function(){
		var i = new Image();
		i.src = src;
		i.onload = f;
		this.appendChild(i);
	})
}
$(document).bind('keydown', 'left', function(){
	$('nav div').eq(curIndex-1).click();
});
$(document).bind('keydown', 'right', function(){
	if (curIndex >= photos.length-1){
		curIndex = -1;
	}
	$('nav div').eq(curIndex+1).click();
});

$(document).ready(function(){
	Cufon.replace('footer a', { fontFamily: 'Museo Sans', hover: true});
	Cufon.replace('.sans', { fontFamily: 'Museo Sans', hover: true});
	Cufon.replace('.slab', { fontFamily: 'Museo Slab', hover: true});
	$('#photo').css({'opacity':0});
	$('#description').css({'opacity':0});
	
	$('nav').addClass('js');
	$('nav div').addClass('js');
	$('nav div').show();
	$('nav div').each(function(){
		var src = $(this).find('a').attr('href');
		var title = $(this).find('a').html();
		var des = $(this).find('span.description').html();
		var link = $(this).find('span.link').html();
		photos.push([src,title,des,link,0]);
	})

	var navWidth = (photos.length*16)-8;
	var navLeft = (500 - navWidth)/2;
	$('nav').css({'left':navLeft}).delay(500).animate({opacity:1},400);
	$('nav div').eq(0).addClass('active');
	
	$('#lightoff').mouseover(function(){
			if (loadLock){
				return false;
			}
			$('body').css({"background-color":"rgb(40,40,46)"});
			$('#description').animate({opacity:0}, 500);
			$('nav').animate({opacity:0}, 300);
			$('header').animate({opacity:0}, 400);
			$('aside').animate({left:220}, 300);
			$('footer').animate({left:-220}, 300);
	});
	$('#lightoff').mouseout(function(){
			$('body').css({"background-color":"rgb(238, 238, 238)"});
			$('#description').animate({opacity:.8}, 500);
			$('nav').animate({opacity:1}, 600);
			$('header').animate({opacity:1}, 600);
			$('aside').animate({left:0}, 300);
			$('footer').animate({left:0}, 300);
	});
	$('nav div').click(function(){
		if (loadLock){
			return false;
		}
		loadLock = true;
		$('nav div').removeClass('active');
		var index = $(this).index();
		curIndex = index;
		
		$('nav div').eq(index).addClass('active');
		
		imgPath = photos[index][0];
		imgLoaded = photos[index][4];
		
		$('#photo').animate({opacity:0}, 300);
		$('#description').animate({opacity:0}, 300);
		setTimeout(function(){
			if (imgLoaded == 1){
				showImg();
			}else{
				$('#loader').image(imgPath,showImg);
			}
			$('#description strong').html(photos[index][1]);
			$('#description span').html(photos[index][2]);
			
			Cufon.replace('#description strong', { fontFamily: 'Museo Slab', hover: true});
			Cufon.replace('#description span', { fontFamily: 'Museo Sans', hover: true});
		},300);
	});
	$('nav div').eq(0).click();
});

function showImg(){
	$('#photo img').attr('src',imgPath).attr('alt',photos[curIndex][1]);
	
	photos[curIndex][4] = 1;
	
	if (photos[curIndex][3] != ""){
		$('#photo img').live('click',function(){
			location.href = photos[curIndex][3];
		}).addClass('clickable');
	}else{
		$('#photo img').die('click').removeClass('clickable');
	}
	$('#photo').delay(100).animate({opacity:1},300);
	$('#description').delay(100).animate({opacity:1},300);
	setTimeout(function(){
		loadLock = false;
	},300);
}