$(document).ready(function(){ 
    
        $("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false}); 
        
    	// initialise the "Select date" link
			$('#date-pick')
					.datePicker(
						// associate the link with a date picker
						{
							createButton:false,
							startDate:'01/01/2010',
							endDate:'31/12/2030'						}
					).bind(
						// when the link is clicked display the date picker
						'click',
						function()
						{
							updateSelects($(this).dpGetSelected()[0]);
							$(this).dpDisplay();
							return false;
						}
					).bind(
						// when a date is selected update the SELECTs
						'dateSelected',
						function(e, selectedDate, $td, state)
						{
							updateSelects(selectedDate);
						}
					).bind(
						'dpClosed',
						function(e, selected)
						{
							updateSelects(selected[0]);
						}
					);
					
				var updateSelects = function (selectedDate)
				{
					var selectedDate = new Date(selectedDate);
					$('#date-sel-dd option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
					$('#date-sel-mm option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
					$('#date-sel option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
				}
				// listen for when the selects are changed and update the picker
				$('#date-sel-dd, #date-sel-mm, #date-sel')
					.bind(
						'change',
						function()
						{
							var d = new Date(
										$('#date-sel').val(),
										$('#date-sel-mm').val()-1,
										$('#date-sel-dd').val()
									);
							$('#date-pick').dpSetSelected(d.asString());
						}
					);
				
				// default the position of the selects to today
				var today = new Date();
				updateSelects(today.getTime());
				
				// and update the datePicker to reflect it...
				$('#date-sel-dd').trigger('change');

    });