/* global con, HTMLElement */
"use strict";


document.registerElement("my-listbox", {
    prototype: {
        __proto__: HTMLElement.prototype,
        createdCallback: function () {
//            console.log('createdCallback');
        },
        detachedCallback: function () {
//            console.log('detachedCallback');
        },
        attributeChangedCallback: function (name, prevValue, newValue) {
//            console.log("name:%s  prevValue:%s   newValue:%s", name, prevValue, newValue);
        },
        attachedCallback: function () {
            this.add = false;
//            console.log('attachedCallback');
            this.obj = document.getElementById(this.id);
            var ob = $(this.obj);
            ob.attr({class: 'listbox'});
            this.callback = this.getAttribute('data-handler_callback');
            var callback = this.callback;
            this.placeholder = this.getAttribute('data-placeholder') || '';
            var header = this.callback + '_' + this.obj.id + '_expl|';
            this.shadow_root = document.getElementById(this.id).createShadowRoot();
            this.shadow_root.innerHTML = '<style> @import "CSS/listbox.css" </style><input id="in" class="inp" type="text" value="" data-fn="0" data-id="0" data-old=""  placeholder="' + this.placeholder + '"><div id="div_list" class="div_list"></div>';
            var obInput = $(this.shadow_root.getElementById('in'));
            var divlist = $(this.shadow_root.getElementById('div_list'));
            divlist.css('width', ob.outerWidth());

            var divimg = ob.find('.div_img');
            obInput.one('focus', function () {
                var inp = $(this);
                $(this).bind('keydown', function (event) {
                    var key;
                    if (window.event) {
                        key = window.event.keyCode;
                    } else {
                        key = event.keyCode;
                    }
                    switch (key + event.ctrlKey * 10000) {
                        case 27:
                            inp.attr({
                                'data-in': '0',
                                'data-id': '',
                                'data-old': '',
                                'data-fn': '0'
                            });
                            inp.val('');
                            divlist.empty().divlist.css('display', 'none');
                            divimg.find('button').css('display', 'none');
                            break;
                        case 13:
                        case 9:
                            divlist.find("table").find("td").unbind("click").unbind("hover");
                            divlist.unbind('hover');
                            var td = divlist.find('table tr:eq(' + (parseInt(inp.attr('data-fn')) - 1) + ') td:eq(0)');
                            inp.attr({
                                'data-id': td.attr('data-id'),
                                'data-old': td.html()
                            });
                            divlist.empty().css('display', 'none');
                            $('.listbox_fon').remove();
                            try {
                                window[callback](inp.attr('data-id'));
                            } catch (er) {
                                console.log('case 9;13');
                                console.log(er);
                                console.log(callback);
                            }
                            break;
                        case 38://up
                            var n = parseInt(inp.attr("data-fn"));
                            if (n > 1) {
                                divlist.find("table").find("td").css("background", "none");
                                n--;
                                var d = divlist.find("table").find("[data-fn=" + n + "]");
                                d.css("background", "#ff0000");
                                inp.val(d.html());
                                inp.attr("data-fn", n);
                                listbox_n |= (inp.val().indexOf(inp.attr('data-old')) > 0) * 8; //набранное включает в себя найденноое
                                if (n > 10)
                                    divlist.scrollTop((n - 11) * 21);
                            }
                            return true;
                            break;
                        case 40://down
                            var n = parseInt(inp.attr("data-fn"));
                            var m = parseInt(divlist.find("table").find("td").filter(":last").attr("data-fn"));
                            if (n < m) {
                                divlist.find("table").find("td").css("background", "none");
                                n++;
                                var d = divlist.find("table").find("[data-fn=" + n + "]");
                                d.css("background", "#ff0000");
                                inp.val(d.html());
                                inp.attr("data-fn", n);
                                if (n > 10)
                                    divlist.scrollTop((n - 11) * 21);
                            }
                            divimg.css('display', 'none');
                            return true;
                            break;
                        case 10090: //ctrl + z
                            inp.val('');
                            inp.val(inp.attr('data-old'));
                            return true;
                            break;
                    }
                });
                obInput.on('input', {header: header}, function (event) {
                    con.send(event.data.header + $(this).val());
                    //                    console.log(event.data.header + $(this).val());
                    if ($(this).val().length === 0) {
                        $(this).attr('data-id', '0');
                        $(this).parent().find('.div_list').empty();
                        $(this).parent().find('.div_img .add').css("display", 'none');
                        $(this).parent().find('.div_img .tick').css("display", 'none');
                    }
                });
                obInput.on('blur', function () {
                    $(document).unbind('keydown');
                });
                //        if (this.add) {
                //            ob.after('<div class="div_img"><button class="add"  data-add="' + this.addCallback + '"><img src="pic/add.png"  alt="" /></button></div>');
                //            obParent.find('.add').css('display','none');
                //            obParent.on('click', '.add', function () {
                //                con.send($(this).data('add') + "|" + ob.val());
                //                $(this).css('display', 'none');
                //                listboxfonOff($(this).parent());
                //                ob.focus();
                //            });
                //        }
            });
        },
        expl: function (p) {
            var elem = $(this.obj);
            var callback = this.callback;
            var inp = $(this.shadow_root.getElementById('in'));
            var divlist = $(this.shadow_root.getElementById('div_list'));
            inp.attr("data-fn", 0);
            elem.find('.div_img').css("display", "inline-block");
            divlist.empty();
            //        var r = new RegExp('<td>(.*?)(?=<\/td>)', 'gi');
            //        var g = p.match(r);

            if (p.length === 0) {
                listbox_n = 1; // ничего не возвращено
            } else {
                divlist.css('display', 'block');
                var r = new RegExp('<td>' + inp.val() + '<\/td>', 'i');
                var g = p.match(r);
                listbox_n = g === null ? 0 : 2;
            }

            listbox_n |= (inp.val().length === 0) * 4; // нет введенного
//набранное != выбранному (т.е. выбрано и редактируется)
            listbox_n |= 8 * ((inp.val() !== inp.attr('data-old')) & (inp.attr('data-old').length > 0));

            switch (listbox_n) {
                case 8:
                case 9:
                    $(elem).find('.div_img .add').css("display", 'inline-block');
                    $(elem).find('.div_img .tick').css("display", 'inline-block');
                    listboxfonOn($(elem));
                    break;
                case 1:
                case 0:
                    $(elem).find('.div_img .add').css("display", 'inline-block');
                    $(elem).find('.div_img .tick').css("display", 'none');
                    listboxfonOn($(elem));
                    break;
                case 12:
                default :
                    $(elem).find('.div_img .add').css("display", 'none');
                    $(elem).find('.div_img .tick').css("display", 'none');
                    listboxfonOff($(elem));
            }

            divlist.append(p);
            divlist.css('display', 'block');

            $(divlist).find('td').on('click', function () {
                inp.attr("data-fn", $(this).attr("data-fn"));
                inp.attr("data-old", $(this).find("td").html());
                inp.attr("data-id", $(this).attr("data-id"));
                divlist.find("table").find("tr").unbind("click");
                divlist.unbind('hover');
                divlist.empty();
                divlist.parent().find('.div_img').css('display', 'none');
                divlist.css('display', 'none');
                inp.focus();
                $('.listbox_fon').remove();
                try {
                    window [callback]($(this).attr("data-id"));
                } catch (er) {
                    console.log(er);
                    console.log(callback);
                }
            });
            var xx = this.obj.id;
            $(this.shadow_root.getElementById('xxx')).find('td').attr('onmouseover', xx + '.td_mouseover(this);');



//            divlist.hover(
//                    function () {
//                    },
//                    function () {
//                        var n = parseInt(inp.attr("data-fn"));
//                        $(this).find('table').find("[data-fn=" + (n) + "]").css("background", "#ff0000");
//                    }
//            );

        },
        td_mouseover: function (p) {
            var inp = $(this.shadow_root.getElementById('in'));
            inp.val($(p).html());
            inp.attr("data-fn", $(p).attr("data-fn"));
        }

    }
});







var listbox_n;
function  listboxfonOn(elem) {
    if ($('.listbox_fon').length === 0) {
//        $('body').append('<div class="listbox_fon"></div>');
//        elem.css('z-index', '100');
    }
}
;
function listboxfonOff(elem) {
    $('.listbox_fon').remove();
//    elem.removeProp('z-index');
}

// listbox