Event.observe( window, "load", initFilters );

var popupCalendars = new Array();

function initFilters() {
	// Initialise expandable boxes
	var expandables = document.getElementsByClassName( "expandable" );
	for(var i=0;i<expandables.length;i++) new Expandable(expandables[i]);
	
	// Highlight input text when user clicks inside box
	var calendars = document.getElementsByClassName("cal");
	calendars.each( function(calendar) { popupCalendars.push( new Calendar(calendar) ); } );
	
	var i, j;
	for(i=0;i<popupCalendars.length;i++) {
		for(j=0;j<popupCalendars.length;j++) {
			if(i != j) popupCalendars[i].registerCalendar(popupCalendars[j]);
		}
	}
	
	/*if( $("datesearch") ) {
		$("datesearch").style.display = "none";
		$("datesearch-control").style.display = "block";
		Event.observe( "datesearch-control", "click", function(e) {
			Event.stop(e);
			if( $("datesearch").style.display == "none" ) {
				$("datesearch").style.display = "block";
				$("datesearch-control").innerHTML = "Hide date options";
			} else {
				$("datesearch").style.display = "none";
				$("datesearch-control").innerHTML = "Show date options";
			}
			$("datesearch-control").blur();
		} );
	}*/
}

var Calendar = Class.create();
Calendar.prototype = {
	initialize:function(calendar) {
		this.otherCalendars = new Array();
		var input = calendar.getElementsByTagName("input")[0];
		this.epochCal = new Epoch( "epoch_popup" + input.id, "popup", input, false );
		Event.observe( input, "click", this.closeOtherCalendars.bind(this) );
		Event.observe( calendar, "click", this.toggle.bind(this) );
		Event.observe( document, "click", this.close.bind(this) );
	},
	
	toggle:function(e) {
		Event.stop(e);
		this.epochCal.toggle();
		this.closeOtherCalendars();
	},
	
	closeOtherCalendars:function(e) {
		if( e != undefined ) Event.stop(e);
		this.otherCalendars.each( function(calendar) { calendar.close(); } );
	},
	
	registerCalendar:function(calendar) {
		this.otherCalendars.push(calendar);
	},

	close:function(e) {
		if( e != undefined ) {
			var table = Event.findElement( e, "table" );
			if( table.tagName != undefined && Element.hasClassName( table, "calendar" ) ) return;
		}
		this.epochCal.hide();
	}
}

// Expandable panel class
var Expandable = Class.create();
Expandable.prototype = {
	// Constructor
	initialize:function(element) {
		this.minHeight = 1;
		this.status = "opening";
		this.moreElements = new Array();
		this.showMoreControl;
		this.moreState = "closed";

		var i;
		var aTags = element.getElementsByTagName("a");
		var h3Tags = element.getElementsByTagName("h3");
		var divTags = element.getElementsByTagName("div");
		var liTags = element.getElementsByTagName("li");
		// Find the span tag with a "control" class and get reference to it
		// Also get the control text so we can restore it when the panel is closed
		for(i=0;i<h3Tags.length;i++) {
			if( Element.hasClassName( h3Tags[i], "control" ) ) {
				this.control = h3Tags[i];
				this.control.setAttribute( "title", "Click to expand/close" );
			}
		}
		// Find the div tag with a "panel" class. This is the collapsable panel.
		for(i=0;i<divTags.length;i++) {
			if( Element.hasClassName( divTags[i], "panel" ) ) {
				this.panel = divTags[i];
				break;
			}
		}
		for(i=0;i<aTags.length;i++) {
			if( Element.hasClassName( aTags[i], "more" ) ) {
				this.showMoreControl = aTags[i];
				this.showMoreControl.style.display = "block";
				Event.observe( this.showMoreControl, "click", this.triggerShowMore.bind(this) );
			}
		}
		for(i=0;i<liTags.length;i++) {
			if( Element.hasClassName( liTags[i], "more" ) ) {
				this.moreElements.push( liTags[i] );
				liTags[i].style.display = "none";
			}
		}
		// Setup the effect
		this.effect = new fx.Height( this.panel, { duration:300, onComplete:this.updateStatus.bind(this) } );
		this.panelIniHeight = this.effect.iniHeight;
		// Collapse panel (if 
		if( !Element.hasClassName( element, "open" ) ) {
			this.effect.now = this.minHeight;
			this.effect.increase();
			this.status = "closing";
		}
		this.updateStatus();
		// Attach the event handler to the control element
		Event.observe( this.control, "click", this.trigger.bind(this) );
	},
	
	// Control trigger method
	trigger:function(e) {
		switch( this.status ) {
			case "open":
				// If the panel is open, close it
				this.status = "closing";
				this.effect.custom( this.effect.iniHeight, this.minHeight );
				break;
			case "closed":
				// If the panel is closed, open it
				this.status = "opening";
				this.effect.custom( this.minHeight, this.effect.iniHeight );
				break;
		}
	},

	// Triggered when the effect is complete
	updateStatus:function() {
		switch( this.status ) {
			case "opening":
				// The panel has finished opening so set status to "open" and update the control element
				this.status = "open";
				Element.removeClassName( this.control, "open" );
				Element.addClassName( this.control, "close" );
				break;
			case "closing":
				// The panel has finished closing so set status to "closed" and update the control element
				this.status = "closed";
				Element.removeClassName( this.control, "close" );
				Element.addClassName( this.control, "open" );
				break;
		}
	},
	
	triggerShowMore:function(e) {
		Event.stop(e);
		Event.element(e).blur();
		switch( this.moreState ) {
			case "closed":
				this.moreElements.each( function(li) { li.style.display = "block"; } );
				this.effect.iniHeight = this.panel.scrollHeight;
				this.effect.now = this.panel.scrollHeight;
				this.effect.increase();
				//this.effect.custom( this.effect.now, this.effect.iniHeight );
				this.showMoreControl.innerHTML = "Show less";
				this.moreState = "open";
			break;

			case "open":
				this.moreElements.each( function(li) { li.style.display = "none"; } );
				this.effect.iniHeight = this.panelIniHeight;
				this.effect.now = this.panelIniHeight;
				this.effect.increase();
				//this.effect.custom( this.effect.now, this.effect.iniHeight );
				this.showMoreControl.innerHTML = "Show more";
				this.moreState = "closed";
			break;
		}
	}
}