function add_select(name)
{
    $label = $('.'+name);
    $('ul.'+name+'_list li').hover(
        function(){$(this).addClass('hover')},
        function(){$(this).removeClass('hover')}
    );

    $('.' + name + ', ' + '.' + name + '_but').click(function() {
        if($('div.'+name+'_list').css('display') == 'none') {
            $(document).bind('click', function (e) {
                var offset = $('div.' + name + '_list').offset();

                if (e.pageX > offset.left && e.pageX < (offset.left + $('div.' + name + '_list').width())
                    && e.pageY > (offset.top - $('.SRCH_SECTION_sel').height()) && e.pageY < (offset.top + $('div.' + name + '_list').height())) {
                    return false;
                } else {
                    $('div.'+name+'_list').css('display', 'none');
                    $(document).unbind('click');
                }
            });

            $('div.'+name+'_list').css('display', 'block');
        } else {
            $('div.'+name+'_list').css('display', 'none');
            $(document).unbind('click');
        }
    });

    $('ul.'+name+'_list li').click(function() {
        $('#'+name+'_hid').attr('value', $(this).attr('value'));
        $('.'+name+' div').html($(this).html());
        $('div.'+name+'_list').css('display', 'none');
        $(document).unbind('click');
    });
}

function replaceSelect(elementId, customClass)
{
    var $select = $('#' + elementId);
    var $default = $select.find('option[selected=\'selected\']:eq(0)');
    var defaultValue;
    var defaultCaption;
    var defaultEmpty = false;
    var elementClass = elementId;
    //var elementClass = $select.attr('name');

    if ($default.length == 0) {
        $default = $select.find('option:eq(0)');
    }

    if ($default.length == 0) {
        var defaultValue = '';
        var defaultCaption = '(Пусто)';
        defaultEmpty = true;
    } else {
        var defaultValue = $default.attr('value');
        var defaultCaption = $default.html();
    }

    var $options = $select.find('option');
    var optionsHtml = '';

    for (var i = 0; i < $options.length; i++) {
        //optionsHtml += '<li value="' + $options.eq(i).attr('value') + '"id="' + $select.attr('name') + '_value_' + defaultValue + '">' + $options.eq(i).html() + '</option>' + "\n";
        optionsHtml += '<li id="' + elementClass + '_value_' + $options.eq(i).attr('value') + '">' + $options.eq(i).html() + '</li>' + "\n";
    }

    var html = '<table class="itc_select_sel ' + elementClass + '_sel">' + "\n"
             + '    <tr>' + "\n"
             + '        <td><div class="itc_select ' + elementClass + '"><div title="' + defaultCaption + '">' + defaultCaption + '</div></div></td>' + "\n"
             + '        <td><img class="itc_select_but ' + elementClass + '_but" src="/images/select_but.gif" width="20" height="36"/></td>' + "\n"
             + '    </tr>' + "\n"
             + '</table>' + "\n"
             + '<input type="hidden" name="' + $select.attr('name') + '" id="' + elementClass + '_hid" value="' + defaultValue + '"/>' + "\n"
             + '<div class="itc_select_list ' + elementClass + '_list">' + "\n"
             + '    <ul class="itc_select_list ' + elementClass + '_list">' + "\n"
             //+ (defaultEmpty == true ? '        <li value="' + defaultValue + '">' + defaultCaption + '</li>' + "\n" : '')
             + (defaultEmpty == true ? '        <li id="' + elementClass + '_value_' + defaultValue + '">' + defaultCaption + '</li>' + "\n" : '')
             + optionsHtml
             + '    </ul>' + "\n"
             + '</div>' + "\n";

    $select.replaceWith(html);

    $label = $('.' + $select.attr('name'));

    $('ul.' + elementClass + '_list li').hover(
        function(){$(this).addClass('hover')},
        function(){$(this).removeClass('hover')}
    );

    $('.' + elementClass + ', ' + '.' + elementClass + '_but').click(function() {
        if($('div.' + elementClass + '_list').css('display') == 'none') {
            $(document).bind('click', function (e) {
                var offset = $('div.' + elementClass + '_list').offset();

                if (e.pageX > offset.left && e.pageX < (offset.left + $('div.' + elementClass + '_list').width())
                    && e.pageY > (offset.top - $('.' + elementClass + '_sel').height()) && e.pageY < (offset.top + $('div.' + elementClass + '_list').height())) {
                    return false;
                } else {
                    $('div.' + elementClass + '_list').css('display', 'none');
                    $(document).unbind('click');
                }
            });

            $('div.' + elementClass + '_list').css('display', 'block');
        } else {
            $('div.' + elementClass + '_list').css('display', 'none');
            $(document).unbind('click');
        }
    });

    $('ul.' + elementClass + '_list li').click(function() {
        var value = $(this).attr('id').substr((elementClass + '_value_').length);
        console.log(value);
        //$('#' + $select.attr('name') + '_hid').attr('value', $(this).attr('value'));
        $('#' + elementClass + '_hid').attr('value', value);
        $('.' + elementClass + ' div').html($(this).html());
        $('div.' + elementClass + '_list').css('display', 'none');
        $(document).unbind('click');
    });

}

