var maxThumbnailWidth = 9;
var randomFactorForThumbnailSize=30;
var offsetX = 0;
var offsetY = 20;

$(initWorkNav);

function initWorkNav() {
	sizeNav();
	initThumbnails();
	sizeThumbnails();
	$(window).resize(sizeNav);
	$("nav#work li").mouseenter(showNavTitle);
	$("nav#work li").mouseleave(hideNavTitle);
	$("nav#work li").click(hideNavTitle);
	$("html").mousemove(moveNavTitle);
	/*if($("body.home").size()>0) {
		$("nav#work").show();
	}*/
	hideAllNavTitles();
}

function initThumbnails() {
	$("nav#work img").each(function() {
		$(this).attr('ratio',$(this).attr('width')/$(this).attr('height'));
		$(this).removeAttr('title');
		$(this).removeAttr('alt');
	});
}

function sizeNav() {
	$("nav#work").width($(window).width()*.8);
}

function sizeThumbnails() {
	$("nav#work img").each(function() {
		var maxWidth = Math.round(($(window).width()/100*maxThumbnailWidth));
		maxWidth += Math.round((Math.random()-.5)*randomFactorForThumbnailSize);
		if($(this).width()>$(this).height()) {
			$(this).width(maxWidth);
			$(this).height(maxWidth/$(this).attr('ratio'));
		} else {
			$(this).height(maxWidth);
			$(this).width(maxWidth*$(this).attr('ratio'));		
		}	
	});

}

function showNavTitle(e) {
	var id = $(this).attr('id').substr("project".length);
	$("#thumbnailTitle"+id).show();
	$("#thumbnailTitle"+id).draggable();        
}

function hideNavTitle(e) {
	var id = $(this).attr('id').substr("project".length);
	$("#thumbnailTitle"+id).hide();	
}


function hideAllNavTitles(e) {

	$(".thumbnailTitle").hide();	
}
function moveNavTitle(e) {
	var off = $("nav#work").offset();
	var x = e.pageX + offsetX - off.left;
	var y = e.pageY + offsetY - off.top;
	$(".thumbnailTitle:visible").css({top:y+ "px", left: x +"px"})
}