var minWidth = 1024;
//var minHeight = 925;

var size;

function getViewportSize() { 
	var size = [0, 0]; 
	if (typeof window.innerWidth != "undefined") { 
		size = [window.innerWidth, window.innerHeight];
	} 
	else if (typeof document.documentElement != "undefined" && typeof document.documentElement.clientWidth != "undefined" && document.documentElement.clientWidth != 0) {
		size = [document.documentElement.clientWidth, document.documentElement.clientHeight]; 
	}
	else {
		size = [document.getElementsByTagName("body")[0].clientWidth, document.getElementsByTagName("body")[0].clientHeight]; 
	}
	return size;
}


function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
	//Netscape compliant
	scrOfY = window.pageYOffset;
	scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
	//DOM compliant
	scrOfY = document.body.scrollTop;
	scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
	//IE6 standards compliant mode
	scrOfY = document.documentElement.scrollTop;
	scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function doScroll() {
	
	var el = document.getElementById("leftRailNav");
	el.style.left = -getScrollXY()[0] + "px";
}

function doWindowResize() {
	
	if (getViewportSize()[0] > minWidth) {
	
		var el = document.getElementById("leftRailNav");
		/* we add 8 to make up for the width of the scroll bar */
		el.style.left = ((getViewportSize()[0] / 2) - (512 + 8)) + "px";
		
		if (window.onscroll) window.onscroll = null;
		
	} else if (getViewportSize()[0] <= minWidth) {
	
		doScroll();
		if (!window.onscroll) window.onscroll = doScroll;
	}
}

window.onresize = doWindowResize;



// execute your scripts when DOM is ready. this is a good habit
$(document).ready(function(){		
		
	// initialize scrollable with mousewheel support
	//$(".scrollable").scrollable({ vertical: true, mousewheel: true });	
	
	$(".work").css("background-position","0 -19px");
	//$(".workContainer").css("display","none");
	$(".aboutContainer").css("display","none");
	$(".contactContainer").css("display","none");
	
	$(".work").click(function(){
		//if($(".aboutContainer").css("display","visible") || $(".contactContainer").css("display","visible") )
			//{ 
				$(".workContainer").fadeIn(1); 
				$(".contactContainer").fadeOut(1); 
				$(".aboutContainer").fadeOut(1);
			//}
		//if($(".workContainer").css("display","visible"))
			//{ 
				$(".about").css("background-position","");
				$(".contact").css("background-position",""); 
				$(".work").css("background-position","0 -19px");
			//}

	});		
	
	$(".about").click(function(){
		//if(document.getElementById("workContainer").style.display == "visible" || document.getElementById("contactContainer").style.display == "visible") {
			
			$(".workContainer").fadeOut(1); 
			$(".contactContainer").fadeOut(1); 
			$(".aboutContainer").fadeIn(1);
		//}
		//if(document.getElementById("aboutContainer").style.display == "none") {
			
			$(".about").css("background-position","0 -19px");
			$(".contact").css("background-position",""); 
			$(".work").css("background-position","");

		//}

	});
	
	$(".contact").click(function(){
		//if($(".workContainer").css("display","visible") || $(".aboutContainer").css("display","visible") )
			//{ 
				$(".workContainer").fadeOut(1); 
				$(".aboutContainer").fadeOut(1); 
				$(".contactContainer").fadeIn(1);
			//}
		//if($(".contactContainer").css("display","visible"))
			//{ 
				$(".contact").css("background-position","0 -19px"); 
				$(".about").css("background-position","");
				$(".work").css("background-position","");
			//}
	});
	
	doWindowResize();
});