(function($) {

$.fn.tokenInput = function (url, options) {
    var settings = $.extend({
        url: url,
        id:'',
        select : false,
        onselected : '',
        onAddNew:'',
        hintText: "Tìm kiếm theo tên",
        noResultsText: "Không tìm thấy...",
        searchingText: "Đang tìm kiếm...",
        errorText:'Lỗi !!!',
        urlInsert:"rat moi",
        inputvalue: 'tai sao',
        width:0,
        type:'0',
        value: "",
        searchDelay: 100,
        minChars: 0,
        tokenLimit: null,
        jsonContainer: null,
        method: "GET",
        contentType: "json",
        queryParam: "q",
        onResult: null,
        onkeyup :'',
        onkeydown :'',
        onblur:'',
        focus: false ,
        onkeyup:''
    }, options);

    settings.classes = $.extend({
        tokenList: "token-input-list",
        token: "token-input-token",
        tokenDelete: "token-input-delete-token",
        selectedToken: "token-input-selected-token",
        highlightedToken: "token-input-highlighted-token",
        dropdown: "token-input-dropdown",
        dropdownItem: "token-input-dropdown-item",
        dropdownItem2: "token-input-dropdown-item2",
        selectedDropdownItem: "token-input-selected-dropdown-item",
        inputToken: "token-input-input-token",
        tokenList_focus: "token-input-list_focus"
    },  options.classes);

    return this.each(function () {
        var list = new $.TokenList(this, settings);
    });
};

$.fn.setFocus = function()
{
    this.each(function(){
        var t = this ;
        //alert($(t).css('display'))
        var input = $(t).next().find('li:eq(0)').find('input:eq(0)') ;
              
        //alert(input.val());
        input.focus();
    });
} ;


// Really basic cache for the results

var count = 1;

$.TokenList = function (input, settings) {
    //
    // Variables
    //

    // Input box position "enum"
    var POSITION = {
        BEFORE: 0,
        AFTER: 1,
        END: 2
    };
    
    // Keys "enum"
    var KEY = {
        BACKSPACE: 8,
        RETURN: 13,
        LEFT: 37,
        UP: 38,
        RIGHT: 39,
        DOWN: 40,
        ESC:27
    };
    
    // Save the tokens
    var saved_tokens = [];
    var tokenPopUp = jQuery('#tokenPopupContainer');
    // Basic cache to save on db hits
    
    

    // Keep track of the timeout
    var timeout;
    
    var cache = new $.TokenList.Cache();

     //show_dropdown_searching();
    //clearTimeout(timeout);
    //timeout = setTimeout(do_search, settings.searchDelay);
    // Keep a reference to the original input box
    
    var hidden_input = $(input)
                           .css('display','none')
                           .val("")
                           .attr('ma',settings.id)
                           .attr('value',settings.value)
   
    // The list to store the token items in
    
    var token_list = $("<ul />")
        .addClass(settings.classes.tokenList)
        .insertAfter(hidden_input)
        
        .click(function (event) {
        
            var li = get_element_from_event(event, "li");
            if(li && li.get(0) != input_token.get(0)) {
                toggle_select_token(li);
                return false;
            } else {
                input_box.focus();
            
                if(selected_token) {
                    deselect_token($(selected_token), POSITION.END);
                }
            }
        })
        
        .mouseover(function (event) {
            var li = get_element_from_event(event, "li");
            if(li && selected_token !== this) {
                li.addClass(settings.classes.highlightedToken);
            }
        })
        .mouseout(function (event) {
            var li = get_element_from_event(event, "li");
            if(li && selected_token !== this) {
                li.removeClass(settings.classes.highlightedToken);
            }
        })
        .mousedown(function (event) {
            // Stop user selecting text on tokens
            var li = get_element_from_event(event, "li");
            if(li){
                return false;
            }
        });

    
    
    var w ;
    if(parseInt(settings.width) > 0)
    {
       w = (parseFloat((settings.width-18).toString())/parseFloat(settings.width.toString())*100 - parseFloat('6')).toString()+"%" ;      
    }
    else if(token_list.width()>120)
    {
        w = (parseFloat((token_list.width()-18).toString())/parseFloat(token_list.width().toString())*100 - parseFloat('6')).toString()+"%" ;
    }
    else 
    {
        w = 65 +"%";
    }
    
    // Create a new text input an attach keyup events
    var input_box = $("<input type=\"text\">")
        .css('width',w)
        .css('float','left')
        .css('margin','0')
        .attr('value',settings.value)
        .focus(function(e){
            token_list.removeClass(settings.classes.tokenList);
            token_list.addClass(settings.classes.tokenList_focus)
            
        })
        .blur(function () {
            token_list.removeClass(settings.classes.tokenList_focus);
            token_list.addClass(settings.classes.tokenList)
            hide_dropdown();
        })
        .keydown(function (event) {
            var previous_token;
            var next_token;
            
            switch(event.keyCode) {
               
                case KEY.UP:
                   
                case KEY.DOWN:
                        var dropdown_item = null;
                       
                        if(event.keyCode == KEY.DOWN || event.keyCode == KEY.RIGHT) {
                             
                            dropdown_item = $(selected_dropdown_item).next();
                            if(selected_dropdown_item && !settings.select) {
                                if(count == 2)
                                {
                                    add_token_sug( $(selected_dropdown_item));
                                }
                                else 
                                {
                                    add_token_sug( $(selected_dropdown_item).next());
                                }
                                
                            }
                            
                        } else {
                                                
                            dropdown_item = $(selected_dropdown_item).prev();
                            
                            if(selected_dropdown_item && !settings.select) {
                                if(count == 2)
                                {
                                    add_token_sug( $(selected_dropdown_item));
                                }
                                else 
                                {
                                    add_token_sug( $(selected_dropdown_item).prev());
                                }
                            }
                        }

                        if(dropdown_item.length) {
                            select_dropdown_item(dropdown_item);
                        }
                        return false;
                   
                    break;

                case KEY.BACKSPACE:
                   
                    previous_token = input_token.prev();
                    
                    if(!$(this).val().length) {
                        
                        if(selected_token) {
                            delete_token($(selected_token));
                        } else if(previous_token.length) {
                            select_token($(previous_token.get(0)));
                        }

                        return false;
                    } else if($(this).val().length == 1) {
                        hide_dropdown();
                    } else {
                        // set a timeout just long enough to let this function finish.
                        setTimeout(function(){do_search(false);}, 5);
                    }
                    break;
                    
                case KEY.TAB:
                case KEY.RETURN:
                    if(hidden_input.attr('ma') == '')
                    {
                        alert(settings.errorText);
                        return ;
                    }
                    
                    if(selected_dropdown_item) {
                        add_token_suggestion($(selected_dropdown_item));
                       // return false;
                    }
                    else if(event.keyCode != 8)
                    {
                        if ($.isFunction(settings.onselected)) {
                            settings.onselected(hidden_input.attr('ma'));                       
                        }; 
                    }
                    break;
                case KEY.COMMA:
                  if(selected_dropdown_item) {
                    add_token_suggestion($(selected_dropdown_item));
                    return false;
                  }
                  break;

                case KEY.ESC:
                  hide_dropdown();
                  return true;

                default:
                    if(is_printable_character(event.keyCode)) {
                      // set a timeout just long enough to let this function finish.
                      setTimeout(function(){do_search(false);}, 5);
                      
                    }
                    
                    
                    break;
            }
        });
    
    //input_box.focus();
    
   hidden_input.focus(function () {
                   input_box.focus();
               })
               .blur(function () {
                   input_box.blur();
               })
               .val("");

    //input_box.focus();
    
    if ($.isFunction(settings.onkeyup)) {
            
            input_box.keydown(function(e){
                settings.onkeyup(e);                       
            });                        
    }
   //-------------onblur -----------------------
    if ($.isFunction(settings.onblur)){
            input_box.blur(function(){
                settings.onblur();                       
            });                        
    }   
   
   
   

    // Keep a reference to the selected token and dropdown item
    var selected_token = null;
    var selected_dropdown_item = null;
    
    var w1 = (settings.width).toString()  +'px' ;
    
  

    // The list to store the dropdown items in
    var dropdown = $("<div>")
        .addClass(settings.classes.dropdown)
        .css('overflow','auto')
        .insertAfter(token_list)
        .hide();
        
    
    var _span = $("<a href=\"#\"></a>")
            .addClass('listSearch')
            .attr('href','javascript: void(0)')
            .blur(function () {
                dropdown.empty();
                dropdown.hide();  
                selected_dropdown_item = null;              
            })
            .focus(function () {
                if (settings.tokenLimit == null || settings.tokenLimit != token_count) {
                        //show_dropdown_hint();
                }
            })
            .click(function () {
                if(dropdown.html()=='')
                {
                    do_search(true);
                }
                else 
                {
                    dropdown.empty();
                    dropdown.hide();  
                    selected_dropdown_item = null;              
                }
            });
    
    var themmoi = $("<a href=\"#\">Thêm mới</a>")
                    .css('color','blue')
                    .css('float','left');
                    
    if ($.isFunction(settings.onkeyup)) {
        input_box.keyup(function(e){
            settings.onkeyup(e);                       
        });                        
    }
  
    var input_token = $("<li />")
        .addClass(settings.classes.inputToken)
        .appendTo(token_list)
        .append(input_box)
        .append(_span);
     
    //---------------------------------------------------------------------------------
    
    function is_printable_character(keycode) {
        if((keycode >= 48 && keycode <= 90) ||      // 0-1a-z
           (keycode >= 96 && keycode <= 111) ||     // numpad 0-9 + - / * .
           (keycode >= 186 && keycode <= 192) ||    // ; = , - . / ^
           (keycode >= 219 && keycode <= 222)       // ( \ ) '
          ) {
              return true;
          } else {
              return false;
          }
    }

    // Get an element of a particular type from an event (click/mouseover etc)
    function get_element_from_event (event, element_type) {
        var target = $(event.target);
        var element = null;

        if(target.is(element_type)) {
            element = target;
        } else if(target.parent(element_type).length) {
            element = target.parent(element_type+":first");
        }

        return element;
    }
    
    
    // -------- add token ---------------------------------------
    
    function add_token_inbox(item)
    {
        var li_data = $.data(item.get(0), "tokeninput");
        input_box.val(li_data.name);
        if(settings.type == '3')
        {
            ma_conn = li_data.name ;
        }
        else if(settings.type == '4')
        {
            username = li_data.name ;
        }
        //alert(ma_conn);
    }
        
    function add_token_sug(item)
    {
         var li_data = $.data(item.get(0), "tokeninput"); 
         if(li_data == null)
         {
            return false ;
         }
         
         var this_token = $("<li>"+ li_data.name +"</li>")
        
        //input_token
         input_box.val(li_data.name);     
         hidden_input.attr('ma',li_data.id); 
         hidden_input.val(li_data.name);        
                   
    }  
    
  //---------them suggestion ------------------------------------------------------
    function add_token_suggestion(item)
    {
         var li_data = $.data(item.get(0), "tokeninput"); 
         
         if(li_data == null)
         {
            return false ;
         }
         var this_token = $("<li>"+ li_data.name +"</li>")
        
        //input_token
         input_box.val(li_data.name);     
         hidden_input.attr('ma',li_data.id); 
         hidden_input.val(li_data.name);        
         input_box           
           .focus();
            
         hide_dropdown();   
         if ($.isFunction(settings.onselected)) {
             settings.onselected(li_data.id);                       
         };                        
           
    }  
    
    
    //load pop up infomation
    function load_Popup(id)
    {
        $.post(settings.ulrPopUp, {"id": id },function(data){
           jQuery('#tokenPopupContent').html(data);
        });
    }
    
    // Select a token in the token list
    function select_token (token) {
        token.addClass(settings.classes.selectedToken);
        selected_token = token.get(0);

        // Hide input box
        input_box.val("");
        
        // Hide dropdown if it is visible (eg if we clicked to select token)
        hide_dropdown();
    }

    // Deselect a token in the token list
    function deselect_token(token, position) {
        token.removeClass(settings.classes.selectedToken);
        selected_token = null;

        if(position == POSITION.BEFORE) {
            input_token.insertBefore(token);
        } else if(position == POSITION.AFTER) {
            input_token.insertAfter(token);
        } else {
            input_token.appendTo(token_list);
        }

        // Show the input box and give it focus again
        input_box.focus();
    }
    
    // Toggle selection of a token in the token list
    function toggle_select_token (token) {
        if(selected_token == token.get(0)) {
            deselect_token(token, POSITION.END);
        } else {
            if(selected_token) {
                deselect_token($(selected_token), POSITION.END);
            }
            select_token(token);
        }
    }
    
    // Delete a token from the token list
    function delete_token (token) {
         // Remove the id from the saved list
         var token_data = $.data(token.get(0), "tokeninput");
        // alert(token_data.id); 
        //saved_tokens.splice($.inArray(saved_tokens, token_data.id), 1);
        
         var _url = settings.urlDelete ; 
         _url = _url + token_data.id ;    
       
         var query = input_box.val().toLowerCase();
       
         
         jQuery.ajax({
            url:_url,
            type:'GET',
            success: function(data)
            {
                cache.removeAll() ;          
            },
            error: function(data){
                alert(data);
            }
         
         });
        
        // Delete the token
        token.remove();
        selected_token = null;

        // Show the input box and give it focus again
        input_box.focus();

        // Delete this token's id from hidden input
        var str = hidden_input.val()
        var start = str.indexOf(token_data.id+",");
        var end = str.indexOf(",", start) + 1;

        if(end >= str.length) {
            hidden_input.val(str.slice(0, start));
        } else {
            hidden_input.val(str.slice(0, start) + str.slice(end, str.length));
        }
    }

    // Hide and clear the results dropdown
    function hide_dropdown () {
        dropdown.hide().empty();
        selected_dropdown_item = null;
    }
    
    function show_dropdown_searching () {
        dropdown
            .html("<p>"+settings.searchingText+"</p>")
            .show();
           
    }
   

    // Highlight the query part of the search term
	function highlight_term(value, term) {
		return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<em>$1</em>");
	}
	
	
	 // Hide and clear the results dropdown
    function hide_dropdown () {
        dropdown.hide().empty();
        selected_dropdown_item = null;
        //cache.removeAll();   
    }

    function show_dropdown_searching () {
        dropdown
            .html("<p>"+settings.searchingText+"</p>")
            .show();
    }

    function show_dropdown_hint () {
        dropdown
            .html("<p>"+settings.hintText+"</p>")
            .show();
    }

    // Highlight the query part of the search term
	function highlight_term(value, term) {
		return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
	}

    // Populate the results dropdown with some results
    function populate_dropdown (query, results) {
        var width ='' ;
        width = token_list.css('width');
        
        width = width.substring(0,width.length - 2);
        var w = parseInt(width);
       
        dropdown.css('width',w+20+'px');
        
        count = 1;
        if(results.length) {
            dropdown.empty();
            
            var dropdown_ul = $("<ul>")
                .appendTo(dropdown)
                .mouseover(function (event) {
                    select_dropdown_item(get_element_from_event(event, "li"));
                })
                .click(function (event) {
                    add_token_suggestion(get_element_from_event(event, "li"));
                })
                .mousedown(function (event) {
                    // Stop user selecting text on tokens
                    return false;
                })
                .hide();

            for(var i in results) {
                if (results.hasOwnProperty(i)) {
                    var this_li = $("<li>"+highlight_term(results[i].name, query)+"</li>")
                                      .appendTo(dropdown_ul);
        
                    if(i%2) {
                        this_li.addClass(settings.classes.dropdownItem);
                    } else {
                        this_li.addClass(settings.classes.dropdownItem2);
                    }

                    if(i == 0) 
                    {
                        select_dropdown_item(this_li);
                        hidden_input.attr('ma',results[i].id);
                        //input_box.val(results[i].name);
                    }
                    
                    $.data(this_li.get(0), "tokeninput", {"id": results[i].id, "name": results[i].name});
                    count += 1;
                }
            }  

            dropdown.show();
            dropdown_ul.slideDown("fast");

        } else {
            count = 0 ;
            hidden_input.attr('ma','');
            
            dropdown
                .css('width','150px')
                .html("<p><span style='float:left;'>"+settings.noResultsText+"&nbsp; &nbsp; &nbsp;</span></p>")
                .show();
            
            
            dropdown.find('p').append(themmoi);    
            
            themmoi.mousedown(function (event) {
               if ($.isFunction(settings.onAddNew)) {
                    cache.removeAll();  
                    settings.onAddNew(input_box.val());                       
               }
            }) ;
                
        }
    }

    // Highlight an item in the results dropdown
    function select_dropdown_item (item) {
        if(item) {
            if(selected_dropdown_item) {
                deselect_dropdown_item($(selected_dropdown_item));
            }

            item.addClass(settings.classes.selectedDropdownItem);
            selected_dropdown_item = item.get(0);
        }
    }

    // Remove highlighting from an item in the results dropdown
    function deselect_dropdown_item (item) {
        item.removeClass(settings.classes.selectedDropdownItem);
        selected_dropdown_item = null;
    }
    

    // Do a search and show the "searching" dropdown if the input is longer
    // than settings.minChars
    function do_search(immediate) {
        var query = input_box.val().toLowerCase();
        //alert(query.length);
        if (query || query == '') {
            //alert(query.length);
            if (query.length >= settings.minChars) {
                //show_dropdown_searching();
                //alert(query.length);
                if (immediate) {
                    
                    run_search('');
                    
                } else {
                    clearTimeout(timeout); 
                    timeout = setTimeout(function(){run_search(query);}, settings.searchDelay);
                    //alert(query.length);
                }
            } else {
                hide_dropdown();
            }
        }
    }

    
    // Do the actual search
    function run_search(query) {
        var cached_results = cache.get(query);
        if(cached_results) {
            populate_dropdown(query, cached_results);
        } else {
			var queryStringDelimiter = settings.url.indexOf("?") < 0 ? "?" : "&";
			var callback = function(results) {
			  if($.isFunction(settings.onResult)) {
			      results = settings.onResult.call(this, results);
			  }
              cache.add(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
              populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
            };
            
            if(settings.method == "POST") {
			    $.post(settings.url + queryStringDelimiter + settings.queryParam + "=" + query, {}, callback, settings.contentType);
		    } else {
		        $.get(settings.url + queryStringDelimiter + settings.queryParam + "=" + query, {}, callback, settings.contentType);
		    }
        }
    }
    
    
};

$.TokenList.Cache = function (options) {
        var settings = $.extend({
            max_size: 50
        }, options);

        var data = {};
        var size = 0;

        var flush = function () {
            data = {};
            size = 0;
        };

        this.add = function (query, results) {
            if(size > settings.max_size) {
                flush();
            }

            if(!data[query]) {
                size++;
            }

            data[query] = results;
        };
        this.removeAll = function()
        {
            flush();
        }

        this.get = function (query) {
            return data[query];
        };
 };




})(jQuery);