/**
 * Filter Builder for jQuery EasyUI
 * version: 1.0.3
 */
(function ($) {
    $(function () {
        if (!$('#filterbuilder-style').length) {
            $('head').append(
                '<style id="filterbuilder-style">' +
                '.fb-tree .tree-node{height:40px}' +
                '.fb-tree .tree-expanded,.fb-tree .tree-node-hover,.fb-tree .tree-node-selected{background:none}' +
                '.fb-tree .tree-icon,.fb-tree .tree-hit{background:none}' +
                '.fb-group-add,.fb-add,.fb-del{margin-left:5px;height:28px;}' +
                '.fb-group-op,.fb-op{margin:0 5px}' +
                '.fb-group-op,.fb-op,.fb-field{background:#ddd}' +
                '</style>'
            );
        }
    });

    function buildMenu(target, name, items) {
        var state = $.data(target, 'filterbuilder');
        var opts = state.options;
        if (!state[name]) {
            state[name] = $('<div></div>').appendTo(target).menu({
                height: 'auto',
                onShow: function () {
                    //$(this).css('overflow', 'hidden');
                },
                onClick: function (item) {
                    var opts = $(this).menu('options');
                    $(opts.alignTo).menubutton({text: item.text});
                    $(opts.alignTo).menubutton('options').onMenuClick(item);
                }
            });
            for (var i = 0; i < items.length; i++) {
                state[name].menu('appendItem', items[i]);
            }
        }
        return state[name];
    }

    function updateMenu(target, name, items) {
        var state = $.data(target, 'filterbuilder');
        if (!state['name']) {
            buildMenu(target, name, items);
        }
        state[name].empty();
        for (var i = 0; i < items.length; i++) {
            state[name].menu('appendItem', items[i]);
        }
    }

    function destroyEditor(target) {
        var roots = $(target).tree('getRoots');
        $.easyui.forEach(roots, true, function (node) {
            if (node.editortype) {
                $('#' + node.domId).find('.fb-editor')[node.editortype]('destroy');
                node.editortype = null;
            }
        });
    }

    function parseRows(target) {
        var state = $.data(target, 'filterbuilder');
        var opts = state.options;
        var groupAddMenu = buildMenu(target, 'groupAddMenu', opts.groupMenus)
        var groupOpMenu = buildMenu(target, 'groupOpMenu', $.map(opts.groupOperators, function (item) {
            return {name: item.op, text: item.text};
        }));
        var fieldMenu = buildMenu(target, 'fieldMenu', $.map(opts.fields, function (item) {
            return {name: item.field, text: item.title || item.text}
        }));
        var opMenu = buildMenu(target, 'opMenu', $.map(opts.operators, function (item) {
            return {name: item.op, text: item.text}
        }));

        destroyEditor(target);
        $(target).find('.tree-node').addClass('f-row');
        $(target).find('.tree-title').addClass('f-row f-full');
        $(target).find('.fb-group-row').each(function () {
            var nodeEl = $(this).closest('.tree-node');
            var domId = nodeEl.attr('id');
            var node = $(target).tree('findBy', {field: 'domId', value: domId});

            $(this).empty();
            var cc = $('<div class="f-full"></div>').appendTo(this);
            if ($(target).tree('getRoot').domId != domId) {
                var mb = $('<a href="javascript:;" class="fb-group-op"></a>').appendTo(cc).menubutton({
                    text: $.easyui.getArrayItem(opts.groupOperators, 'op', node.op).text,
                    menu: groupOpMenu,
                    hasDownArrow: false,
                    showEvent: 'click',
                    onMenuClick: function (item) {
                        node.op = item.name;
                    }
                });
            }
            var mb = $('<a href="javascript:;" class="fb-group-add"></a>').appendTo(this).menubutton({
                iconCls: 'icon-add',
                menu: groupAddMenu,
                hasDownArrow: false,
                showEvent: 'click',
                onMenuClick: function (item) {
                    if (item.name == 'group') {
                        $(target).tree('append', {
                            parent: nodeEl,
                            data: [{
                                op: opts.groupOperators[0].op,
                                value: '',
                                children: []
                            }]
                        });
                    } else {
                        $(target).tree('append', {
                            parent: nodeEl,
                            data: [{
                                logicOp: opts.groupOperators[0].op,
                                field: opts.fields[0].field,
                                op: opts.operators[0].op,
                                value: ''
                            }]
                        });
                    }
                    parseRows(target);
                }
            });
            if ($(target).tree('getRoot').domId != domId) {
                var del = $('<a href="javascript:;" class="fb-del"></a>').appendTo(this).linkbutton({
                    plain: true,
                    iconCls: 'icon-remove',
                    onClick: function () {
                        $(target).tree('remove', nodeEl);
                        parseRows(target);
                    }
                })
            }
        });

        function getOperatorItem(node) {
            var fieldOpts = $.easyui.getArrayItem(opts.fields, 'field', node.field);
            var operators = fieldOpts.operators || opts.operators;
            var opItem = $.easyui.getArrayItem(operators, 'op', node.op);
            opItem = $.extend({}, opItem);
            if (!opItem) {
                opItem = operators[0];
            }
            if (!opItem.editor) {
                opItem.editor = fieldOpts.editor || null;
            }
            if (!opItem.editor) {
                opItem.editor = opts.defaultEditor || null;
            }
            return opItem;
        }

        function buildEditor(cc, node) {
            var opItem = getOperatorItem(node);
            var editor = opItem.editor || {type: 'textbox', options: {}};
            var type = editor.type;
            var opts = $.extend({}, editor.options, {
                value: node.value,
                onChange: function (value) {
                    node.value = value;
                }
            });
            opts.width = opts.width || 200;

            // if (node.editortype != type) {
            // }
            var obj = cc.find('.fb-editor');
            if (obj.length) {
                obj[node.editortype]('destroy');
            }
            obj = $('<input class="fb-editor">').appendTo(cc);
            obj[type](opts);
            node.editortype = type;
            if (opts.onInit) {
                opts.onInit.call(obj[0]);
            }
        }

        $(target).find('.fb-row').each(function () {
            var nodeEl = $(this).closest('.tree-node');
            var domId = nodeEl.attr('id');
            var node = $(target).tree('findBy', {field: 'domId', value: domId});
            var opItem = getOperatorItem(node);
            node.op = opItem.op;

            var liIndex = $(nodeEl).closest('li').index();

            $(this).empty();
            var cc = $('<div class="f-full"></div>').appendTo(this);
            if (liIndex > 0) {
                var logicOp = $('<a href="javascript:;" class="fb-group-op"></a>').appendTo(cc).menubutton({
                    text: $.easyui.getArrayItem(opts.groupOperators, 'op', node.logicOp).text,
                    menu: groupOpMenu,
                    hasDownArrow: false,
                    showEvent: 'click',
                    onMenuClick: function (item) {
                        node.logicOp = item.name;
                    }
                });
            }
            else{
                var logicOp = $('<a href="javascript:;" class="fb-group-op l-btn l-btn-small l-btn-plain" style="width:46px; background:none;"><span class="l-btn-left"><span class="l-btn-text">　　</span></span></a>').appendTo(cc);
            }
            var mb = $('<a href="javascript:;" class="fb-field"></a>').appendTo(cc).menubutton({
                text: $.easyui.getArrayItem(opts.fields, 'field', node.field).title,
                menu: fieldMenu,
                hasDownArrow: false,
                showEvent: 'click',
                onMenuClick: function (item) {
                    node.field = item.name;
                    var opItem = getOperatorItem(node);
                    node.op = opItem.op;
                    op.menubutton({text: opItem.text});
                    buildEditor(cc, node);
                }
            });
            var op = $('<a href="javascript:;" class="fb-op"></a>').appendTo(cc).menubutton({
                text: opItem.text,
                menu: opMenu,
                hasDownArrow: false,
                showEvent: 'click',
                onMenuClick: function (item) {
                    node.op = item.name;
                    buildEditor(cc, node);
                },
                onClick: function () {
                    var fieldOpts = $.easyui.getArrayItem(opts.fields, 'field', node.field);
                    var operators = fieldOpts.operators || opts.operators;
                    updateMenu(target, 'opMenu', $.map(operators, function (item) {
                        return {name: item.op, text: item.text}
                    }));
                }
            });
            buildEditor(cc, node);
            var del = $('<a href="javascript:;" class="fb-del"></a>').appendTo(this).linkbutton({
                plain: true,
                iconCls: 'icon-remove',
                onClick: function () {
                    $(target).tree('remove', nodeEl);
                    parseRows(target);
                }
            })
        });
    }

    function build(target) {
        var state = $.data(target, 'filterbuilder');
        var opts = state.options;
        var data = opts.rules || [];
        if (!data.length) {
            data = [{
                op: 'and',
                children: []
            }];
        }

        $(target).addClass('fb-tree').tree({
            data: data,
            animate: false,
            formatter: function (node) {
                if (node.children) {
                    return '<div class="fb-group-row f-row f-full"></div>';
                } else {
                    return '<div class="fb-row f-row f-full"></div>';
                }
            },
            onCollapse: function (node) {
                $(this).tree('expand', node.target);
            }
        });
        parseRows(target);
    }

    $.fn.filterbuilder = function (options, param) {
        if (typeof options == 'string') {
            var method = $.fn.filterbuilder.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.tree(options, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, 'filterbuilder');
            if (state) {
                $.extend(state.options, options);
            } else {
                state = $.data(this, 'filterbuilder', {
                    options: $.extend({}, $.fn.filterbuilder.defaults, $.fn.filterbuilder.parseOptions(this), options)
                });
                build(this);
            }
        });
    };

    $.fn.filterbuilder.methods = {
        options: function (jq) {
            return $.data(jq[0], 'filterbuilder').options;
        },
        getRules: function (jq) {
            var rules = $.extend(true, [], jq.tree('getRoots'));
            $.easyui.forEach(rules, true, function (node) {
                delete node.target;
                delete node.domId;
                delete node.state;
                delete node.checkState;
                delete node.checked;
                delete node.editortype;
            });
            return rules[0];
        }
    };

    $.fn.filterbuilder.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target, []));
    };

    $.fn.filterbuilder.defaults = {
        rules: [],
        fields: [],
        groupMenus: [
            {name: 'condition', text: 'Add Condition'},
            {name: 'group', text: 'Add Group'}
        ],
        groupOperators: [
            {op: 'and', text: 'And'},
            {op: 'or', text: 'Or'}
        ],
        operators: [
            {op: 'contains', text: 'Contains'},
            {op: 'equal', text: 'Equal'},
            {op: 'notequal', text: 'Not Equal'},
            {op: 'beginwith', text: 'Begin With'},
            {op: 'endwith', text: 'End With'},
            {op: 'less', text: 'Less'},
            {op: 'lessorequal', text: 'Less Or Equal'},
            {op: 'greater', text: 'Greater'},
            {op: 'greaterorequal', text: 'Greater Or Equal'}
        ],
        defaultEditor: {type: 'textbox', options: {}}
    };

    $.parser.plugins.push('filterbuilder');
})(jQuery);