(function($){
	$.fn.blogWhatDesignClock = function(options){
		return this.each(function(key, value){
			var element = $(this);
			if(element.data('blogWhatDesignClock')){
				return element.data('blogWhatDesignClock');
			}
			var blogWhatDesignClock = new BlogWhatDesignClock(this, options);
			element.data('blogWhatDesignClock', blogWhatDesignClock);
		});
	}
	
	$.fn.blogWhatDesignClock.defaults = {
		timerDelay: 5000, 
		backgroundColor: '#ffffe1', 
		outerLineThickness: 2, 
		innerBackgroundPadding: 6, 
		markerColor: '#624738', 
		markerRadius: 1.5, 
		markerPadding: 3, 
		handsPaddingFromCenter: 3, 
		hourHandColor: '#624738', 
		secondHandColor: 'red', 
		secondHandThickness: 0.5,
		gmtOffset: -5
	}
	
	$.fn._reverse = [].reverse;
	
	var BlogWhatDesignClock = function(element, options){
		var settings = $.extend({}, $.fn.blogWhatDesignClock.defaults, options);
		
		var canvas = $(element);
		var context = element.getContext('2d');
		var backgroundRadius;
		var innerBackgroundRadius;
		var markersCircleRadius;
		var timeoutID;
		
		var hourHandAngle = 0;
		var minuteHandAngle = 0;
		var secondHandAngle = 0;
		
		var init = function(){
			backgroundRadius = Math.min(canvas.width(), canvas.height()) * 0.5 + 3;
			context.translate(canvas.width() * 0.5, canvas.height() * 0.5);
			
			innerBackgroundRadius = 
				backgroundRadius - settings.outerLineThickness - settings.innerBackgroundPadding;
			markersCircleRadius = 
				innerBackgroundRadius - settings.markerRadius * 2 - settings.markerPadding;
			
			updateView();
			timerHandler(this);
		};
		
		var updateAngles = function(){
			var date = new Date(new Date().valueOf() + (settings.gmtOffset * 1000 * 60 * 60));
			hourHandAngle = 
				Math.PI * 2 / 12 * (date.getUTCHours() + date.getUTCMinutes() / 60) - Math.PI * 0.5;
			minuteHandAngle = Math.PI * 2 / 60 * (date.getUTCMinutes() + date.getUTCSeconds() / 60) - Math.PI * 0.5;
			secondHandAngle = Math.PI * 2 / 60 * date.getUTCSeconds() - Math.PI * 0.5;
		};
		
		//***************************************
		//	view drawing
		//***************************************
		var updateView = function(){
			context.clearRect(-backgroundRadius, -backgroundRadius, 
				backgroundRadius * 2, backgroundRadius * 2);
			
			drawClockBackground();
			drawMarkers();
			drawHands();
		};
		
		var drawClockBackground = function(){
			//outer stroke
			context.save();
			context.lineWidth = settings.outerLineThickness;
			context.strokeStyle = settings.backgroundColor;
			context.beginPath();
			context.arc(0, 0, backgroundRadius - settings.outerLineThickness * 2, 0, Math.PI * 2, false);
			context.closePath();
			context.stroke();
			context.restore();
			
			//inner cisrcle
			context.save();
			context.fillStyle = settings.backgroundColor;
			context.beginPath();
			context.arc(0, 0, innerBackgroundRadius, 0, Math.PI * 2, false);
			context.closePath();
			context.fill();
			context.restore();
			
			context.save();
			context.fillStyle = settings.markerColor;
			context.beginPath();
			context.arc(0, 0, 2, 0, Math.PI * 2, false);
			context.closePath();
			context.fill();
			context.restore();
		}
		
		var drawMarkers = function(){
			var markersCount = 12;
			for(var i = 0; i < markersCount; i++){
				var angle = Math.PI * 2 / 12 * i;
				var markerX = Math.sin(angle) * markersCircleRadius;
				var markerY = Math.cos(angle) * markersCircleRadius;
				
				context.save();
				context.fillStyle = settings.markerColor;
				context.beginPath();
				context.arc(markerX, markerY, settings.markerRadius, 0, Math.PI * 2, false);
				context.closePath();
				context.fill();
				context.restore();
			}
		};
		
		var drawHands = function(){
			var length;
			//hour hand
			length = markersCircleRadius - settings.markerRadius - 12;
			drawDecorativeHand(length, hourHandAngle, settings.hourHandColor);
			
			//minute hand
			length = markersCircleRadius - settings.markerRadius * 2 - 2;
			drawDecorativeHand(length, minuteHandAngle, settings.hourHandColor);
			
			//second hand
			length = markersCircleRadius - settings.markerRadius * 2 - 2;
			drawSecondHand(length, secondHandAngle, settings.secondHandColor);
		};
		
		var drawDecorativeHand = function(length, angleInRadians, color){
			var startThickness = 0.5;
			var endThickness = 3;
			
			context.save();
			context.rotate(angleInRadians);
			context.fillStyle = color;
			context.beginPath();
			context.moveTo(settings.handsPaddingFromCenter, startThickness * 0.5);
			context.lineTo(settings.handsPaddingFromCenter + length - 7, endThickness * 0.5);
			context.lineTo(settings.handsPaddingFromCenter + length, 0);
			context.lineTo(settings.handsPaddingFromCenter + length - 7, -endThickness * 0.5);
			context.lineTo(settings.handsPaddingFromCenter, -startThickness * 0.5);
			context.lineTo(settings.handsPaddingFromCenter, startThickness * 0.5);
			context.fill();
			context.closePath();
			context.restore();
		};
		
		var drawSecondHand = function(length, angleInRadians, color){
			context.save();
			context.rotate(angleInRadians);
			context.strokeStyle = color;
			context.lineWidth = settings.secondHandThickness;
			context.beginPath();
			context.moveTo(settings.handsPaddingFromCenter, 0);
			context.lineTo(settings.handsPaddingFromCenter + length, 0);
			context.closePath();
			context.stroke();
			context.restore();
		};
		
		//***************************************
		//	timer
		//***************************************
		var timerHandler = function(_this){
			updateAngles();
			updateView();
			timeoutID = setTimeout(timerHandler, 1000);
		};
		
		//***************************************
		//	init
		//***************************************
		init();
		
		return this;
	}
	
})(jQuery);