var timePickerPopup, currentlyHovered = null;
document.observe("dom:loaded", function() {
	timePickerPopup = new Element('div', { id:'time-picker-popup'}).update("");
	timePickerPopup.setStyle({
	position:'absolute',
	backgroundColor:'#666',
	color:'#000',
	/*width:'60px',*/
	/*height:'500px',*/
	border: '1px dashed #AAA',
	display:'none',
	font:'normal 9px Arial',
	textAlign:'center'
	});
	document.body.appendChild(timePickerPopup);
	$$('input.timePicker').each(function(tPicker){
		tPicker.observe('focus',timePickerFocus);
		tPicker.observe('blur',timePickerBlur);
	});
	
});

function timePickerFocus(event){
	FillPickerPopup(event.target);
	timePickerPopup.style.left = (event.target.cumulativeOffset()[0]+event.target.getWidth()+5)+'px';
	timePickerPopup.style.top = (event.target.cumulativeOffset()[1]-timePickerPopup.getHeight()/2)+'px';
	timePickerPopup.style.display = "block";
}
var evt;
function timePickerBlur(event){
	evt = event.findElement();
	if(currentlyHovered==null){
		timePickerPopup.style.display = "none";
	}
}

function FillPickerPopup(targetPicker){
	timePickerPopup.update("");
	var tmpUlHolder = new Element('ul');
	tmpUlHolder.setStyle("padding:0px;margin:0px;list-style-type:none;width:auto;display:block;");
	timePickerPopup.appendChild(tmpUlHolder);
	for(var i=0;i<24;i++){
		var tmpLiHolder = new Element('li');
		tmpUlHolder.appendChild(tmpLiHolder);
		var onClicker = function(event){
			//alert(event.target.innerHTML);
			targetPicker.value = event.target.innerHTML;
			timePickerPopup.style.display = "none";
		};
		var onHoverer = function(event){
			currentlyHovered = event.target;
		};
		var onOuter = function(event){
			if(currentlyHovered == event.target){
				currentlyHovered = null;
			}
		};
		var tmpDivLeft = new Element('span',{style:'padding:2px;cursor:pointer;'}).update(i+":00").observe('click',onClicker);
		tmpDivLeft.observe('mouseover',onHoverer);
		tmpDivLeft.observe('mouseout',onOuter);
		var tmpDivRight = new Element('span',{style:'padding:2px;cursor:pointer;'}).update(i+":30").observe('click',onClicker);
		tmpDivRight.observe('mouseover',onHoverer);
		tmpDivRight.observe('mouseout',onOuter);
		tmpLiHolder.appendChild(tmpDivLeft);
		tmpLiHolder.appendChild(tmpDivRight);
	}
}