(function($){

    $.fn.multiSelect = function(params){
        $(this).each(function(){
        
            var $oldSelect = $(this); 
            var $select = $('<div class="multiSelect"></div>');
            var $selectBox = $('<div class="box"></div>');
            var $optionsContainer = $('<div class="optionsContainer" tabindex="0"></div>');
            
            $select.append($selectBox, $optionsContainer);
            
            $select.insertAfter($oldSelect);
            
            $oldSelect.hide();
            
            var $categoryTree = $('<ul class="simpleTree"></ul>');
            var $li = $('<li class="root"></li>');
            var $treeDescription = $("<span></span>");
            $li.append($treeDescription);
            var $root = $('<ul></ul>');
            
            $optionsContainer.append($categoryTree.append($li.append($root)));
            
            var $children = $oldSelect.children();
            $treeDescription.text($($children[0]).text());
            $selectBox.text($($children[1]).text());
            
            $children.slice(1).each(function(){
                var $option = $(this);
                var $newOption = $('<li id="' + params.nodeIdPrefix + $option.val() + '"><span class="text"> ' + $option.text() + ' </span></li>');
                
                if($option.attr("hasChilds"))
                {
                    $newOption.append('<ul class="ajax"><li>{url:' + params.url + $option.val() + '/}</li></ul>');
                }
                
                $root.append($newOption);
            });
            
            $categoryTree.simpleTree({
                autoclose: true,
                drag: false,
                docToFolderConvert: true,
                afterClick: function(node){
                    $selectBox.text($("span:first", node).text());
                    var value = $(node).attr("id").replace(params.nodeIdPrefix, "");
                    $oldSelect.children().remove();
                    $oldSelect.append('<option>' + value + '</option>');
                    $optionsContainer.hide();

                    if(params.change)
                    {
                        params.change(value);
                    } 
                 
                }
            });
            
            var ignoreBlurClick = false;
            
            $selectBox.click(function(){
            
                if(ignoreBlurClick)
                {
                    return;
                }
                
                $optionsContainer.toggle();
                
                if($optionsContainer.css("display") != "none")
                {
                    $optionsContainer.focus();
                }
            });
            
            $optionsContainer.blur(function()
            {
                ignoreBlurClick = true;
                $(this).hide();
                setTimeout(function()
                {
                    ignoreBlurClick = false;
                }, 100);
            });
        
        });
    }
    
})(jQuery);
