﻿jQuery(document).ready(function () {
    var select = jQuery('select.makeMeFancy');

    var selectBoxContainer = jQuery('<div>', {
        class: 'tzSelect',
        html: '<div class="selectBox"></div>'
    });
    var dropDown = jQuery('<ul>', { class: 'dropDown' });
    var selectBox = selectBoxContainer.find('.selectBox');
    select.find('option').each(function (i) {
        var option = jQuery(this);
        if (option.is(':selected')) {
            selectBox.html(option.text());
        }
        if (option.data('skip')) {
            return true;
        }
        var li = jQuery('<li>', {
            html: '<img src="' + option.data('icon') + '" /><span>' +
					option.data('html-text') + '</span>'
        });

        li.click(function () {
            selectBox.html(option.text());
            dropDown.trigger('hide');
            select.val(option.val());
            return false;
        });

        dropDown.append(li);
    });

    selectBoxContainer.append(dropDown.hide());
    select.hide().after(selectBoxContainer);
    selectBox.click(function () {
        dropDown.slideToggle(100);
        return false;
    });

    jQuery(document).click(function () {
        dropDown.hide();
    });
});
