/** 
 * Dynamic drop-down skinner for jQuery
 *
 * Based on 2008 Mulyadi Oey Script
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 */

(function($) {
	$.fn.jqSelectBox = function() {
		var id = $(this).attr("id");
		$(this).hide();
		
		// ----- generate equivalent markups -----
		
		var menuId = "jqSelectBox_" + id;
		// <option>'s selected attribute is considered binary; not as an attribute name which can have different values
		var initialSelection = $(this).find("option:selected").text();
		var menuHtml = 	'<div id="' + menuId + '" class="dropdown clearfix">' + "\n" +
  						'	<div class="arrow">' + "\n" +
    					'		<div class="list">' + "\n" +
      					'			<p>' + initialSelection + '</p>' + "\n" +
						'		</div>' + "\n" +
						'	</div>' + "\n" +
						'</div>';
		
		var menuItemId = menuId + "_item";
		var menuItemHtml = '<div id="' + menuItemId + '" class="dropdownitem">' + "\n";
		// iterate all <option>
		$(this).find("option").each(function() {
			// e.g. <p id="id_value">value</p>
			menuItemHtml += '<p id="' + id + '___' + $(this).attr("value") + '"><a href="' + $(this).attr("value") + '">' + $(this).text() + '</a></p>' + "\n";
		});
		menuItemHtml += '</div>';
		
		$(this).before(menuHtml + menuItemHtml);
		
		// ----- visual initialization -----
		
		$("#" + menuItemId).hide();
		
		// ----- event handling -----
		
		var menuSelector = '#' + menuId;
		var menuItemSelector = '#' + menuItemId;
		
		$(menuSelector).click(function() {
			// show items list
			$(menuItemSelector).toggle();
			
			// only care when the menu item is visible
			if ($(menuItemSelector).css("display") != "none") {
				var offset = $(this).offset();
				//$(menuItemSelector).css("left", offset.left + "px");
				//$(menuItemSelector).css("top", offset.top + 19 + "px");
				
				// highlight item list that is currently selected
				var currentText = $(menuSelector + ' p').text();
				$(menuItemSelector + ' p').each(function() {
					var itemListText = $(this).text(); 
					if (itemListText == currentText) {
						$(this).addClass("selected");
					}
				});
			}
		});
		
		$(menuItemSelector + ' p').mouseover(function() {
			// make sure other list item is not selected
			$(menuItemSelector + ' p').removeClass("selected");

			$(this).addClass("selected");
		});
	
		$(menuItemSelector + ' p').mouseout(function() { $(this).removeClass("selected"); } );
	
		$(menuItemSelector + ' p').click(function() {
			// update current selection
			$(menuSelector + ' p').text($(this).text());
			// hide items list
			$(menuItemSelector).hide();
			
			// update the original <option>
			var pId = $(this).attr("id").split("___");
			var menuOriId = pId[0];
			var menuItemOriValue = pId[1];
			var menuOriSelector = "#" + menuOriId;
			$(menuOriSelector).find("option").each(function() {
				if ($(this).attr("value") == menuItemOriValue) {
					this.selected = "selected";
				}
				else {
					this.selected = "";
				}
			});
		});
	
		// hide menu when user clicks anywhere but the dropdown
		$(document).mouseup(function(event) {
			var fromDropdown = $(event.target).parents(menuSelector).length;
			if (fromDropdown == 0) {	// 0 means the event is not originated from the dropdown
				$(menuItemSelector).hide(); 
			}
		});
	}
})(jQuery);