var ProBaseTimeCurrentSelector,ProBaseTimeCurrentTimer;
var ProBaseTimeCurrentId = 1;
function ProBaseTimeSelector(elem, insertCurrent, showSelector, limit24Hours)
{
	this.field			= elem;
	this.selector		= null;
	this.selectedHour	= null;
	this.minutePos		= null;
	this.pxToMin		= null;
	this.insertCurrent	= insertCurrent;
	this.showSelector	= showSelector;
	this.limit24Hours	= limit24Hours;

	var self			= this;

	// the rest of code initialization is done after these function definitions

	this.checkField = function ()
	{
		var value	= self.field.value;
		var result;
		var valid	= true;

		/* Check if the content needs adjusting */
		if (!self.limit24Hours) {
			if (result = value.match(/^(\d*)\D+([0-5]\d).*$/)) { // Valid time, double numbered hours
				self.field.value = result[1] + ':' + result[2];
			} else if (result = value.match(/^(\d*)$/)) {
				// leave as is
			} else {
				valid = false;
			}
		} else if (value == '') { // Empty field
			// no action needed
		} else if (result = value.match(/^([01]\d|2[0-3])\D*([0-5]\d).*$/)) { // Valid time, double numbered hours
			self.field.value = result[1] + ':' + result[2];
		} else if (result = value.match(/^([3-9])\D*(\d{1,2}).*$/)) { // Implicid single numbered hours 3-9
			self.field.value = result[1] + ':' + result[2];
		} else if (result = value.match(/^2\D*([45]\d).*$/)) { // Implicid single numbered hours 2
			self.field.value = '2:' + result[1];
		} else if (result = value.match(/^(\d)\D+([0-5]\d).*$/)) { // Single numbered hours
			self.field.value = result[1] + ':' + result[2];
		} else {
			valid = false;
		}

		self.field.style.borderBottomStyle = valid ? '' : 'dashed';
		self.field.style.borderBottomColor = valid ? '' : 'red';
	}

	this.setMinutes	= function()
	{
		var elem	= document.getElementById(self.selector.id + '_MinuteSlider');
		if (elem.firstChild && elem.firstChild.nodeValue) {
			var tmp = elem.firstChild.nodeValue;
		} else {
			var tmp = 0;
		}
		if (tmp < 10) {
			tmp	= '0' + tmp;
		}
		var result = self.field.value.match(/^(\d*)(\D\d*$|$)/);
		if (result[1] == '') {
			self.field.value = '0';
		} else {
			self.field.value = result[1];
		}
		self.field.value += ':' + tmp;
		self.checkField();
		self.destroy();
	}

	this.destroy = function()
	{
		ProBaseTimeCurrentTimer	= window.setTimeout('if (ProBaseTimeCurrentSelector) {ProBaseTimeCurrentSelector.hideBlockLayer();ProBaseTimeCurrentSelector.style.display = \'none\';ProBaseTimeCurrentSelector = false;}', 200);
	}

	this.createTimeChooser	= function()
	{
		// Hours
		var c,list,item;
		list	= document.createElement('ul');
		for (c = 0; c < 24; c++) {
			item	= document.createElement('li');
			if (Prototype.Browser.IE) {
				item.style.styleFloat	= 'left';
			} else {
				item.style.cssFloat		= 'left';
			}
			item.isDblClick = false;
			item.onclick = function()
			{
				var elem	= this;//self.getElemFromEvent(e);
				if (elem.isDblClick) {
					self.field.value = self.field.value.replace(/^(\d*)($|\:\d*)/, '$1:00');
					self.checkField();
					self.destroy();
					return;
				} else {
					var minutes	= self.field.value.replace(/^\d*($|\:)/, '$1');
					if (elem.firstChild && elem.firstChild.nodeValue) {
						self.field.value = elem.firstChild.nodeValue;
					} else {
						self.field.value = '';
					}
					self.field.value += minutes;
					elem.isDblClick = true;
					setTimeout("document.getElementById('" + elem.id + "').isDblClick = false;", 500);

				}
				self.checkField();
			}
			item.ondblclick = item.onclick;
			/* Even the hover behaviour script doesn't work here because the html is loaded after the hover script :'( */
			item.onmouseover = function() { this.className += ' hover'; }
			item.onmouseout = function() { this.className = this.className.replace(/(\s+hover|hover\s+|^hover$)/g,''); }

			item.appendChild(document.createTextNode(c));
			item.id	= self.selector.id + '_H' + c;
			list.appendChild(item);
		}
		self.selector.appendChild(list);

		// Minutes
		var div;
		div	= document.createElement('div');
		div.id						= self.selector.id + '_MinuteBar';
		div.className				= 'minutebar';
		div.style.clear				= 'both';
		div.style.width				= '311px';
		div.style.height			= '25px';
		div.style.borderRight		= '1px solid black';
		div.style.borderBottom		= '1px solid black';

		/* Even the hover behaviour script doesn't work here because the html is loaded after the hover script :'( */
		div.onmouseover = function() { this.className += ' hover'; }
		div.onmouseout = function() { this.className = this.className.replace(/(\s+hover|hover\s+|^hover$)/g,''); }

		self.selector.appendChild(div);

		Event.observe(div, 'mousemove', function(e)
		{
			if (self.minutePos == null) {
				var minuteBar	= document.getElementById(self.selector.id + '_MinuteBar');
				self.minutePos	= self.getPos(minuteBar);
			}

			// 1 - 312 for 60 minutes 5 px per minute
				// Create array
				if (self.pxToMin == null) {
					var tmp;
					self.pxToMin	= new Array();
					for (var i = 0; i < 60; i++) {
						if ((i % 5) == 0) {
							var key = (i / 5) * 10 + ((i - (i / 5)) * 4) + 1;
						} else {
							tmp	= Math.ceil(i / 5);
							var key = (tmp * 10) + ((i - tmp) * 4);
						}
						if (i == 0) {
							self.pxToMin[key]	= 'zero';
						} else {
							self.pxToMin[key]	= i;
						}
					}
					for (i = 1; i < 313; i++) {
						if (self.pxToMin[i]) {
							var tmp = self.pxToMin[i];
						} else {
							self.pxToMin[i] = tmp;
						}
					}
				}

			var ePos		= self.getFixedClientPos(e);
			var pos			= ePos[0] - self.minutePos[0];
			var min			= self.pxToMin[pos];
			if (min == 'zero') {
				min = 0;
			}

			self.selector.hideBlockLayer();
			if (!Object.isUndefined(min)) {
				var elem = document.getElementById(self.selector.id + '_MinuteSlider');
				elem.style.left = Math.min(Math.max(0, pos - 12), 287) + 'px';
				elem.style.display = 'block';

				if (Prototype.Browser.IE) {
					elem.innerHTML = min;
				} else if (elem.firstChild) {
					elem.replaceChild(document.createTextNode(min), elem.firstChild);
				} else {
					elem.appendChild(document.createTextNode(min));
				}
			}
			self.selector.updateBlockLayer();
		});

		var div2 = document.createElement('div');
		div2.id			= self.selector.id + '_MinuteSlider';
		div2.className	= 'slider';
		div.appendChild(div2);

		Event.observe(div2, 'click', self.setMinutes);
		Event.observe(div, 'click', self.setMinutes);
	}

	this.setHours = function()
	{
		// Select the right hour
		var hours	= parseInt(self.field.value.replace(/^(\d*).*$/, '$1'));
		if (self.selectedHour != null) {
			self.selectedHour.style.backgroundColor = '';
		}
		if (hours > -1 && (self.limit24Hours ? hours < 24 : true)) {
			self.selectedHour = document.getElementById(self.selector.id + '_H' + hours);
			if (self.selectedHour != null) {
				self.selectedHour.style.backgroundColor = '#c0d3ff';
				self.selectedHour.className = self.selectedHour.className.replace(/(^hover$|\s+hover|hover\s+)/,'');
			}
		}
	}

	this.setSelectorPos = function()
	{
		if (!self.selector) {
			return true;
		}

		/* Set ideal position */
		self.field.pos		= self.getPos(self.field);
		self.selector.edge	= new Array(4);

		/* Left */
		self.selector.edge[0]	= (self.field.pos[0] + self.field.offsetWidth / 2) - 157;
		/* Top */
		self.selector.edge[1]	= self.field.pos[1] + self.field.offsetHeight;
		/* Right */
		self.selector.edge[2]	= self.selector.edge[0] + 313;
		/* Bottom */
		self.selector.edge[3]	= self.selector.edge[1] + 69;
	}

	this.openingSelector = false;
	this.openSelector = function(visible)
	{
		if (self.openingSelector) {
			return true;
		}
		self.openingSelector = true;

		if (ProBaseTimeCurrentSelector) {
			self.closeSelector(ProBaseTimeCurrentSelector);
		}
		if (!self.selector) {
			self.selector	= document.createElement('div');
			document.body.appendChild(self.selector);
			new HoverElem(self.selector);
			if (self.field.id && document.getElementById(self.field.id + '_Time') == null) {
				self.selector.id = self.field.id + '_Time';
			} else {
				while (document.getElementById(ProBaseTimeCurrentId) != null) {
					ProBaseTimeCurrentId++;
				}
				self.selector.id = ProBaseTimeCurrentId;
			}

			self.setSelectorPos();

			self.selector.className		= 'timeChooser';
			self.createTimeChooser();
		}
		self.selector.field = self.field;
		self.selector.field.showSelector = visible;

		if (!visible) {
			self.selector.style.display	= 'none';
		} else {
			self.selector.style.display	= '';
		}

		// Set position
		var scrollPos	= self.getScrollPos();
		var screenEdge	= new Array(4);
			// Left
			screenEdge[0]			= scrollPos[0];
			// Top
			screenEdge[1]			= scrollPos[1];
			// Right
			screenEdge[2]			= screenEdge[0] + self.scrollElem.clientWidth;
			// Bottom
			screenEdge[3]			= screenEdge[1] + self.scrollElem.clientHeight;

		var oldLeft = self.selector.style.left;
		if (screenEdge[0] > self.selector.edge[0] && screenEdge[2] >= self.selector.edge[2]) {
			self.selector.style.left	= self.field.pos[0] + 'px';
		} else if (screenEdge[2] < self.selector.edge[2] && screenEdge[0] <= self.selector.edge[0]) {
			self.selector.style.left	= ((self.field.pos[0] + self.field.offsetWidth) - 313) + 'px';
		} else {
			self.selector.style.left	= self.selector.edge[0] + 'px';
		}
		if (self.selector.style.left != oldLeft) {
			self.minutePos = null;
		}

		if (screenEdge[3] < self.selector.edge[3]) {
			self.selector.style.top		= (self.field.pos[1] - 69) + 'px';
		} else {
			self.selector.style.top		= self.selector.edge[1] + 'px';
		}
		self.selector.updateBlockLayer();

		ProBaseTimeCurrentSelector = self.selector;
		self.setHours();
		window.setTimeout(function(){self.openingSelector = false;}, 100);
	}

	this.closeSelector	= function(selector)
	{
		if (Object.isUndefined(selector)) {
			selector = self.selector;
		}

		if (selector) {
			selector.hideBlockLayer();
			selector.style.display		= 'none';
			ProBaseTimeCurrentSelector	= false;
		}
	}

	Event.observe(this.field, 'blur', function()
	{
		if (ProBaseTimeCurrentSelector && !self.showSelector) {
			self.closeSelector(ProBaseTimeCurrentSelector);
			if (self.field.value.indexOf(':') == -1) {
				if (self.field.value != '') {
					self.field.value += ':00';
				}
				self.checkField();
				self.destroy();
			} else {
				self.destroy();
			}
		}
	});
	Event.observe(this.field, 'keyup', this.checkField);
	Event.observe(this.field, 'change', this.checkField);

	Event.observe(this.field, 'keyup', this.setHours);

	this.lastViewportSize = null;
	Event.observe(window, 'resize', function()
	{
		if (self.openingSelector) {
			return true;
		}

		var vpSize = document.viewport.getDimensions();
		if (!self.lastViewportSize) {
			self.lastViewportSize = vpSize;
		} else if (self.lastViewportSize.width == vpSize.width && self.lastViewportSize.height == vpSize.height) {
			return true;
		} else {
			self.lastViewportSize = vpSize;
		}

		var reopen = false;
		if (ProBaseTimeCurrentSelector == self.selector) {
			reopen = true;
		}

		self.closeSelector();
		self.setSelectorPos();

		if (reopen) {
			self.openSelector(self.showSelector);
		}
	});

	/* selector initialization */

	// is a time selector currently active?
	if (ProBaseTimeCurrentSelector) {
		if ((this.field == ProBaseTimeCurrentSelector.field) && ProBaseTimeCurrentSelector.field.showSelector) {
			// it is a selector on the same field: close it, and do not reopen
			self.closeSelector(ProBaseTimeCurrentSelector);
			return;
		} else {
			self.closeSelector(ProBaseTimeCurrentSelector);
		}
	}
	clearTimeout(ProBaseTimeCurrentTimer);
	if (this.field.value == '' && this.insertCurrent) {
		var d = new Date();
		this.field.value	= d.getHours() + ':';
		var m	= d.getMinutes();
		if (m < 10) {
			m	= '0' + m;
		}
		this.field.value += m;
	}
	this.openSelector(showSelector);
}
extendsProBaseClass(ProBaseTimeSelector);