var DatePicker = Class.create({
    initialize: function(invoking_el, input_el, options) {
	if(!invoking_el) return;
	this.options = options;
	this.invoking_el = invoking_el;
	invoking_el.observe("click", function() {
	    if(this.date_picker_created) return;
	    this.date_picker_created = true;
	    var jp = $j(invoking_el);
	    jp.DatePicker({
		current: this.options.current || Date.today().add({ months: 1}), // this date wil be centered but not selected. We use the next month so that the current one will be left and not center.
		date: $F(input_el) || Date.today().toString('yyyy-MM-dd'), // selected date
		calendars: 3,
		locale: { // provided by datejs localizations.
		    days: Date.CultureInfo.dayNames,
		    daysMin: Date.CultureInfo.abbreviatedDayNames,
		    months: Date.CultureInfo.monthNames,
		    monthsShort: Date.CultureInfo.abbreviatedMonthNames
		},
		onBeforeShow: function(date) {
		    if(this.options.onBeforeShow)
			this.options.onBeforeShow.bind(this)();
		}.bind(this),
		onRender: function(date) {
		    if(this.options.onRender)
			return this.options.onRender(date);
		    return {
			disabled: true
		    }
		}.bind(this),
		onChange: function(formatted, date) {
		    input_el.value = date.toString(Date.CultureInfo.formatPatterns.shortDate);
		    jp.DatePickerHide();
		    if(this.options.onChange)
			this.options.onChange(formatted, date);
		}.bind(this)
	    });
	    jp.DatePickerShow();
	}.bind(this));

    }
});