LUCID time selection

<html>
<head>
<script>
function newval(){
     alert('Running');
//get the values
     var erl = timetopx(parseFloat(document.getElementById('prestarth').value) + parseFloat(document.getElementById('prestartm').value) / 60);
     var ideal = timetopx(parseFloat(document.getElementById('idealh').value) + parseFloat(document.getElementById('idealm').value) / 60);
     var latre = timetopx(parseFloat(document.getElementById('lateh').value) + parseFloat(document.getElementById('latem').value) / 60);
     var length = timetopx(parseFloat(document.getElementById('length').value));
//Move the whole acordingly
     var x = document.getElementById('maintime');
     x.style.top = erl-464;
//size the first cell
     x = document.getElementById('maintimeE');
     x.style.height = ideal - erl-2;
//size the second to last cell
     x = document.getElementById('maintimeFE');
     x.style.height = ideal - erl-2;
//size the middle unit
     x = document.getElementById('maintimeM');
     x.style.height = length - (latre-erl)-2;
//size the second cell
     x = document.getElementById('maintimeL');
     x.style.height = latre - ideal-2;
//size the last cell
     x = document.getElementById('maintimeFL');
     x.style.height = latre - ideal-2;
}
function timetopx(time){
var px = time*19;
return px;}//function takes the time in 0100 hours and turns it into a position reference
</script>
</head>
<body>
<ul><li>Times:hh:mm</li><li>Dates:dd/mm/yy</li><li>Length of time in hours</li></ul>
<b> Earlyest:<input id="prestarth" maxlength=2 type="text" size="2"/>:<input id="prestartm" maxlength=2 type="text" size="2"/><input id="prestartd" maxlength=8 type="text" size="8"/></b><br />
<b> Ideal: <input id="idealh" maxlength=2 type="text" size="2"/>:<input id="idealm" maxlength=2 type="text" size="2"/><input id="ideald" maxlength=8 type="text" size="8"/></b><br />
<b> Latest:<input id="lateh" maxlength=2 type="text" size="2"/>:<input id="latem" maxlength=2 type="text" size="2"/><input id="lated" maxlength=8 type="text" size="8"/></b><br />
<b>Length:</b><input id="length" type="text" /><br />
<input type="button" value="Show" onclick="newval();"/>

<div  style="position:absolute;top:0px;left:300px;font-family:Arial;">
<table id="alltime" border="1" style="width:220px;height:400px;overflow:scroll;" ><tr><td><div style="width:210px;height:390px;overflow:scroll;">

00:00-</br>
01:00-</br>
02:00-</br>
03:00-</br>
04:00-</br>
05:00-</br>
06:00-</br>
07:00-</br>
08:00-</br>
09:00-</br>
10:00-</br>
11:00-</br>
12:00-</br>
13:00-</br>
14:00-</br>
15:00-</br>
16:00-</br>
17:00-</br>
18:00-</br>
19:00-</br>
20:00-</br>
21:00-</br>
22:00-</br>
23:00-</br>
24:00-<br/>

<table id="maintime"style="position:relative;background-color:#0099FF;top:-464px;right:-50px;width:136;height:114px;" >
<tr id="maintimeE" height="10px"><td style="background-color:#19FFFF;"></td></tr>
<tr id="maintimeL" height="10px"><td style="background-color:#19FFFF;"></td></tr>
<tr id="maintimeM" ><td style="background-color:#19FFFF;"></td></tr>
<tr id="maintimeFE" height="10px"><td style="background-color:#19FFFF;"></td></tr>
<tr id="maintimeFL" height="10px"><td style="background-color:#19FFFF;"></td></tr></table>
</div></td></tr></table>

</div>