var input_id        = 'keywords';
var hidden_input_id = 'hidden_keywords';
var form_id         = 'search_form';
var dropdown_id     = 'keywords_auto_complete';
var link_class      = 'autocomplete_elements';
var category_id     = 'category';
var curr_element    = -1;



function error_log(message) {
    document.getElementById('error').appendChild(document.createTextNode(message));
    document.getElementById('error').appendChild(document.createElement('br'));
}


function input_key_down(event) {
    if (!event) {
        event = window.event;
    }
    if (event.which) {
        key_code = event.which;
    } else if (event.keyCode) {
        key_code = event.keyCode;
    }

    switch (key_code) {
    case 38: // Up arrow
        if (curr_element != -1) {
            curr_element.className = link_class;
            if (curr_element != document.getElementById(dropdown_id).firstChild) {
                curr_element = curr_element.previousSibling;
                if (document.getElementById(dropdown_id).scrollTop - 20 >= curr_element.offsetTop - curr_element.offsetHeight) {
                    document.getElementById(dropdown_id).scrollTop = document.getElementById(dropdown_id).scrollTop - curr_element.offsetHeight;
                }
            }
            curr_element.className = link_class + '_active';
            document.getElementById(input_id).value = curr_element.firstChild.firstChild.nodeValue;
        }
        break;
    case 40: // Down arrow
        curr_element.className = link_class;
        if (curr_element == -1) {
           curr_element = document.getElementById(dropdown_id).firstChild;
        } else if (curr_element != document.getElementById(dropdown_id).lastChild) {
            curr_element = curr_element.nextSibling;
        }
        if (document.getElementById(dropdown_id).scrollTop + document.getElementById(dropdown_id).offsetHeight + curr_element.offsetHeight - 20 <= curr_element.offsetTop) {
            document.getElementById(dropdown_id).scrollTop = document.getElementById(dropdown_id).scrollTop + curr_element.offsetHeight;
        }
        curr_element.className = link_class + '_active';
        document.getElementById(input_id).value = curr_element.firstChild.firstChild.nodeValue;
        break;
    }
}

function input_key_up(event) {
    if (!event) {
        event = window.event;
    }
    if (event.which) {
        key_code = event.which;
    } else if (event.keyCode) {
        key_code = event.keyCode;
    }

    switch (key_code) {
    case 8: // Backspace
        document.getElementById(hidden_input_id).value = document.getElementById(input_id).value;
        remove_box();
        autocomplete(false);
        curr_element = -1;
        break;
    case 13: //return
        var text = document.getElementById(hidden_input_id).value;
        document.getElementById(input_id).value = curr_element.firstChild.nodeValue;
        document.getElementById(hidden_input_id).value = curr_element.firstChild.nodeValue;
        select_string(document.getElementById(input_id), text.length, curr_element.firstChild.nodeValue.length);
        remove_box();
        curr_element = -1;
        break;
    case 38: // Up arrow
        break;
    case 40: // Down arrow
        break;
    case 46: // Delete
        document.getElementById(hidden_input_id).value = document.getElementById(input_id).value;
        remove_box();
        autocomplete(false);
        curr_element = -1;
        break;
    default:
        document.getElementById(hidden_input_id).value = document.getElementById(input_id).value;
        remove_box();
        autocomplete(true);
        curr_element = -1;
    }
}

function fill_complete(connection, do_autocomplete) {
    list = connection.responseText;
    if (list.length > 0) {
        elements = list.split(';');

        for (var id = 0; id < elements.length - 1; id += 3) {
//        for (var id in elements) {
            var link              = document.createElement('a');
            var link_id           = document.createAttribute('id');
            var keyword           = document.createElement('span');
            var category          = document.createElement('span');
            var cat_label         = document.createElement('span');
            var keyword_text      = document.createTextNode(elements[id]);
            var keyword_cat       = document.createTextNode('(' + elements[id + 2] + ')');
            var keyword_cat_label = document.createTextNode(elements[id + 1]);
            var br                = document.createElement('br');

            keyword.appendChild(keyword_text);
            keyword.className = 'keyword';

            cat_label.appendChild(keyword_cat_label);
            cat_label.className = 'category_label';

            category.appendChild(keyword_cat);
            category.className = 'category';

            link.setAttribute('href', '#');

            link.appendChild(keyword);
            link.appendChild(cat_label);
            link.appendChild(category);
            link.appendChild(br);

            link_id.nodeValue = 'el_' + id;
            link.setAttributeNode(link_id);
            link.className = link_class;

            add_event_listener(link, 'click', function(e) {
                fill_input(e, false);
                document.getElementById(hidden_input_id).value = document.getElementById(input_id).value;
                document.getElementById(form_id).submit();
            });
            add_event_listener(link, 'mousemove', function(e) {fill_input(e, true);});
            document.getElementById(dropdown_id).appendChild(link);
        }
        document.getElementById(dropdown_id).style.display = 'block';

        if (elements.length > 30) {
            var height = document.getElementById(dropdown_id).firstChild.offsetHeight * 10;
        } else {
            var height = document.getElementById(dropdown_id).firstChild.offsetHeight * ((elements.length - 1) / 3);
        }
        document.getElementById(dropdown_id).style.height = height + 'px';
    } else {
        document.getElementById(input_id).style.backgroundColor = '#FFFFFF';
        remove_box();
    }
}

