JPLT.Class.create("JPLT.BackgroundGradient",JPLT.Object,
	function() {
		this.width = 1;
		this.height = window.innerHeight;
		
		this.createElement();
		this.paint();
		this.updatePage();
	},
	{
		gradientColorStops: {
			dawn: [0, "#413b45", 0.5, "#8c787a", 0.75, "#c39980", 0.95, "#f3a954", 0.99, "#fecb10", 1, "#f5f700"],
			morning: [0, "#2b4965", 1, "#d6b487"],
			afternoon: [0, "#1A64BF", 1, "white"],
			sunset: [0, "#4a58b9", 0.5, "#9364a8", 0.75, "#d87385", 1, "#ffa297"],
			dusk: [0, "#040613", 0.5, "#084b7f", 0.75, "#558bad", 1, "#fbbf81"],
			night: [0, "black", 0.5, "#09093b", 1, "#3330fd"],
			late: [0, "black", 0.5, "#060553", 1, "#090866"]
		},
		
		colors: {
			dawn: 'black',
			morning: 'black',
			afternoon: 'black',
			sunset: 'white',
			dusk: 'white',
			night: 'white',
			late: 'white',
		},
			
		hours: [ 'late','late','late','late','late','dawn','dawn','dawn','morning','morning','morning','morning',
			'afternoon','afternoon','afternoon','afternoon','afternoon','sunset','sunset','dusk','dusk','night',
			'night','night' ],
		
		createElement: function() {
			this.element = document.createElement("canvas");
			
			this.element.width = this.width;
			this.element.height = this.height;
			
			return this.element;
		},
		
		context: function() {
			return this.element.getContext("2d");
		},
		
		getText: function() {
			var date = new Date();
			var hour = date.getHours();
			return this.hours[hour];
		},
			
		getColor: function() {
			var date = new Date();
			var hour = date.getHours();
			return this.colors[this.hours[hour]];			
		},
		
		getGradientColorStops: function() {
			var date = new Date();
			var hour = date.getHours();
			return this.gradientColorStops[this.hours[hour]];
		},
		
		paint: function() {
			var ctx = this.context();
			var gradient = ctx.createLinearGradient(0,0,this.width,this.height);
			
			var colorStops = this.getGradientColorStops();
			for (var i=0; i<colorStops.length; i+=2) {
				gradient.addColorStop(colorStops[i],colorStops[i+1]);
			}
			
			ctx.fillStyle = gradient;
			ctx.fillRect(0,0,this.width,this.height);
		},
		
		updatePage: function() {
			var body = document.documentElement || document.body;
			var dataUrl = this.element.toDataURL();
			body.style.background = "url('" + dataUrl + "') top left repeat-x";
			body.style.color = this.getColor();
			body.style.paddingTop = window.innerHeight/2-window.innerHeight/8;
			body.style.fontFamily = "sans-serif";
			body.style.fontSize = window.innerHeight/4 + "px";
			body.style.textAlign = "center";
			
			var div = document.createElement("div");
			div.innerHTML = this.getText();
			body.appendChild(div);
		}	
	}
);