function TimePicker()
	{
		//------------------------------(ID Of Popup)
		var id_of_popup = '';

		this.GetIdOf_Popup = function() { return id_of_popup; }
		this.SetIdOf_Popup = function(_id) { id_of_popup = _id; }

		//------------------------------(ID Of Target)
		var id_of_target = '';

		this.GetIdOf_Target = function() { return id_of_target; }
		this.SetIdOf_Target = function(_id) { id_of_target = _id; }

		//------------------------------(ID Of Append To)
		var id_of_append_to = '';

		this.GetIdOf_AppendTo = function() { return id_of_append_to; }
		this.SetIdOf_AppendTo = function(_id) { id_of_append_to = _id; }

		//------------------------------(Hour + Minute Arrays)
		var hour_array = ['12','1','2','3','4','5','6','7','8','9','10','11'];
		var min_array = ['00','05','10','15','20','25','30','35','40','45','50','55'];

		this.GetHourArray = function() { return hour_array; }
		this.GetMinArray = function() { return min_array; }

		//------------------------------(AM/PM Array)
		var am_pm_array = ['AM', 'PM']

		this.GetAmPm = function() { return am_pm_array; }

		//------------------------------(Html)
		var html = '';
		this.SetHtml = function(_html) { if(html.length > 0) { html = html + _html;} else { html = _html;} }
		this.GetHtml = function() { return html;}

		//------------------------------(Style Class of the containing DIV)
		var hClass = '';
		this.SetHClass = function(_str) { hClass = _str; }
		this.GetHClass = function() { return hClass; }

		//------------------------------(Hour + Minute Lists With Attached Links)
		var hour_list = '';
		var min_list = '';

		this.SetHourList = function() { this.GetHourArray().each( function(item) {
															hour_list+='<a href=\'#\'  style=\'color:#043669;text-decoration:none;\' onclick=\'form_is_dirty=false;SetUxHour('+item+',"'+ id_of_popup +'");return false;\'>'+ item +'</a>&nbsp;';
											});
										}
		this.GetHourList = function() { return hour_list; }

		this.SetMinList = function() { this.GetMinArray().each( function(item) {

															min_list+='<a href=\'#\'  style=\'color:#043669;text-decoration:none;\' onclick=\'form_is_dirty=false;SetUxMin('+item+',"'+ id_of_popup +'");return false;\'>'+ item +'</a>&nbsp;';
											});
										}
		this.GetMinList = function() { return min_list; }

		//------------------------------(AM/PM List With Attached Links)

		var am_pm_list = '';

		this.SetAmPmList = function() { this.GetAmPm().each( function(item) {

															am_pm_list+='<a href=\'#\' style=\'color:#043669;text-decoration:none;\' onclick=\'form_is_dirty=false;SetUxAmPm("'+item+'","'+ id_of_popup +'");return false;\'>'+ item +'</a>&nbsp;';
												});
										}
		this.GetAmPmList = function() { return am_pm_list; }





	}

	function TimePickerInit( popID, targetID )
	{
		var ClassName = 'datepicker';

		obj = new TimePicker();
		obj.SetIdOf_Popup(popID);
		obj.SetIdOf_Target(targetID);
		obj.SetHtml('');
		obj.SetHClass(ClassName);
		obj.SetHourList();
		obj.SetMinList();
		obj.SetAmPmList();

		var divValidationMessage = new Element('div', { 'id': 'ValidationMessage_'+obj.GetIdOf_Popup(), 'class': obj.GetHClass()+'-validation', 'style': 'display:none;' } );
		var divContainer = new Element('div', { 'id': obj.GetIdOf_Popup(), 'class': obj.GetHClass(), 'style':'display:none;' } );
		var divHeader =    new Element('div', { 'id': 'my-header_' + obj.GetIdOf_Popup(), 'class': 'datepicker-header' }).update('Please Choose A Time');
		var divMainSelectionArea = new Element('div', { 'id': 'my-content_' + obj.GetIdOf_Popup(), 'class': 'datepicker-calendar' })
		var divFooter =    new Element('div', { 'id': 'my-footer_' + obj.GetIdOf_Popup(), 'class': 'datepicker-footer' }).update('');
		var divTimeHolder = new Element('div', { 'id': 'my-time-holder_' + obj.GetIdOf_Popup(), 'class': 'datepicker-calendar' }).update('');

		var inputHourTimeHolder = new Element('input', { 'id': 'Hour_' + popID, 'class':'datepicker' } );
		var inputMinTimeHolder = new Element('input', { 'id': 'Min_' + popID, 'class':'datepicker' } );
		var goButton = new Element('a', {'id':'my-go-button'+obj.GetIdOf_Popup(), 'style':'padding-left:5px;color:#043669;text-decoration:none;', 'href': 'javascript:form_is_dirty=false; if(TimePickerValidate("'+popID+'")== true){ SetUxTarget("'+popID+'","'+targetID+'"); } else {TimePickerValidate("'+popID+'");} ' } ).update('[Go]'); //obj.SetUxTarget( $("Hour_"+obj.GetIdOf_Popup()).value  ,  $("Min_"+obj.GetIdOf_Popup()).value );
		var cancelButton = new Element('a',{'id':'my-cancel-button'+popID, 'href': 'javascript:form_is_dirty=false; FireCancelButton("'+popID+'");', 'style':'padding-left:5px;color:#043669;text-decoration:none;' } ).update('[Cancel]');

		//add HTML to the Main Object. This will be added to to the div in the next code block
		obj.SetHtml( 'Hour: ' );
		obj.SetHtml( obj.GetHourList() );
		obj.SetHtml( '<br/>' );
		obj.SetHtml( 'Minute: ' );
		obj.SetHtml( obj.GetMinList() );
		obj.SetHtml( '<br/>' );
		obj.SetHtml( obj.GetAmPmList() );


		//add the html to the main selection area.
		$(divMainSelectionArea).update( obj.GetHtml() );

		//add the input object ot the main time holder area.
		$(divTimeHolder).appendChild( new Element('label').update('Hour: ') );
		$(divTimeHolder).appendChild( inputHourTimeHolder );
		$(divTimeHolder).appendChild( new Element('label').update('Minute: ') );
		$(divTimeHolder).appendChild( inputMinTimeHolder );
		$(divTimeHolder).appendChild( new Element('label',{'id': 'lblAmPm_'+obj.GetIdOf_Popup(), 'style': 'font-weight:bold;' }) );
		$(divTimeHolder).appendChild( goButton );
		$(divTimeHolder).appendChild( cancelButton );

		//put all the pieces together in order.

		$(divContainer).appendChild( divHeader );
		$(divContainer).appendChild( divValidationMessage );
		$(divContainer).appendChild( divTimeHolder );
		$(divContainer).appendChild( divMainSelectionArea );
		$(divContainer).appendChild( divFooter );

		//document.body.appendChild( divContainer );
		$(targetID).insert( {'after':$(divContainer) });


		//make the window draggable.
		//new Draggable( popID );
	}




