$(document).ready(function() 
{
	var screenWidth = screen.width;	// The actual screen width.  
	
	if(screenWidth >  1024)
	{
		// Resize the hero image to potentially it's maximum if the screen is wide enough.
		var hero_full_width = 775; 	// The full size of the image
		var hero_start_height = 246; 	// The full size of the image
		var body_width = 775;			// The body container width
		var scrollWidth = 40;			// Width to leave for a scrollbar.
	
		// Calculate difference between the full hero width and screen width.
		var diff = hero_full_width - screenWidth;
		
		// If the screen is wider than the hero set diff to 0 - we can expand to full width.
		if(diff < 0)
			diff = 0;
		else
		{
			// The screen is NOT wide enough to accomodate the full image.
			// Leave room for the scroll bar.
			hero_full_width = hero_full_width - scrollWidth;
		}
		
		// Calculate new hero div/image width and left margin position.
		var marginLeft = Math.floor((hero_full_width - body_width - diff) / 2) * -1 + 5;
		var newWidth = hero_full_width - diff;
		
		// Calculate the ratio of the new width
		var ratio = newWidth / 775;
		var heightIncrease = Math.floor((hero_start_height * ratio) - hero_start_height);
		
		// Set new width and margin.
		$("#hero").css("width", newWidth + "px");
		$(".hero-image").css("width", newWidth + "px");
		$("#hero").css("margin-left", marginLeft + "px");

		// Adjust the height of the content area to fit the hero
		$("#content").css("height", hero_start_height + heightIncrease + "px");
	}
	/*
	$('#hero').cycle({
		fx: 'scrollLeft', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		containerResize: false,
		fit: 1,
		speed: 400
		
	});*/
});