window.onload = function() {
	var wrap = document.getElementById('wrap');
	wrap.style.position = 'absolute';
	wrap.style.width = 'auto';
	wrap.style.margin = '0px';
	
	window.onresize();
	
	load_highres();
}


window.onresize = function() {
	
	var window_width = window.innerWidth;
	var window_height = window.innerHeight;
	if (window.innerHeight == undefined) {
		// IE varieties
		var window_width = document.documentElement.clientWidth;
		var window_height = document.documentElement.clientHeight;
	}
	
	var ratio = window_height / window_width;
	
	// alert(window_width + ":" + window_height + ":" + ratio);
	// console.log(window_width + ":" + window_height + ":" + ratio);
	
	var background = document.getElementById('background');
	var wrap = document.getElementById('wrap');
	
	if (ratio > 0.75) {
		
		// use the window height
		background.style.height = window_height + "px";
		background.style.width  = (window_height / 0.75) + "px";
		
		var left_offset = ((window_height / 0.75) - window_width) / -2;
		background.style.left = left_offset + "px";
		
		var top_offset = 0;
		background.style.top = top_offset + "px";
		
		var wrap_left  = ((window_height / 0.75) * 0.2343) + left_offset;
		var wrap_right = wrap_left;
		
		wrap.style.left  = wrap_left + "px";
		wrap.style.right = wrap_right + "px";
		wrap.style.top   = 0 + "px";
	}
	else {
		
		// use the window width
		background.style.height = (window_width * 0.75) + "px";
		background.style.width  = window_width + "px";
		
		var left_offset = 0;
		background.style.left = left_offset + "px";
		
		var top_offset = ((window_width * 0.75) - window_height) / -2;
		background.style.top = top_offset + "px";
		
		var wrap_left  = window_width * 0.2343;
		var wrap_right = window_width * 0.2343;
		var wrap_top   = top_offset;
		
		wrap.style.left  = wrap_left + "px";
		wrap.style.right = wrap_right + "px";
		wrap.style.top   = wrap_top + "px";
	}
}


// load high resolution images if not iphone or ipod
function load_highres() {
	if (!isiPhone()) {
		var bg_image = new Image;
		bg_image.onload = function() {
			document.getElementById('background').src = this.src;
		}
		bg_image.src = "images/background-highres.jpg";

		var team = new Image;
		team.onload = function() {
			document.getElementById('title').getElementsByTagName('img')[0].src = this.src;
		}
		team.src = "images/team-zauren-highres.png";

		var roadtrip = new Image;
		roadtrip.onload = function() {
			document.getElementById('roadtrip').getElementsByTagName('img')[0].src = this.src;
		}
		roadtrip.src = "images/road-trip-usa-highres.png";

		var seasia = new Image;
		seasia.onload = function() {
			document.getElementById('seasia').getElementsByTagName('img')[0].src = this.src;
		}
		seasia.src = "images/se-asia-highres.png";
	}
}


// detect if user is iPhone or iPod
function isiPhone(){
    return (
        (navigator.platform.indexOf("iPhone") != -1) ||
        (navigator.platform.indexOf("iPod") != -1)
    );
}