(function($){
    $.fn.customSelect = function(opts){
        var opts = opts || {};
        var classAttr = opts.classAttr || 'customSelect';
        var scrbarW = opts.scrollbarW || 10;
        
        
        $(this).each(function(){
            var $sel = $(this);
            var $selected = ($sel.find('option:selected').length) ? $sel.find('option:selected') : $sel.find('option:first');
            var $option = ($sel.find('option:selected').length) ? $sel.find('option:selected') : $sel.find('option:first');
            var $cs = $('<div id="'+$sel.attr('name')+'" class="'+classAttr+' cs"></div>');
            var $ul = $('<ul></ul>');
            var $title = $('<div class="title"><span>'+$selected.text()+'</span><div class="arrow"></div></div>');
            var $hasFocusElems = $('a, input, select, textarea').filter(function(){return !$(this).equals($sel);});
            
            function openCS(){
                    $('.cs').css({
                        overflow: 'hidden',
                        'z-index': 5
                    });
                    $cs.css({
                        'overflow': 'visible',
                        'z-index': '6' 
                    });
                    var pos=$ul.find('li.active').position();
                    $ul[0].scrollTo(pos.top);
            };
            
            function closeCS(){
                
                $option = $sel.find('option[value='+$cs.find('li.active').attr('id')+']');
                $option.attr('selected','selected');
                if (!$option.equals($selected)) {
                    $sel.trigger('change');
                }
                $selected = $sel.find('option:selected');
                $title.find('span:first').text($sel.find('option:selected').text());
                $cs.css({
                    'overflow': 'hidden',
                    'z-index': '5' 
                });
            };
            
            
            $sel.focus(openCS);
            $hasFocusElems.focus(function(){
                $cs.css({
                    'overflow': 'hidden',
                    'z-index': '5' 
                });
            });
            
            
            
            $sel.find('option').each(function(){
                var $op = $(this); 
                var ico=($op.hasClass('isOnlineBindable'))?'<img src="Modules/Images/ico_online.png" class="pngFix" alt="" title="" />':'';
                var $li=$('<li id="'+$op.val()+'">'+$op.text()+ico+'</li>');
                if ($(this).is(':selected')) $li.addClass('active');
                $ul.append($li);
                
            }).end().css({
                position: 'absolute',
                zIndex: -1000,
                opacity: 0,
                left: -10000
            });
            
            $cs.append($title).append($ul).insertBefore($sel).hover(
                function(){
                    $(this).addClass('hovered');
                },
                function(){
                    $(this).removeClass('hovered');
                }
            );
            
            $title.click(function(){
                if($cs.css('overflow')=='hidden'){
                    openCS();
                }else{
                    closeCS();
                }
            });
            
            var ww=$cs.outerWidth()-parseInt($cs.css('border-left-width'))-parseInt($cs.css('border-right-width'));
            if (ww<10) ww=100;
            if ($ul.height()>200) $ul.css({height: '200px'})
            $ul.css({
                position: 'absolute',
                left: 0-parseInt($cs.css('border-left-width')),
                width: ww+"px"
            }).find('li').hover(
                function(){
                    $(this).siblings().removeClass('selected');
                    $(this).addClass('selected');
                },
                function(){
                    $(this).removeClass('selected');
                }
            ).click(function(){
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                closeCS();
            }).end().find('li:first').addClass('first').end().find('li:last').addClass('last').end();
            
            $ul.jScrollPane({showArrows:true,scrollbarWidth: scrbarW});

            $('.jScrollPaneContainer').css('z-index', '5');
            
            $(document).keyup(function(e){
                if ($cs.css('overflow')=='visible') {
                    switch (e.keyCode) {
                        case 38:
                            if($cs.find('li.selected').length<1){
                                $cs.find('li:last').addClass('selected');
                            }
                            else if ($cs.find('li.selected').prev().length < 1) {
                                $cs.find('li:first').removeClass('selected');
                                $cs.find('li:last').addClass('selected')
                            }
                            else if($cs.find('li.selected').prev().length>0){
                                $cs.find('li.selected').prev().addClass('selected');
                                $cs.find('li.selected').next().removeClass('selected');
                                
                            }
                        break;
                        case 40:
                            if($cs.find('li.selected').length<1){
                                $cs.find('li:first').addClass('selected');
                            }
                            else if ($cs.find('li.selected').next().length < 1) {
                                $cs.find('li:last').removeClass('selected');
                                $cs.find('li:first').addClass('selected')
                            }
                            else if($cs.find('li.selected').next().length>0){
                                $cs.find('li.selected').next().addClass('selected');
                                $cs.find('li.selected').prev().removeClass('selected');
                            }
                        break;
                        case 13:
                            $cs.find('li').siblings().removeClass('active');
                            $cs.find('li.selected').addClass('active'); 
                            closeCS();
                        break;
                    }
                    
                }
            }).keydown(function(e){
                if ($cs.css('overflow') == 'visible') {
                    if(e.keyCode==38 || e.keyCode==40){
                        e.preventDefault();
                        e.stopPropagation();
                        return false;
                    }
                }
            });
            
            
            
           $().click(function(ev){
                $cs.attr('clk',0);
                $cs.find("*").each(function(){
                    if (this == ev.target) {
                        $cs.attr('clk',1);
                        return false;
                    }
                });
                if ($cs.attr('clk')==0 && $cs.css('overflow')!='hidden') {
                    closeCS();
                }
                ev.stopPropagation();
            });
        
      
        // csak union begin
        updateOptionItems();
        // csak union end
        
        });
        
       
        
        
        return $('.'+classAttr); 
        
        
    };
})(jQuery);