javascript loading image

[nezbo]

hi all

 

I have some script that i am trying to get a loading image to show when the script is started and remove the image when the script has stoped.

 

but the script if quite complicated in a mathamatical sence not in a code sence

 

the function that is called from the button is runChecktimes()

 

or is there a better way of doing this, or is there a way of calling 2 functions from one onclick button.

 

the function is working perfectly but it can take some time to count if it is longer that a week. hence the need for a loading image.

 

 

here is the script so for :

<script type="text/javascript">
function checkTimes()
{

  

<!-- Start Time -->
var StartTimesHoursMin = document.getElementById("ipsTime").value;
var StaryDays = document.getElementById("ipsDay").value;
var StartMins = document.getElementById("ipsMonth").value;
var StartYears = document.getElementById("ipsYear").value;

if (StartTimesHoursMin.length < '4')
{
	temp = StartTimesHoursMin.substring(0,1);
	temp1 = StartTimesHoursMin.substring(1,2);
	temp2 = StartTimesHoursMin.substring(2,3);

	StartTimesHoursMin = '0' + temp + temp1 + temp2;
}
var StartHours = StartTimesHoursMin.substring(0, 2);
var StartMin = StartTimesHoursMin.substring(2, 4);
var StartSeconds = "00";
<!-- /Start Time -->

<!-- End Time -->
var EndTimesHoursMin = document.getElementById("ipeTime").value;
var EndDays = document.getElementById("ipeDay").value;
var EndMins = document.getElementById("ipeMonth").value;
var EndYears = document.getElementById("ipeYear").value;
if (EndTimesHoursMin.length < '4')
{
	temp3 = EndTimesHoursMin.substring(0,1);
	temp4 = EndTimesHoursMin.substring(1,2);
	temp5 = EndTimesHoursMin.substring(2,3);

	EndTimesHoursMin = '0' + temp3 + temp4 + temp5;
}
var EndHours = EndTimesHoursMin.substring(0, 2);
var EndMin = EndTimesHoursMin.substring(2, 4);
var EndSeconds = "00";
<!-- /End Time -->


var startMKTime = mktime(StartHours, StartMin, StartSeconds, StartMins, StaryDays,StartYears);
var endMKTime = mktime(EndHours, EndMin, EndSeconds, EndMins, EndDays,EndYears);

document.getElementById("ipsTime").value = date("Hi", startMKTime);
document.getElementById("ipsDay").value = date("d", startMKTime);
document.getElementById("ipsMonth").value = date("m", startMKTime);
document.getElementById("ipsYear").value = date("Y", startMKTime);
document.getElementById("ipeTime").value = date("Hi", endMKTime);
document.getElementById("ipeDay").value = date("d", endMKTime);
document.getElementById("ipeMonth").value = date("m", endMKTime);
document.getElementById("ipeYear").value = date("Y", endMKTime);
	<!-- Start Time -->
var StartTimesHoursMin = document.getElementById("ipsTime").value;
var StaryDays = document.getElementById("ipsDay").value;
var StartMins = document.getElementById("ipsMonth").value;
var StartYears = document.getElementById("ipsYear").value;
var StartHours = StartTimesHoursMin.substring(0, 2);
var StartMin = StartTimesHoursMin.substring(2, 4);
var StartSeconds = "00";
<!-- /Start Time -->

<!-- End Time -->
var EndTimesHoursMin = document.getElementById("ipeTime").value;
var EndDays = document.getElementById("ipeDay").value;
var EndMins = document.getElementById("ipeMonth").value;
var EndYears = document.getElementById("ipeYear").value;
var EndHours = EndTimesHoursMin.substring(0, 2);
var EndMin = EndTimesHoursMin.substring(2, 4);
var EndSeconds = "00";
<!-- /End Time -->

<!-- 
var getDaysInStartMonth = mktime('00', '00', '00', StartMins, '01',StartYears);
var checkStartdate = date("t", getDaysInStartMonth);

var getDaysInEndMonth = mktime('00', '00', '00', EndMins, '01',StartYears);
var checkEnddate = date("t", getDaysInEndMonth);
<!-- 
if (StartHours < 00 || StartHours > 23)
{
	alert("Start time hours are not valid!");
}
else if (EndHours < 00 || EndHours > 23)
{
	alert("End time hours are not valid!");
}
else if (StartMin < 00 || StartMin > 59)
{
	alert("Start time minutes are not valid!");
}
else if (EndMin < 00 || EndMin > 59)
{
	alert("End time minutes are not valid!");
}
else if (EndYears < 2000 || EndYears > 2030)
{
	alert("End date year are not valid!");
}
else if (StartYears < 2000 || StartYears > 2030)
{
	alert("Start date year are not valid!");
}
else if (StaryDays < 1 || StaryDays > checkStartdate)
{
	alert("Start date day are not valid!");
}
else if (EndDays < 1 || EndDays > checkEnddate)
{
	alert("End date day are not valid!");
}
else if (StartMins < 1 || StartMins > 12)
{
	alert("Start date month are not valid!");
}
else if (EndMins < 1 || EndMins > 12)
{
	alert("End date month are not valid!");
}
else if (startMKTime > endMKTime)
{
	alert("Start Time is greater than the End Time");
}
else
{
	var addDay = 60;
	var theTotalHours = 0;
	var newStartTime = startMKTime;

	while (newStartTime < endMKTime)
	{
		var thesTimeH = date('H', newStartTime);
		var thesTimei = date('i', newStartTime);
		var thesTime = thesTimeH + thesTimei;

		var dayes = date('l', newStartTime);

		if ((dayes == "Saturday") || (dayes == "Sunday"))
		{
			theTotalHours = theTotalHours;
			newStartTime = newStartTime + addDay;
		}
		else if (dayes == "Friday")
		{
			if (((thesTime < 0830) || (thesTime > 1220)) && ((thesTime < 1315) || (thesTime > 1629)))
			{
				theTotalHours = theTotalHours;
				newStartTime = newStartTime + addDay;
			}
			else
			{
				theTotalHours = theTotalHours + addDay;
				newStartTime = newStartTime + addDay;
			}
		}
		else
		{
			if (((thesTime < 0830) || (thesTime > 1220)) && ((thesTime < 1315) || (thesTime > 1659)))
			{
				theTotalHours = theTotalHours;
				newStartTime = newStartTime + addDay;
			}
			else
			{
				theTotalHours = theTotalHours + addDay;
				newStartTime = newStartTime + addDay;
			}
		}
	}
	theTotalHours = theTotalHours/60/60;
	<?php 
		$gethours = mysql_query("SELECT * FROM person WHERE CallID = '" . $_COOKIE['user'] . "'");
		while ($gethours2 = mysql_fetch_array($gethours))
		{
			echo $theTotalHoursLeft = $gethours2['contHours'];
		}
	?>;
	var theTotalHoursLeft = <?php echo $theTotalHoursLeft; ?> - theTotalHours;
	document.getElementById("theIHoursLeft").value = theTotalHoursLeft;
	document.getElementById("theIHoursLeft2").value = theTotalHoursLeft;
	theTotalHours = theTotalHours.toFixed(2); 
	document.getElementById("theIHours").value = theTotalHours;
	document.getElementById("theIHours2").value = theTotalHours;


}
document.getElementById('CheckTimeImmage').innerHTML = '';
}
//  var imageLoading = "<img src='images/loading.gif' width='33' height='33' />";
//	document.getElementById("loadingImage").innerHTML = imageLoading;

function runChecktimes()
{
var loeadingImage = document.getElementById('CheckTimeImmage');
loeadingImage.innerHTML = '<img src="images/loading.gif" alt="Leading Page" >';
checkTimes();
}
</script>