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

function dynamicLayout(){
    var browserWidth = getBrowserWidth();
    //Load Wide CSS
    if (browserWidth > 1100){
        changeLayout("wide");
    } else {
        changeLayout("default");
    }
}

// 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") {   //TODO: check if == wide than disable everything another should be enabled.
            a.disabled = true;
        }
    }
}

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