(function($){
        $.fn.setStyle = function(){
            var select = document.getElementById($(this).attr('id'));
            initStyle(select);
        }
        
        initStyle = function(select){
            var div = '<div id="div_'+ select.id +'" style="cursor: pointer;" class="tag_select">'+ select.options[select.selectedIndex].text +'</div>';
            var ul = '<ul id="ul_'+ select.id +'" style="z-index: 98; position: absolute; display: none;" class="tag_options">';
            var li = '';
            for(var i = 0; i < select.length; i++){
                li += '<li style="cursor: pointer;" v="'+ select.options[i].value +'">'+ select.options[i].text +'</li>';
                ul += li;
            }
            ul += '</ul>';
            $(select).before(div + ul);
            $('#ul_' + select.id).html(li);
            select.style.display = 'none';
            
            // init events
            initEvents(select.id);
        }
        
        initEvents = function(id){
            var select = document.getElementById(id);
            var tp = $(select).attr('tp');
            var divId = 'div_' + id;
            var ulId = 'ul_' + id;
            var clickCount = 0;
            var lis = document.getElementById(ulId).getElementsByTagName('li');
            var serverList;
            // if the div onmouse, set the style named tag_select_hover
            $('#' + divId).mouseover(function(){
                if($(this).attr('class') != 'tag_select_open'){
                    $(this).attr('class', 'tag_select_hover');
                }
            });
            // if the div onmouseover, set the style named tag_select
            $('#' + divId).mouseout(function(){
                if($(this).attr('class') != 'tag_select_open'){
                    $(this).attr('class', 'tag_select');   
                }
            });
            // the div click event
            $('#' + divId).click(function(){
//                clickCount++;
//                if(clickCount % 2 == 0){
//                    clickCount = 0;
//                }else{
//                    clickCount = 1;
//                }
//                // if the div clickCount=1, open; else close
//                if(clickCount == 1){
//                    $(this).attr('class', 'tag_select_open');
//                    var lis = document.getElementById(ulId).getElementsByTagName('li');
//                    for(var j = 0; j < lis.length; j++){
//                        if(lis[j].innerHTML == $(this).html()){
//                            $(lis[j]).attr('class', 'open_selected');
//                        }else{
//                            $(lis[j]).attr('class', 'open');
//                        }
//                    }
//                    $(this).next().slideDown(100);
//                }else{
//                    $(this).attr('class', 'tag_select_hover');
//                    $(this).next().slideUp(100);
//                }
                if($(this).attr('class') == 'tag_select_open'){
                    $(this).attr('class', 'tag_select_hover');
                    $(this).next().slideUp(100);
                }else{
                    $(this).attr('class', 'tag_select_open');
                    var lis = document.getElementById(ulId).getElementsByTagName('li');
                    for(var j = 0; j < lis.length; j++){
                        if(lis[j].innerHTML == $(this).html()){
                            $(lis[j]).attr('class', 'open_selected');
                        }else{
                            $(lis[j]).attr('class', 'open');
                        }
                    }
                    $(this).next().slideDown(100);
                }
            });
            
            // Add events to every li element
            $(lis).each(function(){
                // onmouseover
                $(this).mouseover(function(){
                    $(this).attr('class', 'open_hover');
                });
                // onmouseout
                $(this).mouseout(function(){
                    if($(this).attr('v') == $('#' + id).val()){
                        $(this).attr('class', 'open_selected');
                    }else{
                        $(this).attr('class', 'open');
                    }
                });
                // onclick
                $(this).click(function(){
                    $('#' + id).val($(this).attr('v'));
                    clickCount = 0;
                    $('#' + divId).attr('class', 'tag_select');
                    $('#' + divId).html($(this).html());
                    $('#' + ulId).slideUp(100);
                });
            });
        }
    })(jQuery)
    
    window.onload = function(){
            jQuery('body').click(function(event){
                var obj = event.target;
                if(jQuery.browser.msie){
                    obj = window.event.srcElement;
                }
                if(jQuery(obj).attr('class') != 'tag_select_open'){
                    jQuery('div[class=tag_select_open]').each(function(){jQuery(this).next().hide();jQuery(this).attr('class', 'tag_select')});
                }
            });
        }