/// <reference path="jquery.intellisense.js"/>  
/**
 * Cobalt Elements for jQuery
 * calendar - this manages the calendar date picker
 *
 * These methods are build on the jQuery and interface foundation to provider
 * client functionality to the Cobalt CMS system.
 *
 * Copyright (c) 2007 Scorpion Design, Inc.
 *
 */
(function($) {

	// Return a new instance of the cobalt editor.
	$.fn.calendar = function(o)
	{
		return this.each(function()
			{
				return new $.cobalt.calendar(this,o);
			});
	};
	
	// Create the cobalt namespace if it has not already been done.
	$.cobalt = $.cobalt || {};

	// Calendar contructor.
	$.cobalt.calendar = function(el,o)
	{
		// Define the basic options.
		o = $.extend(
			{
				calendarImage : $.browser.msie6 ? 'Shared/images/calendar.gif' : 'Shared/images/calendar.png',
				clockImage : $.browser.msie6 ? 'Shared/images/admin/scheduler.gif' : 'Shared/images/admin/scheduler.png',
				onfocus : false,
				dateFormat : 'MDY/'
			},o);

		// Assign the basic variables.
		this.options = o;
		this.input = $(el).data('cal',this);

		// Set up the image to activate the calendar.
		var cimg = o.calendarImage;
		if (o.clock && o.nodate) cimg = o.clockImage;
		if (cimg)
		{
			if (cimg.jquery)
				cimg.data('cal',this).bind('click',this.activate);
			else
			{
				var img = $('<img src="'+cimg+'" border="0" style="width:22px;height:22px;display:inline;margin:0px 1px;vertical-align:middle;" />');
				this.input.after(img).css({verticalAlign:'middle'});
				img.data('cal',this).bind('click',this.activate);
			}
		}
		else
			o.onfocus = true;

		// As needed, set up the textbox focus event.
		if (o.onfocus)
			this.input.bind('focus',this.activate);

		// Close the calendar if the user "tabs" off the input element.
		this.input.bind('keydown',this.tabClose);

		// Initialize the calendar.
		this.init();
	};
	
	$.extend($.cobalt.calendar, {

		html :
'<div class="cal_main" style="position:absolute;display:none;cursor:default;margin:0px;padding:0px;z-index:200;">\
	<div class="cal_date">\
		<div class="cal_prev"><div></div></div>\
		<div class="cal_next"><div></div></div>\
		<div class="cal_period"></div>\
		<div class="cal_days"></div>\
		<div class="cal_months"></div>\
		<div class="cal_years"></div>\
		<div class="cal_today"></div>\
	</div>\
	<div class="cal_clockpanel">\
		<div class="cal_time">Select Time</div>\
		<div class="cal_clock">\
			<div class="cal_hours cal_hours_3"></div>\
			<div class="cal_mins cal_mins_0"></div>\
		</div>\
		<div class="cal_time">\
			<table cellspacing="0" cellpadding="0" border="0">\
				<tr>\
					<td><select class="cal_hours">\
							<option value="1">&nbsp;1</option>\
							<option value="2">&nbsp;2</option>\
							<option value="3">&nbsp;3</option>\
							<option value="4">&nbsp;4</option>\
							<option value="5">&nbsp;5</option>\
							<option value="6">&nbsp;6</option>\
							<option value="7">&nbsp;7</option>\
							<option value="8">&nbsp;8</option>\
							<option value="9">&nbsp;9</option>\
							<option value="10">10</option>\
							<option value="11">11</option>\
							<option value="12">12</option>\
						</select></td>\
					<td>:</td>\
					<td><select class="cal_minutes">\
							<option value="0">00</option>\
							<option value="5">05</option>\
							<option value="10">10</option>\
							<option value="15">15</option>\
							<option value="20">20</option>\
							<option value="25">25</option>\
							<option value="30">30</option>\
							<option value="35">35</option>\
							<option value="40">40</option>\
							<option value="45">45</option>\
							<option value="50">50</option>\
							<option value="55">55</option>\
						</select></td>\
					<td><select class="cal_ampm">\
							<option>AM</option>\
							<option>PM</option>\
						</select></td>\
				</tr>\
			</table>\
		</div>\
		<div class="cal_close">Close</div>\
	</div>\
</div>',
	
		months : ['January','February','March','April','May','June','July','August','September','October','November','December'],
		monthsAbbr : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],

		// An array of regex date patterns.
		datePatterns :
			[
				/^(\d\d?)[ -\/\\]+([a-zA-Z]{3,9})[- \/\\]+(\d{2}|\d{4})$/,
				/^(\d{4})(\d{2})(\d{2})$/,
				/^(\d\d?)[ -\/\\]+([a-zA-Z]{3,9})[- \/\\]+(\d{2}|\d{4})\s+(\d{1,2}):(\d{2})(A|P)M?$/i,
				/^(\d{1,2}):(\d{2}):?(A|P)M?$/i
			],

		// Parse the date out of a value.
		parseDate : function(val,hideError)
			{
				// Trim any white space off of the beginning or and of the line.
				val = val && val.replace(/^\s+|\s+$/,'').replace(/(\d)([AP]M)\b/gi,'$1:$2');

				// If no value is passed, use the current date.
				var date = val ? new Date(val) : (hideError ? null : new Date());
				
				// If the built-in javascript parser was unable to calculate it, check the date regex patterns.
				if (isNaN(date))
				{
					var p = $.cobalt.calendar.datePatterns;
					var r;
					var index;
					for (var i=0;i<p.length;i++)
					{
						r = p[i].exec(val);
						if (r)
						{
							index = i;
							break;
						}
					}
					
					var day,year,month,hours,mins;
					switch (index)
					{
						case 0:
							day = r[1]-0;
							year = (r[3].length==2?'20'+r[3]:r[3])-0;
							month = $.cobalt.calendar.parseMonth(r[2]);
							date = new Date(year,month,day);
							break;
						case 1:
							date = new Date(parseInt(r[1]),parseInt(r[2])-1,parseInt(r[3]));
							break;
						case 2:
							day = r[1]-0;
							year = (r[3].length==2?'20'+r[3]:r[3])-0;
							month = $.cobalt.calendar.parseMonth(r[2]);
							date = new Date(year,month,day);
							hours = $.toInt(r[4])+(r[6].toUpperCase()=='P'?12:0);
							date.setHours(hours);
							date.setMinutes($.toInt(r[5]));
							date.setSeconds(0);
							break;
						case 3:
							date = new Date(1900,0,1);
							hours = $.toInt(r[1]);
							if (hours==12) hours = 0;
							hours +=(r[3].toUpperCase()=='P'?12:0);
							date.setHours(hours);
							date.setMinutes($.toInt(r[2]));
							date.setSeconds(0);
					}
				}
				
				if (isNaN(date))
				{
					if (hideError)
						return null;
					else
					{
						alert('The date '+val+' could not be parsed.');
						return new Date();
					}
				}
				else
					return date;
			},
		
		// Parse the text of a month into a numeric value.
		parseMonth : function(month)
			{
				if (!month) return;
				month = month.toUpperCase();
				var m = $.cobalt.calendar.months;
				
				// Iterate through the list of months.
				for (var i=0;i<m.length;i++)
				{
					// If the month starts with the supplied month name, return it.
					if (m[i].toUpperCase().substring(0,month.length)==month)
						return i;
				}
			}
	});

	// Extend the calendar prototype with these shared properties/methods.
	$.extend($.cobalt.calendar.prototype, {

		calendar : null,
		active : false,
		isover : false,
		inputover : false,
		scope : 'Days',

		// Set the calendar date from the value of the field.
		setDateFromField : function()
			{
				// Get the value of the input field.
				var date = $.cobalt.calendar.parseDate(this.input[0].value||this.input.text());;
				this.startDate = date;

				// Set the date.
				this.setDate(date);
				this.today.html('Today: '+$.dateTimeFormat(new Date(),'MMMM d, yyyy'));
			},

		// Date the value of the date in the calendar control.
		setDate : function(date)
			{
				this.currentDate = date.getDate();
				this.currentMonth = date.getMonth();
				this.currentYear = date.getFullYear();
				this.currentHour = date.getHours();
				this.currentMinute = Math.round(date.getMinutes()/5)*5;
				this.drawCalendar();
			},

		// Next month / year / decade.
		move : function(amount)
			{
				var cal = this;
				var date;
				switch (cal.scope)
				{
					case 'Days':
						date = new Date(cal.currentYear,cal.currentMonth+amount,1,cal.currentHour||0,cal.currentMinute||0,0);
						break;
					case 'Months':
						date = new Date(cal.currentYear+amount,cal.currentMonth,1,cal.currentHour||0,cal.currentMinute||0,0);
						break;
					case 'Years':
						date = new Date(cal.currentYear+(amount*10),cal.currentMonth+1,1,cal.currentHour||0,cal.currentMinute||0,0);
						break;
				}
				cal.setDate(date);
			},

		// Draw the current calendar.
		drawCalendar : function()
			{
				var cal = this;
				switch (cal.scope)
				{
					case 'Days':
						cal.period.html($.cobalt.calendar.months[cal.currentMonth]+', '+cal.currentYear);
						cal.drawDays();
						break;
					case 'Months':
						cal.period.html(cal.currentYear);
						cal.drawMonths();
						break;
					case 'Years':
						var year = Math.floor(cal.currentYear/10)*10;
						cal.period.html(year+' - '+(year+10));
						cal.drawYears();
						break;
				}
				if (cal.options.clock)
				{
					cal.drawTime();
					cal.updateTimeSelect();
				}
			},

		// Draw the day calendar.
		drawDays : function()
			{
				var year = this.currentYear;
				var month = this.currentMonth;
				
				// Get the first and last day of the month.
				var firstDay = new Date(year,month,1);
				var lastDay = new Date(year,month+1,0);
				
				// Find the ordinal data.
				var firstDayOfWeek = firstDay.getDay();
				var lastDayOfWeek = lastDay.getDay();
				var daysInMonth = new Date(year,month+1,0).getDate();

				// Set the start date.
				if (firstDayOfWeek==0)
					firstDayOfWeek += 7;

				// Draw each of the days.
				var sb = ['<table cellspacing="0" cellpadding="0" border="0"><tr class="cal_week"><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>'];
				for (var i=0;i<42;i++)
				{
					// If we've reached a new row.
					if (i%7==0)
					{
						if (i>0) sb.push('</tr>');
						sb.push('<tr>');
					}

					// Get the next date.
					var current = new Date(year,month,1-firstDayOfWeek+i);
					sb.push('<td><div class="cal_day');

					if (current.getMonth()!=month)
					{
						// We're rendering the off-month dates.
						sb.push(' cal_other');
					}
					else if (current.getYear()==this.startDate.getYear() && 
							 current.getMonth()==this.startDate.getMonth() && 
							 current.getDate()==this.startDate.getDate())
					{
						// Rendering the currently selected date.
						sb.push(' cal_sel');
					}

					sb.push('" _date="');
					sb.push(current.getFullYear()+'.');
					sb.push(current.getMonth()+'.');
					sb.push(current.getDate()+'" title="');
					sb.push($.dateTimeFormat(current,'dddd, MMMM DDD, yyyy'));
					sb.push('">');
					sb.push(current.getDate());
					sb.push('</div></td>');
				}
				sb.push('</tr></table>');
				this.calDays.html(sb.join(''));
			},

		// Draw the month calendar.
		drawMonths : function()
			{
				var year = this.currentYear;

				// Draw each of the days.
				var sb = ['<table cellspacing="0" cellpadding="0" border="0">'];
				for (var i=0;i<12;i++)
				{
					// If we've reached a new row.
					if (i%4==0)
					{
						if (i>0) sb.push('</tr>');
						sb.push('<tr>');
					}

					// Get the next date.
					var current = new Date(year,0+i,1);
					sb.push('<td><div class="cal_month');

					if (current.getYear()==this.startDate.getYear() && 
						 current.getMonth()==this.startDate.getMonth())
					{
						// Rendering the currently selected date.
						sb.push(' cal_sel');
					}

					sb.push('" _date="');
					sb.push(current.getFullYear()+'.');
					sb.push(current.getMonth()+'" title="');
					sb.push($.dateTimeFormat(current,'MMMM, yyyy'));
					sb.push('">');
					sb.push($.cobalt.calendar.monthsAbbr[i]);
					sb.push('</div></td>');
				}
				sb.push('</tr></table>');
				this.calMonths.html(sb.join('')).show();
			},

		// Draw the year calendar
		drawYears : function()
			{
				// Get the starting year.
				var year = (Math.floor(this.currentYear/10)*10)-1;

				// Draw each of the days.
				var sb = ['<table cellspacing="0" cellpadding="0" border="0">'];
				for (var i=0;i<12;i++)
				{
					// If we've reached a new row.
					if (i%4==0)
					{
						if (i>0) sb.push('</tr>');
						sb.push('<tr>');
					}

					// Get the next date.
					var current = year+i;
					sb.push('<td><div class="cal_year');

					if (i==0)
					{
						// We're rendering the off-month dates.
						sb.push(' cal_other');
					}
					else if (current==this.startDate.getYear())
					{
						// Rendering the currently selected date.
						sb.push(' cal_sel');
					}

					sb.push('" _date="');
					sb.push(current+'">');
					sb.push(current+'</div></td>');
				}
				sb.push('</tr></table>');
				this.calYears.html(sb.join('')).show();
			},

		// Set the hands of the clock.
		drawTime : function()
			{
				// Get the hour and minute.
				var hour = this.currentHour;
				var minute = this.currentMinute;
				var pm = hour > 11;

				// Set the position of the hands.
				this.calHours.attr('class','cal_hours cal_hours_'+Math.round(hour%12));
				this.calMinutes.attr('class','cal_mins cal_mins_'+Math.round((minute/5)%12));
			},

		// Update the clock select dropdowns.
		updateTimeSelect : function()
			{
				// Get the hour and minute.
				var hour = Math.round(this.currentHour%12);
				var minute = Math.round(this.currentMinute/5)*5;
				var pm = this.currentHour > 11;

				// And the dropdown lists.
				this.select.hours.val(hour||12);
				this.select.minutes.val(minute);
				this.select.ampm.val(pm?'PM':'AM');
			},

		// Update the clock based on the drop down lists.
		updateClockSelect : function(e)
			{
				var cal = this.updateClockSelect ? this : $(this).data('cal');
				var hour = $.toInt(cal.select.hours.val());
				cal.currentHour = (hour==12 ? 0 : hour) + (cal.select.ampm.val()=='PM' ? 12 : 0);
				cal.currentMinute = $.toInt(cal.select.minutes.val());
				cal.drawTime();
				var date = new Date(cal.currentYear,cal.currentMonth,cal.currentDate,cal.currentHour||0,cal.currentMinute||0,0);
				cal.recordDate(date);
			},

		// Return an invisible helper.
		timeHelper : function(e)
			{
				return $('<img src="Shared/images/spacer.gif">').appendTo(document.body);
			},

		// Start dragging the clock hands.
		timeStart : function(e,ui)
			{
				// Get a references to the calendar.
				var cal = $(this).data('cal');
				ui.helper.calendar = cal;

				// Record the center of the clock.
				ui.helper.position = cal.clock.offset();
				ui.helper.position.left += (65-document.documentElement.scrollLeft);
				ui.helper.position.top += (65-document.documentElement.scrollTop);

				// Get the current position of the minute and hour hand.
				var minute = cal.calculatePosition($.toInt(cal.calMinutes.attr('class').split('_').pop())*30,45);
				var hour = cal.calculatePosition($.toInt(cal.calHours.attr('class').split('_').pop())*30,25);

				// Get the mouse click position.
				var x = (e.clientX-ui.helper.position.left)||1;
				var y = (ui.helper.position.top-e.clientY)||1;

				// Calculate the hypotenuse of the mouse click to each of the hand end points.
				minute.h = Math.sqrt(Math.pow(minute.x-x,2)+Math.pow(minute.y-y,2));
				hour.h = Math.sqrt(Math.pow(hour.x-x,2)+Math.pow(hour.y-y,2));

				// See if the hour hand is closer.
				if (hour.h < minute.h)
				{
					// We're moving the hour hand.
					ui.helper.hand = cal.calHours;
					ui.helper.css = 'cal_hours cal_hours_';
				}
				else
				{
					// We're moving the minute hand.
					ui.helper.hand = cal.calMinutes;
					ui.helper.css = 'cal_mins cal_mins_';
				}
			},

		// Calculate the x,y position of a line of a certain length and angle.
		calculatePosition : function(angle,length)
			{
				// Get the degrees, height and width.
				var deg = Math.sin(((angle%90)||1)*Math.PI/180);
				var width = deg*length;
				var height = width/deg;
				var dim = {x:Math.round(width),y:Math.round(height)};

				// Rotate the coordinates if the angle is more than 90 degrees.
				if (angle >= 270)
				{
					dim.x = 0-height;
					dim.y = width;
				}
				else if (angle >= 180)
				{
					dim.x = 0-width;
					dim.y = 0-height;
				}
				else if (angle >= 90)
				{
					dim.x = height;
					dim.y = 0-width;
				}
				
				return dim;
			},

		// Update the clock hand position.
		timeDrag : function(e,ui)
			{
				// Get the position of the mouse cursor relative to the center of the clock (make sure we are at least 1 px off zero.
				var width = (e.clientX-ui.helper.position.left)||1;
				var height = (ui.helper.position.top-e.clientY)||1;
				
				// Calculate the angle.
				var angle = 90-Math.round(Math.atan(height/width)*180/Math.PI*100)/100;
				
				// If we're on the left side of the circle, add 180 degrees.
				if (width<=0)
					angle += 180;

				// Get the nearest 12th of a circle.
				var nearest = Math.floor(angle/30);

				// Update the position of the hand.
				ui.helper.hand.attr('class',ui.helper.css+nearest);

				// And update the calendar date as well.
				var cal = ui.helper.calendar;
				if (ui.helper.hand.is('.cal_hours'))
				{
					var hour = nearest + (cal.select.ampm.val()=='PM' ? 12 : 0);
					if (hour==cal.currentHour)
						return;
					else
						cal.currentHour = hour;
				}
				else
				{
					var minute = nearest * 5;
					if (minute==cal.currentMinute)
						return;
					else
						cal.currentMinute = minute;
				}

				// Record the date.
				cal.updateTimeSelect();
				var date = new Date(cal.currentYear,cal.currentMonth,cal.currentDate,cal.currentHour||0,cal.currentMinute||0,0);
				cal.recordDate(date);
			},

		// Activate the calendar.
		activate : function(e)
			{
				var cal = $(this).data('cal')||this;
				if (cal.active) return;
				cal.active = true;
				cal.isover = false;
				cal.setDateFromField();
				cal.calendar.relativePos(cal.input,{top:false,left:true});
				cal.scope = 'Days';
				cal.calMonths.hide();

				// Create the deactivation closure.
				if (!cal.deactivate)
				{
					cal.deactivate = function(cal){
						return function(e){
							if (!cal.isover && !cal.inputover && !$(e.target).data('cal'))
							{
								cal.close();
								var el = $(e.target);
								if (el.data('cal'))
									el.trigger('focus');
							}
						};
					}(cal);
				}
				$(document).bind('mousedown',cal.deactivate);
			},

		// Select the current date.
		select : function(e)
			{
				var cal = $(this).data('cal');
				var el = $(e.target);
				
				if (el.is('div.cal_day'))
				{
					// Fire the onselect event if one is defined.
					if (this.options && $.isFunction(this.options.onselect))
						this.options.onselect(this,date);

					var d = el.attr('_date').split('.');
					var date = new Date(parseInt(d[0]),parseInt(d[1]),parseInt(d[2]),cal.currentHour||0,cal.currentMinute||0,0);
					cal.recordDate(date);

					// Close the calendar on date select unless we have the clock open as well.
					if (!cal.options.clock)
						cal.close();
					else
						cal.drawDays();
				}
				else if (el.is('div.cal_prev') || el.parent('div.cal_prev').length)
				{
					cal.move(-1);
				}
				else if (el.is('div.cal_next') || el.parent('div.cal_next').length)
				{
					cal.move(1);
				}
				else if (el.is('div.cal_month'))
				{
					// Update the month and year.
					var d = el.attr('_date').split('.');
					cal.currentYear = parseInt(d[0]);
					cal.currentMonth = parseInt(d[1]);
					cal.scope = 'Days';
					cal.calMonths.hide();
					cal.drawCalendar();
				}
				else if (el.is('div.cal_year'))
				{
					// Update the year.
					var d = el.attr('_date').split('.');
					cal.currentYear = parseInt(d[0]);
					cal.scope = 'Months';
					cal.calYears.hide();
					cal.drawCalendar();
				}
				else if (el.is('div.cal_today'))
				{
					// Fire the onselect event if one is defined.
					if (this.options && $.isFunction(this.options.onselect))
						this.options.onselect(this,date);

					var date = new Date();
					cal.recordDate(date);

					// Close the calendar on date select unless we have the clock open as well.
					if (!cal.options.clock)
						cal.close();
					else
					{
						// Update the calendar.
						cal.scope = 'Days';
						cal.calMonths.hide();
						cal.calYears.hide();
						cal.drawCalendar();
					}
				}
				else if (el.is('div.cal_period'))
				{
					// Change the scope.
					switch (cal.scope)
					{
						case 'Days':
							cal.scope = 'Months';
							break;
						case 'Months':
							cal.scope = 'Years';
							break;
					}
					cal.drawCalendar();
				}
				else if (el.is('div.cal_close'))
				{
					cal.close();
				}
			},

		// Record the date.
		recordDate : function(d)
			{
				// Update the current date values.
				this.startDate = d;
				this.currentDate = d.getDate();
				this.currentMonth = d.getMonth();
				this.currentYear = d.getFullYear();
				this.currentHour = d.getHours();
				this.currentMinute = Math.round(d.getMinutes()/5)*5;

				// Format the date.
				var format = this.options.nodate ? 'h:mmtt' : (this.options.clock ? 'MM/dd/yyyy h:mmtt' : 'MM/dd/yyyy');
				var val = $.dateTimeFormat(d,format);

				if (typeof(this.input[0].value)!='undefined')
				{ this.input[0].value = val; }
				else
				{ this.input.html(val); }
				
				// If there is a change event defined on the element, trigger it.
				try { this.input.trigger('change'); } catch(ex) {;}
			},

		// Close the calendar when tabbing off of it.
		tabClose : function(e)
			{
				if (e.which==9)
				{
					var cal = this.tabClose ? this : $(this).data('cal');
					cal.close();
				}
			},

		// Close the calendar.
		close : function(e)
			{
				var cal = this.recordDate ? this : $(this).data('cal');
				cal.calendar.hide();
				cal.active = false;
				$(document).unbind('mousedown',cal.deactivate);
			},

		// Note that we are hovering over the calendar.
		hoverIn : function(e)
			{
				$(this).data('cal').isover = true;
			},

		// Note that we are hovering over the calendar.
		hoverOut : function(e)
			{
				$(this).data('cal').isover = false;
			},

		// Note that we are hovering over the calendar.
		inputIn : function(e)
			{
				$(this).data('cal').inputover = true;
			},

		// Note that we are hovering over the calendar.
		inputOut : function(e)
			{
				$(this).data('cal').inputover = false;
			},

		// Initialize the calendar.
		init : function()
			{
				this.calendar = $($.cobalt.calendar.html);
				this.input.parent().append(this.calendar);
				this.caldate = this.calendar.find('div.cal_date');
				this.period = this.calendar.find('div.cal_period');
				this.calDays = this.calendar.find('div.cal_days');
				this.calMonths = this.calendar.find('div.cal_months');
				this.calYears = this.calendar.find('div.cal_years');
				this.today = this.calendar.find('div.cal_today');
				
				// Add a CSS fix for IE6.
				if ($.browser.msie6)
					this.calendar.addClass('cal_ie6');

				// Initialize the calendar events.
				this.calendar
					.data('cal',this)
					.bind('mouseenter',this.hoverIn)
					.bind('mouseleave',this.hoverOut)
					.click(this.select);

				// When we're moused over the input element we're still "over" the calendar.
				this.input
					.bind('mouseenter',this.inputIn)
					.bind('mouseleave',this.inputOut);

				// Get the clock and set it up (or hide it).
				this.clockpanel = this.calendar.find('div.cal_clockpanel');
				this.clock = this.calendar.find('div.cal_clock').data('cal',this);
				if (this.options.clock)
				{
					if (this.options.nodate)
					{
						this.caldate.hide();
						this.calendar.css({width:150});
						this.clockpanel.css({left:-1});
					}
					else
						this.calendar.css({width:341});

					this.calMinutes = this.clock.children('div.cal_mins');
					this.calHours = this.clock.children('div.cal_hours');
					this.clock.draggable(
						{
							distance:5,
							helper:this.timeHelper,
							start:this.timeStart,
							drag:this.timeDrag
						});
					this.select = {
						hours : this.clockpanel.find('select.cal_hours').data('cal',this).change(this.updateClockSelect),
						minutes : this.clockpanel.find('select.cal_minutes').data('cal',this).change(this.updateClockSelect),
						ampm : this.clockpanel.find('select.cal_ampm').data('cal',this).change(this.updateClockSelect)
					};
				}
				else
					this.clock.hide();
			}
	});
	
})(jQuery);