(function ($) {

    $.fn.tapdropdown = function (options) {
        var methods = {
            render: function (option, isSelected) {
                return $('<li>', {
                    html: option.text(),
                    className: 'drop-down-item' + (isSelected ? ' selected' : '')
                });
            }
            /*,
            init: function (options) {
            },
            show: function () {
            },
            hide: function () {
            },
            update: function (content) {
            }
            */
        };

        var settings = {
            'className': '',
            'changed': null,
            'leaveSelect': 'true',
            applyHoverFix: false
        };

        return this.each(function () {
            var $this = $(this),
            data = $this.data('tapdropdown'),
            tapdropdown = 'tapdropdown_marker';

            // If options exist, lets merge them with our default settings
            if (options) {
                $.extend(settings, options);
            }

            // If the plugin hasn't been initialized yet
            if (!data) {

                // TapDropDown plugin initialization code

                // add initialization marker to exclude reinitialization
                $this.data('tapdropdown', {
                    target: $this,
                    tapdropdown: tapdropdown
                });

                $this.change(function (ev) {
                    if (settings.changed && typeof (settings.changed) === 'function') {
                        settings.changed(ev, ev.attr('value'));
                    }
                });

                initialize($this);
            }

        });

        function initialize(select) {
            var selectBoxContainer = $('<div>', {
                //width: select.outerWidth(),
                className: 'tap-select',
                html: '<span class="select-box">\
	                        <span class="select-box-left">\
		                        <span class="select-box-right">\
			                        <span class="center"><span class="title">By Model Number</span></span>\
		                        </span>\
	                        </span>\
	                        <span class="list">\
	                        </span>\
                        </span> '
            });


            var dropDown = $('<ul>', { className: 'drop-down' });
            var selectBox = selectBoxContainer.find('.select-box');
            var selectList = selectBox.find('.list');

            if (settings.className) {
                selectBoxContainer.addClass(settings.className);
            }

            // loop by select options
            select.find('option').each(function (i) {
                var option = $(this);
                var isSelected = false;
                if (option.is(':selected')) {
                    selectBox.find('.title').html(option.text());
                    isSelected = true;
                }

                // create selection list item
                var li = methods.render(option, isSelected);

                li.click(function (ev) {
                    var $li = $(this);
                    selectBox.find('.title').html($li.text());
                    selectList.hide();
                    selectBox.removeClass('select-box-hover').removeClass('expanded');
                    dropDown.find('li').removeClass('selected');
                    li.addClass('selected');

                    // select original item if possible
                    if (settings.leaveSelect)
                        select.val(option.val());

                    if (settings.changed && typeof (settings.changed) === 'function')
                        settings.changed(ev, { value: option.val(), text: option.text() });

                    return false;
                });

                dropDown.append(li);
            });

            selectBox.find('.list').append(dropDown);
            select.before(selectBoxContainer);
            if (settings.leaveSelect)
                select.hide();
            else
                select.remove();

            selectBox.find('.list').css('select-box-left', selectBox.position().left);

            if ($.browser.msie || settings.applyHoverFix) {
                selectBox.hover(function (ev) {
                    ev.stopPropagation();
                    selectBox.addClass('select-box-hover');
                }, function (ev) {
                    ev.stopPropagation();
                    selectBox.removeClass('select-box-hover');
                });

                dropDown.find('.drop-down-item').hover(function (ev) {
                    ev.stopPropagation();
                    $(this).addClass('select-box-hover');
                }, function (ev) {
                    ev.stopPropagation();
                    $(this).removeClass('select-box-hover');
                });
            }

            selectBox.click(function (ev) {
                ev.stopPropagation();
                if (selectList.is(':visible')) {
                    selectBox.removeClass('expanded');                    
                    selectList.hide();
                }
                else {
                    selectBox.addClass('expanded');
                    selectList.show();
                }
            });

            $(document).click(function (ev) {
                ev.stopPropagation();
                //if (!$(event.target).is('.tap-select')) {
                selectBox.removeClass('expanded');
                selectBox.removeClass('select-box-hover');
                selectList.hide();
                //}                                
            });

        }

    };
})(jQuery);