/**
 * JavaScript enhancements for the MRC Toolkit website
 * Requires the mootools framework (www.mootools.net)
 * 
 * @author Martin Laine (martin.laine@gmail.com)
 */

/**
 * Show/hide tab system for the routemap page
 */
var RouteMap = new Class( {
	
	/**
	 * @constructor
	 * @param {DOMNode} element (list of tabs)
	 * @return void
	 */
	initialize:function(element) {
		this.element = element;
		this.parent = element.getParent();
		this.id = this.element.getProperty("id");
		this.tab = $(this.id + "-tab");
		this.tab.addEvent( "click", this.trigger.bindWithEvent(this) );
	},
	
	/**
	 * The trigger method (triggered when tabs are clicked)
	 * @param {Event} evt
	 * @return void
	 */
	trigger:function(evt) {
		evt.stop();
		$(evt.target).blur();

		if( evt.target.getParent().hasClass("current") ) return;
		
		this.parent.getElements(".map-content").each( function(el) {
			el.toggleClass("current-view");
			$(el.getProperty("id") + "-tab").toggleClass("current");
		} );
	}
	
} );

/**
 * Expand/collapse submap system
 * @extends Loader
 * @throws "smartLoader.notReady"
 */
var SubMap = new Class( {

	/**
	 * @constructor
	 * @param {DOMNode} element The submap DIV element
	 * @return void
	 */
	initialize:function(element) {
		this.state = "closed";
		this.element = element;
		this.map = this.element.getElement("div");
		this.map.setStyle("overflow", "hidden");
		this.control = this.element.getElement("span.control");

		this.control.innerHTML = "Open submap";

		this.control.addEvent("click", this.trigger.bindWithEvent(this) );
		this.effect = new Fx.Style( this.map, "height", { onComplete:this.updateState.bind(this) } ).set(0);
	},
	
	/**
	 * Trigger method
	 * @return void
	 */
	trigger:function(evt) {
		evt.stop();
		switch(this.state) {
			case "closed":
				this.state = "opening";
				this.effect.start(this.map.scrollHeight);
				break;
			case "open":
				this.state = "closing";
				this.effect.start(0);
				break;
			default:
				return;
				break;
		}
	},
	
	/**
	 * Update state method
	 * @return void
	 */
	 updateState:function() {
		switch(this.state) {
			case "closing":
				this.state = "closed";
				this.control.setHTML("Open submap");
				break;
			case "opening":
				this.state = "open";
				this.control.setHTML("Close submap");
				break;
		}
	}
	
} );

/**
 * Fixes height of section boxes so that they all are the same height
 */
var SectionBoxes = new Class( {
	
	/**
	 * @constructor
	 * @param {DOMNode} element The UL element
	 */
	initialize:function(element) {
		this.boxes = element.getElements("div.box-content");
		this.setHeights();
	},
	
	/**
	 * Sets the height of each box inside the UL
	 * @return void
	 */
	setHeights:function() {
		var minHeight = 0;
		var minHeadingHeight = 0;
		var heading;
		for(var i=0;i<this.boxes.length;i++) {
			heading = this.boxes[i].getPrevious();
			minHeadingHeight = heading.offsetHeight > minHeadingHeight ? heading.offsetHeight : minHeadingHeight;
			minHeight = this.boxes[i].offsetHeight > minHeight ? this.boxes[i].offsetHeight : minHeight;
			if(i % 2 > 0 ) {
				minHeight -= 20;
				this.boxes[i-1].setStyle("height", minHeight + "px");
				this.boxes[i].setStyle("height", minHeight + "px");
				minHeight = 0;

				minHeadingHeight -= 12;
				this.boxes[i-1].getPrevious().setStyle("height", minHeadingHeight + "px");
				heading.setStyle("height", minHeadingHeight + "px");
				minHeadingHeight = 0;
			}
		}
	}
} );

var SearchForm = new Class( {

	initialize:function(element) {
		this.form = element;
		
		this.resourceTypeCheckBox = $("area-RESOURCE");
		this.stationTypeCheckBox = $("area-STATION");
		
		this.resourceTypeCheckBox.addEvent( "click", this.toggleTypes.bindWithEvent(this, this.resourceTypeCheckBox) );
		this.stationTypeCheckBox.addEvent( "click", this.toggleTypes.bindWithEvent(this, this.stationTypeCheckBox) );
	},
	
	toggleTypes:function(evt, source) {
		var subOptions = evt.target;
		do subOptions = subOptions.getParent();
		while(subOptions.getTag() != "li");

		var subOptions = subOptions.getElement("ul");
		var checkbox = evt.target;
		subOptions.setStyle("display", checkbox.checked?"block":"none");
		if(checkbox.checked) {
			subOptions.getElement("input").checked = true;
		}
	}

} );

/**
 * Adds a "ghost" label to input box
 */
var InputLabel = new Class( {
	
	initialize:function(element) {
		this.element = element;
		this.labelText = "Enter keyword";
		
		this.element.addEvent("click", this.hideLabel.bind(this));
		this.element.addEvent("blur", this.showLabel.bind(this));
		
		this.form = $(this.element.form);
		this.form.addEvent("submit", this.hideLabel.bind(this));

		if(this.element.value == "") this.showLabel();
	},
	
	hideLabel:function() {
		if(this.element.value != this.labelText) return
		
		this.element.setStyle("color", "#000");
		this.element.value = "";
	},

	showLabel:function() {
		if(this.element.value != "") return;
		
		this.element.setStyle("color", "#ccc");
		this.element.value = this.labelText;
	}
	
} );

window.addEvent("domready", function() {
	document.getElement("body").addClass("jsEnabled");
	
	var element;

	document.getElements(".map-content").each(function(el) {
		new RouteMap(el);
	});
	
	document.getElements("div.submap").each(function(el) {
		new SubMap(el);
	});

	document.getElements("input.search_string").each(function(el) {
		new InputLabel(el);
	});

	if(element = document.getElement("ul.sections"))
		new SectionBoxes(element);

	if(element = document.getElement(".search #side form"))
		new SearchForm(element);
});