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";
    opt.hiddenControl = opt.hiddenControl || "Hidden-CatList";
    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 reasong 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) {
        tempVal = val.toString();
        var valLength = tempVal.length;

        if (valLength > 25) {
            tempVal = tempVal.substring(0, 24) + "...";
        }
        $(activeItem).html(tempVal);
    }
    function setActive2(val, ctrl) {

        $(ctrl).html(val);

    }
    // 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();
			    $("." + opt.hiddenControl + " option[value=" + $(li).attr('id') + "]").attr("selected", "selected");
			    $("." + opt.hiddenControl).change();

			})

			.mouseover(function() {
			    $(this).addClass(opt.hoverClass);
			})
			.mouseout(function() {
			    $(this).removeClass(opt.hoverClass);
			});
        });

        return ul;
    }
    if ($("." + opt.hiddenControl + " option[selected]").text() != "")
        setActive($("." + opt.hiddenControl + " option[selected]").text());

};