var positionMenu = function () {
	var w = 0;
	var ml = $("#header .menu-list");
	ml.find("> li").each(function(){
		w += $(this).width() + 1;
	});
	var left = Math.floor((834 - w) / 2);
	ml.css("left", left);
}

$(function(){
	positionMenu();
});

(function($){
	
	var resizeBackground = function () {
		
		var background = $("#background");
		var image = background.find("> img");
		var imageRatio = image.data("ratio");
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var windowRatio = windowWidth / windowHeight;
		var bodyHeight = $("body").height();
		var imageWidth, imageHeight, imageLeft, imageTop;
		var maxScroll = bodyHeight - windowHeight;
		// var scrollY = window.scrollY;
		var scrollY = $(window).scrollTop();
		if (scrollY > maxScroll) scrollY = maxScroll;
		if (scrollY < 0) scrollY = 0;
		var scrollPercentage = scrollY / maxScroll;
		
		// window.scrollY
		
		// resize the image to completely cover the screen
		// and position it based on the scroll percentage
		if (imageRatio > windowRatio) {
			// the image is wider than the window
			imageHeight = windowHeight;
			imageWidth = Math.round(imageHeight * imageRatio);
			imageTop = 0;
			imageLeft = Math.round((windowWidth - imageWidth) * scrollPercentage);
		} else {
			// the window is wider than the image
			imageWidth = windowWidth;
			imageHeight = Math.round(imageWidth / imageRatio);
			imageLeft = 0;
			imageTop = Math.round((windowHeight - imageHeight) * scrollPercentage);
		}
		
		background.css({
			"width": windowWidth,
			"height": windowHeight,
			"top": scrollY
		});
		
		image.css({
			"width": imageWidth,
			"height": imageHeight,
			"left": imageLeft,
			"top": imageTop
		});
		
	}
	
	$(function(){
		$(window).bind("resize scroll", function(){
			resizeBackground();
		}).trigger("resize");
	});
	
}(jQuery));