/****************************************/
/* HtmlList.js							*/
/*										*/
/* Provides the JS functionality for	*/
/* for the custom htmllist control		*/
/****************************************/
(function($) {

	$.widget("ui.htmllist", $.extend({}, $.ui.mouse, {
		_init : function() {
			//get the various htmlElements
			var _this = this;
			var _options = this.options;
			this._uiContainer = this.element;
			this._container = this.element.parents("div.htmllist-container");
			this._summaryContainer = this.element.find("div.ui-htmllist-summary");
			this._summaryHeader = this.element.find("div.ui-htmllist-summary h6");
			this._listContainer = this.element.find("div.ui-htmllist-list");
			this._dataContainer = this._container.find("select");
			this.dataItems = new Array();
			this.selectedIndex = 0;
			this.selectedValue = '';
			this.selectedText = '';
			this.timeoutPointer;
			this.totalItems = _this._dataContainer.find("option").length;			
									
			//build the dataItems collection
			_this._dataContainer.find("option").each(function(i) {
				_this.dataItems.push({index: i, value: $(this).attr('value'), text: $(this).html(), totalItems: _this.totalItems});
				if($(this).selected) {
					_this.selectedIndex = i;
					_this.selectedValue = $(this).attr('value');
					_this.selectedText = $(this).html();
				}		
			});
			
			//hide the dataContainer
			this._dataContainer.hide();

			//bind the events
			this._summaryContainer.click(function() {
				_this.summaryClick();
			}).mouseout(function() {
				_this._menuMouseOut();
			}).mouseover(function() {
				_this._menuMouseOver();
			});
			this._listContainer.find("li").click(function(event) {
				_this._itemClick(_this._listContainer.find("li").index(this));
			}).mouseout(function() {
				_this._menuMouseOut();
			}).mouseover(function() {
				_this._menuMouseOver();
			});
		},
		
		//function fired when a user clicks the top summary to display the menu items
		summaryClick : function () {
			if(this._uiContainer.hasClass("ui-htmllist-container-open")) {
				this._closeMenu();
			}
			else {
				this._openMenu();
			}
		},
		
		//function fired when a user clicks one of the menu items
		_itemClick : function (index) {
			this._summaryHeader.html(this.dataItems[index].text);
			this._selectDataContainerItem(index);
			this._closeMenu();	
			
			this._trigger("onChange", null,this.dataItems[index]);
		},
		
		//function used to change the selected index of the underlying select element
		_selectDataContainerItem : function(index) {
			this.selectedIndex = index;
			this.selectedValue = this.dataItems[index].value;
			this.selectedText = this.dataItems[index].text;
			this._dataContainer.find("option").eq(index).attr("selected", true);
		},
		
		//function used to close the menu
		_openMenu : function () {
			//open the menu then after the delay is up then close it again			
			this._uiContainer.addClass("ui-htmllist-container-open");
		},
		
		//function used to fire a timeout to close the menu on mouseout
		_menuMouseOut : function() {
			var _this = this;
			this.timeoutPointer = setTimeout(function () { _this._closeMenu(); }, this.options.delay);
		},
		
		//function used to clear a timeout to keep the menu open if the user re-mouses over it
		_menuMouseOver : function() {
			clearTimeout(this.timeoutPointer);
		},
		
		//function used to close the current menu
		_closeMenu : function () {
			this._uiContainer.removeClass("ui-htmllist-container-open");
			clearTimeout(this.timeoutPointer);
		}
	}));

	$.extend($.ui.htmllist, {
		defaults: {
			delay : 0
		}
	});

})(jQuery);