// - - - - - - - - - - - - - - - - - - - - -
//
// 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();
	var beaudy = document.getElementsByTagName('body');
	var beaudy1 = beaudy.item(0);

    //Load narrow CSS Rules
    if (browserWidth < 994){
        changeLayout("narrow");
    }
    //Load normal CSS Rules
    if ((browserWidth >= 994) && (browserWidth <= 1256)){
        changeLayout("normal");
    }
    //Load Wide CSS Rules
    if (browserWidth > 1256){
        changeLayout("wide");
    }
    //Load Wider CSS Rules
    if (browserWidth > 1574){
        changeLayout("wider");
    }
}

// changeLayout is based on setActiveStyleSheet function by Paul Sowdon 
// http://www.alistapart.com/articles/alternate/
function changeLayout(newLayout){
document.body.className = newLayout;
}
// Simple Style switchin
function cLt(nLt){document.body.className = nLt;}

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

/* Script pour l'affichage des menus sous IE.6 et inférieur*/
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot1 = document.getElementById("nav1");
		navRoot2 = document.getElementById("nav2");
		navRoot3 = document.getElementById("nav3");
		for (i=0; i<navRoot1.childNodes.length; i++) {
			node = navRoot1.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
		for (i=0; i<navRoot2.childNodes.length; i++) {
			node = navRoot2.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;