function showTime()
{
	document.getElementById('dateTime').innerHTML = '<canvas id="clock" width="150px" height="150px"></canvas>';
	var canvas = document.getElementById('clock');
	if (canvas)
	{
		runClock();
		setInterval(runClock,1000);
	} 
	else 
	{
		runOldClock();
	}
	
}

function runClock()
{
	//get the canvas and set type of image to be used to 2d only 2d suportedat the moment.
	var currentTime = new Date();
	//sunday = 0 sat=6
	var day = currentTime.getDay();
	if(day == 0)
	{
		day = "Sunday";
	}
	else if(day == 1)
	{
		day = "Monday";
	}
	else if(day == 2)
	{
		day = "Tuesday";
	}
	else if(day == 3)
	{
		day = "Wednesday";
	}
	else if(day == 4)
	{
		day = "Thursday";
	}
	else if(day == 5)
	{
		day = "Firday";
	}
	else
	{
		day = "Saturday";
	}
	
	var dayMonth = currentTime.getDate();
	if(dayMonth.toString().match("1"))
	{
		dayMonth = dayMonth+"st";
	}
	else if(dayMonth.toString().match("2"))
	{
		dayMonth = dayMonth+"nd";
	}
	else if(dayMonth.toString().match("3"))
	{
		dayMonth = dayMonth+"rd";
	}
	else
	{
		dayMonth = dayMonth+"th";
	}
	
	var month = currentTime.getMonth();
	if(month == 0)
	{
		month = "January";
	}
	else if(month == 1)
	{
		month = "February";
	}
	else if(month == 2)
	{
		month = "March";
	}
	else if(month == 3)
	{
		month = "April";
	}
	else if(month == 4)
	{
		month = "May";
	}
	else if(month == 5)
	{
		month = "June";
	}
	else if(month == 6)
	{
		month = "July";
	}
	else if(month == 7)
	{
		month = "August";
	}
	else if(month == 8)
	{
		month = "September";
	}
	else if(month == 9)
	{
		month = "October";
	}
	else if(month == 10)
	{
		month = "November";
	}
	else
	{
		month = "December";
	}
	var year = currentTime.getFullYear();
	
	document.getElementById('dateTime').innerHTML = day +' '+ dayMonth +' '+ month +' '+ year+'<div id="divClock"><canvas id="clock" width="150px" height="150px"></canvas></div>';
	var canvas = document.getElementById('clock');

	var now = new Date();
	var sec = now.getSeconds();
	var min = now.getMinutes();
	var hr  = now.getHours();
	hr = hr>=12 ? hr-12 : hr;
	
	var ctx = canvas.getContext('2d');
	//save the canvas so not to make copies
	ctx.save();
	//remove the clock to start again
	ctx.clearRect(0,0,150,150);
	ctx.translate(40, 147);
	ctx.fillStyle = "#000000";
	ctx.restore();	
	
	ctx.save();
	//set center point
	ctx.translate(75,75);
	//ctx.scale(0.4,0.4);
	ctx.rotate(-Math.PI/2);
	ctx.lineCap = "round";

	// Hour marks
	ctx.save();
	for (i=0;i<12;i++)
	{
		ctx.beginPath();
		ctx.rotate(Math.PI/6);
		if((i == 2) || (i == 5) || (i == 8) || (i == 11))
		{
			ctx.lineWidth = 4;
		}
		else
		{
			ctx.lineWidth = 2;
		}
		
		ctx.moveTo(55,0);
		ctx.lineTo(50,0);
		ctx.stroke();
	}
	ctx.restore();

	// write Hours
	ctx.save();
	//add the hour to minute and second  to ensure incremental movement
	ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
	ctx.lineWidth = 6;
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(30,0);
	ctx.stroke();
	ctx.restore();

	// write Minutes
	ctx.save();
	//add the minute and second  to ensure incremental movement
	ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
	ctx.lineWidth = 4;
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(40,0);
	ctx.stroke();
	ctx.restore();

	// Write seconds
	ctx.save();
	ctx.rotate(sec * Math.PI/30);
	ctx.strokeStyle = "#FF0000";
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(48,0);
	ctx.stroke();
	ctx.restore();

	//start to draw the circle
	ctx.beginPath();
	//create the edge of the clock
	ctx.arc(0,0,60,0,Math.PI*2,true);
	//set the outside color of the clock
	ctx.strokeStyle = "#0000FF";
	ctx.lineWidth = 2;
	ctx.stroke();
	//finish drawing
	ctx.stroke();
	
	//reset the position of the drawing tool before redrawing the clock
	ctx.restore();
}

function drawHour(ctx, color)
{

}

function drawMinute(ctx, color)
{

}

function drawSecond(ctx, color)
{

}

function runOldClock()
{
	var currentTime = new Date();
	var seconds = currentTime.getSeconds();
	if(seconds < 10)
	{
		seconds = "0"+seconds;
	}
	var hours = currentTime.getHours();
	if(hours < 10)
	{
		hours = "0"+hours;
	}
	var minutes = currentTime.getMinutes();
	if(minutes < 10)
	{
		minutes = "0"+minutes;
	}
	//sunday = 0 sat=6
	var day = currentTime.getDay();
	if(day == 0)
	{
		day = "Sunday";
	}
	else if(day == 1)
	{
		day = "Monday";
	}
	else if(day == 2)
	{
		day = "Tuesday";
	}
	else if(day == 3)
	{
		day = "Wednesday";
	}
	else if(day == 4)
	{
		day = "Thursday";
	}
	else if(day == 5)
	{
		day = "Firday";
	}
	else
	{
		day = "Saturday";
	}
	
	var dayMonth = currentTime.getDate();
	if(dayMonth.toString().match("1"))
	{
		dayMonth = dayMonth+"st";
	}
	else if(dayMonth.toString().match("2"))
	{
		dayMonth = dayMonth+"nd";
	}
	else if(dayMonth.toString().match("3"))
	{
		dayMonth = dayMonth+"rd";
	}
	else
	{
		dayMonth = dayMonth+"th";
	}
	
	var month = currentTime.getMonth();
	if(month == 0)
	{
		month = "January";
	}
	else if(month == 1)
	{
		month = "February";
	}
	else if(month == 2)
	{
		month = "March";
	}
	else if(month == 3)
	{
		month = "April";
	}
	else if(month == 4)
	{
		month = "May";
	}
	else if(month == 5)
	{
		month = "June";
	}
	else if(month == 6)
	{
		month = "July";
	}
	else if(month == 7)
	{
		month = "August";
	}
	else if(month == 8)
	{
		month = "September";
	}
	else if(month == 9)
	{
		month = "October";
	}
	else if(month == 10)
	{
		month = "November";
	}
	else
	{
		month = "December";
	}
	var year = currentTime.getFullYear();
	
	document.getElementById('dateTime').innerHTML = hours +":"+ minutes +":"+ seconds + "  " + day +" "+ dayMonth +" "+ month +" "+ year ;
	t=setTimeout('showTime()',500);
}