/*
 * SelectBox Plugin - Replaces specified <select> fields with custom HTML.
 * @author Ben Plum <benjaminplum@gmail.com>
 * @version 0.5.6
 *
 * Last update: 1/11/2011
 * Compatible Browsers: Firefox, Safari, Chrome, Opera, IE6, IE7 (all modern browsers)
 *
 * Copyright (c) 2010 Ben Plum <ben@benjaminplum.com>
 * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 *
 * Changelog:
 * - (MORE) Minor Bug Fixes
 * - Fixed "Safari-Style" hash bug
 * - Fixed IE hash bug
 * - Moved event handlers out of return statement (reduce extra overhead)
 * - Added 'links' option - allows for jump links (load page/hash on select)
 * - Added 'Safari Style' Interactions (show on mouse down / select on mouse up / hide on mouse up outside [FIREFOX ONLY FOR NOW]) - Default: true
 * - Added support for option list padding (allows for closer mimicking of safari style dropdowns)
 * - Fixed random 'Safari Style' event bugs
 * - Added touch event support (iPad, iPhone, Android, WebOS[?])
 * - Added Callback Support
 */
 
(function($) {
	$.fn.selectBox = function(customOptions) {
		var _this;
		var _vals = new Array();
		
		var html;
		var originalText
		var optionsEventType, normalEventType;
		
		var isIOS = ((navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPad/i) != null));
		
		// DEFAULTS
		var options = {
			callback: function() {},
			safariStyle: true,
			links: false
		};
		$.extend(options, customOptions);
		
		return this.each(function () {
			_this = $(this);
			_this.hide();
			
			normalEventType = (isIOS) ? "touchstart" : (options.safariStyle) ? "mousedown" : "click";
			activeEventType = (isIOS) ? "touchstart" : (options.safariStyle) ? "mouseup" : "click";
			
			// INITIALIZE
			originalText = _this.find(":selected").text();
			_this.find('option').each(function() {
				_vals[$(this).val()] = $(this).text();
			});
			
			// BUILD HTML
			html = '<div class="selectbox">';
			html += '<a href="#" class="sb-selected">' + originalText + '</a>';			
			html += '<ul class="sb-options">';
			for(var i in _vals) 
			{
				html += '<li';
				if(_vals[i] == originalText)
				{
					html += ' class="selected"';
				}
				html += '><a href="';
				html += (options.links) ? i : '#' + i;
				html += '">' + _vals[i] + '</a></li>';
			}
			html += '</ul>';
			html += '</div>';
			
			html = $(html);
			html.find(".sb-options").hide();
			html.find(".sb-options li:first").addClass("first");
			html.find(".sb-options li:last").addClass("last");
			
			// BIND EVENTS
			html.find(".sb-selected").bind(normalEventType, showOptions);
			
			if(options.safariStyle)
			{
				html.find(".sb-selected").bind("click", function(e) { e.preventDefault(); e.stopPropagation(); });
				
				if(!options.links)
				{
					html.find(".sb-options li a").bind("click", function(e) { e.preventDefault(); e.stopPropagation(); });
				}
			}
			
			// APPEND TO DOM
			_this.after(html);
		});
		
		// SHOW OPTIONS
		function showOptions(e)
		{
			e.preventDefault();
			e.stopPropagation();
			
			html.addClass("open");
			
			var index = html.find(".sb-options li").index(html.find(".sb-options li.selected"));
			var height = (/* parseInt(html.find(".sb-options li").css("height")) */ 32 * index) + parseInt(html.find(".sb-options").css("paddingTop"));
			
			html.find(".sb-options").css({top: -height + "px"}).fadeIn(150, function() {
				$('body').bind(activeEventType, hideOptions);
				
				if(options.links)
				{
					html.find(".sb-options li a").bind(activeEventType, function(e) { window.location = $(this).attr("href"); });
				}
				else
				{
					html.find(".sb-options li a").bind(activeEventType, selectOption);
				}
			});
			
			return false;
		}
		
		// HIDE OPTIONS
		function hideOptions(e)
		{
			e.preventDefault();
			e.stopPropagation();
			
			html.removeClass("open");
			html.find(".sb-options").fadeOut(50);
			
			html.find(".sb-options li a").unbind(activeEventType, selectOption);
			$('body').unbind(activeEventType, hideOptions);
			
			return false;
		}
		
		// ON SELECT
		function selectOption(e)
		{
			e.preventDefault();
			e.stopPropagation();
			
			if(html.find(".sb-options").is(":visible"))
			{
				var index = html.find(".sb-options li").index($(this).parent("li"));
				var newVal = html.find(".sb-options li").eq(index).find("a").attr("href").split("#");
				newVal = newVal[1];
					
				if(_vals[newVal] != html.find(".sb-selected").html())
				{
					html.find(".sb-selected").html(_vals[newVal]);
					_this.val(newVal);
					
					options.callback.call(html, e, newVal);
				}
				
				html.removeClass("open");
				html.find(".sb-options").fadeOut(10, function() {
					html.find(".sb-options li.selected").removeClass("selected");
					html.find(".sb-options li").eq(index).addClass("selected");
				});
				html.find(".sb-options li a").unbind(activeEventType, selectOption);
				$('body').unbind(activeEventType, hideOptions);					
			}
			
			return false;
		}
	}
})(jQuery);