/***********************************************************************
 * FILE: jquery.ptTimeSelect.js
 * 
 * 		jQuery plug in for displaying a popup that allows a user
 * 		to define a time and set that time back to a form's input
 * 		field.
 * 
 * 
 * AUTHOR:
 * 
 * 		*Paul T.*
 * 
 * 		- <http://www.purtuga.com>
 * 		- <http://sourceforge.net/projects/pttimeselect>
 * 
 * 
 * DEPENDECIES:
 * 
 * 		-	jQuery.js
 * 			<http://docs.jquery.com/Downloading_jQuery>
 * 
 * 		- 	dimensions.js
 * 			<http://docs.jquery.com/Plugins>
 * 
 * 
 * LICENSE:
 * 
 * 		Copyright (c) 2007 Paul T. (purtuga.com)
 *		Dual licensed under the:
 *
 * 		-	MIT
 * 			<http://www.opensource.org/licenses/mit-license.php>
 * 
 * 		-	GPL
 * 			<http://www.opensource.org/licenses/gpl-license.php>
 * 
 * INSTALLATION:
 * 
 * 		This file <jquery.ptTimeSelect.js> is the only one required.
 * 		To install, simply copy it to the same directory as jquery.js
 * 		and include it in the html pages requiring it's functionality.
 * 
 * 
 * LAST UPDATED:
 * 
 * 		- $Date: 2007/02/23 20:00:46 $
 * 		- $Author: paulinho4u $
 * 		- $Revision: 1.3 $
 * 
 * 
 **********************************************************************/

/***********************************************************************
 * METHOD: $(ele).ptTimeSelect()
 * 		Displays an html popup that allows the user to define
 * 		a time, which will then be written to the form element.
 * 		This is the only method that is expected to be used externally
 * 		for implementation into a web page.
 * 
 * 
 * PARAMS:
 * 
 * 		none
 * 
 * 
 * RETURNS:
 * 
 * 		- [object] jQuery
 * 
 * 
 * EXAMPLE:
 * 
 * 		-	Using a link to display the popup and have output
 * 			go to an input field on the page.
 * 
 * 	|		<input id="fooTime" type="text"></input>
 * 	|		<a href="javascript:void(0)" onclick="$('#fooTime').ptTimeSelect();">Set Time</a>
 * 
 * 
 */
jQuery.fn.ptTimeSelect = function() {
	this.each(function(){
		if(this.nodeName.toLowerCase() != 'input') return;
		
		var tCntr = jQuery('#timeSelectCntr');
		
		//if the html is not yet created in the document, then do it now
		if (!tCntr.length) {
			var htmlCntr = '<div id="timeSelectCntr" style="padding: 3px; z-index: 10; position: absolute; display: none; border: 1px solid #000000; left: 10px; top: 10px; background-color: #CCCCCC;">'
				+ '<table border="0" cellspacing="0" cellpadding="2">'
				+ '	<tr>'
				+ '		<td>'
				+ '			<div style="text-align: right; padding: 1px; font-size: x-small;font-weight: bold;">'
				+ '				<a href="javascript: void(0);" onclick="jQuery.ptTimeSelect.closeCntr();">X</a></div>'
				+ '		</td>'
				+ '	</tr>'
				+ '	<tr>'
				+ '		<td>'
				+ '			<table border="0" cellspacing="0" cellpadding="5" style="border: 2px groove #CCCCCC;">'
				+ '				<tr align="center" valign="top" bgcolor="#CCCCCC">'
				+ '					<td colspan="7" align="center" style="font-weight: bold; border-bottom:  2px groove #CCCCCC;">'
				+ '		    			<div align="center" style="width: 80%; border: 2px groove #CCCCCC; background-color: #ffffff;">'
				+ '		<span id="ptTimeSelectUserSelHr">1</span> : <span id="ptTimeSelectUserSelMin">00</span> <span id="ptTimeSelectUserSelAmPm">AM</span>'
				+ '		</div>'
				+ '					</td>'
				+ '				</tr>'
				+ '				<tr align="center" valign="top" bgcolor="#CCCCCC" style="font-weight: bold;">'
				+ '					<td id="ptTimeSelectHrLabel" colspan="4" style="border-right: 2px groove #CCCCCC; border-bottom:  2px groove #CCCCCC;">Hour</td>'
				+ '					<td id="ptTimeSelectMinLabel" colspan="3" style="border-bottom:  2px groove #CCCCCC;">Minutes</td>'
				+ '				</tr>'
				+ '				<tr align="center" valign="top">'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">1</a></td>'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">5</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;"><a class="ptTimeSelectHr" href="javascript: void(0);">9</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;">&nbsp;</td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">00</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">20</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">40</a></td>'
				+ '				</tr>'
				+ '				<tr align="center" valign="top">'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">2</a></td>'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">6</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;"><a class="ptTimeSelectHr" href="javascript: void(0);">10</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;"><a class="ptTimeSelectHr" href="javascript: void(0);">AM</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">05</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">25</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">45</a></td>'
				+ '				</tr>'
				+ '				<tr align="center" valign="top">'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">3</a></td>'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">7</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;"><a class="ptTimeSelectHr" href="javascript: void(0);">11</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;"><a class="ptTimeSelectHr" href="javascript: void(0);">PM</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">10</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">30</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">50</a></td>'
				+ '				</tr>'
				+ '				<tr align="center" valign="top">'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">4</a></td>'
				+ '					<td><a class="ptTimeSelectHr" href="javascript: void(0);">8</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;"><a class="ptTimeSelectHr" href="javascript: void(0);">12</a></td>'
				+ '					<td style="border-right: 2px groove #CCCCCC;">&nbsp;</td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">15</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">35</a></td>'
				+ '					<td><a class="ptTimeSelectMin" href="javascript: void(0);">55</a></td>'
				+ '				</tr>'
				+ '			</table>'
				+ '		</td>'
				+ '	</tr>'
				+ '	<tr>'
				+ '		<td align="right">'
				+ '			<div align="right" id="ptTimeSelectSetButton" style="border:  2px groove #CCCCCC; text-align: center; padding: 3px; width: 50px; background-color: #CCCCCC; font-weight: bold;">'
				+ '<a href="javascript: void(0);" style="display: block; text-decoration: none;" onclick="jQuery.ptTimeSelect.setTime()">SET</a></div>'
				+ '		</td>'
				+ '	</tr>'
				+ '</table>'
				+ '<!--[if lte IE 6.5]><iframe style="display:block; position:absolute;top: 0;left:0;z-index:-1; filter:Alpha(Opacity=\'0\');width:3000px;height:3000px"></iframe><![endif]-->'
				+ '</div>';
				
			jQuery("body").append(htmlCntr);
			tCntr = jQuery('#timeSelectCntr');
			
			// Add the events to the functions
			jQuery('.ptTimeSelectMin', tCntr).bind("click", function(){
				jQuery.ptTimeSelect.setMin($(this).text());
 			});
			jQuery('.ptTimeSelectHr', tCntr).bind("click", function(){
				jQuery.ptTimeSelect.setHr( $(this).text() );
 			});
		}
		
		// insure that container is hidden, then
		// add the offset and set the time to the default
		tCntr.css("display", "none");
		var offset	= jQuery(this).offset();
		offset.top	+= jQuery(this).height();
		
		//if IE, then offset some... bad ie (as usual)  :(
		if (jQuery.browser.msie) {
			offset.top	-= 12;
			offset.left	-= 12;
		}
		
		jQuery.ptTimeSelect.setHr('12');
		jQuery.ptTimeSelect.setMin('00');
		jQuery.ptTimeSelect.setHr('PM');
		
		// display the popup and store the current element
		tCntr.css(offset).slideDown("slow");
		jQuery.ptTimeSelect.curEle = this;
		return this;
	});
};/* End of jQuery.fn.timeSelect */

