<!DOCTYPE html>
<html>
    <head>
        <title>Résultats de recherche</title>
        <meta charset="utf-8" />
        <meta name="description" content="Résultats de recherche" />
        <link type="text/css" rel="stylesheet" href="../editor.css" />
        <script type="text/javascript" src="../callback.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="indexes.js"></script>
        <script src="js/lunr.js"></script>
        <script src="js/lunr-languages/lunr.stemmer.support.js"></script>
        <script src="js/lunr-languages/lunr.multi.js"></script>
        <script src="js/lunr-languages/lunr.fr.js"></script>
        <style type="text/css">
            ul {
                padding-left: 15px;
                margin-top: 20px;
            }

            li {
                list-style-type: decimal;
                line-height: 1.5em;
                padding-bottom: 1.5em;
            }

            li a {
                font-family: 'Open Sans',sans-serif,Arial;
                font-size: 1.2em;
            }

            li p {
                margin: 0.5em 0;
            }

            li p.info {
                color: #999;
                font-size: 0.9em;
                font-style: italic;
            }

            li a span {
                background: yellow;
            }

            li p span {
                background: yellow;
            }

        </style>
    </head>
    <body>
        <script>
            (function() {
                var getParameterByName = function(name, url) {
                    if (!url) url = window.location.href;
                    name = name.replace(/[\[\]]/g, "\\$&");
                    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                        results = regex.exec(url);
                    if (!results) return null;
                    if (!results[2]) return '';
                    return decodeURIComponent(results[2].replace(/\+/g, " "));
                };

                var getInfoById = function(id) {
                    var objects = $.grep(indexes, function(e){ return e.id == id; });

                    if (objects.length > 0) {
                        return objects[0]
                    }

                    return null;
                };

                var uniqueArray = function(array) {
                    return array.map(JSON.stringify).reverse().filter(function (e, i, a) {
                        return a.indexOf(e, i+1) === -1;
                    }).reverse().map(JSON.parse)
                };

                var higtlightTitles = function(result, info, positions) {
                    var elements = positions.map(function(position) {
                        return $('<li>')
                            .append(
                                $('<a>', {
                                    href: "../" + result.ref,
                                    html: [
                                        info.title.slice(0, position[0]),
                                        "<span>",
                                        info.title.slice(position[0], position[0] + position[1]),
                                        "</span>",
                                        info.title.slice(position[0] + position[1])
                                    ].join(''),
                                    onclick: "onhyperlinkclick(this)"
                               })
                            )
                            .append($('<p>').text(info.body.substring(0, 250) + "..."))
                    });

                    return elements;
                };

                var higtlightBodyes = function(result, info, positions) {
                    var elements = positions.map(function(position) {
                        var html = [
                            info.body.slice(0, position[0]),
                            "<span>",
                            info.body.slice(position[0], position[0] + position[1]),
                            "</span>",
                            info.body.slice(position[0] + position[1])
                        ].join('');

                        var sentences = html.split("."),
                            displayBody = "",
                            sentenceCount = 0,
                            commonLength = 0;


                        $(sentences).each(function(index, sentence) {
                            commonLength += sentence.length;

                            if (commonLength > position[0]) {
                                sentenceCount++;
                                displayBody += sentence + ".";
                            }

                            if (commonLength > 450 && sentenceCount > 2) {
                                displayBody = displayBody.substring(0, 450) + "...";
                                return false;
                            }
                        });

                        
                        return $('<li>')
                            .append(
                                $('<a>', {
                                    href: "../" + result.ref,
                                    html: info.title.substring(0, 150),
                                    onclick: "onhyperlinkclick(this)"
                               })
                            )
                            .append(
                                $('<p>')
                                    .html(displayBody)
                            )
                    });

                    return elements;
                };

                var processSearch = function() {
                    var self = this,
                        query = getParameterByName("query");

                    if (query !== null && query.length > 0) {
                        var parameterisedPlugin = function (builder, fields) {
                            fields.forEach(function (field) {
                                builder.field(field)
                            })
                        }

                        var idx = lunr(function () {
                            this.use(lunr.multiLanguage('en', 'fr'))
                            this.ref('id')
                            this.field('title', {boost: 10})
                            this.field('body')
                            this.metadataWhitelist = ['position']
                            this.use(parameterisedPlugin, ['title', 'body']);

                            indexes.forEach(function (doc) {
                              this.add(doc)
                            }, this)
                        });

                        var results = idx.search(query),
                            resultsCount = 0;

                        if (results.length > 0) {
                            $("#search-results").append(
                                results.map(function(result) {
                                    var displayInfo = getInfoById(result.ref);
                                    if (displayInfo) {
                                        var elements = []

                                        Object.keys(result.matchData.metadata).forEach(function (term) {
                                            Object.keys(result.matchData.metadata[term]).forEach(function (fieldName) {
                                                if (fieldName == "title") {
                                                    var positions = uniqueArray(result.matchData.metadata[term][fieldName].position);
                                                    elements = elements.concat(higtlightTitles(result, displayInfo, positions));
                                                } else if (fieldName == "body") {
                                                    var positions = uniqueArray(result.matchData.metadata[term][fieldName].position);
                                                    elements = elements.concat(higtlightBodyes(result, displayInfo, positions));
                                                }
                                            })
                                        })

                                        resultsCount += elements.length;

                                        return elements.map(function(element) {
                                            return $("<div>").append(element).html()
                                        }).join('');
                                    }
                                })
                            )
                            $(".subtitle").html("Résultats de recherche: " + resultsCount);
                        } else {
                            $(".subtitle").html("Pas de résultats de recherche");
                        }

                        $("h1").text("Résultats de recherche");
                    } else {
                        $("h1").text("Résultats de recherche");
                        $(".subtitle").html("Pas de résultats de recherche");
                    }
                }

                $(document).ready(function() {
                    setTimeout(processSearch, 50);
                });
            })();

            function doSearch(e) {
                if (e.keyCode == 13) {
                    document.location.href = 'search.html?query=' + document.getElementById('search').value;
                }
            }
        </script>
        <div class="mainpart">
            <div class="search-field">
                <input id="search" class="searchBar" placeholder="Recherche" type="text" onkeypress="doSearch(event)">
            </div>
            <h1>Recherche...</h1>
            <span class="subtitle"></span>
            <ul id="search-results"></ul>
        </div>
    </body>
</html>