var LiveSearch = function() {

    var domInput = document.getElementById('header-search-input');
    var elInput = $('#header-search-input');
    var elResults = $('#live-search-results');
    var isIE = /*@cc_on!@*/false;
    var iframe = null;
    var isFocused = false;
    var instance = this;
    var isSearching = false;
    var lastSearchQuery = "";
    var selectionIndex = -1;
    var selectables = null;

    elInput.click(function() {
        clearSearchInvitation();
    });

    elInput.focus(function() {
        isFocused = true;
        clearSearchInvitation();
        elInput.css("color", "#707070");
        if (!isSearching) {
            var v = domInput.value.replace(/^\s+/g, '');
            if (v.length == 0) {
                showIntro();
            } else if (v != lastSearchQuery) {
                search(v);
            }
        }
    });

    elInput.blur(function() {
        isFocused = false;
        if (domInput.value.replace(/\s+/g, "") == "") {
            domInput.value = instance.translate("searchInvitation");
            elInput.css("color", "#cccccc");
        }
    });

    elInput.keyup(function() {
        checkQuery();
    });

    $(document).click(function() {
        hide();
    });


    $('#live-search-results, #header-search-input').click(function(ev) {
        ev.stopPropagation();
    });


    elInput.keydown(function(ev) {
        var code = (ev.keyCode ? ev.keyCode : ev.which);
        switch (code) {
            case(38): // UP
                if (selectionIndex == 0 || selectionIndex == -1) {
                    selectionIndex = selectables.length - 1;
                } else {
                    selectionIndex--;
                }
                selectSelectable();
                break;
            case(40): // DOWN
                selectionIndex++;
                if (selectionIndex == selectables.length) {
                    selectionIndex = 0;
                }
                selectSelectable();
                break;
            case(27): // ESC
                elInput.blur();
                hide();
                break;
            case(13): // RETURN
                ev.preventDefault();
                handleReturn();
                break;
            default:
                checkQuery();
        }
    });

    elInput.keypress(function(ev) {
        // this is for opera
        var code = (ev.keyCode ? ev.keyCode : ev.which);
        switch (code) {
            case(13): // RETURN
                ev.preventDefault();
                handleReturn();
                break;
            default:
                checkQuery();
        }
    });

    var selectSelectable = function() {
        selectables.removeClass("selected");
        selectables.eq(selectionIndex).addClass("selected");
    };

    var handleReturn = function() {
        if (selectionIndex == -1 || selectionIndex == selectables.length - 1) {
            // form submit
            document.forms.searchform.submit();
        } else {
            window.location.href = selectables.eq(selectionIndex).children("a").attr("href") + "&searchparam=" +
                                   escape(domInput.value.replace(/^\s+/g, ''));
        }
    };


    var checkQuery = function() {
        if (!isSearching) {
            var v = domInput.value.replace(/^\s+/g, '');
            if (v.length == 0) {
                hide();
            } else if (v != lastSearchQuery) {
                search(v);
            }
        }
    };


    var search = function(v) {
        isSearching = true;
        lastSearchQuery = v;
        $.getJSON(resourceUrl + 'live-search.php', {q:v, lang:lang, sid:COMMONS.sid}, onReceive);
    };


    var hide = function() {
        elResults.hide();
        selectionIndex = -1;
        lastSearchQuery = "";
        if (iframe != null) {
            iframe.parentNode.removeChild(iframe);
            iframe = null;
        }
    };

    var clearSearchInvitation = function() {
        if (domInput.value == instance.translate("searchInvitation")) {
            domInput.value = "";
        }
    };

    var showIntro = function() {
        var html = '<table id="live-search-results-container" border="0" cellpadding="0" cellspacing="0">';
        html += '<tr><th><img src="' + resourceUrl + 'img/search-indicator.gif"></th><td class="intro bgAlt1">' +
                instance.translate('searchIntro') + '</td></tr></table>';
        elResults.html(html);
        elResults.show();
    };


    var onReceive = function(jo) {
        isSearching = false;
        if (!isFocused) {
            return;
        }
        if (jo.error) {
            return;
        }
        selectionIndex = -1;
        var result = jo.result;
        var articleCount = result.articles.length;
        var categoryCount = result.categories.length;
        var designerCount = result.designers.length;
        var vendorCount = result.vendors.length;
        if (articleCount > 0 || categoryCount > 0 || designerCount > 0 || vendorCount > 0) {
            var sections = [];
            var ul;

            if (vendorCount > 0) {
                ul = '<ul>';
                $.each(result.vendors, function(index, vendor) {
                    ul += '<li class="selectable"><a href="' + resourceUrl + 'index.php?cl=alist&cnid=' + vendor.oxid +
                          '"><span class="img"><img src="' + resourceUrl + 'img/livesearch/vendors/' +
                          (vendor.icon == '' ? 'smow.gif' : vendor.icon) + '"></span><span class="title">' +
                          vendor.title + '</span></a></li>';
                });
                ul += '</ul>';
                sections.push({title: instance.translate('vendors'), content: ul});
            }

            if (articleCount > 0) {
                ul = '<ul>';
                $.each(result.articles, function(index, article) {
                    ul +=
                    '<li class="selectable"><a href="' + resourceUrl + 'index.php?cl=details&anid=' + article.oxid +
                    '"><span class="img"><img src="' + resourceUrl + 'out/pictures/icon/' + article.icon +
                    '"></span><span class="title">' + article.title + '</span><br><span class="vendor">' +
                    article.vendor + '</span></a></li>';
                });
                ul += '</ul>';
                sections.push({title: instance.translate('articles'), content: ul});
            }

            if (categoryCount > 0) {
                ul = '<ul>';
                $.each(result.categories, function(index, category) {
                    ul +=
                    '<li class="selectable"><a href="' + resourceUrl + 'index.php?cl=alist&cnid=' + category.oxid +
                    '">' + category.path.replace('=', ' &gt; ') + (category.path.length == 0 ? '' : ' &gt; ') +
                    '<span class="title">' + category.title + '</span></a></li>';
                });
                ul += '</ul>';
                sections.push({title: instance.translate('categories'), content: ul});
            }

            if (designerCount > 0) {
                ul = '<ul>';
                $.each(result.designers, function(index, designer) {
                    ul +=
                    '<li class="selectable"><a href="' + resourceUrl + 'index.php?cl=alist&cnid=' + designer.oxid +
                    '"><span class="img"><img src="' + resourceUrl + 'img/livesearch/designers/' +
                    (designer.icon == '' ? 'smow.gif' : designer.icon) + '"></span><span class="title">' +
                    designer.title + '</span></a></li>';
                });
                ul += '</ul>';
                sections.push({title: instance.translate('designers'), content: ul});
            }

            var html = '<table id="live-search-results-container" border="0" cellpadding="0" cellspacing="0">';
            html +=
            '<tr><th>&nbsp;</th><td class="suggestion bgAlt1">' + instance.translate('suggestions') + '</td></tr>';

            $.each(sections, function(index, value) {
                html += '<tr><th>' + value.title + '</th>';
                html += '<td class="' + (index % 2 == 0 ? 'bgAlt1' : 'bgAlt2') + '"' +
                        (index < sections.length - 1 ? ' style="border-bottom:1px solid #D8D8D8;"' : '') + '>' +
                        value.content + '</td></tr>';
            });

            html += '<tr><th></th><td class="selectable searchfor ' + (sections.length % 2 == 1 ? 'bgAlt1' : 'bgAlt2') +
                    '" onclick="javascript:document.forms.searchform.submit();">' + instance.translate('searchfor') +
                    ' <span class="term">"' + result.term + '"</td></tr>';
            html += '</table>';
            elResults.html(html);
            elResults.show();

            selectables = $('#live-search-results .selectable');
            selectables.mouseover(function(ev) {
                selectionIndex = selectables.index(this);
                selectSelectable();
            });

            if (isIE) {
                var d = document.getElementById('live-search-results-container');
                iframe = document.createElement("IFRAME");
                iframe.setAttribute("src", "javascript:false;");
                iframe.style.position = "absolute";
                iframe.style.left = d.offsetLeft + 'px';
                iframe.style.top = d.offsetTop + 'px';
                iframe.style.width = d.offsetWidth + 'px';
                iframe.style.height = d.offsetHeight + 'px';
                iframe.style.zIndex = 999;
                document.getElementById('live-search-results').appendChild(iframe);
                window.setTimeout(function() {
                    if (iframe != null) {
                        iframe.style.height = d.offsetHeight + 'px';
                    }
                }, 1000);
            }
            checkQuery();
        } else {
            hide();
        }
    };

    if (window.opera) {
        $("#header-search-input").css("padding-top", "0");
    }
    elInput.trigger("blur");

};

LiveSearch.prototype.locals = {
    'suggestions': ['Vorschläge', 'Suggestions'],
    'vendors': ['Hersteller', 'Vendors'],
    'showAll': ['Alle anzeigen...', 'Show all...'],
    'articles': ['Artikel', 'Articles'],
    'categories': ['Kategorien', 'Categories'],
    'designers': ['Designer', 'Designers'],
    'searchfor': ['Suche nach', 'Search for'],
    'searchInvitation': ['Tippen für Vorschläge', 'Type for suggestions'],
    'searchIntro': ['Tippen Sie, um sich hier Vorschläge anzeigen zu lassen', 'Start typing to display suggestions']
};

LiveSearch.prototype.translate = function(key) {
    return LiveSearch.prototype.locals[key][lang];
};

$(document).ready(function() {
    new LiveSearch();
});