/* jQuery clockpicker plugin by Metodi Mitov - eldarrion@gmail.com */

jQuery.fn.myClock = function(options) {
	
	var settings = {
		startHour	:	8,			// Hour of the day to start at. Takes a number between 0 and 23. Must be less than endHour or nothing will happen.
		endHour		:	16,			// Hour of the day to end at. Takes a number between 0 and 23. Must be greater than startHour or nothing will happen.
		layout		:	'vertical',	// Currently unavailable in other layouts. Will likely be removed completely.
		event		:	'click',	// Event to activate the picker. Usually works best with click.
		timeOut		:	1000,		// How long to wait after hovering out of the menu before vanishing(in miliseconds).
		military	:	false,		// Set 12hr(false)/24hr(true) time format.
		side		:	'right',	// Which side of the input element to appear on.
		minSegments	:	4,			// How many minute segments to have in an hour. Wouldn't suggest a number greater than 20, or the list becomes too great.
		waitTime	:	5000		// Initial wait time in miliseconds before the clockpicker vanishes (if the user doesn't hover over one of the fields)
	};
	
	var t0 = null; 					// Timer for destroy()
	var t0Running = false; 			// Flag to check if timer is running. Needs to be improved.
	var v0 = null;					// Timer for initial destroy()
	var v0Running = false;			// Flag for initial timer
	
	// Initialise variables for multiple clockpicker on same page support.
	var $hours;
	var $elem;
	
	if (options)
		jQuery.extend(settings, options);
		
	jQuery(this)[settings.event](function(e) {
		
		$body = jQuery('body');
		
		$elem = jQuery(this);
		
		$hours = jQuery("<div id='myClock'></ul>");
		
		$body.append($hours);
		
		$hoursCol1 = jQuery("<ul id='hours_col1' class='hours_col'></ul>");
		$hoursCol2 = jQuery("<ul id='hours_col2' class='hours_col'></ul>");
		
		$hours.append($hoursCol1);
		$hours.append($hoursCol2);
		
		genHours();
		minHover();
		minClick();
		
		v0 = setTimeout(function() {destroy();}, settings.waitTime);
		v0Running = true;
		
		var pos = $elem.offset();
		var width = settings.side == 'right' ? $elem.width() : 0 - $hoursCol1.width() - $hoursCol2.width();
		
		$hours.css({'left' : (pos.left + width) + 'px', 'top' : pos.top + 'px'});
		
		function genHours() {
			var cnt = 1;
			for(hour=settings.startHour; hour<=settings.endHour; hour++) {
				if (hour == 12)
					cnt = 2;
				currHour = !settings.military && hour > 12 ? hour - 12 : hour;
				if (currHour < 10)
					currHour = '0' + currHour;
				if (hour == 0 && !settings.military)
					currHour = 12;
				$hourVar = settings.military ? $hourVar = jQuery("<li class='hour'>" + currHour + "</li>") : jQuery("<li class='hour'>" + currHour + set_ampm(hour) + "</li>");
				hour < 12 ? $hoursCol1.append($hourVar) : $hoursCol2.append($hourVar);
				$hourVar.append(genMinutes(currHour));
				hovering($hourVar, cnt);
			}
		}
		
		function genMinutes(pHour) {
			var minVar = '<ul class="minutes" id="hr_' + pHour + '_min">';
			for(var minSeg=0; minSeg<settings.minSegments;minSeg++) {
				var minutes = parseInt((60 / settings.minSegments) * minSeg);
				if (minutes < 10)
					minutes = '0' + minutes;
				if (!settings.military)
					minVar += '<li>' + pHour + ':' + minutes + set_ampm(hour) + '</li>';
				else
					minVar += '<li>' + pHour + ':' + minutes + '</li>';
			}
			minVar += '</ul>';
			return minVar;
		}
		
		function set_ampm(pHour) {
			return pHour >= 12 ? ' PM' : ' AM';
		}
		
		function destroy() {
			$hours.remove();
		}
		
		function minHover() {
			$('.minutes').children().each(function() {
				$(this).hover(
					function() {
						$(this).addClass('hovered');
					},
					function() {
						$(this).removeClass('hovered');
					}
				)
			})
		}
		
		function minClick() {
			$('.minutes').children().each(function() {
				$(this).click(function() {
					$elem.val($(this).html());
					destroy();
				})
			})
		}
		
		function hovering(pLI, pCol) {
			var lr = pCol == 1 ? 'right' : 'left';
			pLI.hover(
				function() {
					if (v0Running) {
						clearTimeout(v0);
						v0Running = false;
					}
					if (t0Running) {
						clearTimeout(tO);
						t0Running = false;
					}
					var offset = $hoursCol1.children().length > 0 ? $('#hours_col1 li').width() + 'px' : $('#hours_col2 li').width() + 'px';
					pLI.find('ul').show().css(lr, offset);
					pLI.addClass('hovered');
				},
				function() {
					pLI.find('ul').hide();
					pLI.removeClass('hovered');
					tO = setTimeout(function() {destroy();}, settings.timeOut);
					t0Running = true;
				}
			)
		}
	})
}