var sizes = ['800x530', '1024x768', '1280x1024'];
var imageElement = null;

function getWidth() {
	var w = 0;

	if(typeof(window.innerWidth) == 'number') {
		w = window.innerWidth;
	} else if(document.documentElement && (document.documentElement.clientWidth) ) {
		//IE 6+ in 'standards compliant mode'
		w = document.documentElement.clientWidth + 21;
	} else if(document.body && (document.body.clientWidth)) {
		//IE 4 compatible
		w = document.body.clientWidth;
	}
	return w;

}

function getHeight() {
		var h = 0;
		
		if(typeof(window.innerWidth) == 'number' ) {
			h = window.innerHeight;
		} else if(document.documentElement && (document.documentElement.clientHeight) ) {
			//IE 6+ in 'standards compliant mode'
			h = document.documentElement.clientHeight + 63;
		} else if(document.body && (document.body.clientHeight)) {
			//IE 4 compatible
			h = document.body.clientHeight;
		}
		return h;
	}
	
function adjustScrollbar() {
	var outerScroll = document.getElementById('outer_scroll');
	if(navigator.appVersion.indexOf('MSIE') < 0) {
		outerScroll.style.width = getWidth() + 'px';
	} else {
		outerScroll.style.width = getWidth() - 21 + 'px';
	}
	
	var scroll = document.getElementById('scroll');
	scroll.style.width = getWidth() + 18 + 'px';
}

function resize() {
	adjustScrollbar();
	
	if(imageElement != null) {
		var currentImage = imageElement.src;
		
		var elements = currentImage.split(".");
		var baseFilenameExtension = elements.pop();
		var baseFilename = elements.join(".");
		
		var re = /(.+)-\d+x\d+\.(.+)/;
		
		var match = re.exec(currentImage);
		if(match != null) {
			baseFilename = match[1];
			baseFilenameExtension = match[2];
		}
		
		// All hero graphics should be name graphic-1024x768.jpg where the dimesions correspond to the resolutions in the sizes array
		// The sizes are used as edge cases 
		
		// Get Screen dimensions is a cross platform sort of way
		screenDimensions = [getWidth(), getHeight()];
		
		for(i = sizes.length - 1; i >= 0; i--) {
			dimensions = sizes[i].split("x");
			
			if(i == sizes.length - 1 && screenDimensions[1] > dimensions[1]) {
				// Last edge case - last boundary to infinity
				imageElement.src = (baseFilename + "-" + dimensions[0] + "x" + dimensions[1] + "." + baseFilenameExtension);
			} else if (screenDimensions[1] < dimensions[1]) {
				imageElement.src = (baseFilename + "-" + dimensions[0] + "x" + dimensions[1] + "." + baseFilenameExtension);
			}
		}
	}
}

function load() {
	var outerScroll = document.createElement('div');
	outerScroll.id = 'outer_scroll';
	
	var scroll = document.getElementById('scroll');
	var parent = scroll.parentNode;
	
	parent.removeChild(scroll);
	outerScroll.appendChild(scroll);
	parent.appendChild(outerScroll);
	
	adjustScrollbar();
	
	imageElement = document.getElementById('hero-graphic');
	resize();
}

window.onresize = resize;
window.onload = load;