<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>

<title>Untitled Document</title>
</head>

<body>
<script>
	$(function() {

		var jqObsDate = $("#datepicker"); 
		var jqDatabase = $("#database");
		var jqNNL = $("#nnLoad");
		var jqNNS = $("#nnSelect");
		var jqSDate = $("#selectDate");
		var jqLDate = $("#loadDate");
		
		// Extend the javascript Date object with a method called
		// getMJD() which converts the date object to a modified
		// julian date.
		Date.prototype.getMJD = function() {
			return Math.floor((this / 86400000) -
			(this.getTimezoneOffset()/1440) + 2440587.5 - 2400000.5);
		}

		jqObsDate.datepicker({
			onSelect: function(theDate) {
				// When constructing the date object javascript will
				// assume that the date specified in the constructor is a
				// UTC date (at midnight) and it will adjust the date to 
				// the local time zone by subtracting or adding the appropriate
				// offset. In the case of Hawaii 10 hours will be subracted causing
				// the date to be one day behind. To keep the date as a UTC date 
				// the offset change must be cancelled.
				d = new Date(theDate);
				d.setTime(d.getTime() + d.getTimezoneOffset() * 60000);
				$("#offset").val(d.getTimezoneOffset());
				jqNNS.val(d.getMJD());
				jqSDate.val(d.toDateString());
			},
			showOtherMonths: true,
			selectOtherMonths: true,
			showButtonPanel: true,
			showOn: "button",
			buttonImage: "/images/calendar.gif",
			buttonImageOnly: true,
			dateFormat: "DD, d MM, yy UT",
			autosize: true
		});
		
		// Set the obsDate and nn fields to today when the page is first loaded.
		jqObsDate.datepicker("setDate", "today");
		jqNNL.val(jqObsDate.datepicker("getDate").getMJD());
		jqLDate.val(jqObsDate.datepicker("getDate").toDateString());

	});	
</script>

<div class="demo">
	<p>Date: <input id="datepicker" type="text"></p>
  <p>NN on load: <input id="nnLoad" type="text"></p>
  <p>NN on select: <input id="nnSelect" type="text"></p>
  <p>Select Date: <input id="selectDate" type="text"></p>
  <p>Load Date: <input id="loadDate" type="text"></p>
  <p>GMT Offset: <input id="offset" type="text"></p>
</div><!-- End demo -->

<div class="L12" id="old_date">TUE 28 FEB 2012 UT / NN 55984</div>

<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

<script type="text/javascript">
	$("#old_date").click(function() {
		//$("#obsDate").datepicker("setDate", new Date(<% $year %>, <% $mon %>, <% $day %> ));
		alert("Date Clicked");
	});
</script>

</body>
</html>

<% $instance ? 'style="display:none"' : '' %> 