Htk.DateChooser = new Class
({
	Extends: Htk.Field
	,Tag: 'htk-date-chooser'

	,format: _('%a, %e %b %Y')
	,calendar: null
	,ignoreCalendarChange: false
	
	,initialize: function (props)
	{
		this.parent (props);
		this.createElement ('div');
		this.node.className = 'date-chooser';
		
		this.label = document.createElement ('label');
		this.node.appendChild (this.label);

		this.setEditable (this._editable);
	}

	,putValue: function (value)
	{
		var dateString;

		if (value instanceof Date)
			dateString = Vn.Date.strftime (value, this.format);
		else
			dateString = '';

		Vn.Node.setText (this.label, dateString);
	}

	,setEditable: function (editable)
	{
		if (editable && !this.calendar)
		{
			this.button = document.createElement ('button');
			this.button.title = _('ChangeDate');
			this.button.addEventListener ('click', this.showCalendar.bind (this));
			this.node.insertBefore (this.button, this.label);
		
			var img = document.createElement ('img');
			img.alt = _('ChangeDate');
			img.src = 'image/calendar.png';
			this.button.appendChild (img);
		
			var calendar = new Htk.Calendar ();
			calendar.on ('changed', this.calendarChanged.bind (this));
			this.calendar = calendar;
		}
		else if (!editable)
		{
			this.calendar = null;
			this.node.removeChild (this.button);
		}
	}

	,calendarChanged: function (calendar)
	{
		if (this.ignoreCalendarChange)
			return;
	
		this.calendar.hidePopup ();
		
		var newDate = calendar.value;
		this.putValue (newDate);
		this.valueChanged (newDate);
	}

	,showCalendar: function (event)
	{
		this.ignoreCalendarChange = true;
		this.calendar.value = this._value;
		this.calendar.goToSelectedMonth ();
		this.ignoreCalendarChange = false;
		
		this.calendar.showPopup (this.button);
	}
});