// - - - - - - - - - - - - - - - - - - - - -
//
// 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();
	//Load Thin CSS Rules
	if (browserWidth < 1440){
		changeLayout("thin");
    picResize('thin');
	}
	//Load Wide CSS Rules
	if ((browserWidth >= 1440) && (browserWidth <= 1690)){
		changeLayout("wide");
    picResize('wide');
	}
	//Load Wider CSS Rules
	if (browserWidth > 1690){
		changeLayout("wider");
    picResize('wider');
	}
}

// changeLayout is based on setActiveStyleSheet function by Paul Sowdon
// http://www.alistapart.com/articles/alternate/
function changeLayout(description){

  var body =  document.getElementsByTagName('body')[0];
    body.className = description;
}

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

dynamicLayout();

function picResize(layout) {

/*  var pics = document.getElementsByTagName('img'),
      mult_width = 1,
      mult_height = 1,
      dimensions = {
        thin: [180,135],
        wide: [261,196],
        wider: [289,216]
      };



  for (var i = pics.length-1; i >= 0; i--) {
    var item = pics[i].parentNode.parentNode.parentNode.parentNode,
        mult_array_width = item.className.match(/units(\d+)w/),
        mult_array_height = item.className.match(/units(\d+)h/);

    if (mult_array_width) {
      mult_width = mult_array_width[1];
    }

    if (mult_array_height) {
      mult_height = mult_array_height[1];
    }

    pics[i].setAttribute('width', (dimensions[layout][0]+4) * mult_width - 4);
    pics[i].setAttribute('height',(dimensions[layout][1]+4) * mult_height - 4);

  }*/
}