/**
 * Single product presentation page widget
 * Internal data model:
 * {
 *     title: 'Canoe'
 *     info: 'On the whole, the Swedes are...'
 *     pictures: {
 *           pictures : [],
 *           thumbnails : []
 *      },
 *      selectedIndex: 0,
 * }
 *
 * @author dettier
 */

(function () {
	/**
	 * Constructor
	 *
	 * @param  target  {DomNode}
	 * @param  model   {Object}
	 */

    TRAVEL.SingleProduct = function (target) {

        var assets = TRAVEL.Assets.SingleProduct;

        var ajaxLink = baseUrl + 'ajaxCommand.service?command=travel.MoreInfoProviderCommand';

        var self;
        var root;

        this.create = function(model) {

            var arr = ['<div id="breadcrumbs"></div>',
                '<div id="product" class="content-space">',
                    '<div class="title">'+model.name+'</div>',
                    '<div class="illustration">',
                        '<table height="27px" border="0" cellpadding="0" cellspacing="0">',
                            '<tbody>',
                                '<tr height="21px">',
                                    '<td id="#viewSelector" class="view-selector"></td>',
                                    '<td class="picture-selector">',
                                        '<span id="#labelTarget" class="hidden"></span>',
                                        '<div id="#slidesTargetSelector"></div>',
                                    '</td>',
                                '</tr>',
                            '</tbody>',
                        '</table>',
                        '<div id="#slidesTarget" class="slides-wrapper"></div>',
                        '<div id="#mapTarget" class="map-wrapper hidden">',
                            '<div class="map-stub"><span class="msg">', assets.loadingmap, '</span></div>',
                        '</div>',
                    '</div>',
                    '<table class="icons">',
                        '<tr>',
                            '<td><div id="#abuse" class="icon abuse" title="', assets.abuseicontitle, '">', assets.abuseicontitle, '</div></td>',
                            '<td><div id="#tellfriend" class="icon tellfriend" title="', assets.friendicontitle, '">', assets.friendicontitle, '</div></td>',
                            '<td><div id="#favorites" class="icon favorites" title="', assets.favoritesicontitle, '">', assets.favoritesicontitle, '</div></td>',
                        '</tr>',
                    '</table>',
                    '<p class="producer-title"><span>'+model.producerName+'</span></p>',
                    '<div id="#description" class="description">',
                        '<div id="#text" class="text"></div><p id="#moreinfo" class="hidden txr"><span class="showmore">', assets.showmore, '</span></p>',
                    '</div>',
                    '<div id="#booking" class="booking-wrapper clearer">',
                        '<div class="title">', assets.bookingwizard, '</div>',
                    '</div>',
                    '<div id="impressions-hitlist" class="clearer"></div>',
                '</div>'];

            var holder = $.template(arr.join(''), root, 'append');

            var breadcrumbs = new TRAVEL.Breadcrumbs(document.getElementById('breadcrumbs'));
            breadcrumbs.create(model.breadcrumbs);

            if (model.info) {
                $(holder.text).html(TRAVEL.para(model.info));
            } else {
                $(holder.text).html('<p class="notext">' + assets.notext.sprintf(model.name) + '</p>');
            }

            if (model.haveMoreInfo) {
                $(holder.moreinfo).removeClass('hidden');
                $('span.showmore', holder.moreinfo).click(function () {
                    $.get(ajaxLink, 'sp='+model.id+'&sp=prdct', function(responseText) {
                        var jsonExpression = "(" + responseText + ")";
                        var model = eval(jsonExpression);
                        $(holder.text).slideUp('fast', function () {
                            $(holder.moreinfo).addClass('hidden');
                            $(this).html(TRAVEL.para(model.description)).slideDown('fast');
                        });
                    });
                });
            }


            var viewSelector = holder.viewSelector;
            var slidesTarget = holder.slidesTarget;
            var labelTarget = holder.labelTarget;
            var slidesTargetSelector = holder.slidesTargetSelector;
            var mapTarget = holder.mapTarget;

            // abuse
            $(holder.abuse).click(function (e) {
                TRAVEL.SendAbuse('prdct', model.id, e);
            });
            // tip a friend
            $(holder.tellfriend).click(function (e) {
                TRAVEL.TipAFriend('prdct', model.id, e);
            });
            // favorites
            $(holder.favorites).click(function() {
                TRAVEL.AddToFavorite('prdct', model.id);
            });


            var bookingContainer = holder.booking;
            var impressionsTarget = document.getElementById('impressions-hitlist');

            var booking = new TRAVEL.Booking(bookingContainer);
            booking.create(model.booking, false);

            if (model.duration || (model.minPersons && model.maxPersons) || model.startTime) {

                var features = [];

                features.push('<div class="features">',
                        '<h3>', assets.featurestitle, '</h3>',
                        '<ul>');

                if (model.duration) {
                    features.push('<li title="', assets.durationtooltip, '">', assets.duration, ': <span>', model.duration, '</span></li>');
                }

                if (model.startTime) {
                    features.push('<li title="', assets.starttimetooltip, '">', assets.starttime, ': <span>', model.startTime, '</span></li>');
                }

                if (model.minPersons && model.maxPersons) {
                    features.push('<li title="', assets.peoplegrouptooltip, '">', assets.peoplegroup, ': <span>');
                    features.push(model.minPersons);
                    if (model.minPersons !== model.maxPersons) {
                        features.push('&mdash;' + model.maxPersons);
                    }
                    features.push('</span></li>');
                }

                features.push('</ul></div>');

                $(holder.description).append(features.join(''));
            }

            if (model.charts.length > 0) {

                var charts = [];

                for (var i = 0; i < model.charts.length; i++) {
                    charts.push('<div class="features">');
                    charts.push('<h3>', model.charts[i].name, '</h3>', '<ul>');

                    for (var j = 0; j < model.charts[i].answers.length; j++) {
                        var c = model.charts[i].answers[j];
                        if (c.answerType == 'STRING')
                            charts.push('<li title="', c.factString, '">', c.factString, '<span style="padding-left:5px;font-weight:bold;">', c.answer, '</span>', '</li>');
                        else if (c.answerType == 'NUMERIC')
                            charts.push('<li title="', c.factString, '">', c.factString, '<span style="padding-left:5px;font-weight:bold;">', c.answer, '</span>', '</li>');
                        else if (c.answerType == 'BOOLEAN' && c.answer == 'true')
                            charts.push('<li title="', c.factString, '">', c.factString, '</li>');
                    }
                    charts.push('</ul>');
                    charts.push('</div>');
                }

                $(holder.description).append(charts.join(''));
            }

            var map = new TRAVEL.SingleMarkerMap(mapTarget);

            if (model.images.pictures.length > 0) {
                var slide = new TRAVEL.Slides(slidesTarget, slidesTargetSelector, model.images);

                var menu = new TRAVEL.HorizMenu(
                    viewSelector,
                    {
                        items: [
                            {
                                name: assets.pictureslink,
                                event: "onPicturesClick"
                            }, {
                                name: assets.maplink,
                                event: "onMapClick"
                            }
                        ],
                        selectedIndex: 0
                    }
                );

                menu.attachObserver("onPicturesClick",
                        function() {
                            $(mapTarget).addClass("hidden");
                            $(labelTarget).addClass("hidden");
                            $(slidesTarget).removeClass("hidden");
                            $(slidesTargetSelector).removeClass("hidden");
                        });
                menu.attachObserver("onMapClick",
                        function() {
                			$(mapTarget).removeClass("hidden");
                            $(labelTarget).removeClass("hidden");
                            $(slidesTarget).addClass("hidden");
                            $(slidesTargetSelector).addClass("hidden");
                            if (!map.isShown())
                                map.create(model.map);
                        });
            } else {
                $(mapTarget).removeClass("hidden");
                $(labelTarget).removeClass("hidden");
                $(slidesTarget).addClass("hidden");
                $(slidesTargetSelector).addClass("hidden");
                map.create(model.map);
            }

            if (model.impressionsInfo || true) {
                var impressionsList = new TRAVEL.ImpressionsHitlist(impressionsTarget);
                impressionsList.create(model.impressionsInfo);
            }
        };

        self = this;
        root = target;
    };

})();