var origWidth;
var origHeight;
var imageRatio;
var currentDisplayStateWidth;
var currentDisplayStateHeight;
var MIN_WIDTH = 930;
var MIN_HEIGHT = 700;
var $imageObj;
var $window;
var $backgroundContainer;
var $html;
var $navContainer;
var $navBackground;
var BGManager = function()
{
	$window = $(window);
	$backgroundContainer = $('#backgroundContainer')
	$html = $('html');
	$navContainer = $('#navContainer');
	$navBackground = $('.navBackground');	
	$window.resize(windowResize);
	loadImage();
}
function loadImage()
{	
	bgImage = '/images/'+bgImage;	
	$imageObj = $("<img src='"+bgImage+"' alt='background image' />").appendTo('#backgroundContainer');
	$imageObj.load(imageLoaded);
}
function imageLoaded()
{
	//RECORD ORIGINAL IMAGE SIZES FOR RESIZING	
	origWidth = $imageObj.width();
	origHeight = $imageObj.height();
	imageRatio = origHeight / origWidth;
	//ADD DELAYS TO FIX A FIREFOX BUG	
	//resize the image
	currentDisplayStateWidth = 'full browser width';
	currentDisplayStateHeight = 'full browser height';
	windowResize();
	//fade in the image
	$backgroundContainer.animate({opacity:1}, 400);
}
function windowResize() 
{ 
	var windowWidth = $window.width();
	var windowHeight = $window.height();	
 	if (windowWidth < MIN_WIDTH && currentDisplayStateWidth === 'full browser width') {
 		//limit the width to MIN_WIDTH
 		$html.css({width:MIN_WIDTH, overflow: 'auto'});
 		$navContainer.css({width:MIN_WIDTH});
 		$navBackground.css({width:MIN_WIDTH});
 		$backgroundContainer.css({width:MIN_WIDTH});
 		currentDisplayStateWidth = 'limited browser width';
 	} else if (windowWidth > MIN_WIDTH && currentDisplayStateWidth === 'limited browser width') {	
 		var ovrflw = (currentDisplayStateHeight === 'limited browser height') ? 'auto' : 'hidden';	
 		//set up the divs for full browser viewing
 		$html.css({width:'100%', overflow: ovrflw});
 		$navContainer.css({width:'100%'});
 		$navBackground.css({width:'100%'});
 		$backgroundContainer.css({width:'100%'});	
 		currentDisplayStateWidth = 'full browser width';
 	}
 	if (windowHeight < MIN_HEIGHT && currentDisplayStateHeight === 'full browser height') {
 		//limit the width to MIN_WIDTH
 		$html.css({height:MIN_HEIGHT, overflow: 'auto'});	
 		$backgroundContainer.css({height:MIN_HEIGHT});	
 		currentDisplayStateHeight = 'limited browser height';
 	} else if (windowHeight > MIN_HEIGHT && currentDisplayStateHeight === 'limited browser height') {
 		//set up the divs for full browser viewing	
 		var ovrflw = (currentDisplayStateWidth === 'limited browser width') ? 'auto' : 'hidden';	
 		$html.css({height:'100%', overflow: ovrflw});	
 		$backgroundContainer.css({height:'100%'});	
 		currentDisplayStateHeight = 'full browser height';
 	}
 	if (windowWidth < 1000) windowWidth = 1000;
  	if (windowHeight < 650) windowHeight = 650;
	var browserRatio = windowHeight / windowWidth;
	var perc = (browserRatio > imageRatio) ? windowHeight / origHeight : windowWidth / origWidth;
 	var w = origWidth * perc;
 	var h = origHeight * perc;
 	$imageObj.css({width:w, height:h});
}