/**
 * Product search results page
 *
 */

(function () {

    var ampPattern = /&/g;

    var assets;

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


    function placeMarkers(map, hash) {
        var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.JSONSearchMapProductsCommand';

        TRAVEL.postJSON(ajaxLink, {'hash': hash, 'id': 1}, function (markers) {

            map.placeMarkers(markers.products, function (markerId, marker) {
                // bubble details provider
                // this == marker
                var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.JSONSingleProductCommand';
                TRAVEL.getJSON(ajaxLink, 'sp=' + markerId, function (data) {
                    var bubbleHtml = [
                        '<div id="map-bubble-inner">',
                            '<div class="block-title">',
                                '<p class="location">', data.dest.region.name, ' <span>&rsaquo;</span> ', data.dest.city.name, '</p>',
                                '<h1><a href="', data.url, '">', data.name, '</a></h1>',
                                '<div class="rating-wrapper clearfix">',
                                    '<div class="rating">',
                                        '<div class="rating-bar" style="width: ', Math.round(100 * data.rating.average / 5), '%;">',
                                            data.rating.average,
                                        '</div>',
                                    '</div>',
                                    '<div class="text">',
                                        '<span>', Math.round(10 * data.rating.average) / 10, '</span> <em>(', data.rating.votes, ')</em>',
                                    '</div>',
                                '</div>',
                                '<p class="producer">', data.producer.name, '</p>',
                            '</div>',
                            '<div class="block-info">', TRAVEL.para(data.info).replace(ampPattern, '&'), '</div>',
                            '<div class="block-bottom">',
                                '<span class="price">fr. <em>', TRAVEL.formatMoney(data.price, true, true), '</em></span>',
                                '<span class="s-btn"><span>',
                                    '<a href="', data.url, '">Läs mer</a>',
                                '</span></span>',
                            '</div>',
                            '<div class="block-image"><img alt="" src="', data.images[0].url, '" /></div>',
                        '</div>'
                    ].join('');

                    marker.openExtInfoWindow(map.getGoogleMap(),
                            'map-bubble', bubbleHtml, {beakOffset: 0, paddingX: 16, paddingY: 16});
                    // fix height
                    $('#map-bubble_t').height($('#map-bubble_contents').height());


                });
            });

        });
    }





    TRAVEL.TopSearchProductResult = function (target, model, presentationType) {

        assets = TRAVEL.Assets.TopSearchProductResult;

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

        var self = this;
        var root = target;

        var listTarget, mapTarget;
        var pagingMenuEle, sortMenuEle;

        var map;

        var pagingPrev, pagingNext;

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

        var viewAsMap = function (hash) {
            $(mapTarget).removeClass("hidden").css("height", 450);
            $(pagingMenuEle).add([listTarget, sortMenuEle]).addClass("hidden");
            if (!map.isShown()) {
                map.attachObserver('complete', function () {
                    placeMarkers(map, hash);
                });
                map.create();
            }
        };

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

            $(listTarget).empty();
            for (n = 0; n < items.length; n++) {
                var listElement = new TRAVEL.ProductHitListElement(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, presentationType) {

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

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

                map = new TRAVEL.Map.SuperFirst(mapTarget);

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

                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.products);
                            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.products);
                            setNavigationState(updModel);
                            model = updModel;
                        });
                    });

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

                renderList(listTarget, model.products);

                var pagingMenuHtml = ['<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('');

                $(menuTarget).append(pagingMenuHtml);
                $(menuBottomTarget).addClass('bottom').append(pagingMenuHtml);

                pagingMenuEle = $('ul.hitlist-nav', [menuTarget, menuBottomTarget]);
                pagingPrev = $('li.prev', pagingMenuEle);
                pagingNext = $('li.next', pagingMenuEle);

                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.products);
                        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.products);
                        setNavigationState(updModel);
                        model = updModel;
                    });
                });

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

                viewMenu.selectItem( presentationType !== 'map' ? 0 : 1 );

            }
        };

        // create page
        if (model) {
            self.create(model, presentationType || '');
        }
    };
})();