(function($) {
    $.fn.customSelectbox= function(settings) {
        settings = jQuery.extend({valueWidth: 0}, settings);

        return this.each(function() {
            
            // Attributes
            var _collection = new Array();
            var _isopen = false;
            
            // We gaan een uniq punt maken
            var uniqtime = $(this).attr("name") + '_' + (new Date()).getTime();
            var selectName = $(this).attr("name");
            
            // We gaan de html opmaken
            var html = '<div class="selectBox" id="' + uniqtime + '_selectBox">';
            html += '<div class="valueBox" id="' + uniqtime + '_valueBox"></div>';
            html += '<a href="" class="arrow" onclick="return false;" id="' + uniqtime + '_arrow">&nbsp;</a>';
            html += '</div>';
                            
            // We gaan de array met items aanmaken
            $(this).find("option").each(function() {
                _collection[_collection.length] = { val: $(this).attr("value"), txt: $(this).html() }; 
            });
            
            // We gaan de nieuwe box plaatsen
            $(this).before(html);
            
            // Kijken of de valubox een andere breedte moet krijgen
            if(settings.valueWidth > 0)
            {
                $("#" + uniqtime + "_valueBox").width(settings.valueWidth);
            }
            
            // We gaan de selected instellen als standaard
            if($(this).find("option:selected").length > 0) {
                $("#" + uniqtime + "_valueBox").html($(this).find("option:selected").html());
            }
            
            // We gaan de opties binden
            $('#' + uniqtime + '_arrow').bind('click', function() {
                uniqtime = $(this).attr("id").substring(0, $(this).attr("id").length - 6);
                if(_isopen)
                {   
                    $("#" + uniqtime + "_dropBox").remove();
                    _isopen = false;
                } else {
                    // We gaan de dropbox maken en juist plaatsen
                    var newhtml = '<div class="dropBox" id="' + uniqtime + '_dropBox">';
                    
                    // We gaan de items weergeven
                    for(i=0;i<_collection.length;i++)
                    {
                        newhtml += '<div class="optionBox" id="' + uniqtime + '_optionBox_' + i + '">' + _collection[i].txt + '</div>';
                    }
                    
                    // Dropbox sluiten
                    newhtml += '</div>'; 
                    
                    // Html plaatsen
                    $("#" + uniqtime + "_arrow").after(newhtml);
                    
                    // Lijst met opties maken
                    parentPos = $("#" + uniqtime + "_selectBox").position();
                    
                    // Dropbox plaatsen
                    $("#" + uniqtime + "_dropBox").css("top", (parentPos.top + $("#" + uniqtime + "_selectBox").height()) + 'px');
                    $("#" + uniqtime + "_dropBox").css("left", parentPos.left + 'px');
                    $("#" + uniqtime + "_dropBox").css("width", $("#" + uniqtime + "_selectBox").width() + 'px');
                    
                    // We gaan de boel binden
                    $("#" + uniqtime + "_dropBox").find("div.optionBox").each(function() {
                        $(this).bind('mouseover', function() {
                           $(this).addClass('optionBox_hover'); 
                        });
                        $(this).bind('mouseout', function() {
                           $(this).removeClass('optionBox_hover'); 
                        });
                        $(this).bind('click', function() {                
                            var indentifier = $(this).attr('id').substring(((10 + uniqtime.length) + 1));
                            $("#" + uniqtime + "_valueBox").html(_collection[indentifier].txt);
                            $("#" + uniqtime + "_dropBox").remove();
                            $("select[name='" + selectName + "']").attr("selected", false);
                            $("select[name='" + selectName + "'] option[value='" + _collection[indentifier].val + "']").attr("selected", true);
                            
                            // de standaard change handler triggered niet in deze configuratie... vuur handmatig
                            $("select[name='" + selectName + "']").trigger("change");
                            
                            $_isopen = false;
                        });
                    });
                    
                    _isopen = true;
                }
            });
            
            // We gaan het object hidden
            $(this).css('display', 'none');
        });
    }
})(jQuery);