// Title : Dynamic Resolution Dependent Layout Demo


// getBrowserWidth is taken from The Man in Blue Resolution Dependent Layout Script

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;
	}

// dynamicLayout
function dynamicLayout(){
	var browserWidth = getBrowserWidth();

	//Load Wider CSS Rules
	if (browserWidth > 1024){
		changeLayout("above1024");
	}
}

// changeLayout is based on setActiveStyleSheet function

function changeLayout(description){
	var i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
		if(a.getAttribute("title") != "default"){
			a.disabled = true;

		}
   }

	for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
		if(a.getAttribute("title") == description){
			a.disabled = false;

		}
   }
}

//addEvent() 
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] ); 
   } 
}
	
//Run dynamicLayout function when page loads and when it resizes.
addEvent(window, 'load', dynamicLayout);
addEvent(window, 'resize', dynamicLayout);