$(function() {
	$("#navi").supafly();
	
	var winHeight = $(window).height() - 38 - 9;
	var winWidth = $(window).width();
	var footHeight = $(window).height() - 9;
	
	$("#content").css('width', winWidth).css('height', winHeight);
	$(".holder").css('height', winHeight);
	$(".shadow").css('height', winHeight);
	$(".cwhite").css('height', winHeight);
	$("#footer").css('top', footHeight);
	
	var subHeight = $("#content").height() - $(".bwhite").height() - 50;
	
	$(".btransp").css('height', subHeight);	
	
	// Size background image 
	
	var bgNWidth = $(window).width();
	var bgNHeight = $(window).height();
	var bgNRatio = 1200 / 800;
	
	var imgWidth = bgNWidth;
	var imgHeight = (imgWidth / 1200) * 800;
	var width_diff = 0;
	var height_diff = -(imgHeight - bgNHeight) / 2;
	
	if (imgHeight < bgNHeight) {
		imgHeight = bgNHeight;
		imgWidth = (imgHeight / 800) * 1200;
		height_diff = 0;
		width_diff = -(imgWidth - bgNWidth) / 2;
	}
	
	var newWidth = Math.ceil(imgWidth);
	var newHeight = Math.ceil(imgHeight);
	
	$("#layoutdiv").css('width', bgNWidth).css('height', bgNHeight).css('z-index', '-300');
	$("#layout").css('width', newWidth).css('height', newHeight).css('top', height_diff).css('left', width_diff).css('overflow', 'hidden');
	
	// End background sizing
	
	$(window).resize(function () {
		var nHeight = $(window).height() - 38 - 9;
		var nWidth = $(window).width();
		var nfootHeight = $(window).height() - 9;
		
		$("#content").css('width', nWidth).css('height', nHeight);
		$(".holder").css('height', nHeight);
		$(".shadow").css('height', nHeight);
		$(".cwhite").css('height', nHeight);
		$("#footer").css('top', nfootHeight);
		
		var nsubHeight = $("#content").height() - $(".bwhite").height() - 50;
		
		$(".btransp").css('height', nsubHeight);
		$(".jScrollPaneContainer").css('height', nsubHeight);
		$(".jScrollPaneTrack").css('height', nsubHeight - 18);
		
		$(".btransp").jScrollPane({showArrows : true}); // Re-initialize our scrolling pane		
		
		// Re-Size background image 
	
		var bgNWidth = $(window).width();
		var bgNHeight = $(window).height();
		var bgNRatio = 1200 / 800;
		
		var imgWidth = bgNWidth;
		var imgHeight = (imgWidth / 1200) * 800;
		var width_diff = 0;
		var height_diff = -(imgHeight - bgNHeight) / 2;
		
		if (imgHeight < bgNHeight) {
			imgHeight = bgNHeight;
			imgWidth = (imgHeight / 800) * 1200;
			height_diff = 0;
			width_diff = -(imgWidth - bgNWidth) / 2;
		}
		
		var newWidth = Math.ceil(imgWidth);
		var newHeight = Math.ceil(imgHeight);
		
		$("#layoutdiv").css('width', bgNWidth).css('height', bgNHeight).css('z-index', '-300');
		$("#layout").css('width', newWidth).css('height', newHeight).css('top', height_diff).css('left', width_diff);	
		
		// End re-size background
	});
	
	$(".btransp").jScrollPane({showArrows : true});
	
	var prevID = "";
	
	$("#navi .navhover").hover(function() { 
		var imgID = $(this).attr('id');
		prevID = imgID;
		var endconstant = "-over.jpg";
		
		$(this).attr('src', "images/" + imgID + endconstant);
	}, function() {
		$(this).attr('src', "images/" + prevID + ".jpg");	
	});
});