var utils = {
	getStyle: function(el,styleProp) {
		var x = document.getElementById(el);
	
		if (x.currentStyle) {
			var y = x.currentStyle[styleProp];
		}
		else if (window.getComputedStyle) {
			var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
		}
		
		return y;
	},
		
	getBGImg: function() {
		var bgsrc = utils.getStyle('contentWrap', 'background-image') || utils.getStyle('contentWrap', 'backgroundImage');
		return bgsrc;
	}	
}


var resize = {
	
	// variables
	viewportWidth: null,
	imgOriginalWidth: null,
	imgOriginalHeight: null,
	ratio: null,
	bgImg: null,
	
	init: function() {
		
		// get background image url
		bgImg = resize.getBackgroundSrc();
		
		// add new image for background
		var parentDiv = document.getElementById('container');
		var img = document.createElement('img');
		img.src = bgImg;
		img.id = 'lg-photo';
		parentDiv.appendChild(img);
		
		// adjust top position if home page
		if (parentDiv.className == "homepage") {
			img.style.top = "0";
		}
					
		// hide existing background image
		var backgroundImg = document.getElementById('contentWrap');
		backgroundImg.style.background = "none";
		
		var copyDiv = null;
		var divElems = document.getElementsByTagName('div');
		for (i = 0; i< divElems.length; i++) {
			if (divElems[i].className == "copy") {
				copyDiv = divElems[i];
				break;	
			}
		}
		
		$(window).load(function() {
			
			// browser viewport width
			viewportWidth = resize.getViewportWidth();
			
			// original width & height of image
			imgOriginalWidth = img.width;
			imgOriginalHeight = img.height;
			
			img.className = ( viewportWidth >= img.width ) ? "alignLeft" : "";
			
			// ratio of image
			ratio = img.width/img.height;
			
			if (viewportWidth <= img.width) {
				img.width = ( viewportWidth <= 1024 ) ? 1024 : viewportWidth;
				img.height = img.width/ratio;
			}	
			
			if (viewportWidth > 1024) {
				document.body.className = "hideOverflowX";
			}
			
			$("#subFooter").width(img.width);
			
			// adjust height of #contentWrap container
			if (img.height + 10 > copyDiv.offsetHeight) {
				backgroundImg.style.height = img.height + 10 + 'px'; 
			}
			else {
				backgroundImg.style.height = copyDiv.offsetHeight + 10 + 'px'; 
			}
		});
		
		// resize event
		$(window).resize(function() {
								
			viewportWidth = resize.getViewportWidth();
			resize.ratio = imgOriginalWidth/imgOriginalHeight;
			
			if (viewportWidth > 1024 && viewportWidth <= imgOriginalWidth) {
				img.width = viewportWidth;
				img.height = img.width/resize.ratio;
				$("#subFooter").width(img.width);
				document.body.className = "hideOverflowX";
			}
			
			if (viewportWidth <= 1024) {
				img.width = 1024;
				img.height = img.width/resize.ratio;
				$("#subFooter").width(viewportWidth);
				document.body.className = "";
			}
			
			// adjust height of #contentWrap container
			if (img.height + 10 > copyDiv.offsetHeight) {
				backgroundImg.style.height = img.height + 10 + 'px';
			}
			else {
				backgroundImg.style.height = copyDiv.offsetHeight + 10 + 'px'; 
			}
			
			img.className = ( viewportWidth > img.width ) ? "alignLeft" : "";
			
		});
		
	},
	
	// get broswer viewport width
	getViewportWidth: function() {
		return window.innerWidth || $(window).width();
	},
	
	// background image source of #contentWrap (see utils object methods)
	getBackgroundSrc: function() {
		var srcUrl = utils.getBGImg();
		var startIndex = srcUrl.indexOf('http');
		var endIndex = srcUrl.indexOf('.jpg') || srcUrl.indexOf('.gif');
		var cleansrc = srcUrl.substr(startIndex, endIndex);
		
		// for ie
		if (cleansrc.indexOf('"') != -1) {
			cleansrc = cleansrc.substr(0, cleansrc.indexOf('"'));
		}
		
		return cleansrc;
	}
	
};

$(document).ready(function() { resize.init(); });