// - - - - - - - - - - - - - - - - - - - - -
//
// 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 getBrowserHeight(){
	if (window.innerHeight){
		return window.innerHeight;}	
	else if (document.documentElement && document.documentElement.clientHeight != 0){
		return document.documentElement.clientHeight;	}
	else if (document.body){return document.body.clientHeight;}		
		return 0;
}

function getImgSize(pic){
	//var pic = document.getElementById(id);
	var h = pic.offsetHeight;
	var w = pic.offsetWidth;
	var size = new Array(w, h);
	return size;
}

function resizeImg(){
	var curImg = document.getElementById('currentImage');
	var curImgW = document.getElementById('imgW').value;
	var curImgH = document.getElementById('imgH').value;
	//
	var size = getImgSize(curImg);
	// get width in percent
	var wp = size[0] / 100;
	// get height in percent
	var hp = size[1] / 100;
	// get browser height
	var bh = getBrowserHeight();
	var bw = getBrowserWidth();
	//max sizes
	if(curImgW < bw-400){
		var maxW = curImgW;
	}else{
		var maxW = bw-400;
	}
	if(curImgH < bh-300){
		var maxH = curImgH;
	}else{
		var maxH = bh-300;
	}
	// resize
	var newH = maxH;
	var newW = (newH / hp) * wp;
	if(newW > maxW){
		newW = maxW;
		newH = (newW / wp) * hp;
	}
	curImg.height = newH;
	curImg.width = newW;
}

//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', resizeImg);
addEvent(window, 'resize', resizeImg);