/*===============================================================================
	DateTimePickerManager.js
	John Larson
	2/05/08
	
	Component for managing a series of inputs that each require a calendar/time picker
	interface.
	

===============================================================================*/


var DateTimePickerManager = new Class({
	
	options: {
		widgetDivClass:		'timePickerWidgetDiv',
		onSave:				function() { return; },
		onCancel:			function() { return; },
		calendarFormat:		'n/j/Y',
		calendarOptions:	{direction: .5, draggable: false},
		clockOptions:		{},
		showOnInputFocus:	false
	},
	
	initialize: function(dateTimeInputs, options) {
		this.setOptions(options);
		this.dateTimeInputs = [];
		
		if(dateTimeInputs) {
			if ($type(dateTimeInputs) != 'array')
				dateTimeInputs = [dateTimeInputs];
				
			this.addInputs(dateTimeInputs);
		}
		
		this.pickerWidget = this.createPickerWidget();
		
	},
	
	addInput: function(dateTimeInput) {
		this.addInputs([dateTimeInput]);
	},
	
	addInputs: function(dateTimeInputs) {
		
		dateTimeInputs.each(function(dateTimeInput) {
			
			this.dateTimeInputs.include($(dateTimeInput));
			
			if(this.options.showOnInputFocus  ||  !dateTimeInput.theButton)
				dateTimeInput.theInput.addEvent('click', this.summonPickerWidget.bind(this, dateTimeInput));
			
			if(dateTimeInput.theButton)
				dateTimeInput.theButton.addEvent('click', this.summonPickerWidget.bind(this, dateTimeInput));
			
			this.dateTimeInputs.push(dateTimeInput);
			
		}, this);
		
	},
	
	createPickerWidget: function() {
		var pickerWidget = new Element('div', {
			'styles':{'visibility': 'hidden',
				'position': 'absolute',
				'z-index': 90000}
			}).addClass(this.options.widgetDivClass);
		
		pickerWidget.setHTML(
'<table><tr><td><div id="widgetCalendarDiv" style="width: 147px; height: 200px; padding-right: 23px;"></div></td>' +
'<td nowrap><div id="widgetClockDiv"></div><br />' +
'<input id="widgetDateInput" type="text" style="width: 70px;">' +
'<input id="widgetTimeInput" type="text" style="width: 60px;"><br />' + 
'<input type="button" value="Save" id="widgetSaveButton">' + 
'<input type="button" value="Cancel" id="widgetCancelButton"></td></tr></table>');
		
		pickerWidget.injectInside(document.body);
		
		pickerWidget.datePicker = new JCalendar({ widgetDateInput: this.options.calendarFormat}, $('widgetCalendarDiv'),
			this.options.calendarOptions);
		
		pickerWidget.timePicker = new TimePicker($('widgetClockDiv'), $('widgetTimeInput'), null,
			this.options.clockOptions);
		
		pickerWidget.dateInput		= $E('#widgetDateInput', pickerWidget);
		pickerWidget.timeInput		= $E('#widgetTimeInput', pickerWidget);
		
		pickerWidget.saveButton		= $E('#widgetSaveButton', pickerWidget);
		pickerWidget.cancelButton	= $E('#widgetCancelButton', pickerWidget);
		
		pickerWidget.saveButton.addEvent('click', this.saveAction.bind(this));
		pickerWidget.cancelButton.addEvent('click', this.cancelAction.bind(this));
		
		pickerWidget.coords = pickerWidget.getCoordinates();
		
		return pickerWidget;
		
	},
	
	
	summonPickerWidget: function(dateTimeInput) {
		
		if (this.currentDateTimeInput == dateTimeInput) {
			// there is to hide it now!
			this.pickerWidget.effect('opacity').start(1, 0);
			this.currentDateTimeInput = null;
			return;
		}
		
		this.currentDateTimeInput = dateTimeInput;
		
		this.pickerWidget.setPosition({
			relativeTo: dateTimeInput.theInput,
			position: 'bottomCenter',
			edge: 'topCenter'
		});
		
		var currentValue = dateTimeInput.theInput.value.trim();
		if(currentValue.indexOf(' ') != -1) {  // valid date & time pair, we assume:
			var dateValue = currentValue.substring(0, currentValue.indexOf(' '));
			var timeValue = currentValue.substring(currentValue.indexOf(' ') + 1);
			this.pickerWidget.dateInput.value = dateValue;
			this.pickerWidget.timeInput.value = timeValue;
			
			dbug.log('Parse results: dateValue=' + dateValue + ' and timeValue=' + timeValue);
			
			// have our calendar and clock set themselves to match the current value:
			this.pickerWidget.datePicker.syncCalendarToInput();
			this.pickerWidget.timeInput.fireEvent("blur");
		}
		
		this.pickerWidget.effect('opacity').start(0, 1);
		
	},
	
	saveAction: function() {
		this.pickerWidget.effect('opacity').start(1, 0);
		this.currentDateTimeInput.saveAction(
			this.pickerWidget.dateInput.value + ' ' + this.pickerWidget.timeInput.value);
		this.currentDateTimeInput = null;
	},
	
	cancelAction: function() {
		this.pickerWidget.effect('opacity').start(1, 0);
		this.currentDateTimeInput.fireEvent('onCancel');
		this.currentDateTimeInput = null;
	}
	
});

DateTimePickerManager.implement(new Options, new Events);



var DateTimeInput = new Class({
	
	options: {
		onSave:				function() { return; },
		onCancel:			function() { return; }
	},
	
	initialize: function(theInput, theButton, options) {
		this.setOptions(options);
		this.theInput = $(theInput);
		this.theButton = $(theButton);
	},
	
	saveAction: function(thePickedDateTimeValue) {
		
		var oldValue = this.theInput.value;
		this.theInput.value = thePickedDateTimeValue;
		
		if(oldValue != thePickedDateTimeValue)
			this.theInput.fireEvent('change');
		
		this.fireEvent('onSave');
	}
	
});

DateTimeInput.implement(new Options, new Events);