var oldLeftScreenWidth = 0;
var oldLeftScreenHeight = 0;
var oldRightScreenWidth = 0;
var oldRightScreenHeight = 0;
var screenNumber = 0;
var output = "<table width='420' valign='bottom' style='border: 1px solid #FFFFFF; color:#FFFFFF; text-align:center; font-size:10pt;'><tr valign='bottom' style='font-weight:bold;'><td width='70'>size</td><td width='70'>ratio</td><td width='140'>area in cm<sup>2</sup></td><td width='140'>area in in<sup>2</sup></td><tr>";
	
	function calculate() {
		if (screenNumber == 0) {
			for (var i = 1; i < 115; i = i + 3) {
				setTimeout("document.getElementById('area').style.height="+i,i*2);
			}
			setTimeout("calcArea()",240);
		} else {
			calcArea();
			document.getElementById('area').style.height="auto";
		}
	}
	
	function calcArea() {	
		// get data from the user
		var sizein = document.getElementById("inches").value.replace(/,/, '.');
		var sizecm = document.getElementById("cms").value.replace(/,/, '.');
		var aspect = document.getElementById("aspect_ratio").value;
		var size = 0;
		var width = 0;
		var height = 0;
		var area = 0;
		var addToOutput = "";
		
		// convert the given size data into centimeters
		if (sizein == "") size = sizecm;
			else size = sizein * 2.54;
		
		// calculate the area based on the given aspect ratio
		if (aspect == 1) {
			width = 4*(size/5); height = 3*(size/5); 	area = width * height;
			addToOutput = "<tr><td><a href='javascript:drawDisplay("+Math.round(width*4.5)+","+Math.round(height*4.5)+","+Math.round(sizein*10)/10+")' style='color:#FFFFFF;'>"+ Math.round(sizein*10)/10 + " in</a></td><td>4 : 3</td><td>" + Math.round(area) + "</td><td>" + Math.round(area/6.4516) + "</td></tr>" ;		
		} else if (aspect == 2) {
			width = 5*(size/Math.sqrt(41)); height = 4*(size/Math.sqrt(41)); 	area = width * height;
			addToOutput = "<tr><td><a href='javascript:drawDisplay("+Math.round(width*4.5)+","+Math.round(height*4.5)+","+Math.round(sizein*10)/10+")' style='color:#FFFFFF;'>"+ Math.round(sizein*10)/10 + " in</a></td><td>5 : 4</td><td>" + Math.round(area) + "</td><td>" + Math.round(area/6.4516) + "</td></tr>" ;
		} else if (aspect == 3) {
			width = 16*(size/Math.sqrt(356)); height = 10*(size/Math.sqrt(356)); 	area = width * height;
			addToOutput = "<tr><td><a href='javascript:drawDisplay("+Math.round(width*4.5)+","+Math.round(height*4.5)+","+Math.round(sizein*10)/10+")' style='color:#FFFFFF;'>"+ Math.round(sizein*10)/10 + " in</a></td><td>16 : 10</td><td>" + Math.round(area) + "</td><td>" + Math.round(area/6.4516) + "</td></tr>" ;
		} else {
			width = 16*(size/Math.sqrt(337)); height = 9*(size/Math.sqrt(337)); 	area = width * height;
			addToOutput = "<tr><td><a href='javascript:drawDisplay("+Math.round(width*4.5)+","+Math.round(height*4.5)+","+Math.round(sizein*10)/10+")' style='color:#FFFFFF;'>"+ Math.round(sizein*10)/10 + " in</a></td><td>16 : 9</td><td>" + Math.round(area) + "</td><td>" + Math.round(area/6.4516) + "</td></tr>" ;
		}

		output += addToOutput;
		document.getElementById("area").innerHTML = "<br />Area of the given screen is " + Math.round(area) + " cm<sup>2</sup> or " + 
																									Math.round(area/6.4516) + " in<sup>2</sup>.<br /><br  />" + output;
		
		// draw the last display
		setTimeout("drawDisplay("+Math.round(width*4.5)+","+Math.round(height*4.5)+","+Math.round(sizein*10)/10+")",200);
	}
	
	function drawDisplay(width, height, size) {
		// we add this screen to the count
		screenNumber++;
		
		if (screenNumber % 2 == 1) {
			document.getElementById('leftscreen').style.zIndex = screenNumber;
			document.getElementById('leftscreen').style.display = "block";
			var stepWidth = (width - oldLeftScreenWidth)/30;
			var stepHeight = (height - oldLeftScreenHeight)/30;
			for (i = 1; i <= 30; i++) {
				setTimeout("document.getElementById('leftscreen').style.width=" + (oldLeftScreenWidth + (stepWidth*i)), 5*i);
				setTimeout("document.getElementById('leftscreen').style.height=" + (oldLeftScreenHeight + (stepHeight*i)), 5*i);
			}
			setTimeout("document.getElementById('leftscreensize').innerHTML='"+size+" in'", 155);
			oldLeftScreenWidth = width;
			oldLeftScreenHeight = height;
		} else {
			document.getElementById('rightscreen').style.zIndex = screenNumber;
			document.getElementById('rightscreen').style.display = "block";
			var stepWidth = (width - oldRightScreenWidth)/30;
			var stepHeight = (height - oldRightScreenHeight)/30;
			for (i = 1; i <= 30; i++) {
				setTimeout("document.getElementById('rightscreen').style.width=" + (oldRightScreenWidth + (stepWidth*i)), 5*i);
				setTimeout("document.getElementById('rightscreen').style.height=" + (oldRightScreenHeight + (stepHeight*i)), 5*i);
			}
			setTimeout("document.getElementById('rightscreensize').innerHTML='"+size+" in'", 155);
			oldRightScreenWidth = width;
			oldRightScreenHeight = height;
		}
	}
	
	function syncInches() {
		// get data from the user
		var sizein = document.getElementById("inches").value.replace(/,/, '.');
		document.getElementById("cms").value = Math.round(sizein*2.54*10)/10;
	}
	
	function syncCms() {
		// get data from the user
		var sizecm = document.getElementById("cms").value.replace(/,/, '.');
		document.getElementById("inches").value = Math.round(sizecm/2.54*10)/10;		
	}
	
	function langusa() {
		for (var i = 1; i <= 14; i++) {
			if (i <= 7) setTimeout("document.getElementById('langusa').style.top=" + (10-i), 25*i);
				else setTimeout("document.getElementById('langusa').style.top=" + (i-4), 25*i);
		}
		setTimeout("window.location = 'index.htm'",375);
	}
	
	function langsi() {
		for (var i = 1; i <= 14; i++) {
			if (i <= 7) setTimeout("document.getElementById('langsi').style.top=" + (10-i), 25*i);
				else setTimeout("document.getElementById('langsi').style.top=" + (i-4), 25*i);
		}
		setTimeout("window.location = 'index-si.htm'",375);
	}