/*===============================================================================
	DatePickerManager.js
	John Larson
	2/21/08
	
	Component for managing a series of inputs that each require a calendar
	interface.
	

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


var DatePickerManager = new Class({
	
	options: {
		onSave:				function() { return; },
		onCancel:			function() { return; },
		calendarFormat:		'n/j/y',
		calendarOptions:	{direction: .5, draggable: false},
		showOnInputFocus:	false,
		hideOnInputBlur:	true
	},
	
	initialize: function(dateInputs, options) {
		this.setOptions(options);
		this.dateInputs = [];
		
		if(dateInputs) {
			if ($type(dateInputs) != 'array')
				dateInputs = [dateInputs];
				
			this.addInputs(dateInputs);
		}
		
		this.pickerWidget = this.createPickerWidget();
		
	},
	
	addInput: function(dateInput) {
		this.addInputs([dateInput]);
	},
	
	addInputs: function(dateInputs) {
		
		dateInputs.each(function(dateInput) {
			
			this.dateInputs.include($(dateInput));
			
			if(this.options.showOnInputFocus  ||  !dateInput.theButton)
				dateInput.theInput.addEvent('click', this.summonPickerWidget.bind(this, dateInput));
			
		//	if(this.options.hideOnInputBlur)
		//		dateInput.theInput.addEvent('blur', this.cancelAction.bind(this, dateInput));
			
			
			if(dateInput.theButton)
				dateInput.theButton.addEvent('click', this.summonPickerWidget.bind(this, dateInput));
			
			this.dateInputs.push(dateInput);
			
		}, this);
		
	},
	
	createPickerWidget: function() {
		var pickerWidget = new Element('div', {
			'styles':{'visibility': 'hidden',
				'position': 'absolute',
				'z-index': 20000}
			});
		
		pickerWidget.injectInside(document.body);
		
		
		var widgetDateInput = new Element('input', {
			id: 'datePicker_widgetDateInput',
			'styles':{'visibility': 'hidden',
				'position': 'absolute',
				'z-index': 20000}
			});
		
		widgetDateInput.injectInside(document.body);
		pickerWidget.dateInput = widgetDateInput;
		
		widgetDateInput.addEvent('change', function() {
			this.saveAction();
			dbug.log('Save Action on change!');
		}.bind(this));
		
		pickerWidget.datePicker = new JCalendar({
			datePicker_widgetDateInput: this.options.calendarFormat}, pickerWidget,
			this.options.calendarOptions);
		
		
		pickerWidget.coords = pickerWidget.getCoordinates();
		
		return pickerWidget;
		
	},
	
	
	summonPickerWidget: function(dateInput) {
		
		if (this.currentDateInput == dateInput) {
			// there is to hide it now!
			this.pickerWidget.effect('opacity').start(1, 0);
			this.currentDateInput = null;
			return;
		}
		
		this.currentDateInput = dateInput;
		
		// which will be position relative to?  The button, if available.  This
		// avoids the problem that happens when the input is hidden:
		var positioningElement = ($defined(dateInput.theButton)) ?
			dateInput.theButton : dateInput.theInput;
		
		this.pickerWidget.setPosition({
			relativeTo: positioningElement,
			position: 'bottomCenter',
			edge: 'topCenter'
		});
		
	//	this.pickerWidget.setStyles({top: 'px', left: 'px'});
		
		var dateValue = dateInput.theInput.value.trim();
		
		// have our calendar set itself to match the current value:
		this.pickerWidget.dateInput.value = dateInput.getValue();
		this.pickerWidget.datePicker.syncCalendarToInput();
		
		this.pickerWidget.effect('opacity').start(0, 1);
		
	},
	
	saveAction: function() {
		dbug.log('save action!');
		this.pickerWidget.effect('opacity').start(1, 0);
		this.currentDateInput.saveAction(this.pickerWidget.dateInput.value);
		this.currentDateInput = null;
	},
	
	cancelAction: function() {
		dbug.log('cancel action!');
		this.pickerWidget.effect('opacity').start(1, 0);
		this.currentDateInput.fireEvent('onCancel');
		this.currentDateInput = null;
	}
	
});

DatePickerManager.implement(new Options, new Events);



var DateInput = 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(thePickedDateValue) {
		
		var oldValue = this.theInput.value;
		this.theInput.value = thePickedDateValue;
		
		if(oldValue != thePickedDateValue)
			this.theInput.fireEvent('change');
			
		this.fireEvent('onSave');
	},
	
	getValue: function() {
		return this.theInput.value;
	}
	
});

DateInput.implement(new Options, new Events);