$(function()
		{
			
			// initialise the "Select date" link
			$('#cala')
				.datePicker(
					// associate the link with a date picker
					{
						createButton:false,
						startDate:'01/01/2008',
						endDate:'31/12/2012',
						horizontalOffset:-20,
						horizontalPosition:1
					}
				).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 d = selectedDate.getDate();
				var m = selectedDate.getMonth();
				var y = selectedDate.getFullYear();
				$('#fd')[0].selectedIndex = d - 1;
				$('#fm')[0].selectedIndex = m;
				$('#fy')[0].selectedIndex = y - 2008;
				forwardToDate();
			}
			
			// listen for when the selects are changed and update the picker
			$('#fd, #fm, #fy')
				.bind(
					'change',
					function()
					{
					    dateChanged("#fd", "#fm", "#fy", "#cala");
					    forwardToDate();
                    }
				);
			
			// default the position of the selects to today
			var today = new Date();
			today.setDate(today.getDate() + 1);
			
			($('#fd')[0]).selectedIndex = today.getDate() - 1;
			($('#fm')[0]).selectedIndex = today.getMonth();
			($('#fy')[0]).selectedIndex = today.getFullYear() - 2008;
			
			// and update the datePicker to reflect it...
			$('#fd').trigger('change');
			
			// Second Calendar
			// ---------------------------------------------------------
			
			// initialise the "Select date" link
			$('#calb')
				.datePicker(
					// associate the link with a date picker
					{
						createButton:false,
						startDate:'01/01/2008',
						endDate:'31/12/2012',
						horizontalOffset:-20,
						horizontalPosition:1
					}
				).bind(
					// when the link is clicked display the date picker
					'click',
					function()
					{
						updateSelects2($(this).dpGetSelected()[0]);
						$(this).dpDisplay();
						return false;
					}
				).bind(
					// when a date is selected update the SELECTs
					'dateSelected',
					function(e, selectedDate, $td, state)
					{
						updateSelects2(selectedDate);
					}
				).bind(
					'dpClosed',
					function(e, selected)
					{
						updateSelects2(selected[0]);
					}
				);
				
			var updateSelects2 = function (selectedDate)
			{
				var d = selectedDate.getDate();
				var m = selectedDate.getMonth();
				var y = selectedDate.getFullYear();
				($('#td')[0]).selectedIndex = d - 1;
				($('#tm')[0]).selectedIndex = m;
				($('#ty')[0]).selectedIndex = y - 2008;
			}
			
			// listen for when the selects are changed and update the picker
			$('#td, #tm, #ty')
				.bind(
					'change',
					function()
					{
					    dateChanged("#td", "#tm", "#ty", "#calb");
                    }
				);
			
			// and update the datePicker to reflect it...
			$('#td').trigger('change');
            
            $(".bookingbutton").click(function(){return validateSelection();});
		});
		
function dateChanged(dayField, monthField, yearField, calendarField)
{
    var selectedDay = $(dayField).val();
    var selectedMonth = $(monthField).val() -1;
    var selectedYear = $(yearField).val();
    
    var cd = new Date(selectedYear, selectedMonth, 1);
    
    if(parseInt(selectedDay) > parseInt(cd.getDaysInMonth()))
    {
        alert("Sorry, there aren't that many days in " + Date.monthNames[selectedMonth]);
        $(dayField)[0].selectedIndex = selectedDay - 2;
        selectedDay--;
    }

	var d = new Date(
				selectedYear,
				selectedMonth,
				selectedDay
			);
	$(calendarField).dpSetSelected(d.asString());
}

function forwardToDate()
{

    var from = new Date($("#fy").val(), $("#fm").val()-1, $("#fd").val());
    var to = new Date($("#ty").val(), $("#tm").val()-1, $("#td").val());
    
    if(from >= to)
    {
		from.addDays(1);
		
		var d = from.getDate();
		var m = from.getMonth();
        var y = from.getFullYear();
						
		$('#td')[0].selectedIndex = d - 1;
        $('#tm')[0].selectedIndex = m;
		$('#ty')[0].selectedIndex = y - 2008;
		return true;
    }
    
    return false;
    
}

function validateSelection()
{
    var from = new Date($("#fy").val(), $("#fm").val()-1, $("#fd").val());
    var to = new Date($("#ty").val(), $("#tm").val()-1, $("#td").val());
    var today = new Date();
    
    if(today > from)
    {
        alert('Please select an arrival date in the future.');
        return false;
    }
    
    if(to <= from)
    {
        alert('Please select a departure date after your arrival date.');
        return false;
    }
    
    return true;
}