// - - - - - - - - - - - - - - - - - - - - -
//
// 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
//
// - - - - - - - - - - - - - - - - - - - - -

// getBrowserHeight is taken from The Man in Blue Resolution Dependent Layout Script
// http://www.themaninblue.com/experiment/ResolutionLayout/
	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;
	}

// dynamicLayout by Kevin Hale
function dynamicLayout(){
	var browserHeight = getBrowserHeight();

	//Load Thin CSS Rules
	if (browserHeight < 750){
		changeLayout("small");
	}
	//Load Wider CSS Rules
	if (browserHeight >= 750){
		changeLayout("high");
	}
}

// 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);