/*
 * JQuery Timepicker 
 * Author: Mattijs Spierings (mattijs@webresource.com.au)
 * Version: 1.0
 * Date: 19/9/2011
 */


var Timepicker = {
	/*
	 * Local variables
	 */
	hourFrom : 1,
	hourTo : 12,
	minuteSteps : 10,
	timeout: 1000,	
	container : null,
	field : null,
	pluginlocation : null,
	hoursTimeoutId : null,
	hoursTimeout : null,
	minutesTimeoutId : null,
	minutesTimeout : null,
	
	

	/*
	 * Functions
	 */
	init : function (arg) {
		//extend the arguments passed in
		$.extend(this,arg);
		//load the css
		//$("head")[0].appendChild($("<link rel=\"stylesheet\" type=\"text/css\" href=\"" + this.pluginlocation + "css/timepicker.css\">")[0]);
		//check necessary attributes
		this.verify();
				
		//find the field to replace with the time picker
		this.field = $("[name='" + this.field + "']");
		
		//add a wrapper around the field
		this.container = $("<div></div>");
		this.container.css({
				'width' : '150px',
				'position':  'relative',
				'height' : '22px',
				'margin' : '0'
			});
		//add the container after the field and hide the field
		this.field.after(this.container);
		this.field.hide();
		//create Timepicker
		this.create();
	},				
	
	/*
	 * Create function
	 */
	create : function () {
		//change the container id into a Jq reference
		//this.container = $("#" + this.container);
		//append the Timepicker HTML to the wrapper
		this.container.append($(this.html()));
		
		//first hide the hours and minutes
		$(".timepicker_hours,.timepicker_minutes").hide();
		var that = this;
		
		/*
		 * Bind all the events to the elements
		 */
		with(this.container) {
			
			//reference events
			find(".timepicker_result_hour").one("mouseover",function(){
				find(".timepicker_hours").fadeIn(100);
			});
			
			find(".timepicker_result_minute").one("mouseover",function(){
				find(".timepicker_minutes").fadeIn(100);
			});			
	
			find(".timepicker_hours > li").click(function(e){
				//create mouseenter event that will animate the movement from the current position to the new time postion.number
				//every cell is 22px high, so when you go to 1 to 11, move 11*22 pixels
				Timepicker.hoursTimeout = 0;
				with($(this)) {
					var index = attr("rel");
					var height = height() + 1;
					
					var movePos = index-1;
						
					//that.container.find(".timepicker_result_hour").hide();
					that.container.find(".timepicker_result_hour").text("");
					parent().animate({
							top: -(movePos * height)
						},
						200, function(){
							var hour = text();
							parent().fadeOut('fast',function(){
								that.container.find(".timepicker_result_hour").text(hour);
								that.setValue();								
							
						});
					});
				}
			});
			
			that.container.find(".timepicker_hours").mouseleave(function(){
				var item = $(this);
				Timepicker.hoursTimeoutId = window.setTimeout(function() {
					item.fadeOut('fast', function(){
						that.container.find(".timepicker_result_hour").clearQueue();
						that.container.find(".timepicker_result_hour").delay(50).queue(function(){
							that.container.find(".timepicker_result_hour").one("mouseover",function(){
								that.container.find(".timepicker_hours").fadeIn(100);
							});	
						});
					});					
				},Timepicker.hoursTimeout);
				
			});
			
			that.container.find(".timepicker_hours").mouseenter(function(){
				Timepicker.hoursTimeout = Timepicker.timeout;
				window.clearTimeout(Timepicker.hoursTimeoutId);
			});
			
			
			find(".timepicker_minutes > li").click(function(){
				//create mouseenter event that will animate the movement from the current position to the new time postion.number
				//every cell is 22px high, so when you go to 1 to 11, move 11*22 pixels
				Timepicker.minutesTimeout = 0;
				with($(this)) {
					var index = attr("rel");
					var height = height() + 1;
					//calculate the amount of positions to move
					var movePos = index;
						
					//that.container.find(".timepicker_result_minute").hide();
					that.container.find(".timepicker_result_minute").text("");
					parent().animate({
						top: -(movePos * height)
						},
						200, function(){
							var minutes = text();
							parent().fadeOut('fast',function(){
								that.container.find(".timepicker_result_minute").text(minutes);
								that.setValue();
								
						});					
					});
					
	
				}
			});
			
			that.container.find(".timepicker_minutes").mouseleave(function(){
				var item = $(this);
				Timepicker.minutesTimeoutId = window.setTimeout(function() {
					item.fadeOut('fast', function(){
						that.container.find(".timepicker_result_minute").clearQueue();
						that.container.find(".timepicker_result_minute").delay(50).queue(function(){
							that.container.find(".timepicker_result_minute").one("mouseover",function(){
								that.container.find(".timepicker_minutes").fadeIn(100);
							});	
						});
					});					
				},Timepicker.minutesTimeout);
				
			});
			
			that.container.find(".timepicker_minutes").mouseenter(function(){
				Timepicker.minutesTimeout = Timepicker.timeout;
				window.clearTimeout(Timepicker.minutesTimeoutId);
			});
			
			//arange the daypart cover
			find(".timepicker_daypart_cover").click(function(){
				with($(this)) {
					var i_pos = position().left;
	
					if(attr("rel") == "am") {
	
						attr("rel","pm");
						animate({
							left: i_pos - 35
							},
							300
						);
					}
					else {
						attr("rel","am");	
						animate({
							left: i_pos + 35
							},
							300
						);													
					}
					
				}
				that.setValue();
				
			});
		}
	},
	
	/*
	 * Create HTML body of Timepicker
	 */
	html : function () {
		
		//create the HTML for the timepicker
		var s_html = " \
			<ul class=\"timepicker_hours\">[!HOURS!]</ul> \
			<ul class=\"timepicker_minutes\">[!MINUTES!]</ul> \
			<ul class=\"timepicker_daypart\"> \
				<li title=\"am\">AM</li> \
				<li class=\"timepicker_pm\" title=\"pm\">PM</li> \
			</ul> \
			<div class=\"timepicker_daypart_cover\" rel=\"am\"></div> \
			<div class=\"timepicker_result_hour\">hh</div> \
			<div class=\"timepicker_semicolumn\">:</div> \
			<div class=\"timepicker_result_minute\">mm</div>";
		
		
		//create the hours list
		//var hours = "<li rel=\"hh\">hh</li>";
		var hours = "";		
		for(var i = this.hourFrom; i <= this.hourTo; i++) {
			hours += "<li rel=\"" + this.addLeadingZero(i) + "\">" + this.addLeadingZero(i) + "</li>";
		}
		//create the minutes list
		var minutes = "";
		for(var i = 0; i < 60; i = i + this.minuteSteps) {
			minutes += "<li rel=\"" + (i / this.minuteSteps)  + "\">" + this.addLeadingZero(i) + "</li>";
		}
		//place the hours and minutes in the timepicker html
		s_html = s_html.replace("[!HOURS!]", hours);
		s_html = s_html.replace("[!MINUTES!]", minutes);					
		return s_html;
				
			
	},
	
	/*
	 * additional function to create Zero padding
	 */
	addLeadingZero : function (number) {
		if(number < 10)
			return "0" + number;
		else 
			return number;
		
	},
	
	/*
	 * get the value of both timepickers and format it into a valid time
	 */
	setValue : function () {
		with(this.container) {
			var hours = find(".timepicker_result_hour").text();
			var minutes = find(".timepicker_result_minute").text();
			var daypart = find (".timepicker_daypart_cover").attr("rel");
		}
		if(hours == "" || minutes == "" || hours == "hh" || minutes == "mm")
			return;	
		else
			this.field.val(hours + ":" + minutes + " " + daypart);
	},
	
	/*
	 *  check if necessary attributes have been provided, if not show error message
	 */
	verify : function () {
		if(this.field == null) {
			alert("please specify field to be replaced with the timepicker")
			return;
		}
		
		if($("[name='" + this.field + "']").length == 0) {
			alert("textfield to be replace with timepicker not found");
			return;
		}
		
	}
	
	
}