/**
 * Created  by chamaeleon (chamaeleon-nitr[at]yandex.ru).
 * Date: 07.09.13
 * Time: 22:55
 */

var bindReady = function (handler) {
    var called = false,
        isFrame,
        fn;

    function ready() {
        if (called) {
            return;
        }
        called = true;
        handler();
    }

    function tryScroll() {
        if (called) {
            return;
        }
        try {
            document.documentElement.doScroll("left");
            ready();
        } catch (e) {
            setTimeout(tryScroll, 10);
        }
    }

    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", ready, false);
    } else if (document.attachEvent) {// IE

        try {
            isFrame = window.frameElement !== null;
        } catch (e) {
        }

        // IE, the document is not inside a frame
        if (document.documentElement.doScroll && !isFrame) {
            tryScroll();
        }

        // IE, the document is inside a frame
        document.attachEvent("onreadystatechange", function () {
            if (document.readyState === "complete") {
                ready();
            }
        });
    }

    // Old browsers
    if (window.addEventListener) {
        window.addEventListener('load', ready, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', ready);
    } else {
        fn = window.onload;
        window.onload = function () {
            if (typeof fn === 'function') {
                fn();
            }
            ready();
        };
    }
};

var ComboBox = function (id_or_element) {
    var select = typeof id_or_element === 'string' ? document.getElementById(id_or_element) : id_or_element,
        divs = [],
        options,
        parent,
        combobox = document.createElement('div'),
        input = document.createElement('input'),
        list = document.createElement('div'),
        trigger = document.createElement('div'),
        targetSelect = null,
        selectElem = null,
        oldselectElem = null,
        currentIndex = 0,
        i,
        el,
        value,
        label,
        currentTarget,
        escapeExp = new RegExp("([" + ["[", "]", "{", "}", "(", ")", "+", "*", "\\", "?", ".", "$", "^"].join("\\") + "])", "g");
    if (!select) {
        select = new Error('not found element "' + id_or_element + '"');
        return;
    }
    id_or_element = typeof id_or_element === 'string' ? id_or_element : id_or_element.id;

    function setSize() {
        // size by select element
        if (select.offsetWidth > 0) {
            combobox.offsetWidth = select.offsetWidth;
            input.style.width = (select.offsetWidth - 34) + 'px';
        }
        if (select.style.width !== '') {
            combobox.style.width = select.style.width;
        }
        if (select.style.height !== '') {
            combobox.style.height = select.style.height;
        }
        if (select.style.font !== '') {
            combobox.style.font = select.style.font;
        }
        if (combobox.offsetWidth > 0) {
            input.style.width = (combobox.offsetWidth - 34) + 'px';
        }
        if (combobox.offsetHeight > 0) {
            list.style.top = combobox.offsetHeight + 'px';
        }
    }
    // document DOM ready
    bindReady(setSize);

    // functions
    function hide(elem) {
        elem.style.display = 'none';
    }

    function show(elem) {
        elem.style.display = 'block';
    }

    function toggleList() {
        if (list.style.display && list.style.display === 'block') {
            hide(list);
        } else {
            show(list);
        }
    }

    function clearCls(classname) {
        var regexp =  new RegExp('\\s*' + (classname || 'selected') + '\\s*', 'i'),
            i;
        for (i = 0; i < divs.length; i++) {
            divs[i].el.className = divs[i].el.className.replace(regexp, '');
        }
    }

    function removeCls(el, cls) {
        var regexp =  new RegExp('\\s*' + (cls || 'selected') + '\\s*', 'i');
        el.className = el.className.replace(regexp, '');
    }

    function addCls(el, cls) {
        if (el) {
            el.className = el.className + ' ' + cls;
        }
    }

    function selection(elem) {
        //this.className = !/selection/.test(this.className) ? this.className + ' selection' : this.className.replace(/\s*selection\s*/i, '');
        if (elem) {
            //clearCls('selection');
            if (targetSelect) {
                removeCls(targetSelect, 'selection');
            }
            targetSelect = elem;

            addCls(elem, 'selection');
        }
    }

    function optionSelect(elem) {
        var oldvalue = select.value;
        hide(list);
        if (elem) { // && elem !== selectElem
            input.value = elem.innerText;
            select.value = elem.value;
            if (typeof select.onchange === 'function' && (oldvalue !== elem.value)) { // && (elem.value && oldvalue !== elem.value)
                select.onchange();
            }
            //clearCls();
            if (selectElem) {
                removeCls(selectElem, 'selected');
            }
            selectElem = elem;
            addCls(elem, 'selected');
        }
        oldselectElem = selectElem;
    }

    function selectItem(el) {
        addCls(el, 'selected');
        if (selectElem) {
            removeCls(selectElem, 'selected');
        }
        selectElem = el;
        input.value = el.innerText;
    }

    function optionSelectEvent() {
        optionSelect(this);
    }

    function optionMouseOverEvent(index) {
        return function () {
            currentIndex = index;
            selection(this);
        };
    }

    function filter() {
        var regexp = new RegExp('(' + input.value.replace(escapeExp, "\\$1") + ')', 'i'),
            i,
            elem;
        targetSelect = selectElem;
        clearCls('selection');

        for (i = 0; i < divs.length; i++) {
            elem = divs[i].el;
            if (!regexp.test(divs[i].label)) {
                if (selectElem === elem) {
                    removeCls(selectElem, 'selected');
                    selectElem = null;
                }
                hide(elem);
                if (targetSelect === elem) {
                    removeCls(targetSelect, 'selection');
                    targetSelect = null;
                }
            } else {
                elem.innerHTML = elem.innerHTML.replace(/<(b|\/b)>/ig, '');
                elem.innerHTML = elem.innerHTML.replace(regexp, '<b>$1</b>');
                show(elem);
                if (!targetSelect) {
                    currentIndex = i;
                    selection(elem);
                }
            }
        }
        if (oldselectElem && regexp.test(oldselectElem.innerHTML) && !selectElem) {
            if (!selectElem) {
                selectElem = oldselectElem;
            }
            addCls(oldselectElem, 'selected');
        }
    }

    function selectFirstItem() {
        var regexp = new RegExp(input.value.replace(escapeExp, "\\$1"), 'i');
        if (targetSelect && (!selectElem || !selectElem.value)) {
            optionSelect(targetSelect);
        } else if (!selectElem && oldselectElem && regexp.test(oldselectElem.innerHTML)) {
            optionSelect(oldselectElem);
        } else {
            selectItem(selectElem);
        }
    }

    select.style.display = 'none';
    combobox.setAttribute('id', 'cb_' + id_or_element);
    combobox.className = 'combobox';
    list.className = 'cblist';
    list.style.display = 'none';
    input.className = 'cbinput';
    input.setAttribute('type', 'text');
    trigger.className = 'cbtrigger';
    //trigger.innerHTML = '&#9660';
    trigger.innerHTML = '<img alt="">&#9660;';

    // parent element of select
    parent = select.parentElement;

    // insert into DOM
    parent.insertBefore(combobox, select);
    combobox.insertBefore(list, null);
    combobox.insertBefore(trigger, null);
    combobox.insertBefore(input, list);

    options = select.getElementsByTagName('option');
    for (i = 0; i < options.length; i++) {
        el = document.createElement('div');
        value = options.item(i).value;
        label = options.item(i).text || value;
        el.setAttribute('value', value);
        el.value = value;
        el.innerText = label;
        el.onclick = optionSelectEvent;
        el.onmouseover = optionMouseOverEvent(i);
        divs.push({
            label: label,
            value: value,
            el: el
        });
        if (value === '' || !value) {
            selectItem(el);
        }
        if (options.item(i).selected && el !== selectElem) {
            selectItem(el);
        }
        list.insertBefore(el, null);
    }

    trigger.onclick = function () {
        if (selectElem && !selectElem.value) {
            input.value = '';
        }
        input.select();
        setTimeout(function () {
            toggleList();
        }, 200);
    };
    input.onclick = function () {
        if (selectElem && !selectElem.value) {
            input.value = '';
        }
        input.select();
        setTimeout(function () {
            toggleList();
        }, 200);
    };

    input.onblur = function () {
        setTimeout(function () {
            hide(list);
            selectFirstItem();
            //optionSelect(selectElem);
        }, 200);
    };

    input.onkeyup = function (e) {
        e = e || window.event;

        // enter
        if (e.keyCode === 13) {
            targetSelect = divs[currentIndex].el;
            optionSelect(targetSelect);
            e.cancelBubble = true;
        } else if (e.keyCode === 38 || e.keyCode === 40) {
            e.cancelBubble = true;
        } else {
            show(list);
            filter();
        }
    };

    input.onkeydown = function (e) {
        e = e || window.event;
        var elem;

        if (e.keyCode === 38) {
            // up
            elem = divs[currentIndex].el;
            removeCls(elem, 'selection');
            currentIndex--;
            if (!divs[currentIndex]) {
                currentIndex = divs.length - 1;
            }
            targetSelect = divs[currentIndex].el;
            addCls(targetSelect, 'selection');
            targetSelect.scrollIntoView(false);
            e.cancelBubble = true;
            if (navigator.appName !== 'Microsoft Internet Explorer') { //!/msie/i.test(navigator.userAgent.toLowerCase())
                e.preventDefault();
                e.stopPropagation();
            }
        } else if (e.keyCode === 40) {
            // down
            elem = divs[currentIndex].el;
            removeCls(elem, 'selection');
            currentIndex++;
            if (!divs[currentIndex]) {
                currentIndex = 0;
            }
            targetSelect = divs[currentIndex].el;
            addCls(targetSelect, 'selection');
            targetSelect.scrollIntoView(false);
            e.cancelBubble = true;
            if (navigator.appName !== 'Microsoft Internet Explorer') { //!/msie/i.test(navigator.userAgent.toLowerCase())
                e.preventDefault();
                e.stopPropagation();
            }
        }
    };

    setSize();
};

/*function generateCombobox() {
    var selects = document.querySelectorAll('select[combobox="true"]'),
        i,
        el,
        cb;
    console.log(selects);
    for (i = 0; i < selects.length; i++) {
        el = selects[i];
        if (el && !document.getElementById('cb_' + el.id)) {
            cb = new ComboBox(selects[i]);
        }
    }
}*/