/**
 * JavaScript enhancements for Caravan Club website
 * Built on the mootools framework (mootools.net)
 * Requires mootools 1.0 with following modules:
 * Element, Dom, Event, Window.Base, Window.Size, Fx.Style, Fx.Slide 
 * 
 * @author Martin Laine (martin@1pixelout.net)
 */

/**
 * @class SlidePanel
 * Sets up am expandable/collapsable panel
 */
var SlidePanel = new Class( {
	
	Implements: Options,
	
	options: {
		closeLabel:"More info",
		openLabel:"More info"
	},
	
	// Constructor
	initialize: function(containerElement, options) {
		this.setOptions(options);
				
		// References to panel elements
		this.containerElement = containerElement;
		this.controlElement = this.containerElement.getElement("p");
		this.closeElement = this.containerElement.getElement("span");
		if(this.closeElement) this.closeElement.setStyle("display", "block");
		this.panelElement = this.containerElement.getElement("div");

		// Setup the effect
		this.effect = new Fx.Slide( this.panelElement, {onComplete:this.updateLabel.bind(this)} );
		this.effect.hide();
			
		// Add event handlers
		this.controlElement.addEvent( "click", this.trigger.bind(this) );
		if(this.closeElement) this.closeElement.addEvent( "click", this.trigger.bind(this) );

		this.storedHeight = this.panelElement.scrollHeight;
		
		this.resize.periodical(500, this);
		
		this.state = "closed";
	},
	
	trigger:function()
	{
		switch(this.state)
		{
			case "closed":
				this.state = "opening";
				break;
			
			case "open":
				this.state = "closing";
				break;
			
			default:
				return;
				break;
		}

		this.effect.toggle();
	},

	updateLabel:function()
	{
		switch(this.state)
		{
			case "closing":
				this.controlElement.innerHTML = this.options.openLabel;
				this.state = "closed";
			break;

			case "opening":
				this.controlElement.innerHTML = this.options.closeLabel;
				this.state = "open";
			break;
		}
	},
	
	resize:function()
	{
		if(this.storedHeight == this.panelElement.scrollHeight) return;
		this.storedHeight = this.panelElement.scrollHeight;
		this.effect.offset = this.panelElement.scrollHeight;
		if(this.effect.now[1] > 0) this.effect.show();
		else this.effect.hide();
	}
} );

SlidePanel.implement(new Options);

/**
 * @class DateSelector
 * Enhances usability of a pair of select boxes for selecting a date
 * @requires MooCalendar
 */
var DateSelector = new Class ( {
	
	initialize:function(fieldset) {
		var controlElement = new Element("span").addClass("control").injectInside(fieldset);
		this.daySelect = fieldset.getElement("select.daySelect");
		this.monthSelect = fieldset.getElement("select.monthSelect");

		// Calculate valid date range

		var tempMonth = this.monthSelect.options[1].value.split("-");
		var minDate = new Date(tempMonth[0], tempMonth[1] - 1, 1);
		tempMonth = this.monthSelect.options[this.monthSelect.options.length - 1].value.split("-");
		var maxDate = new Date(tempMonth[0], tempMonth[1], 0);
	
		// Set options
		var calendarOptions = {
			minDate:minDate,
			maxDate:maxDate,
			useFadeEffect:true
		}

		// Initialise calendar component
		this.calendar = new MooCalendar(calendarOptions);
		
		// Set event handlers
		this.calendar.addEvent("onSelect", this.set.bind(this));
		controlElement.addEvent( "click", this.toggle.bindWithEvent(this) );
	},
	
	/**
	 * Toggles calendar visibility
	 */
	toggle:function(event) {
		this.calendar.show(this.getDate());
	},

	/**
	 * Sets date in select box pair
	 * @param selectedDate the new date
	 */
	set:function(selectedDate) {
		this.daySelect.selectedIndex = selectedDate.getDate();
		this.daySelect.fireEvent("change");
		var months = this.monthSelect.options;
		var selectedMonth = selectedDate.getFullYear().toString() + "-" + this.calendar.padNumber(selectedDate.getMonth() + 1);
		for(var i=0;i<months.length;i++)
		{
			if(months[i].value == selectedMonth)
			{
				this.monthSelect.selectedIndex = i;
				this.monthSelect.fireEvent("change");
				break;
			}
		}
	},
	
	/**
	 * Gets date from select box pair
	 * @return date in following format: DD/MM/YYYY
	 */
	getDate:function()
	{
		var day = this.daySelect.get("value");
		var month = this.monthSelect.get("value").split("-");
		
		if(day == "00" || month[0] == "0000") return null;
	
		var daysInMonth = this.calendar.getDaysInMonth(month[1] - 1, month[0]);
		if(day > daysInMonth) return null;

		return day + "/" + month[1] + "/" + month[0];
	}
} );

var DateInput = new Class({
	
	initialize: function (element) {
		var control = new Element("span").addClass("control").injectInside(element);
		
		var calendar = new MooCalendar({
			//outputDateFormat:"dd/mm/yy",
			inputDateFormat:"d/m/y",
			useFadeEffect:true,
			anchor:"BL"
		});
		calendar.attach(element.getElement("input"));
		
		control.addEvent("click", function () {
			calendar.show();
		});
	}
	
});

function initEnhancements() {
	// Initialise the instruction panels
	document.getElements("div.instructions").each( function(el) { new SlidePanel(el); } );
	document.getElements("div.expandable").each( function(el) { new SlidePanel(el, {closeLabel:"Hide options", openLabel:"Show options"}); } );
	
	// Initialise calendars
	var calendars = document.getElements("fieldset.calendarButton");
	calendars.each( function(calendar) { new DateSelector(calendar); } );
	
	var mapSearch = document.getElement("div.map-search");
	
	if (mapSearch) {
		// Initialise date inputs
		var dateInputs = document.getElements("div.dateInput");
		dateInputs.each(function(element){ new DateInput(element, { outputDateFormat: "dd/mm/yyyy" }); });
	}
}

// Attach initialising routine to onload event
window.addEvent("domready", initEnhancements);