// 2013 03 14

// 2013 06 04
    // 再次进行更新，更改名字为MIKETAG
    // 从FLOW模式变成了换行模式
    // 增加了鼠标控制功能
    // 可以用的半成品....

// MIKETAG @samuel shen

// --unfinish 表示没有做完 ，搜索一下看看
// -- WARNNING! 表示担心的问题
;(function($){
    var tags_regist = [];
    var tags_callback = [];

    // mikeTag -- main
    // addtag -- insert a tag -
    // removetag -- remove a tag -
    // importtags -- default tags - 
    // findtag -- 查找标签是否存在 -
    // getalltag

    // 一次添加一个 或者多个
    $.fn.mikeTag_Add = function(value, options){
        // --unfinish
        options = $.extend({'callback':true},options);
        function addOneTag( obj, tagValue, tagID ){
            var id = $(obj).attr('id'),
                tagslist = tags_regist[id]['data'],
                fieldRegex = tags_regist[id]['RegEx'];
            // -- code --
            tagValue = $.trim(tagValue);    // 去除空格
            // if exist ... then do ... else skip...
            // console.log(tagValue);
            if( $(obj).mikeTag_Exist(tagValue) == true ){
                // input 闪烁，插入不进行
                $('#'+id+'-addTag').addClass('failed');

            } else if(tagValue.length > 0) {
                // 修改数据源，进行样式更新
                // 如果有传入id的话就把id写进dom...
                if(fieldRegex!== null){
                    if(fieldRegex.test(tagValue)){
                        $('#'+id+'-addTag').removeClass('failed');
                        if(!tagID){
                            tagID = (function(){
                                return 'tmp-xx-xxx-xx'.replace(/[x]/g,function(){
                                    var num = Math.random()*16|0;
                                    return num.toString(16);
                                }).toUpperCase();
                            })();
                        }
                        // 添加到的位置
                        if(tagValue!=''){
                            var tmpValList = tagValue.split('@'),
                                tmpVal = '';
                            if(tmpValList[0].length > 25){
                                tmpValList[0] = tmpValList[0].substr(tmpValList[0].length-8)+'...';
                            }
                            for (var count in tmpValList) {
                                if(Object.prototype.toString.call(tmpValList[count]) === '[object String]'){
                                    tmpVal += tmpValList[count];
                                    if(tmpValList.length>count+1){
                                        tmpVal+='@';
                                    }
                                }
                            }
                            $('<span>').addClass(tags_regist[id]['tagClass']).append(
                                $('<span>').text(tmpVal).attr({'fullValue':tagValue,'title':tagValue}),
                                $('<a>',{
                                    'href': '#',
                                    'title': 'remove tag',
                                    'text': '',
                                    'class': 'email-remove-tag'
                                }).prepend('&nbsp;&nbsp;').click(function(evt){
                                    //alert($(evt.target).siblings('span').text()); // 获取删除按钮
                                    // console.log($(evt.target).siblings('span').text());
                                    $('#'+id).mikeTag_Remove($(evt.target).siblings('span').text());
                                })
                            ).attr(tags_regist[id]['tagCID'],tagID).insertBefore('#'+id+'-addTag');
                        }

                        $('#'+id+'-tagInput').val('').removeAttr('style');      // 清空输入框
                        // $('#'+id+'-addTag').appendTo('#'+id+'-tagShowWindow').trigger('click');
                        $('#'+id+'-addTag').removeAttr('style');
                        // 修改存储的数据
                        tagslist[tagValue.toLowerCase()] = tagID;
                        // 回调
                        if( tags_callback[id]['onInsert'] && options.callback == true ){
                            var func = tags_callback[id]['onInsert'];
                            func.call( $(obj) ); // 支持对于新增加的标签的回调
                        }
                    } else {
                        $('#'+id+'-addTag').addClass('failed');
                    }
                } else {
                    $('#'+id+'-addTag').removeClass('failed');
                    if(!tagID){
                        tagID = (function(){
                            return 'tmp-xx-xxx-xx'.replace(/[x]/g,function(){
                                var num = Math.random()*16|0;
                                return num.toString(16);
                            }).toUpperCase();
                        })();
                    }
                    // 添加到的位置
                    if(tagValue!=''){
                        var tmpValList = tagValue.split('@'),
                            tmpVal = '';
                        if(tmpValList[0].length > 25){
                            tmpValList[0] = tmpValList[0].substr(tmpValList[0].length-8)+'...';
                        }
                        for (var count in tmpValList) {
                            tmpVal += tmpValList[count];
                        };
                        $('<span>').addClass(tags_regist[id]['tagClass']).append(
                            $('<span>').text(tmpVal).attr({'fullValue':tagValue,'title':tagValue}),
                            $('<a>',{
                                href: '#',
                                title: 'remove tag',
                                text: ''
                            }).prepend('&nbsp;&nbsp;').click(function(evt){
                                //alert($(evt.target).siblings('span').text()); // 获取删除按钮
                                // console.log($(evt.target).siblings('span').text());
                                $('#'+id).mikeTag_Remove($(evt.target).siblings('span').text());
                            })
                        ).attr(tags_regist[id]['tagCID'],tagID).insertBefore('#'+id+'-addTag');
                    }

                    $('#'+id+'-tagInput').val('').removeAttr('style');      // 清空输入框
                    // $('#'+id+'-addTag').appendTo('#'+id+'-tagShowWindow').trigger('click');
                    $('#'+id+'-addTag').removeAttr('style');
                    // 修改存储的数据
                    tagslist[tagValue.toLowerCase()] = tagID;
                    // 回调
                    if( tags_callback[id]['onInsert'] !== undefined && options.callback == true ){
                        var func = tags_callback[id]['onInsert'];
                        func.call( tagObj ); // 支持对于新增加的标签的回调
                    }
                }
            }
        }

        // this.each(function(){
            // 批量进行操作
            var valueType = Object.prototype.toString.call(value),
                obj = this;
            if( valueType === '[object Array]' ){ // 说明是数组类型
                for (var i in value){
                   
                    if(Object.prototype.toString.call(value[i]) === '[object String]'){
                        addOneTag( obj, value[i] );
                    }
                }
            } else if( valueType === '[object Object]' ) {
                // alert('-obj');
                $.each(value,function(name,value){
                    // console.log(name+':'+value);
                    if(Object.prototype.toString.call(value) === '[object String]'){
                        addOneTag( obj, name, value );
                    }
                    
                });
            } else {    // 只添加一个
                addOneTag( obj, value );
            }
        // });
        return this;
    };

    // 一次删除一个 或者多个
    $.fn.mikeTag_Remove = function(value, options){
        options = $.extend({'callback':true},options);
        // -- unfinish
        function removeOneTag(obj, tagValue){
            var id = $(obj).attr('id'),
                tagslist = tags_regist[id]['data'];
            
            if($(obj).mikeTag_Exist(tagValue) == true){
                // 进行删除
                $('#'+id+'-tagShowWindow').find('.'+tags_regist[id]['tagClass']).each(function(){
                    if( tagValue == $(this).find('span').attr('fullValue') ){
                        if( tags_callback[id]['onRemove'] != undefined && options.callback == true ){
                            var func = tags_callback[id]['onRemove'];
                            func.call( $(this) ); // 支持对于移除的标签的回调
                        }
                        $(this).remove();
                    }
                });
                delete tagslist[tagValue.toLowerCase()];
            }
        }

        // 批量进行操作
        if( Object.prototype.toString.call(value) == '[object Array]' ){ // 说明是数组类型
            for (var i in value){
                removeOneTag( this, value[i] );
            }
        } else {    // 只移除一个
            removeOneTag( this, value );
        }
        return false;
    };

    // 是否存在
    $.fn.mikeTag_Exist = function(value){
        var id = $(this).attr('id'),
            tagslist = tags_regist[id]['data'],
            existFlag = true;
        if(!tagslist[value.toLowerCase()]){
            existFlag = false;
        }
        return existFlag;       // true表示存在，false是不存在的
    };

    // 获取所有的已存在的标签
    $.fn.mikeTag_AllTag = function (){
        var id = $(this).attr('id'),
            taglist = tags_regist[id]['data'];
        // console.log(tags_regist);
        return taglist;
    };

    // 主要的对象方法，初始化一个标签组件
    $.fn.mikeTag = function(options){
        var settings = $.extend({
            'autocomplete': {               // 自动完成功能，支持ajax
                'status': false,                // autocomplete 的状态，是否开启了自动完成
                'ajax-url': null,               // ajax发送的地址
                'ajax-data': null               // ajax发送的数据
            },
            'autosize': false,              // 是否支持自动调整大小（高度）-- false 表示的是不会变高度，以左右滚动的形式表现
            'border': true,                 // 显示是否有边框，边框是用于模拟成一个input或者是textarea所用的
            'customField': 'gid',           // 自定义字段的名称
            'defaultText': 'add a tag',     // 标签添加地方的默认文字
            'defaultData': null,            // 初始时的数据 - 对象形式
            'interactive': true,            // 是否是可编辑的
            'maxChars': 250,                 // 标签中字符的最大长度
            'onRemove': null,               // 在标签进行删除操作结束的时候执行的callback，默认为null
            'onInsert': null,               // 在标签插入之后执行的callback， 默认为null
            'removeWithBackspace': true,    // 支持后退键删除
            'tagClass': 'MGTAG-item',       // 可定制的标签class
            'RegEx': null,                   // 支持正则表达式判断内容正确性
            'maxNo': null,
        },options);

        this.each(function(){
            // 获取input的宽和高
            var inputWidth,inputHeight;
            inputHeight = $(this).innerHeight();
            inputWidth = $(this).innerWidth();
            // 隐藏使用的区域中的input
            $(this).hide();

            // 为区域创建
            var tagFieldID = $(this).attr('id');
            if ( !tagFieldID || tags_regist[tagFieldID] ){
                tagFieldID = $(this).attr('id','MGTAG-'+new Date().getTime().toString(16).toUpperCase()).attr('id');
            }

            var data = $.extend({
                // 标签的class一定是一样的。。。。
                fieldHeight: inputHeight,                       // input 的高度
                fieldWidth: inputWidth,                         // input 的宽度
                realInput: '#'+tagFieldID,                      // 真实的入口 - input
                tagInput: '#'+tagFieldID+'-tagInput',           // 标签输入的区域input
                tagShow: '#'+tagFieldID+'-tagShowWindow',       // 标签显示的区域
                // tagFlow: '#'+tagFieldID+'-tagFlow',             // 所有标签的包装层
                tagInputWrapper: '#'+tagFieldID+'-addTag',      // 新增的标签的包装层
                tagField: '#'+tagFieldID+'-tagsField',          // 可以看见的标签域
                // tagLeftSilder: '#'+tagFieldID+'-leftButton',        // 左侧的滚动按钮
                // tagRightSilder: '#'+tagFieldID+'-rightButton'   // 右侧的滚动按钮
            },settings);

            // 注册这个标签组件， 并且在这个里面存放标签、标签类名、标签自定义ID
            tags_regist[tagFieldID] =  new Array();
            tags_regist[tagFieldID]['data'] = new Object();
            tags_regist[tagFieldID]['tagClass'] = settings.tagClass;
            tags_regist[tagFieldID]['tagCID'] = settings.customField;
            tags_regist[tagFieldID]['RegEx'] = settings.RegEx;
            tags_regist[tagFieldID]['maxNo'] = settings.maxNo;
            // tags_regist[tagFieldID]['placeHolder'] = settings.defaultText;

            // 存储标签callback
            tags_callback[tagFieldID] = new Array();
            if( settings.onInsert || settings.onRemove ){
                tags_callback[tagFieldID]['onInsert'] = settings.onInsert;
                tags_callback[tagFieldID]['onRemove'] = settings.onRemove;
            }

            // 创建标签区域
            var tagFieldMarkup = '<div id="'+tagFieldID+'-tagsField" class="mikeContainer"><div id="'+tagFieldID+'-tagShowWindow" class="mikeTagShowWindow"><div class="tagInput" id="'+tagFieldID+'-addTag">';
            if ( settings.interactive ){
                tagFieldMarkup += '<input id="'+tagFieldID+'-tagInput" value="" default-text="'+settings.defaultText+'" />';
            }
            tagFieldMarkup += '</div></div><div class="tags-clearB"></div></div>';

            // 插入区域
            $(tagFieldMarkup).insertAfter(this);

            // 设置区域大小
            $(data.tagField).css({
                // 'height': data.fieldHeight*2,
                // 'min-height': data.fieldHeight,
                // 'line-height': data.fieldHeight*2-3+'px',
                // 'min-width': data.fieldHeight-30,
                // 'width': data.fieldWidth
            });

            // 计算输入框大小
            var $widthVal = settings.defaultText.replace(/[\u4e00-\u9fa5]{1}/igm,'WW');
            var sensor = $('<pre>' + $widthVal + '</pre>').css({
                "display": "none",
                'margin': '0px',
                'font-family': 'helvetica',
                'font-size': '13px',
                'border': '1px solid rgba(0, 0, 0, 0)',
                'padding': '5px',
                'background': 'rgba(0, 0, 0, 0)',
                'color': '#000',
                'outline': '0px',
                'margin-right': '5px',
                'margin-bottom': '5px'
            });
            $('body').append(sensor);
            var tagWidth = sensor.outerWidth(true)+5;
            sensor.remove();

            $(data.tagInput).css('width',tagWidth);
            $(data.tagInputWrapper).css('width',tagWidth);

            // 是否有外框
            if( data.border == true ){
                $(data.tagField).css({
                    'border': '1px solid #AAA',
                    'border-radius': '2px',
                    'cursor': 'text',
                    'padding': '2px',
                    'width': '97%' 
                });
            }
            
            // 是否自适应高度
            $(data.tagShow).css({
                'width': '100%'
            });

            if( settings.autosize == false ){
                // $(data.tagFlow).css({
                //     'position': 'relative',
                //     'width': '5000px',
                //     'white-space': 'nowrap',
                //     'white-space': 'normal'
                // }).attr("nowrap","nowrap");
            }

            // 有默认数据就全部插入
            if( settings.defaultData !== null ){

                // console.log(data.realInput);
                $.fn.mikeTag.importTags( data.realInput, settings.defaultData );
            }

            // 是否可以编辑
            if( settings.interactive === true ){
                $(data.tagInput).val($(data.tagInput).attr('default-text'));

                //事件绑定，点击整个区域都可以响应编辑事件
                $(data.tagField).bind('click',data,function(evt){
                    // 移动到最后
                    if($(evt.data.tagInput).val() === ''){
                        $(evt.data.tagInputWrapper).appendTo($(evt.data.tagShow));
                    }
                    $(evt.data.tagInput).focus();
                });

                //事件绑定，输入框响应事件
                $(data.tagInput).bind('focus',data,function(evt){
                    if( $(evt.data.tagInput).val() === $(evt.data.tagInput).attr('default-text') ){
                        $(evt.data.tagInput).val('');
                    }
                });

                //事件绑定，输入框响应blur事件
                $(data.tagInput).bind('blur',data,function(evt){
                    if( $(evt.data.tagInput).val() === '' ){
                        // $(evt.data.tagInput).val($(evt.data.tagInput).attr('default-text'));
                    }
                });


                // auto complete 部分
                if(settings.autocomplete.status !== false){
                    // code here
                    // jQuery UI 
                }

            }

            // 响应回车事件 / 分号事件
            $(data.tagInput).bind('keypress',data,function (evt){
                if( (evt.which === 13) || (evt.keyCode === 59) || (evt.keyCode === 0 && evt.charCode === 59)){
                    if(evt.preventDefault()){
                        evt.preventDefault();
                    }
                    else{
                        evt.returnVaule = false;
                    }
                    var _tagInput = $(evt.data.tagInput);
                    if( (evt.data.maxNo) && (evt.data.maxNo > $('.'+data.tagClass).length) ){
                        if( evt.data.maxChars >= _tagInput.val().length ){
                            $(evt.data.realInput).mikeTag_Add( _tagInput.val() );
                        }
                    }else{
                        $(evt.data.tagInputWrapper).addClass('failed');
                    }
                }
                if((evt.which !== 13) && (evt.keyCode !== 59)){
                    var _tagInput = $(evt.data.tagInput);
                    var $widthVal = $(this).val().replace(/[\u4e00-\u9fa5]{1}/igm,'WW');
                    var sensor = $('<span>' + $widthVal + '</span>').css({
                        "display": "none",
                        'margin': '0px',
                        'font-family': 'helvetica',
                        'font-size': '13px',
                        'border': '1px solid rgba(0, 0, 0, 0)',
                        'outline': '0px',
                        'margin-right': '5px',
                        'margin-bottom': '5px',
                        'min-width': '10px'
                    });
                    $('body').append(sensor);
                    var tagWidth = sensor.outerWidth(true)+8;
                    sensor.remove();
                    if($(this).val() == ''){
                        if(tagWidth>22){
                            tagWidth = 13;
                        }
                    }
                    $(data.tagInput).css('width',tagWidth+'px');
                    $(data.tagInputWrapper).css('width',tagWidth+'px');
                }
            });
            $(data.tagInput).bind('input', data, function (evt) {
                if((evt.which !== 13) && (evt.keyCode !== 59)){
                    var _tagInput = $(evt.data.tagInput);
                    var $widthVal = $(this).val().replace(/[\u4e00-\u9fa5]{1}/igm,'WW');
                    var sensor = $('<span>' + $widthVal + '</span>').css({
                        "display": "none",
                        'margin': '0px',
                        'font-family': 'helvetica',
                        'font-size': '13px',
                        'border': '1px solid rgba(0, 0, 0, 0)',
                        'outline': '0px',
                        'margin-right': '5px',
                        'margin-bottom': '5px',
                        'min-width': '10px'
                    });
                    $('body').append(sensor);
                    var tagWidth = sensor.outerWidth(true)+8;
                    sensor.remove();
                    if($(this).val() == ''){
                        if(tagWidth>22){
                            tagWidth = 13;
                        }
                    }
                    $(data.tagInput).css('width',tagWidth+'px');
                    $(data.tagInputWrapper).css('width',tagWidth+'px');
                }
            });

            

            // 响应回退键
            data.removeWithBackspace && $(data.tagInput).bind('keydown',data,function(evt){
                // console.log(evt.keyCode);
                if( (evt.keyCode === 8) && ($(this).val() === '') ){
                    if(evt.preventDefault()){
                        evt.preventDefault();
                    }
                    else{
                        evt.returnVaule = false;
                    }
                    var last_tag =  $(data.tagInputWrapper).prev('.'+data.tagClass).find('span').attr('fullValue'); //$(this).closest(data.tagShow).find('.'+data.tagClass+' span').last().text();
                    $(data.realInput).mikeTag_Remove(last_tag);
                    $(this).trigger('focus');
                    return false;
                }
                // 向前 37 ，向后39;
                if(evt.keyCode === 37){
                    var $prevNode =  $(data.tagInputWrapper).prev('span');
                    if($prevNode && ($(this).val() === '')){
                        $(this).blur();
                        $prevNode.before($(data.tagInputWrapper));
                        $(this).focus();                   
                    }
                }
                if(evt.keyCode === 39){
                    var $nextNode =  $(data.tagInputWrapper).next('span');
                    if($nextNode && ($(this).val() === '')){
                        $(this).blur();
                        $nextNode.after($(data.tagInputWrapper));
                        $(this).focus();                 
                    }
                }
                if($(evt.data.tagInputWrapper).hasClass('failed')){
                    if(settings.RegEx!== null){
                        if(settings.RegEx.test($(this).val())){
                            $(evt.data.tagInputWrapper).removeClass('failed');
                        }
                    }
                }
                // console.log(evt.keyCode);
            });

        });

        return this;
    };

    // -- privateAPI
    // 置入默认的标签
    $.fn.mikeTag.importTags = function(obj, valueArray){
        // var id = $(obj).attr('id');
        // console.log(id);
        // tags = tags_regist[id]['data']; // 读出所有的tag
        // tags_regist[id]['data'] = {};
        // console.log(tags);
        // $(obj).val();
        $(obj).mikeTag_Add(valueArray,{'callback':false});
        // $.each(tags,function(name,value){
        // console.log(name+':'+value);
        // - addTag-without callback
        // $(obj).mikeTag_Add(name,{'callback':false});
        // });
    }

})(jQuery);