$(window).load(function(){
	contentMargin = $('#content').outerHeight({ margin: true });
	$(window).resize(function(){
	  resizeColumn();
	});
	
	
	resizeColumn();
	buildULs();
	toggleThumbs(currentIndex());	
	$('#col-left li.selected ul li').hover(
		function(){
			$(this).addClass('hover');
		},function(){
			$(this).removeClass('hover');
		}
	);
	$('#col-left li.selected ul li[class*="step"]').bind('click',function(){
		highLight(this);
		toggleThumbs(currentIndex());
	});
	$('#col-left li.selected ul li[class*="next"]').bind('click',function(){
		var nxt = $('#col-middle ul li.selected').next();
		if (nxt.length==1) {
			var src = nxt.metadata('class','params').src;
			var desc = nxt.metadata('class','params').desc;
			loadImg(src,desc);
			highLightThumb(nxt);
		} else {
			var cur = ($('#col-left li.selected ul li.selected').prevAll().length)-1;
			if (cur < 0) cur = $('#col-left li.selected ul li.step').length-1;
			highLight($('#col-left li.selected ul li.step:eq('+(cur)+')'));
			toggleThumbs(currentIndex());
		}
	});
	$('#col-left li.selected ul li[class*="prev"]').bind('click',function(){
		var nxt = $('#col-middle ul li.selected').prev();
		if (nxt.length==1) {
			var src = nxt.metadata('class','params').src;
			var desc = nxt.metadata('class','params').desc;
			loadImg(src,desc);
			highLightThumb(nxt);
		} else {
			var cur = ($('#col-left li.selected ul li.selected').nextAll().length);
			if (cur > $('#col-left li.selected ul li.step').length) cur = 0;
			highLight($('#col-left li.selected ul li.step:eq('+(cur)+')'));
			toggleThumbs(currentIndex());
		}
	});
	$('#col-middle ul li').livequery('click',function(){
		var src = $(this).metadata('class','params').src;
		var desc = $(this).metadata('class','params').desc;
		loadImg(src,desc);
		highLightThumb($(this));
	});
	$('#col-middle ul li').livequery(function(){ 
	        $(this) 
	            .hover(function() { 
	                $(this).addClass('hover'); 
	            }, function() { 
	                $(this).removeClass('hover'); 
	            }); 
	    },function() { 
	        $(this).unbind('mouseover').unbind('mouseout'); 
	    });
});
function currentIndex() {
	$dex = $('#col-left li.selected ul li.selected').text();
	if ($dex == '') $dex = 1;
	return parseInt($dex)-1;
}
function highLight(ob) {
	$('#col-left li.selected ul li').removeClass('selected');
	$(ob).addClass('selected');
}
function highLightThumb(ob) {
	$('#col-middle ul li').removeClass('selected');
	$(ob).addClass('selected');
}
function resizeColumn() {
	//$('#content').css('height',$(window).height()-$('#head').outerHeight()-contentMargin);
	$('#col-middle').css('height',$(window).height()-$('#head').outerHeight()-contentMargin);
}
function toggleThumbs(index) {

	var next = $('#col-middle ul:eq('+index+')');
	var offscreen = $(window).height();
	$('#col-middle ul').css('visibility','hidden');
	next.css('visibility','visible');
	//next.css('top',offscreen);
	next.css('opacity',0);
	next.animate({opacity:1.0},{duration: 400, easing: 'easeInOutExpo'});
	loadImg(next.find('>li:eq(0)').metadata('class','params').src,next.find('>li:eq(0)').metadata('class','params').desc);
	highLightThumb(next.find('>li:eq(0)'));
}
function loadImg(src,desc) {
	var img = new Image();
	$(img).attr('src',src);
	$('#img').empty();
	$(img).appendTo($('#img'));
	$('#desc').html(desc);
	//var offscreen = $(window).height();
	$('#preview-img').css('opacity',0).css('visibility','visible');
	var img = new Image();
	$(img).load(function () {
		$('#preview-img').animate({opacity:1.0},{duration: 400, easing: 'easeInOutExpo'});
    }).attr('src', src);
}
function buildULs() {
	//alert(portfolioList.length)
	for (var i = 0; i<portfolioList.length; i++) {
		var ul = document.createElement('ul');
		for(var j=0; j<portfolioList[i].length; j++) {
			var li = document.createElement('li');
			var img = document.createElement('img');
			$(img).attr('src',portfolioList[i][j].thumb);
			$(li).attr('class',"params{src:'"+portfolioList[i][j].full+"',desc:'"+portfolioList[i][j].desc+"'}");
			$(img).appendTo($(li));
			$(li).appendTo($(ul));
		}
		$(ul).appendTo($('#col-middle'));
	}
}