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

function getLayout() {
        var browserWidth = getBrowserWidth();
        if (browserWidth <= 480) { // 240x320, 480x640
                return "mobile";
        } else if ((browserWidth > 480) && (browserWidth <= 800)) { // 640x480, 800x600
                return "very-low";
        } else if ((browserWidth > 800) && (browserWidth <= 1152)) { // 1024x768, 1152x864
                return "low";
        } else if ((browserWidth > 1152) && (browserWidth <= 1440)) { // 1280x1024, 1280x800, 1440x900, 1440x1050
                return "normal";
        } else if (browserWidth > 1440) { // 1680x1050, 1600x1200, 1920x1200
                return "high";
        }
        return "normal";
}

function dynamicLayout() {
        changeLayout(getLayout());
}

function hasClassName(objElement, strClass) {
        if ( objElement.className ) {
                var arrList = objElement.className.split(' ');
                var strClassUpper = strClass.toUpperCase();
                for ( var i = 0; i < arrList.length; i++ ) {
                        if ( arrList[i].toUpperCase() == strClassUpper ) {
                                return true;
                        }
                }
        }
        return false;
}

// 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("rel").indexOf("style") != -1 && a.getAttribute("title")) {
                        a.disabled = true;
                        if((a.getAttribute("title") == description) || (a.getAttribute("title") == "global")) {
                                a.disabled = false;
                        }
                }
        }
        if (description == 'very-low' || description == 'mobile') {
                for (i = 0; (a = document.getElementsByTagName("div")[i]); i++) {
                        if (hasClassName(a, "product-info")) {
                                a.style.visibility = 'visible';
                        }
                }
        } else {
                for (i = 0; (a = document.getElementsByTagName("div")[i]); i++) {
                        if (hasClassName(a, "product-info")) {
                                a.style.visibility = 'hidden';
                        }
                }
        }
}

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