/* ============================================================================================
 * Copyright (c) 2008 Muhammet TURŞAK (tursoft@gmail.com, www.tursoft.net)
 * Dual licensed
 *   - GPL http://www.gnu.org/licenses/gpl.html and 
 *   - MIT http://www.opensource.org/licenses/mit-license.php
 
===============================================================================================
# INFORMATION and META DATA ABOUT LIBRARY
-----------------------------------------------------------------------------------------------
NAME                : MyComboBox
VERSION             : v1.0
UPDATE DATE         : 23.11.2008

AUTHOR              : Muhammet TURŞAK (tursoft@gmail.com, www.tursoft.net)
DESCRIPTION         : A jquery plugin to easiy show infobox for form input control on focus
LICENSING           : 
            - GPL http://www.gnu.org/licenses/gpl.html and 
            - MIT http://www.opensource.org/licenses/mit-license.php

DEPENDENT FILES     : 
    - jquery-1.2.6.js  (or higher)
    - tursoft.shared.v1.1.js
    
    - default.css (MyInputInfoBox styles) 
    - info.gif
    - leftarrow.gif    

TESTED BROWSERS     : IE 8 Beta, Firefox 3.0.4

KNOWN BUGS / ISSUES : 
    - No known bugs or issues
    
===============================================================================================
# DOCUMENTATION
-----------------------------------------------------------------------------------------------
SUPPORTED TAGS      : select, ul

METHODS             : 
    - MyComboBox($options)
        Function Options; 
            - <empty>  
		
		Source Attributes;
            - EmptyText	: Text to be shown in listbox when no item is selected
			- MinWidth  : Minimum width of listbox		
 ============================================================================================ */
