/**
 * Destination search results page
 *
 */

(function () {

    var ampPattern = /&/g;

    var assets;

    function getPaging (start, len, total) {
        start = Math.min(start + len, total);
        return start + '/' + total;
    }

    TRAVEL.TopSearchDestinationResult = function (target, model) {

        assets = TRAVEL.Assets.TopSearchDestinationResult;

        var ajax = baseUrl + 'ajaxCommand.service?command=travel.JSONDestinationsForSearchModelProvider';

        var self = this;
        var root = target;

        var listTarget, mapTarget;
        var pagingMenuEle, sortMenuEle;

        var map;

        var pagingPrev, pagingNext;

        var viewAsList = function () {
            $(mapTarget).addClass("hidden");
            $([listTarget, sortMenuEle, pagingMenuEle]).removeClass("hidden");
        };

        var viewAsMap = function () {
            $(mapTarget).removeClass("hidden").css("height", 450);
            $([listTarget, sortMenuEle, pagingMenuEle]).addClass("hidden");
            if (!map.isShown()) {
                TRAVEL.getJSON(ajax, {'hash': model.hash}, function (data) {
                    map.create(data.destinations);
                });
            }
        };

        var renderList = function (listTarget, items) {
            var n;

            $(listTarget).empty();
            for (n = 0; n < items.length; n++) {
                var listElement = new TRAVEL.DestinationHitListElement(listTarget);
                listElement.create(items[n]);
            }
        };

        var setNavigationState = function (data) {
            if (data.pagingStart < data.pagingCount && data.pagingStart >= data.totalCount - data.pagingCount) {
                // completly hide controls
                $(pagingPrev.parentNode).addClass('hidden');
            } else {
                if (data.pagingStart < data.pagingCount) {
                    $(pagingPrev).addClass('hidden');
                } else {
                    $(pagingPrev).removeClass('hidden');
                }
                if (data.pagingStart >= data.totalCount - data.pagingCount) {
                    $(pagingNext).addClass('hidden');
                } else {
                    $(pagingNext).removeClass('hidden');
                }
            }


            $('li.title span', pagingMenuEle).html('<em>&nbsp;</em>' +
                getPaging(data.pagingStart, data.pagingCount, data.totalCount) + '<em>&nbsp;</em>');
        };


        this.create = function(model) {

            $(root).append('<h1 class="title"><a name="results">' + assets.searchresults + '</a></h1>');

            if (model.destinations.length === 0) {
                $(root).append(assets.destinationsnotfound);
            } else {
                listTarget = document.createElement("div");
                mapTarget = document.createElement("div");
                var menuTarget = $('<div class="destinations-hitlist-menu clearer"></div>').get(0);

                map = new TRAVEL.MultiMarkerMap(mapTarget);
                map.attachObserver("onMarkerClick",
                        function (param) {
                            var div = document.createElement("div");
                            $(div).append(
                                    ['<h3><a href="', param.data.link, '">',
                                        param.data.name.replace(ampPattern, '&'),
                                    '</a></h3>',
                                    '<p>',
                                        (param.data.picSrc ? ('<img src="' + param.data.picSrc + '" alt="" />') : ''),
                                        param.data.desc.replace(ampPattern, '&'),
                                    '</p>'].join('')
                                ).addClass('preview clearer');
                            param.marker.openInfoWindow(div, { maxWidth : 350 });
                        } );

                var viewMenu = new TRAVEL.HorizMenu(menuTarget, {
                        items: [{
                            name: assets.listlink,
                            event: "viewAsList"
                        }, {
                            name: assets.maplink,
                            event: "viewAsMap"
                        }]
                    })
                    .attachObserver("viewAsList", viewAsList)
                    .attachObserver("viewAsMap", viewAsMap)
                    .selectItem(0);
                $(viewMenu.getElement()).addClass("ftl viewmenu");

                var sortMenu = new TRAVEL.HorizMenu(menuTarget, {
                        title: assets.sortbytext,
                        items: [{
                            name: assets.namesortinglink,
                            event: "sortByName"
                        }, {
                            name: assets.ratingsortinglink,
                            event: "sortByRating"
                        }],
                        selectedIndex: (model.sort === "BY_NAME" ? 0 : 1)
                    })
                    .attachObserver("sortByName", function () {
                        TRAVEL.getJSON(ajax, {'hash': model.hash, 'sorting': 'BY_NAME', 'start': model.pagingStart, 'size': model.pagingCount}, function (updModel) {
                            renderList(listTarget, updModel.destinations);
                            setNavigationState(updModel);
                            model = updModel;
                        });
                    })
                    .attachObserver("sortByRating", function () {
                        TRAVEL.getJSON(ajax, {'hash': model.hash, 'sorting': 'BY_RATING', 'start': model.pagingStart, 'size': model.pagingCount}, function (updModel) {
                            renderList(listTarget, updModel.destinations);
                            setNavigationState(updModel);
                            model = updModel;
                        });
                    });

                sortMenuEle = sortMenu.getElement();
                $(sortMenuEle).addClass("ftl");

                renderList(listTarget, model.destinations);

                $(menuTarget).append(['<ul class="hitlist-nav ftr">',
                        '<li class="prev"><span><em>&larr;</em> ', assets.prevhitlist, '</span></li>',
                        '<li class="title"><span><em>&nbsp;</em>', getPaging(model.pagingStart, model.pagingCount, model.totalCount), '<em>&nbsp;</em></span></li>',
                        '<li class="next"><span>', assets.nexthitlist, ' <em>&rarr;</em></span></li>',
                    '</ul>'].join(''));

                pagingMenuEle = $('ul.hitlist-nav', menuTarget).get(0);
                pagingPrev = $('li.prev', pagingMenuEle).get(0);
                pagingNext = $('li.next', pagingMenuEle).get(0);

                setNavigationState(model);

                $(pagingPrev).click(function () {
                    TRAVEL.getJSON(ajax, {'hash': model.hash, 'sorting': model.sort, 'start': model.pagingStart - model.pagingCount, 'size': model.pagingCount}, function (updModel) {
                        renderList(listTarget, updModel.destinations);
                        setNavigationState(updModel);
                        model = updModel;
                    });
                });

                $(pagingNext).click(function () {
                    TRAVEL.getJSON(ajax, {'hash': model.hash, 'sorting': model.sort, 'start': model.pagingStart + model.pagingCount, 'size': model.pagingCount}, function (updModel) {
                        renderList(listTarget, updModel.destinations);
                        setNavigationState(updModel);
                        model = updModel;
                    });
                });

                $(root).append([menuTarget, listTarget, mapTarget]);
            }
        };

        // create page
        if (model) {
            self.create(model);
        }
    };
})();