$(function()
{
// initialise the "Select date" link
	$('#date-pick')
	.datePicker(
	// associate the link with a date picker
{
	createButton:false,
	startDate:'01/01/2007',
	endDate:'31/12/2012'
	}
	).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();
	($('#d')[0]).selectedIndex = d - 1;
	($('#m')[0]).selectedIndex = m;
	($('#y')[0]).selectedIndex = y - 2007;
	}
	// listen for when the selects are changed and update the picker
$('#d, #m, #y')
	.bind(
	'change',

function()
{
	var d = new Date(
	$('#y').val(),
	$('#m').val()-1,
	$('#d').val()

);
	$('#date-pick').dpSetSelected(d.asString());
	}
	);
	// default the position of the selects to today
	var today = new Date();
	($('#d')[0]).selectedIndex = today.getDate() - 1;
	($('#m')[0]).selectedIndex = today.getMonth();
	($('#y')[0]).selectedIndex = today.getFullYear() - 2007;
	// and update the datePicker to reflect it...
	$('#d').trigger('change');
	});


$(function()
{
// initialise the "Select date" link
	$('#date-pick2')
	.datePicker(
	// associate the link with a date picker
{
	createButton:false,
	startDate:'01/01/2007',
	endDate:'31/12/2012'
	}
	).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();
	($('#d2')[0]).selectedIndex = d - 1;
	($('#m2')[0]).selectedIndex = m;
	($('#y2')[0]).selectedIndex = y - 2007;
	}
	// listen for when the selects are changed and update the picker
$('#d2, #m2, #y2')
	.bind(
	'change',

function()
{
	var d = new Date(
	$('#y2').val(),
	$('#m2').val()-1,
	$('#d2').val()

);
	$('#date-pick2').dpSetSelected(d.asString());
	}
	);
	// default the position of the selects to today
	var today = new Date();
	($('#d2')[0]).selectedIndex = today.getDate() - 1;
	($('#m2')[0]).selectedIndex = today.getMonth();
	($('#y2')[0]).selectedIndex = today.getFullYear() - 2007;
	// and update the datePicker to reflect it...
	$('#d2').trigger('change');
	});