/*
 * S5 jQuery Custom Selectbox
 *
 * Copyright (c) 2009 Jonas Åkerlund, Sector5
 *
 * Code inspired by the jQuery selectbox plugin (http://www.brainfault.com)
 *
 * Version: 0.1
 */

jQuery.fn.extend({
	selectbox: function(options) {
		return this.each(function() {
			new s5selectBox(this, options);
		});
	}
});

s5selectBox = function(selectobj, options)
{
	var opt 				= options || {};
	opt.selectedItemClass 	= opt.selectedItemClass || "selected-item";
	opt.containerClass 		= opt.containerClass || "s5selectbox-wrapper";
	opt.hoverClass 			= opt.hoverClass || "selected";
	
	var container 			= setupContainer();				// Add the container div
	var activeItem 			= setupActiveItem();			// Set up the active item and add it before the container div
	
	init();
	$(selectobj).hide();
	
	// Toggle the container, for some reason toggle() isnt working,
	// so we're doing it the old fashioned way
	$(activeItem).click(function(event) {
		// hide all the open selectboxes
		$("."+opt.containerClass).not($(container)).hide();
		
		if ($(container).is(":visible")) {
			$(container).hide();
		} else
			$(container).show();

		event.stopPropagation();
	})
	
	// Hide the container if you click anywhere else
	$("body").click(function() {
		$(container).hide();
	});
	
	function init()
	{
		$(container).append(getSelectOptions());
		$(container).hide();
    }
	
	// Create a container for the selectbox
	function setupContainer()
	{
		var container = document.createElement("div");
		$(container).attr("class", opt.containerClass);
		$(selectobj).before($(container));
		
		return container;
	}
	
	function setupActiveItem() {
		var activeItem = document.createElement("p");
		$(activeItem).attr('class', opt.selectedItemClass);
		$(container).before($(activeItem));
		
		return activeItem;
	}
	
	// Hide the container
	function hideMe()
	{
		$(container).hide();	
	}
	
	// Update the activeitem with the html of the selected li
	function setActive(val)
	{
		$(activeItem).html(val);

		// Select the corresponding <option> in the hidden <select>
		var thevalue = val;
		$(selectobj).find("option.selected").removeClass("selected");
		$(selectobj).find("option").each(function() {
			if ($(this).html() == thevalue) {
				$(this).addClass("selected");
				$(this).attr("selected", true);
			}
		});
	}
	
	// Parse the selectobj and create a ul list instead
	function getSelectOptions()
	{
		var ul = document.createElement("ul");
		
		$(selectobj).children("option").each(function() {
			
			var li = document.createElement("li");
			
			$(li).attr('id', $(this).val());
			$(li).html($(this).html());
			$(ul).append(li);
			
			// Checks to see whether the option is already selected
			if ($(this).is(":selected")) {
				setActive($(this).html());
				$(this).addClass(opt.hoverClass);
			}
			
			// Setup click and hover functions
			$(li)
			.click(function() {
				setActive($(this).html());
				hideMe();
			})
			.mouseover(function() {
				$(this).addClass(opt.hoverClass);	
			})
			.mouseout(function() {
				$(this).removeClass(opt.hoverClass);	
			});
		});
		
		return ul;
	}
};