/*
onOpen - перед показом дропдауна. return false - не показывать меню
onClose(eventBy) - перед скрытием дропдауна. return false - не скрывать меню
onChange(oldValue, newValue) - клик по значению из списка. return false - не скрывать меню после выбора(напр., если выбран всё тот же пункт или запрещенный пункт меню)

eventBy:
 document - клик мимо дропдауна;
 control - клик по контролу(иконка или поле с текущим значением);
 option - клик по пункту из списка

*/
(function ($) {
    $.fn.replaceSelect = function (userOptions) {
        var options = {
            // Префикс стилей кастомизованного селекта
            cssPrefix: "itc_select",
            // Картинка для кнопки селекта
            dropdownImage: "/images/select_but.gif",
            // События
            onOpen: function () {},
            onClose: function () {},
            onChange: function () {}
        };

        $.extend(options, userOptions);

        $(this).each(function () {
            if ($(this).get(0).tagName.toLowerCase() != 'select') {
                return false;
            }

            createSelect(options, $(this).attr('id'));
        });

        function createSelect(options, elementId)
        {
            var $select = $('#' + elementId);
            var defaultValue;
            var defaultCaption;
            var defaultEmpty = false;
            var elementClass = elementId;

            // Определяем значение для селекта по умолчанию. <option selected="selected">
            var $default = $select.find('option[selected]:eq(0)');

            // Значения нет, берем первое из опшэнов
            if ($default.length == 0) {
                $default = $select.find('option:eq(0)');
            }

            // Опшэнов нет, пихаем текст-заглушку
            if ($default.length == 0) {
                var defaultValue = '';
                var defaultCaption = '(Пусто)';
                defaultEmpty = true;
            } else {
                var defaultValue = $default.attr('value');
                var defaultCaption = $default.html();
            }

            // Получаем все option из селекта, строим li-список. Value пишется в айди, надпись - в текстовую ноду
            var $options = $select.find('option');
            var optionsHtml = '';

            for (var i = 0; i < $options.length; i++) {
                optionsHtml += '<li id="' + elementClass + '_value_' + $options.eq(i).attr('value') + '">' + $options.eq(i).html() + '</li>' + "\n";
            }

            // Генерируем код для замены стандартного селекта
            var html = '<table cellpadding="0" cellspacing="0" border="0" class="' + options.cssPrefix + '_sel" id="' + elementClass + '_sel">' + "\n"
                     + '    <tr>' + "\n"
                     + '        <td><div class="' + options.cssPrefix + '" id="' + elementClass + '"><div title="' + defaultCaption + '">' + defaultCaption + '</div></div></td>' + "\n"
                     + '        <td><img class="' + options.cssPrefix + '_but" id="' + elementClass + '_but" src="' + options.dropdownImage + '"/></td>' + "\n"
                     + '    </tr>' + "\n"
                     + '</table>' + "\n"
                     + '<input type="hidden" name="' + $select.attr('name') + '" id="' + elementClass + '_hidden" value="' + defaultValue + '"/>' + "\n"
                     + '<div class="' + options.cssPrefix + '_list" id="' + elementClass + '_list">' + "\n"
                     + '    <ul class="' + options.cssPrefix + '_list" id="' + elementClass + '_list_ul">' + "\n"
                     + (defaultEmpty == true ? '        <li id="' + elementClass + '_value_' + defaultValue + '">' + defaultCaption + '</li>' + "\n" : '')
                     + optionsHtml
                     + '    </ul>' + "\n"
                     + '</div>' + "\n";

            $select.replaceWith(html);

            $label = $('.' + $select.attr('name'));

            // Вешаем клик на картинку-кнопку и див с контейнером для текстового значения
            $('#' + elementClass + ', ' + '#' + elementClass + '_but').click(function() {
                if($('#' + elementClass + '_list').css('display') == 'none') {
                    $(document).bind('click', function (e) {
                        var offset = $('#' + elementClass + '_list').offset();

                        if (e.pageX > offset.left && e.pageX < (offset.left + $('#' + elementClass + '_list').width())
                            && e.pageY > (offset.top - $('#' + elementClass + '_sel').height()) && e.pageY < (offset.top + $('#' + elementClass + '_list').height())) {
                            return false;
                        } else {
                            if (options.onClose('document') != false) {
                                closeSelect(elementClass);
                            }
                        }
                    });

                    if (options.onOpen() != false) {
                        $('#' + elementClass + '_list').css('display', 'block');
                    }
                } else {
                    if (options.onClose('control') != false) {
                        closeSelect(elementClass);
                    }
                }
            });

            $('#' + elementClass + ', ' + '#' + elementClass + '_but').hover(function () {
                $('#' + elementClass + ', ' + '#' + elementClass + '_but').addClass('hover');
            }, function () {
                $('#' + elementClass + ', ' + '#' + elementClass + '_but').removeClass('hover');
            });

            // Выбор пункта из меню
            $('#' + elementClass + '_list_ul li').click(function() {
                var newValue = $(this).attr('id').substr((elementClass + '_value_').length);

                if (options.onChange({name: $('#' + elementClass + ' div').html(), value: $('#' + elementClass + '_hidden').attr('value')}, {name: $(this).html(), value: newValue}) != false) {
                    $('#' + elementClass + '_hidden').attr('value', newValue);
                    $('#' + elementClass + ' div').html($(this).html());
                }

                if (options.onClose('option') != false) {
                    closeSelect(elementClass);
                }
            });

            $('#' + elementClass + '_list_ul li').hover(
                function(){$(this).addClass('hover')},
                function(){$(this).removeClass('hover')}
            );
        };

        function closeSelect(elementClass, eventBy)
        {
            $('#' + elementClass + '_list').css('display', 'none');
            $(document).unbind('click');
        }
    };
})(jQuery);