var uppos = -30;
var scrollspeed = 5;
var showclocktimeout = 5000;
var timerintervals = 50;
var timervar;
var divtomove = "canvas";

function ShowClock()
{
	PaintClock()
	obj = document.getElementById(divtomove)

	if(obj.offsetTop == uppos)
	{
		PaintClock();
		timervar = setTimeout('down()',timerintervals)
	}
}

function down()
{
	obj = document.getElementById(divtomove)
	obj.style.top = obj.offsetTop + scrollspeed + "px";
	
	if(obj.offsetTop < 0)
		timervar = setTimeout('down()',timerintervals)
	else
	{
		obj.style.top = "0px";
		timervar = setTimeout('HideClock()', showclocktimeout)
	}
}

function HideClock()
{
	obj = document.getElementById(divtomove)

	if(obj.offsetTop > uppos)
		timervar = setTimeout('up()',timerintervals)
}

function up()
{
	obj = document.getElementById(divtomove)
	obj.style.top = obj.offsetTop - scrollspeed + "px";
	
	if(obj.offsetTop > uppos)
		timervar = setTimeout('up(divtomove)',timerintervals)
	else
	{
		obj.style.top = uppos + "px";
		clearTimeout(timervar);
	}
}

function PaintClock()
{
	var Digital = new Date()
	var hours = Digital.getHours()
	var minutes = Digital.getMinutes()
	var ampm = " AM"
	
	var hourdiff = document.getElementById('clienthour').value - document.getElementById('serverhour').value;
	hours = hours - hourdiff;
	
	hours = hours % 24;
	
	while(hours < 0)
		hours = hours + 12;
	
	if(hours == 12)
	    ampm = " PM";
	
	if (hours>12)
	{
		hours = hours - 12;
		ampm = " PM"
	}
	
	if(ampm == " AM" && hours == 0)
	    hours = 12;
		
		
	var jg = new jsGraphics("canvas");
	jg.clear();
	
	jg.setColor("#efefef");
	jg.fillRect(0, 0, 112, 25);
	
	jg.setColor("#000000");
 	jg.setFont("Tahoma", "11px", Font.BOLD);

	if(hours < 10) hours = "0" + hours;
	if(minutes < 10) minutes = "0" + minutes;

	jg.drawStringRect(hours + ":" + minutes + ampm, 0, 5, 112, "center");
	//jg.drawStringRect(ampm, 0, 5, 112, "center");
	
	/*jg.drawImage("images/clock.jpg", 0, 0, 112, 112);


			
  	DrawHoursHand(jg, hours, minutes);
	DrawMinutesHand(jg, minutes);*/
	
	jg.paint();
}

function DrawHoursHand(jg, h, min)
{
	var t = 90.0 - ((h * 60 + min) / (12 * 60.0))*360
	t = t / 180.0 * 3.14159265

	X = new Array(0, 20, 20, 0);
	Y = new Array(1, 1, -1, -1);
	NewX = new Array( 55+(Math.cos(t)*X[0])-(Math.sin(t)*Y[0]), 55+(Math.cos(t)*X[1])-(Math.sin(t)*Y[1]), 55+(Math.cos(t)*X[2])-(Math.sin(t)*Y[2]), 55+(Math.cos(t)*X[3])-(Math.sin(t)*Y[3]) );
	NewY = new Array( 55-(Math.sin(t)*X[0])-(Math.cos(t)*Y[0]), 55-(Math.sin(t)*X[1])-(Math.cos(t)*Y[1]), 55-(Math.sin(t)*X[2])-(Math.cos(t)*Y[2]), 55-(Math.sin(t)*X[3])-(Math.cos(t)*Y[3]) );

	jg.setColor("#DFDFDF");
	jg.fillPolygon(NewX, NewY);  
}

function DrawMinutesHand(jg, min)
{
	var t = 90.0 - ((min / 60.0) * 360)
	t = t / 180.0 * 3.14159265
	
	X = new Array(0, 30, 30, 0);
	Y = new Array(1, 1, -1, -1);
	NewX = new Array( 55+(Math.cos(t)*X[0])-(Math.sin(t)*Y[0]), 55+(Math.cos(t)*X[1])-(Math.sin(t)*Y[1]), 55+(Math.cos(t)*X[2])-(Math.sin(t)*Y[2]), 55+(Math.cos(t)*X[3])-(Math.sin(t)*Y[3]) );
	NewY = new Array( 55-(Math.sin(t)*X[0])-(Math.cos(t)*Y[0]), 55-(Math.sin(t)*X[1])-(Math.cos(t)*Y[1]), 55-(Math.sin(t)*X[2])-(Math.cos(t)*Y[2]), 55-(Math.sin(t)*X[3])-(Math.cos(t)*Y[3]) );

	jg.setColor("#DFDFDF");
	jg.fillPolygon(NewX, NewY);  
}