/***************************************************************************************************
 * Globals
 ***************************************************************************************************/

	var $bg;
	var $wrap;


/***************************************************************************************************
 * DOM-Ready
 ***************************************************************************************************/
 	
	
	$(function(){
		$('#background').css({background:'#000'});
		$bg = $('#background img.city');
		$bg.hide().wrap('<div id="wrap" />');
		$wrap = $bg.parent();
		resizeHandler();
		$(window).bind('resize',resizeHandler);
		$('.info strong').css({opacity:.6});
	});
	

/***************************************************************************************************
 * Resize Handler
 ***************************************************************************************************/
 
	function resizeHandler(){
		$bg.hide();
		
		var win = $(window);
		var w = win.width();
		var h = win.height()
		var winRatio = w/h;
		var imgW = 1500;
		var imgH = 800;
		var imgRatio = imgW/imgH;
		var vDiff  = 0;
		var hDiff = 0;
		var factor = 1;
		
		if(imgRatio>winRatio){
			factor = h/imgH;
			$bg.width(imgW*factor);
			$bg.height(imgH*factor);
			hDiff = (imgW*factor-w)/2;
			$bg.css({left:-(hDiff),top:0});
		}else{
			factor = w/imgW;
			$bg.width(imgW*factor);
			$bg.height(imgH*factor);
			vDiff = (imgH*factor-h)/2;
			$bg.css({top:-(vDiff),left:0});
		}
		
		$wrap.width(w-20).height(h-20);
		
		$bg.show();
	}