/***********************************************************************
 * OBJECT: jQuery.ptTimeSelect
 * 		Object that will store the static functions of ptTimeSelect()
 */
jQuery.ptTimeSelect = {
	
	/***********************************************************************
	 * PROPERTY: jQuery.ptTimeSelect.curEle
	 * 		property that holds the current input element. It is set once
	 * 		the time selection popup is displayed to the user.
	 */
	curEle:	"",
	
	/***********************************************************************
	 * METHOD: jQuery.ptTimeSelect.setHr(h)
	 * 		Sets the hour selected by the user on the popup.
	 * 
	 * 
	 * PARAMS:
	 * 
	 * 		h -	[int] interger indicating the hour. This value is the same
	 * 			as the text value displayed on the popup under the hour.
	 * 			This value can also be the words AM or PM.
	 * 
	 * 
	 * RETURN:
	 * 
	 * 		none
	 */
	setHr:	function(h) {
				if (	h.toLowerCase() == "am"
					||	h.toLowerCase() == "pm"
				) {
					jQuery('#ptTimeSelectUserSelAmPm').empty().append(h);
				} else {
					jQuery('#ptTimeSelectUserSelHr').empty().append(h);
				}
			},/* END setHr() function */
	
	/***********************************************************************
	 * METHOD: jQuery.ptTimeSelect.setMin(m)
	 * 		Sets the minutes selected by the user on the popup.
	 * 
	 * 
	 * PARAMS:
	 * 
	 * 		m -	[int] interger indicating the minutes. This value is the same
	 * 			as the text value displayed on the popup under the minutes.
	 * 
	 * 
	 * RETURN:
	 * 
	 * 		none
	 */
	setMin:	function(m) {
				jQuery('#ptTimeSelectUserSelMin').empty().append(m);
		
			},/* END setMin() function */
	
	/***********************************************************************
	 * METHOD: jQuery.ptTimeSelect.setTime()
	 * 		Takes the time defined by the user and sets it to the input
	 * 		element that the popup is currently opened for (as stored in
	 * 		jQuery.ptTimeSelect.curEle)
	 * 
	 * 
	 * PARAMS:
	 * 
	 * 		none.
	 * 
	 * 
	 * RETURN:
	 * 
	 * 		none
	 */
	setTime:	function() {
				var tSel = jQuery('#ptTimeSelectUserSelHr').text()
							+ ":"
							+ jQuery('#ptTimeSelectUserSelMin').text()
							+ " "
							+ jQuery('#ptTimeSelectUserSelAmPm').text()
				jQuery(this.curEle).val(tSel);
				this.closeCntr();
				
			},/* END setTime() function */
	
	/***********************************************************************
	 * METHOD: jQuery.ptTimeSelect.closeCntr()
	 * 		Closes (hides it) the popup container.
	 * 
	 * PARAMS:
	 * 
	 * 		none.
	 * 
	 * RETURN:
	 * 
	 * 		none 
	 * 
	 */
	closeCntr:	function() {
				jQuery('#timeSelectCntr').slideUp("fast");
				jQuery.ptTimeSelect.curEle = "";
				return;
				
			}/* END setTime() function */
}/* END jQuery.ptTimeSelect object */