var _debug = true;
var clouds = 2;
var windowWidth = $(window).width();

function roundVal(val){
	var dec = 2;
	var result = Math.round(val * Math.pow(10, dec)) / Math.pow(10, dec);
	return result;
}

function _log(text){
	if ('undefined' != typeof _debug && _debug) 
  if ('undefined' != typeof console) 
  if ('function' == typeof console.log) 
  if ('object' == typeof text) {
		console.log(text);
	}
	else {
		console.log('console: ' + text);
	}
};
function abs(n){
	return ((n < 0) ? n * -1 : n);
}

function randomXToY(minVal, maxVal, floatVal){
	var randVal = minVal + (Math.random() * (maxVal - minVal));
	return typeof floatVal == 'undefined' ? Math.round(randVal) : randVal.toFixed(floatVal);
}

getX = function(){
	return randomXToY(0, $('body').width())
};
getY = function(){
	var lowerLimit = $('header:first').height(), upperLimit = ($('body').height() - $('footer:last').height()-150);
	return randomXToY(lowerLimit, upperLimit);
};
function addSun(){
	if ($('canvas#sun').length == 0) {
		var appendTo = $('header').get(0), hour = new Date().getHours(), sectionsSize = $(window).width() / 24, pos = (sectionsSize * hour) - 30;
		
		$(appendTo).append('<canvas id="sun" class="sky" style="top:0;left:' + pos + 'px;"></canvas>');
		
		var drawingCanvas = $('#sun')[0];
		
		// Check the element is in the DOM and the browser supports canvas
		if (drawingCanvas.getContext) {
		
			// Initaliase a 2-dimensional drawing context
			var context = drawingCanvas.getContext('2d');
			
			//draw big sun
			context.fillStyle = "#FFFF00";
			context.beginPath();
			context.arc(100, 100, 100, 0, Math.PI * 2, true);
			context.globalAlpha = 0.3;
			context.fill();
			
			//draw little sun
			context.fillStyle = "#FFFF00";
			context.beginPath();
			context.arc(100, 100, 50, 0, Math.PI * 2, true);
			context.globalAlpha = 0.7;
			context.fill();
		};
	}
};

function addClouds(){
	if ($('canvas.clouds').length == 0) {
	
		appendTo = $('body').get(0);
		for (var i = clouds - 1; i >= 0; i--) {
		
			$(appendTo).append('<canvas id="cloud_' + i + '" class="clouds" style="top:' + getY() + 'px;left:' + getX() + 'px;"></canvas>');
			var drawingCanvas = $('#cloud_' + i)[0];
			// Check the element is in the DOM and the browser supports canvas
			if (drawingCanvas.getContext) {
			
				// use getContext to use the canvas for drawing
				var ctx = drawingCanvas.getContext('2d');
				
				// Set the style properties.
				ctx.fillStyle = '#ffffff';
				
				ctx.beginPath();
				// Start from the top-left point.
				ctx.moveTo(10, 20); // give the (x,y) coordinates
				ctx.quadraticCurveTo(120, 200, 300, -100);
				ctx.quadraticCurveTo(60, 120, 65, 100);
				ctx.quadraticCurveTo(125, 100, 125, 62.5);
				ctx.quadraticCurveTo(125, 125, 175, -25);
				
				ctx.globalAlpha = 0.7;
				
				ctx.fill();
			}
		};
	}
};

function addCloudH(){
	if ($('canvas#cloudH').length == 0) {
		appendTo = $('body').get(0);
		
		$(appendTo).append('<canvas id="cloudH" class="clouds" style="top:' + getY() + 'px;left:' + getX() + 'px;"></canvas>');
		
		var drawingCanvas = $('#cloudH')[0];
		if (drawingCanvas.getContext) {
		
			var ctx = drawingCanvas.getContext("2d");
			ctx.fillStyle = '#fff';
			ctx.beginPath();
			ctx.moveTo(75, 40);
			ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
			ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
			ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
			ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
			ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
			ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
			ctx.globalAlpha = 0.3;
			ctx.fill();
		}
	}
};

addPacManCloud = function(){
	if ($('canvas#cloudP').length == 0) {
		appendTo = $('body').get(0);
		
		$(appendTo).append('<canvas id="cloudP" class="clouds" style="top:' + getY() + 'px;left:' + getX() + 'px;"></canvas>');
		
		var drawingCanvas = $('#cloudP')[0];
		if (drawingCanvas.getContext) {
		
			var ctx = drawingCanvas.getContext("2d");
			ctx.fillStyle = 'yellow';
			ctx.beginPath();
			ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
			ctx.lineTo(34, 37);
			ctx.globalAlpha = 0.3;
			ctx.fill();
		}
	}
};
animateSky = function(){
	if (($("canvas#sun").attr("left")) != windowWidth) {
		$("canvas#sun").stop().animate({
			left: windowWidth
		}, 1000000, "linear", function(){
			$('canvas.sky').stop().css("left", "-200px");
		});
	}
};
animateClouds = function(){
	if (($("canvas.clouds").attr("left")) != windowWidth) {
		$("canvas.clouds").stop().animate({
			left: windowWidth
		}, 100000, "linear", function(){
			$('canvas.clouds').stop().css("left", "-100px");
			animateClouds();
		});
	}
};


$(document).ready(function(){
	$('body').width($(window).width()).css("overflow-x", "hidden");
	addSun();
	addClouds();
	addCloudH();
	addPacManCloud();
	//animateSky();
	animateClouds()
});