function autocomplete(do_autocomplete) {
    connection = new XHConn();
    if (!connection || document.getElementById(input_id).value.length < 3) {
//    if (!connection || document.getElementById(input_id).value.length < 1) {
        return;
    }

    keywords = encodeURIComponent(document.getElementById(input_id).value);
    connection.connect("/de/ajax/search/", "GET", keywords, function(c) {fill_complete(c, do_autocomplete);});
}

function select_string(element, start, length) {
    if (element.setSelectionRange) {
        element.setSelectionRange(start, length);
    } else if (element.createTextRange) {
        var range = element.createTextRange();
        range.moveStart("character", start);
        range.moveEnd("character", length - element.value.length);
        range.select();
    }
    element.focus();
}

function fill_input(event, select) {
    var text = document.getElementById(hidden_input_id).value;
    curr_element.className = link_class;
    if (event.target) {
        if (event.target.nodeName == 'SPAN') {
            document.getElementById(category_id).value = document.getElementById(event.target.parentNode.getAttribute('id')).firstChild.nextSibling.firstChild.nodeValue;

            var new_text = document.getElementById(event.target.parentNode.getAttribute('id')).firstChild.firstChild.nodeValue;
            curr_element = document.getElementById(event.target.parentNode.getAttribute('id'));
        } else {
            document.getElementById(category_id).value = document.getElementById(event.target.getAttribute('id')).firstChild.nextSibling.firstChild.nodeValue;

            var new_text = document.getElementById(event.target.getAttribute('id')).firstChild.firstChild.nodeValue;
            curr_element = document.getElementById(event.target.getAttribute('id'));
        }
    } else if (event.srcElement) {
        if (event.srcElement.nodeName == 'SPAN') {
            document.getElementById(category_id).value = document.getElementById(event.srcElement.parentNode.getAttribute('id')).firstChild.nextSibling.firstChild.nodeValue;

            var new_text = document.getElementById(event.srcElement.parentNode.getAttribute('id')).firstChild.firstChild.nodeValue;
            curr_element = document.getElementById(event.srcElement.parentNode.getAttribute('id'));
        }
        else {
            document.getElementById(category_id).value = document.getElementById(event.srcElement.getAttribute('id')).firstChild.nextSibling.firstChild.nodeValue;

            var new_text = document.getElementById(event.srcElement.getAttribute('id')).firstChild.firstChild.nodeValue;
            curr_element = document.getElementById(event.srcElement.getAttribute('id'));
        }
    }

    curr_element.className = link_class + '_active';


    if (select == true) {
        document.getElementById(input_id).value = new_text;
        var start = text.length;

        select_string(document.getElementById(input_id), start, new_text.length);
    } else {
        remove_box();
    }
}

function check_remove_box(event) {
    curr_element = -1;
    var source = event.target || event.srcElement;

    while(source.nodeName.toLowerCase() != 'html') {
        if(source.getAttribute('id') == dropdown_id || source.getAttribute('id') == input_id) {
            return true;
        }
        source = source.parentNode;
    }
    remove_box();
}

function remove_box() {
    var child = document.getElementById(dropdown_id).firstChild;
    while (child != null) {
        old_child = child;
        child = child.nextSibling;
        document.getElementById(dropdown_id).removeChild(old_child);
    }
    document.getElementById(dropdown_id).style.display = 'none';
}


function add_event_listener(element, event, func) {
    if (element.addEventListener) {
        element.addEventListener(event, func, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, func);
    }
}

function remove_event_listener(element, event, func) {
    if (element.removeEventListener) {
        element.removeEventListener(event, func, false);
    } else if (element.dettachEvent) {
        element.dettachEvent('on' + event, func);
    }
}

add_event_listener(window, 'load', function() {
    try {
        input = document.getElementById(input_id);
        a = input.value;
        add_event_listener(input, 'keydown', input_key_down);
        add_event_listener(input, 'keyup', input_key_up);
        add_event_listener(document.getElementsByTagName('html')[0], 'click', check_remove_box);
        add_event_listener(input, 'focus', function() {remove_box(); autocomplete(false);});
    }
    catch (e) {
    }
});