(function($){
	
	// ==================================================================
	var $$ = $.fn.MyComboBox = function($options) {
	
		var $defaults = {  };
		$$.$options = $.extend($defaults, $options);
	
		return $(this).each(function() {
							var $this=$(this);
							
							$this.$=function() {};
							$this.$.itemTexts=new Array();
							$this.$.itemValues=new Array();
							$this.$.isListVisible=false;
							$this.$.ID=this.id;
		
							$this.$.options= {
								emptyText	: $this.attr("EmptyText"),
								minWidth	: $this.attr("MinWidth")
							}
							
							$$.onParseData($this);
							$$.onInitView($this);
						});
	};

	// ==================================================================
	$$.SupportedTags=new Array("UL","SELECT");
	$$.isSupportedTag=function($this) {
		var i=0;
		for(i=0;i<$$.SupportedTags.length;i++)
		{
			if ($this[0].nodeName.toUpperCase()==$$.SupportedTags[i].toUpperCase())
				return true;
		}
		
		return false;
	};
	
	$$.onParseData=function($this) {
		$this.$.itemTexts=new Array();
		$this.$.itemValues=new Array();
		
		// check tagname is supported
		if (!$$.isSupportedTag($this))
			return;
		
		// parseData
		var childNodeName=($this[0].nodeName.toUpperCase()=="UL"?"li":"option");
		var childNodeValueAttr=(childNodeName=="option"?"value":"itemValue");
				
		$this.children(childNodeName).each(function() {
				$this.$.itemTexts.push($(this).html());
				$this.$.itemValues.push($(this).attr(childNodeValueAttr));
			});	
	};

	// ==================================================================
	$$.onInitView=function($this) {
			
		// Init Root Container Table
		var $tblRoot=$(document.createElement("table")).attr(
				{ cellspacing:0, cellpadding:0, border:0, id:$this.$.ID, name:$this.$.ID });
		var $tdRoot=$(document.createElement("td")).attr({width:$this.$.options.minWidth});
		$tblRoot.append($(document.createElement("tr")).append($tdRoot));
		$this.replaceWith($tblRoot);
		$tblRoot.$=$this.$;
		$this=$tblRoot;
		
		// Init Selected Text
		// - selected text box
		var $tblSelectedTextBox=$(document.createElement("table")).attr({ cellspacing:0, cellpadding:0});				
		var $tdSelectedTextBox=$(document.createElement("td")).addClass("combobox_selectedText_box").attr(
																							{width:$this.$.options.minWidth});
		$tblSelectedTextBox.append($(document.createElement("tr")).append($tdSelectedTextBox));		

		
		// - inside tags
		// var $spanSelectedTextBox=$(document.createElement("span")).addClass("combobox_selectedText_box");
		var $input=$(document.createElement("input")).attr({id:'_'+$this.$.ID, name:'_'+$this.$.ID, value:"-1"}).hide();

	    // Init Inner selected text table  (text + down img)
		var $tblInnerSelectedText=$(document.createElement("table")).attr(
									{cellspacing:0, cellpadding:0}).addClass("combobox_selectedText_box")
				// effect
				$tblInnerSelectedText.hover(
								function() { $(this).addClass("combobox_box_hover");},
								function() { $(this).removeClass("combobox_box_hover");});
				
		var $tdInnerSelectedText=$(document.createElement("td"));
		var $tdInnerDownImg=$(document.createElement("td")).attr({width:"1%"});
		var $trInnerSelectedText=$(document.createElement("tr"));
		
		$trInnerSelectedText.append($tdInnerSelectedText);
		$trInnerSelectedText.append($tdInnerDownImg);
		$tblInnerSelectedText.append($trInnerSelectedText);
		$tdRoot.append($tblInnerSelectedText);
		
		// selected text and img
		$tdInnerSelectedText.addClass("combobox_selectedText").addClass("combobox_selectedText_empty").html($this.$.options.emptyText);
		$tdInnerDownImg.addClass("combobox_tdImage").append(
					  $(document.createElement("img")).attr(
							{border:"0px", hspace:"0px", vspace:"0px"}));
				
		$tdRoot.click(function(){ 
							   $this.$.isListVisible=!$this.$.isListVisible;
							   ($this.$.isListVisible?$tblListItems.fadeIn():$tblListItems.fadeOut(150));
							   return false; });
		
		$(document).click(function() { $tblListItems.fadeOut(150); $this.$.isListVisible=false; });
		
		// List Items
		var $tblListItems=$(document.createElement("table")).attr({ cellspacing:0, cellpadding:0, border:0});
		$tblListItems.css({display:"none", position:"absolute"});	
		var $tdListItems=$(document.createElement("td")).addClass("combobox_listList").attr({width:$this.$.options.minWidth});
	
		$tblListItems.append($(document.createElement("tr")).append($tdListItems));
		$tdRoot.append($tblListItems);
				// effects
				$tdListItems.hover(
								function() { $(this).addClass("combobox_box_hover");},
								function() { $(this).removeClass("combobox_box_hover");});
				

		var $divItem=null; var $itemText="";
		var $items=$this.$.itemTexts; var count=$items.length; var i=0;
		for(i=0;i<count;i++)
		{
			$itemText=$items[i];			
			$divItem=$(document.createElement("div"));
			$divItem.attr({value:$this.$.itemValues[i]});
			$divItem.addClass("combobox_listItem").html($itemText);			
			if (count==(i+1))
				$divItem.addClass("combobox_listItem_last");
			
			$divItem.click(function(event){
					event.preventDefault();
					event.stopPropagation();

					// write selected text
					var $itemText=$(this).html();
					$tdInnerSelectedText.html($itemText).removeClass("combobox_selectedText_empty");
					
					// set selected value
					var $div=$(this);
					var $itemValue=$div.attr("value");

					$input.attr("value", $itemValue);
					$this.attr("value",$itemValue);
					$this.attr("text",$itemText);
					
					// hide list
					$tblListItems.fadeOut(150);
					$this.$.isListVisible=false;

					// fire event
					try {
						$this.trigger('onItemSelected', {value:$itemValue, text:$itemText});				
					} catch(err) {}					

				});
						
			$divItem.hover(
						function(){ 
							$(this).addClass("combobox_listItem_hover");
							
							// fire event
							try {
								var $itemText=$(this).html();
								var $itemValue=$(this).attr("value");
								$this.trigger('onItemMouseOver', {value:$itemValue, text:$itemText});				
							} catch(err) {}								
						},
						
						function(){ 
							$(this).removeClass("combobox_listItem_hover");
							// fire event
							try {
								var $itemText=$(this).attr("text");
								var $itemValue=$(this).attr("value");
								$this.trigger('onItemMouseOut', {value:$itemValue, text:$itemText});				
							} catch(err) {}								
						}
					);							
				
			$tdListItems.append($divItem);
		};
	};	

})(jQuery);