// JavaScript Document
/// <reference path="jquery-1.3.1-vsdoc.js"/>

/*
* This js class enabled advanced functionality of the hotel selector.
* Developed against jQuery 1.3.1
*/

// Type Definition
DropDownList = function(containerId) {
	this.init(containerId); // call init() to simulate a constructor
}

function sanitiseSelector(selector) {
    if (selector)
        return selector.replace(".", "\\.").replace("[", "\\[").replace("]", "\\]");
    return "";
}

// Type.Prototype setup
$.extend(DropDownList.prototype, {

	// ### Fields
	linkContainer: null,
	hitArea: null,
	value: '',

	// ### Constructor
	init: function(containerId) {
	    this.linkContainer = $("#" + sanitiseSelector(containerId));
	    this.linkContainer.hide(); 			
		// hide <ul /> if it isn't already hidden

		// add alternating list item styles
		$.each(this.linkContainer.children("li"), function(i, item) {
			if (i % 2 != 0) {
				$(item).addClass("odd");
			}
		});
	},

	// ### Events
	valueChanged: function() { },

	activateTrigger: function(event) {
		var selector = event.data;
		selector.showOptions();
		return false;
	},

	// ### Methods
	bind: function() {
		// attach a "click" event to <a /> element passing context ("this") as a parameter
		var button = $("a." + sanitiseSelector(this.linkContainer.attr('id')) + "_trigger");
		button.bind("click", this, this.activateTrigger);

		// attach a "click" event to all list items in the container
		var items = this.linkContainer.children("li");
		var container = this;
		$.each(items, function(i, item) {
			$(item).bind("click", container, function(event) {
				var selector = event.data;
				selector.setValue($(this).children("span").text(), $(this).children("span").attr("data"));
				selector.hideOptions();
				return false;
			});
		});
	},

	showOptions: function() {
		var container = this.linkContainer;
		var button = $(container).prev($("a"));

		// position the container
		container.show();
		container.css("position", "absolute");
		container.css("z-index", "2");
		container.css("top", button.position().top + button.height() + 7); // where 7px is bottom-margin + bottom-padding
		container.css("left", button.position().left);

		// attach hit area
		var hitArea = $("<div class='modalHitArea'><div>");
		hitArea.css("height", $(document).height());
		hitArea.css("opacity", 0);
		container.before(hitArea);
		hitArea.show();
		this.hitArea = hitArea;

		// attach a "click" event to hitArea passing context ("this") as a parameter
		hitArea.bind("click", this, function(event) {
			var selector = event.data;
			selector.hideOptions();
		});
	},

	hideOptions: function() {
		if (this.hitArea) {
			this.hitArea.remove(); 	// remove the hit area
			this.linkContainer.hide();
		}
	},

	disable: function() {
		var button = $("a." + sanitiseSelector(this.linkContainer.attr('id')) + "_trigger");
		button.addClass("disabled");
		button.unbind("click", this.activateTrigger);
	},

	enable: function() {
	var button = $("a." + sanitiseSelector(this.linkContainer.attr('id')) + "_trigger");
		button.removeClass("disabled");
		button.bind("click", this, this.activateTrigger);
	},

	setValue: function(key, value) {
		this.value = value;

		// set hidden field value
		var hiddenField = $("input." + sanitiseSelector(this.linkContainer.attr('id')) + "_value");
		hiddenField.val(value);

		var button = $("a." + sanitiseSelector(this.linkContainer.attr('id')) + "_trigger"); // set trigger button label
		button.html("<span>" + key + "</span>");

		this.valueChanged(); // raise "valueChanged" event
	},

	reset: function(key) {
		this.value = "";

		// set hidden field value
		var hiddenField = $("input." + sanitiseSelector(this.linkContainer.attr('id')) + "_value");
		hiddenField.val("");

		var button = $("a." + sanitiseSelector(this.linkContainer.attr('id')) + "_trigger"); // set trigger button label
		button.html("<span>" + key + "</span>");
	}
});