var thumbs = [];
var fullsize = [];
var totalimgs = 0;
var totalloaded = 0;
var fullloaded = 0;
var firstloaded = false;

$(function(){
	var anchors = $('#col-right a');
	var targ = $('#col-left #pic');
	thumbs = $('#col-right a img');
	fullsize = $.map($.makeArray(thumbs),function(n,i) {
		return $(n).parent().attr("href");
	});
	thumbs = $.map($.makeArray(thumbs),function(n,i) {
		return $(n).attr("src");
	});
	var allimgs = $.makeArray(thumbs,fullsize);
	totalimgs = thumbs.length;
	totalloaded = 0;
	// var nums = $('<div id="nums" />');
	// 	nums.css({
	// 		top: '200px',
	// 		left: '500px',
	// 		position:'absolute'
	// 	});
	// 	nums.appendTo('body');
	// 	nums.text('0 of '+totalimgs+' loaded');
	
	loadthumbs();
	loadfull(0);
	var loadint = setInterval(function(){
		if (totalloaded == totalimgs && fullloaded > 0) {
			showInterface();
			clearInterval(loadint);
		}
		
	},10);
	anchors.click(function(e){
		e.preventDefault();
		if (!$(this).parent().hasClass('selected'))
		{
			$('#col-right .selected').removeClass('selected');

			var img = $(this).attr("href");

			targ.css('background-image','url('+img+')');
			$(this).parent().addClass('selected');
		}		
		
	});
	var nextbtn = $('#np .next');
	var prevbtn = $('#np .prev');
	
	nextbtn.click(function(e){
		
		var index = $('#col-right .selected').prevAll().length;
		index = (index + 1 >= anchors.length) ? 0 : index + 1;
		
		$(anchors[index]).trigger('click');
		
		e.preventDefault();
	});
	prevbtn.click(function(e){
		
		var index = $('#col-right .selected').prevAll().length;
		index = (index - 1 < 0) ? anchors.length-1 : index - 1;

		$(anchors[index]).trigger('click');
		
		e.preventDefault();
	});
});
function loadthumbs() {
	thumbs.map(function(n){
		var newimg = $(new Image());
		newimg.attr('src',n)
		newimg.load(function(){
			totalloaded++;
		})
	});
}
function loadfull(index) {
	var newimg2 = $(new Image());
	newimg2.attr('src',fullsize[index])
	newimg2.load(function(){
		fullloaded++
		if (index < totalimgs) loadfull(fullloaded);
	});
}
function showInterface() {
	//$('#nums').toggle();
	$('#col-left').css('visibility','visible').toggle().fadeIn('fast');
	$('#col-right').css('visibility','visible').toggle().fadeIn('fast');
}