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

var mystyles = new Array(2);

mystyles[0] = "default";
mystyles[1] = "thin";

// dynamicLayout by Kevin Hale
function dynamicLayout(){
    var browserWidth = getBrowserWidth();
    var i, a;
    //Load Thin CSS Rules
    if (browserWidth < 950){
        changeLayout("thin");
    }
    //Load Wide CSS Rules
    if (browserWidth >= 950){
        changeLayout("default");
    }
}

// changeLayout is based on setActiveStyleSheet function by Paul Sowdon 
// http://www.alistapart.com/articles/alternate/
function changeLayout(description){
   var i,j, a,b;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
       if(a.getAttribute("title") == description){
              a.disabled = false;
       }
       else{
              for(j=0;j<mystyles.length;j++){
                  if(a.getAttribute("title") == mystyles[j] && a.getAttribute("title") != "default"){
                        a.disabled = true;
                        break;
                 }
            }
       }
    }
}

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