/* 
 * ブラウザサイズに合わせてスタイルシート切替

元: 800 x 600
------------------------
#page{
	margin:0 auto;
	width:800px;
	height:600px;
	position:absolute;
    top:50%;
    left:50%;
    overflow: hidden;
    margin:-300px 0 0 -400px;
}
------------------------
 以下のものを参考
 Title : Dynamic Resolution Dependent Layout Demo
 Author : Kevin Hale
 URL : http://particletree.com
       http://particletree.com/features/dynamic-resolution-dependent-layouts/
 */

// 表示領域 Width
function getBrowserWidth() {
	if (window.innerWidth) {
		return window.innerWidth;
	} else if (document.documentElement && document.documentElement.clientWidth != 0) {
		return document.documentElement.clientWidth;
	} else if (document.body) { return document.body.clientWidth; }
		return 0;
}

// 表示領域 Height
function getBrowserHeight() {
	if (window.innerHeight) {
		return window.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight != 0) {
		return document.documentElement.clientHeight;
	} else if (document.body) { return document.body.clientHeight; }
		return 0;
}

// addEvent() by John Resig
function addEvent( obj, type, fn ){ 
   if (obj.addEventListener){ 
      obj.addEventListener( type, fn, false );
   }
   else if (obj.attachEvent){ 
      obj["e"+type+fn] = fn; 
      obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
      obj.attachEvent( "on"+type, obj[type+fn] ); 
   } 
} 

// 縦横サイズに応じてレイアウトを切り替える (右上優先)
function dynamicLayout(){
	var browserWidth  = getBrowserWidth();
	var browserHeight = getBrowserHeight();
	// #page
	
	// 横
	if (browserWidth > 800){
		// Large CSS Rules
		document.getElementById('page').style.left= "50%";
		document.getElementById('page').style.marginLeft ="-400px";
	} else {
		// Small CSS Rules
		// スクロールバーを移動し右端へ
		scrollTo(800-browserWidth,0);
		document.getElementById('page').style.left= "0%";
		document.getElementById('page').style.marginLeft ="0px";
	}
	
	// 縦
	if (browserHeight > 600){
		// Large CSS Rules
		document.getElementById('page').style.top="50%";
		document.getElementById('page').style.marginTop="-300px";
	} else {
		// Small CSS Rules
		document.getElementById('page').style.top="0%";
		document.getElementById('page').style.marginTop="0px";
	}

}

// Run dynamicLayout function when page loads and when it resizes.
addEvent(window, 'load', dynamicLayout);
addEvent(window, 'resize', dynamicLayout);