﻿$(document).ready(function(){
	var db=document.body;
	var img=document.getElementById('scaler').getElementsByTagName('img')[0];
	var dbsize={}; //needed to store body size
	var imgsrc=img.src; //needed to store images src
	
	setInterval(function(){
		window.scrollTo(0,0);
		if(img.complete){ //check if image has loaded
			if(db.clientWidth!=dbsize.w||db.clientHeight!=dbsize.h||img.src!=imgsrc){ //check if size or img size has changed
				imgsrc=img.src; //store current src
				dbsize.w=db.clientWidth; //store current body width
				dbsize.h=db.clientHeight; //store current body height

				var newwidth=Math.round(dbsize.h*(img.offsetWidth/img.offsetHeight)); //calculate new width based on height

				img.style.width=(dbsize.w>newwidth?dbsize.w:newwidth)+'px'; //use the largest value of body-width and newwidht
				//and this is the real trick: if there's no specified height, the height is automaticly calculated relative to the with
			}
		}
	},300);
});
