(function(jQuery)
{
	jQuery.fn.extend({
		fancyselect: function()
		{
			/// Iterate through each match
			return this.each(function()
			{
				var select = this;

				/// Predefine functions
				function updateSelectedItem(index)
				{
					var text = container.find(".selected-item .text");

					ul.children("li").removeClass("selected");

					select.selectedIndex = index;

					var li = jQuery(ul.children("li").eq(index));

					text.text(li.text());

					li.addClass("selected");
				}

				/// Generate the HTML
				var container = jQuery("<div><div class=\"selected-item\"><span class=\"text\"></span><div class=\"down-button\"></div></div><div class=\"container\"><div class=\"drop-down\"><div class=\"background\"></div><ul></ul></div></div></div>");

				/// Add each option
				var selectBox = jQuery(this);
				var options = selectBox.children();
				var ul = container.find(".drop-down ul");

				for (var i = 0; i < options.length; i++)
				{
					var option = jQuery(options[i]);
					var li = jQuery("<li>" + option.text() + "</li>");
					
					if(i == 0)
					{
						li.addClass("first-item");
					}

					ul.append(li);

					li.click(function()
					{
						updateSelectedItem(jQuery(this).index());

						container.find(".container").removeClass("opened");

						jQuery(select).change();
					});
				}

				/// Find out the selected item
				updateSelectedItem(this.selectedIndex);

				/// Add events
				var selectedItem = container.find(".selected-item");

				selectedItem.click(function()
				{
					jQuery(this).parent().find(".container").toggleClass("opened");
				});

				/// Add container to DOM
				container.addClass("fancyselect");
				container.appendTo(jQuery(this).parent());
				container.find(".background").height(ul.outerHeight());

				/// Hide the original select box
				jQuery(this).css("visibility", "hidden");
				jQuery(this).css("position", "absolute");
			});
		}
	});
})(jQuery);