//------------------------------( UX Functions / Set the User Interface )

		function SetUxHour(_item,_id) { _item = ((_item<10)?"0"+_item : _item); $('Hour_'+_id).value=_item;}
		function SetUxMin (_item,_id) { _item = ((_item<10)?"0"+_item : _item); $('Min_'+_id).value=_item;}
		function SetUxAmPm (_item,_id) { $('lblAmPm_'+_id).update(_item); }
		function SetUxTarget(_id,_idtarget){
										//Get the item values.
										var _itemHour = $("Hour_"+_id).value;
										var _itemMin = $("Min_"+_id).value;
										var _ampm= $("lblAmPm_"+_id).innerHTML ;

										//Set the value of the text box.
										$(_idtarget).value = _itemHour+":"+_itemMin+' '+_ampm;

										//Close the Popup.
										Effect.Fade(_id);
									}

		function TimePickerValidate(_id){
						var tf = true;
						var msg = '';
						if ( $("Hour_"+_id).value.length ==0 )
						{
							tf = false;
							msg+='<li>Hour Required</li>';
						}
						if ( $("Min_"+_id).value.length ==0 )
						{
							tf = false;
							msg+='<li>Minute Required</li>';
						}
						if ( $('lblAmPm_'+_id).innerHTML.length ==0 )
						{
							tf = false;
							msg+='<li>AM/PM Required</li>';
						}

						if (!tf) {
						//turn on validation message.

							Effect.Appear( $('ValidationMessage_' + _id).update(msg) );

							$('ValidationMessage_' + _id).setOpacity(1.0);

						}
						else {
							Effect.Fade( $('ValidationMessage_' + _id).update('') );
							$('ValidationMessage_' + _id).setOpacity(1.0);
						}
                        
                       
                        if (tf) {
						  return tf;
						}

					}
      function FireCancelButton(_id)
      {
        Effect.Fade(_id);
      }