var skyWorld = document.createElement('div');
skyWorld.setAttribute('id','skyWorld');

var skyCanvas = document.createElement('canvas')
skyCanvas.setAttribute('id','canvas');
skyCanvas.setAttribute('height','60');
skyCanvas.setAttribute('width','468');

skyWorld.appendChild(skyCanvas)

document.write(skyWorld.innerHTML);



var lingrad;
var groundgrad;
var radgrad4;
function init(){
	draw()
}


function skyColor(ctx,hr){
	var theColor
	switch(hr){
		case 0:
		case 1:
		case 2:
		case 3:
		case 4: case 22: case 23: case 24: theColor = "black"; break;
		case 5: case 21: theColor = "midnightblue"; break;
		case 6: case 20: theColor = "navy"; break;
		case 7: case 19: theColor = "darkblue"; break;
		case 18: theColor = "#8E388E"; break;
		case 17: theColor = "#9932CC"; break;
		default: theColor = "lightskyblue";


	}


	  // Create gradients
	lingrad = ctx.createLinearGradient(0,0,0,150);
	lingrad.addColorStop(0, theColor);
	lingrad.addColorStop(0.5, '#fff');
	lingrad.addColorStop(0.5, '#66CC00');
	lingrad.addColorStop(1, '#fff');


	groundgrad = ctx.createLinearGradient(0,15,0,80);
	groundgrad.addColorStop(0,'darkgreen')

	groundgrad.addColorStop(1,'lightgreen')

}



	function draw(){
		var ctx = document.getElementById('canvas').getContext('2d');
		var curdate = new Date();
		var hours = curdate.getHours()
		skyColor(ctx,hours)


		ctx.fillStyle = lingrad;
		ctx.fillRect(0,0,468,60);

		ctx.fillStyle = groundgrad;
		ctx.fillRect(0,30,468,30)


		ctx.save()
			ctx.fillStyle = "#63B8FF"
			ctx.scale(7,1)
      			ctx.beginPath();
      			ctx.arc(50,40.5,5,0,Math.PI*2,true);
      			ctx.fill();
		ctx.restore()
		
		window.setTimeout("draw()",3600000)
		
	}


init();