/*!
 * jquery.tzineClock.js - Tutorialzine Colorful Clock Plugin
 *
 * Copyright (c) 2009 Martin Angelov
 * http://tutorialzine.com/
 *
 * Licensed under MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Launch  : December 2009
 * Version : 1.0
 * Released: Monday 28th December, 2009 - 00:00
 */

(function($){
	
	// A global array used by the functions of the plug-in:
	var gVars = {};
	


	// Extending the jQuery core:
	$.fn.tzineClock = function(opts){
	
		// "this" contains the elements that were selected when calling the plugin: $('elements').tzineClock();
		// If the selector returned more than one element, use the first one:
		
		var container = this.eq(0);
	
		if(!container)
		{
			try{
				console.log("Invalid selector!");
			} catch(e){}
			
			return false;
		}
		
		if(!opts) opts = {}; 
		
		var defaults = {
			/* Additional options will be added in future versions of the plugin. */
		};
		
		/* Merging the provided options with the default ones (will be used in future versions of the plugin): */
		$.each(defaults,function(k,v){
			opts[k] = opts[k] || defaults[k];
		})

		// Calling the setUp function and passing the container,
		// will be available to the setUp function as "this":
		setUp.call(container);
		
		return this;
	}
	
	function setUp()
	{
		// The colors of the dials:
		var colors = ['yellow', 'orange','blue','green'];
		
		var tmp;
		
		for(var i=0;i<4;i++)
		{
			// Creating a new element and setting the color as a class name:
			
			tmp = $('<div>').attr('class',colors[i]+' clock').html(
				'<div class="display"></div>'+
				
				'<div class="front left"></div>'+
				
				'<div class="rotate left">'+
					'<div class="bg left png_bg"></div>'+
				'</div>'+
				
				'<div class="rotate right">'+
					'<div class="bg right png_bg"></div>'+
				'</div>'
			);
			
			// Appending to the container:
			$(this).append(tmp);
			
			// Assigning some of the elements as variables for speed:
			tmp.rotateLeft = tmp.find('.rotate.left');
			tmp.rotateRight = tmp.find('.rotate.right');
			tmp.display = tmp.find('.display');
			
			// Adding the dial as a global variable. Will be available as gVars.colorName
			gVars[colors[i]] = tmp;
		}
		
		var tomb1 = Date.parse('August 23, 2010 00:00:01 GMT-0700');
		var tomb2 = Date.parse('August 31, 2010 00:00:01 GMT-0700');
		var tomb3 = Date.parse('September 1, 2010 00:00:01 GMT-0700');
		var tomb4 = Date.parse('September 2, 2010 00:00:01 GMT-0700');
		var tomb5 = Date.parse('September 3, 2010 00:00:01 GMT-0700');
		var tomb6 = Date.parse('September 6, 2010 00:00:01 GMT-0700');
		var tomb7 = Date.parse('September 7, 2010 00:00:01 GMT-0700');
		var tomb8 = Date.parse('September 8, 2010 00:00:01 GMT-0700');
		var tomb9 = Date.parse('September 9, 2010 00:00:01 GMT-0700');
		var tomb10 = Date.parse('September 10, 2010 00:00:01 GMT-0700');

	
		// Setting up a interval, executed every 1000 milliseconds:
		setInterval(function(){
			var currentTime = new Date();
			currentTime = Date.parse(currentTime);
			
			if (currentTime >= tomb1) {
				var futureTime = tomb2;
			} else {
				var futureTime = tomb2;
			}
			if (currentTime >= tomb2) {
				var futureTime = tomb3;
			}
			if (currentTime >= tomb3) {
				var futureTime = tomb4;
			}
			if (currentTime >= tomb4) {
				var futureTime = tomb5;
			}
			if (currentTime >= tomb5) {
				var futureTime = tomb6;
			}
			if (currentTime >= tomb6) {
				var futureTime = tomb7;
			}
			if (currentTime >= tomb7) {
				var futureTime = tomb8;
			}
			if (currentTime >= tomb8) {
				var futureTime = tomb9;
			}
			if (currentTime >= tomb9) {
				var futureTime = tomb10;
			}
			if (currentTime >= tomb10) {
				var futureTime = tomb10;
			}
			
			var dd = futureTime-currentTime;
						
			var d=Math.floor((dd%(60*60*1000*24*365))/(24*60*60*1000)*1);
			var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
			var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
			var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
		
			animation(gVars.green, s, 60);
			animation(gVars.blue, m, 60);
			animation(gVars.orange, h, 24);
			animation(gVars.yellow, d, 30);
			},1000);
	}
	
	function animation(clock, current, total)
	{
		// Calculating the current angle:
		var angle = (360/(total))*current; 
	
		var element;

		if(current==0)
		{
			// Hiding the right half of the background:
			clock.rotateRight.hide();
			
			// Resetting the rotation of the left part:
			rotateElement(clock.rotateLeft,0);
		}
		
		if(angle<=180)
		{
			// The left part is rotated, and the right is currently hidden:
			element = clock.rotateLeft;
			clock.rotateRight.hide();
		}
		else
		{
			// The first part of the rotation has completed, so we start rotating the right part:
			clock.rotateRight.show();
			clock.rotateLeft.show();
			
			
			
			rotateElement(clock.rotateLeft,180);
			
			element = clock.rotateRight;
			angle = angle-180;
		}

		rotateElement(element,angle);
		
		// Setting the text inside of the display element, inserting a leading zero if needed:
		clock.display.html(current<10?'0'+current:current);
	}
	
	function rotateElement(element,angle)
	{
		// Rotating the element, depending on the browser:
		var rotate = 'rotate('+angle+'deg)';
		
		if(element.css('MozTransform')!=undefined)
			element.css('MozTransform',rotate);
			
		else if(element.css('WebkitTransform')!=undefined)
			element.css('WebkitTransform',rotate);
	
		// A version for internet explorer using filters, works but is a bit buggy (no surprise here):
		else if(element.css("filter")!=undefined)
		{
			var cos = Math.cos(Math.PI * 2 / 360 * angle);
			var sin = Math.sin(Math.PI * 2 / 360 * angle);
			
			element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
	
			element.css("left",-Math.floor((element.width()-200)/2));
			element.css("top",-Math.floor((element.height()-200)/2));
		}
	
	}
	
	
})(jQuery)