$(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 ul#statement li').bind('click',function(){
		$('#col-middle ul li:last').trigger('click')
	});
	$('#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').live('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').live('mouseover mouseout', function(event) {
		if (event.type == 'mouseover') {
		    $(this).addClass('hover'); 
		  } else {
		    $(this).removeClass('hover'); 
		  }
	});
	
});
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) {
	$('#preview-img').css('opacity',0).css('visibility','visible');
	
	if (src !== '') {
		$('#preview-img div#img').css('display','block');
		var img = new Image();
		$(img).attr('src',src);
		$('#img').empty();
		$(img).appendTo($('#img'));
		$('#desc').removeClass('statement').html(desc);
		var img = new Image();
		$(img).load(function () {
			$('#preview-img').animate({opacity:1.0},{duration: 400, easing: 'easeInOutExpo',complete:function(){
			}});
	    }).attr('src', src);
	} else {

		$('#preview-img div#img').css('display','none');
		$('#desc').addClass('statement').html(desc);
		$('#preview-img').animate({opacity:1.0},{duration: 400, easing: 'easeInOutExpo',complete:function(){
			
		}});
	}
	
	//var offscreen = $(window).height();
	

}
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));
			
			if (portfolioList[i][j].thumb=='statement') {
				$(li).html((j+1));
				$(li).addClass('statement');
			} else {
				$(li).html((j+1));
			}
			$(li).appendTo($(ul));
		}
		$(ul).appendTo($('#col-middle'));
	}
}