//// - - - - - - - - - - - - - - - - - - - - -
////
//// Title : Dynamic Resolution Dependent Layout Demo
//// Author : Kevin Hale
//// URL : http://particletree.com
////
//// Description : This is a demonstration of a dynamic 
//// resolution dependent layout in action. Change your browser 
//// window size to see the layout respond to your changes. To 
//// preserve the separation of the presentation and behavior 
//// layers, this implementation delegates all the presentation 
//// details to external CSS stylesheets instead of changing 
//// each style property through JavaScript.
////
//// Created : July 30, 2005
//// Modified : November 15, 2005
////
//// - - - - - - - - - - - - - - - - - - - - -
//
//// getBrowserWidth is taken from The Man in Blue Resolution Dependent Layout Script
//// http://www.themaninblue.com/experiment/ResolutionLayout/
//	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 by Kevin Hale
//function dynamicLayout(){
//	var browserWidth = getBrowserWidth();
//
//	//Load Thin CSS Rules
//	if (browserWidth < 795){
//		//changeLayout("thin");
//		document.body.className = "small";		
//	}
//	//Load Wide CSS Rules
//	if ((browserWidth >= 795) && (browserWidth <= 950)){
//		//changeLayout("default");
//		document.body.className = "medium";			
//	}
//	//Load Wider CSS Rules
//	if (browserWidth > 950){
//		//changeLayout("wide");
//		document.body.className = "large";	
//	}
//}
//
//// changeLayout is based on setActiveStyleSheet function by Paul Sowdon 
//// http://www.alistapart.com/articles/alternate/
//function changeLayout(description){
//   var i, a;
//   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
//	   if(a.getAttribute("title") == description){a.disabled = false;}
//	   else if(a.getAttribute("title") != "default"){a.disabled = true;}
//   }
//}
//
//	//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] ); 
//	   } 
//	} 
//	
//	//Run dynamicLayout function when page loads and when it resizes.
//	addEvent(window, 'load', dynamicLayout);
//	addEvent(window, 'resize', dynamicLayout);


// Controls the switching.
function dynamicLayout() {
	//alert("ddd");
	//getViewportSize();
	var browserWidth = getViewportSize();

	//Load Thin CSS Rules
	if (browserWidth < 895){
		//changeLayout("thin");
		document.body.className = "small";
	}
	//Load Wide CSS Rules
	if ((browserWidth >= 895) && (browserWidth <= 1050)){
		//changeLayout("default");
		document.body.className = "medium";
	}
	//Load Wider CSS Rules
	if (browserWidth > 1050){
		document.body.className = "medium";
		//changeLayout("wide");
		//document.body.className = "large";
	}
}


// Event handlers function
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] ); 
   } 
} 

// Detect viewport size
function getViewportSize() {	
	if (typeof window.innerWidth != 'undefined') {
		return window.innerWidth;
	}
	else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
		return document.documentElement.clientWidth;
	}
	else {
		return document.getElementsByTagName('body')[0].clientWidth;	
	}
}

// Stylesheet switcher using Link
function changeLayout(description){
   var rows = document.getElementsByTagName('link');
   //alert(description);
   for(var i=0, row; row = rows[i]; i++){
	   //alert(row.getAttribute("title"));
	   
	   if(row.getAttribute("title") == description){row.disabled = true;row.disabled = false;}
	   else if(row.getAttribute("title") != "default"){row.disabled = true;}
   }
}

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