(function($) {

    $.fn.customSelect = function(options) {

        $(document).mousedown(function(event) {
            if ($(event.target).parents('.selectWrapper').length == 0) { hideSelect(); }
        });

        var hideSelect = function() {
            $('.selectDropdown:visible').hide();
        };

        this.each(function() {

            var selectHtml = this;
            var select = $(this);
            var selectDropdown = $('<div class="selectDropdown"></div>');
            var selectDropdownList = $('<ul></ul>');
            var selectText = $('<div class="selectText"></div>');

            var setText = function(text) {
                selectText.text(text);
            };

            select.wrap('<div class="selectWrapper"></div>');
            select.find('option').each(function(index){
                selectDropdownList.append('<li><a href="#" index="'+ index +'">'+ this.text.replace('PAGE', '') +'</a></li>');
                if($(this).attr('selected')) {
                    setText(this.text);
                }
            });

            selectDropdown.width(select.width() + 3);

            selectDropdownList.find('a').each(function(){
                var a = $(this);
                a.click(function(event) {
                    event.preventDefault();
                    event.stopPropagation();

                    $('a.selected', selectDropdownList).removeClass('selected');
                    a.addClass('selected');

                    var tmp = selectHtml.selectedIndex;
                    selectHtml.selectedIndex = a.attr('index');

                    if(a.attr('index') != tmp && options.change) {
                        options.change(select.val(), a.attr('index'));
                    }

                    setText('PAGE '+a.text());
                    selectDropdown.hide();
                });
            });

            selectText.click(function() {
                if (selectDropdown.css('display')=='none'){ hideSelect(); }
                selectDropdown.slideDown();
            });

            selectDropdown.append(selectDropdownList);
            select.after(selectText, selectDropdown);
            selectDropdownList.jScrollPane({
                scrollbarMargin: 0,
                showArrows: true,
                dragMinHeight: 23,
                dragMaxHeight: 23,
                arrowSize: 12
            });

        });
        hideSelect();
    };

})(jQuery);