/*global define, $, esri, tmpl, RAMP, i18n, TimelineLite, window, console */
/*jslint white: true */
 
/**
*
* @module RAMP
*/
 
/**
* Populates the BasemapGallery widget located in the maps toolbar with items found in the application configuration.
* This module also handles all the event  needed to change the map basemap and update the UI
*
*
* @class BaseMapSelector
* @static
* @uses dojo/_base/array
* @uses dojo/_base/lang
* @uses dojo/dom-attr
* @uses dojo/query
* @uses dojo/topic
* @uses templates/basemap_selector_template.json
* @uses GlobalStorage
* @uses Map
* @uses EventManager
* @uses esri/dijit/BasemapGallery
* @uses utils/popupManager
* @uses utils/thmplHelper
*/
 
define([
// Dojo
    "dojo/_base/array", "dojo/_base/lang", "dojo/dom-attr", "dojo/query", "dojo/topic",
// Templates
    "dojo/text!./templates/basemap_selector_template.json",
// Ramp
    "ramp/globalStorage", "ramp/map", "ramp/eventManager",
// Esri
    "esri/dijit/BasemapGallery",
// Util
    "utils/dictionary", "utils/popupManager", "utils/util", "utils/tmplHelper"],
 
function (
        // Dojo
        dojoArray, dojoLang, domAttr, query, topic,
        // Templates
        basemapselectorTemplate,
        // Ramp
        GlobalStorage, RampMap, EventManager,
        // Esri
        BasemapGallery,
        // Util
        Dictionary, PopupManager, UtilMisc, TmplHelper) {
    "use strict";
 
    var basemapGallery,
 
        currentBasemapId,
        currentTileSchema,
        basemaps,
 
        placementAnchorId = "basemapGallery",
 
        ui = (function () {
            var baseMapControls,
                baseMapToggle,
 
                selectorSectionContainer,
                selectorSection,
 
                selectorPopup,
                projectionPopup,
                basemapPopup,
 
                selectorOpenTimeline = new TimelineLite({ paused: true }),
 
                transitionDuration = 0.4,
 
                cssButtonPressedClass = "button-pressed";
 
            function createSelectorOpenTL() {
                var time = selectorOpenTimeline.time();
 
                selectorOpenTimeline
                    .clear()
                    //.set(selectorSectionContainer, { display: "block" }, 0)
                    .fromTo(selectorSection, transitionDuration,
                        { top: -selectorSectionContainer.find(".basemapselector-section").outerHeight() - 20 },
                        { top: 0, ease: "easeOutCirc" }, 0)
                    .seek(time);
            }
 
            function setTooltips() {
                // set tooltips on the overflowing spans with basemap/projection names
 
                if (selectorPopup.isOpen()) {
                    selectorSection
                        .find("span[title]:visible")
                        .each(function () {
                            var node = $(this);
                            if (node.attr("title")) {
                                if (node.isOverflowed()) {
                                    node.tooltipster({ theme: '.tooltipster-shadow' });
                                } else {
                                    node.removeAttr("title");
                                }
                            }
                        });
                }
            }
 
            return {
                /**
                * Initiates additional UI components of the widget, setting listeners and registering the popup functionality
                *
                * @method init
                * @private
                * @return {object} itself
                *
                */
                init: function (basemapId, tileSchema) {
                    var data = [],
                        pj = {},
                        basemapControl,
                        projectionControl;
 
                    baseMapControls = $("#basemapControls");
                    baseMapToggle = $("#baseMapToggle");
 
                    // group basemaps by projection
                    basemaps.forEach(function (m) {
                        if (!pj[m.tileSchema]) {
                            pj[m.tileSchema] = [];
                        }
                        pj[m.tileSchema].push(m);
                    });
                    Dictionary.forEachEntry(pj, function (k, p) {
                        data.push(
                            {
                                isActive: k === tileSchema,
                                id: k,
                                tileShema: tileSchema,
                                name: k,
                                maps: p
                            }
                        );
                    });
 
                    // load JSON templates for basemap and skin every node under the basemap selector
                    tmpl.templates = JSON.parse(TmplHelper.stringifyTemplate(basemapselectorTemplate));
 
                    baseMapControls.append(tmpl("basemapselector", data));
                    selectorSectionContainer = baseMapControls.find("#basemapselector-section-container");
                    selectorSection = selectorSectionContainer.find(".basemapselector-section");
 
                    // turn on the opening and closing of the basemap selector section
                    selectorPopup = PopupManager.registerPopup(baseMapControls, "hoverIntent",
                        function (d) {
                            baseMapToggle.addClass("button-pressed");
                            createSelectorOpenTL();
 
                            selectorOpenTimeline.eventCallback("onComplete", function () {
                                d.resolve();
                                setTooltips();
                            });
 
                            selectorSectionContainer.show();
                            selectorOpenTimeline.play();
                        },
                        {
                            activeClass: cssButtonPressedClass,
                            target: selectorSectionContainer,
                            closeHandler: function (d) {
                                createSelectorOpenTL();
 
                                selectorOpenTimeline.eventCallback("onReverseComplete", function () {
                                    baseMapToggle.removeClass("button-pressed");
                                    selectorSectionContainer.hide();
                                    d.resolve();
                                });
 
                                selectorOpenTimeline.reverse();
                            },
                            timeout: 500
                        }
                    );
 
                    // show/hide basemap lists based on what projection group is active
                    projectionPopup = PopupManager.registerPopup(selectorSectionContainer, "click",
                        function (d) {
                            var fromHeight,
                                toHeight,
                                heightTimeline;
 
                            if (!this.isOpen()) {
                                fromHeight = selectorSection.height();
                                toHeight = this.target.height();
                                heightTimeline = new TimelineLite({
                                    onComplete: setTooltips
                                });
 
                                projectionPopup.close();
 
                                // animate resizing of the selector when switching between projection groups
                                heightTimeline
                                    .set(this.target, { display: "block" }, 0)
                                    .fromTo(this.target, transitionDuration, { height: fromHeight }, { height: toHeight }, 0)
                                    .to(selectorSection, transitionDuration, { height: toHeight, ease: "easeOutCirc" }, 0);
                            }
 
                            d.resolve();
                        },
                        {
                            closeHandler: function (d) {
                                this.target.hide();
                                d.resolve();
                            },
                            openOnly: true,
                            activeClass: cssButtonPressedClass,
                            handleSelector: ".projection-button",
                            containerSelector: ".projection-list-item",
                            targetSelector: ".basemap-list-pane"
                        }
                    );
 
                    // listen to clicks on basemap list and switch basemap accordingly
                    basemapPopup = PopupManager.registerPopup(selectorSectionContainer, "click",
                        function (d) {
                            if (!this.isOpen()) {
                                basemapPopup.close();
                                selectBasemap(this.target.data("basemap-id"), this.target.data("tileshema"));
                            }
 
                            d.resolve();
                        },
                        {
                            closeHandler: function (d) {
                                d.resolve();
                            },
                            openOnly: true,
                            handleSelector: ".basemap-button",
                            activeClass: cssButtonPressedClass
                        }
                    );
 
                    basemapControl = selectorSectionContainer.find("button[data-basemap-id='" + basemapId + "']");
                    projectionControl = selectorSectionContainer.find("button[data-projection-id='" + tileSchema + "']");
 
                    basemapPopup.open(basemapControl);
                    projectionPopup.open(projectionControl);
 
                    selectorSectionContainer.hide(); // hide baseselector after it's initiated
 
                    topic.publish(EventManager.BasemapSelector.UI_COMPLETE);
 
                    return this;
                },
                /*
                 * Changes the text shown on the toolbar to match the currently selected basemap's title
                 * @method updateToggleLabel
                 * @private
                 *
                 */
                updateToggleLabel: function () {
                    baseMapToggle.find("span:first").text(basemapGallery.getSelected().title);
                }
            };
        }());
 
    /**
    * Initializes functions that publish events.
    *
    * @method initTopics
    * @private
    */
    function initTopics() {
        /* PUBLISH */
        basemapGallery.on("selection-change", function () {
            var basemap = basemapGallery.getSelected();
 
            ui.updateToggleLabel();
            topic.publish(EventManager.BasemapSelector.BASEMAP_CHANGED, {
                id: basemap.id,
                cssStyle: basemap.scaleCssClass
            });
        });
    }
 
    /**
    * Initializes class listeners.
    *
    * @method initListeners
    * @private
    */
    function initListeners() {
        /* SUBSCRIBE */
        topic.subscribe(EventManager.BasemapSelector.TOGGLE, function (eventArg) {
            selectBasemap(eventArg.id);
        });
    }
 
    /**
    * Selects a basemap in the basemapgallery based on the supplied basemap id. If the tileShema is different from the current one, reload the page.
    *
    * @method selectBasemap
    * @param {String} basemapId a basemap id used to select a basemap in the basemapgallery
    * @param {String} tileSchema a tileShema of the selected basemap
    * @private
    */
    function selectBasemap(basemapId, tileSchema) {
        if (currentBasemapId !== basemapId) {
            if (currentTileSchema === tileSchema) {
                currentBasemapId = basemapId;
                basemapGallery.select(currentBasemapId);
            } else {
                //we need to generate a bookmark and reload the page
 
                //set listner for bookmark complete
                topic.subscribe(EventManager.BookmarkLink.BOOKMARK_GENERATED, function (eventArg) {
                    //run away, load new page
                    window.location.href = eventArg.link;
                });
 
                // trigger bookmark generation.  don't care about cssStyle as we are going to reload the site anyways
                topic.publish(EventManager.BasemapSelector.BASEMAP_CHANGED, {
                    id: basemapId,
                    cssStyle: ""
                });
            }
        }
    }
 
    return {
        /*
         * Adds all of the basemaps specified in the application configuration to the basemap selector widget and then calls function to initializes event handling
         * @method init
         * @constructor
         *
         */
        init: function () {
            var initialBasemap,
                esriBasemaps = [],
                basemapId;
 
            basemaps = RAMP.config.basemaps;
 
            RAMP.basemapIndex = {};
 
            dojoArray.forEach(basemaps, function (basemap, i) {
                var basemapDijit,
                    basemapLayers = [];
 
                // iterate over basemap layers and create layer objects for each;
                // these objects can have any of the properties of the Basemap param constructor object here: https://developers.arcgis.com/javascript/jsapi/basemaplayer-amd.html#basemaplayer1
                basemap.layers.forEach(function (layer) {
                    //console.log(layer);
                    basemapLayers.push(
                        new esri.dijit.BasemapLayer(layer)
                    );
                });
 
                basemapDijit = new esri.dijit.Basemap({
                    id: basemap.id,
                    layers: basemapLayers, // shovel all the layers into the basemap
                    title: String.format("{0}, {1}", basemap.name, i18n.t('config.tileSchema.' + basemap.tileSchema)),
                    thumbnailUrl: basemap.thumbnail
                });
                basemapDijit.scaleCssClass = basemap.scaleCssClass;
 
                esriBasemaps.push(basemapDijit);
 
                //store index in lookup for bookmark module
                RAMP.basemapIndex[basemap.id] = i;
            });
 
            //Create and start the selector
            basemapGallery = new BasemapGallery({
                showArcGISBasemaps: false,
                basemaps: esriBasemaps,
                map: RampMap.getMap()
            }, placementAnchorId);
 
            basemapGallery.on('error', function (evt) {
                //TODO handle this in a nicer way
                console.log('Error occurred when loading basemap: ' + evt.message);
            });
 
            basemapGallery.startup();
 
            initialBasemap = basemaps[RAMP.config.initialBasemapIndex];
            // currentBasemapId is not specified from the start because the basemap hasn't been selected yet through the basemapgallery
            basemapId = initialBasemap.id;
            currentTileSchema = initialBasemap.tileSchema;
 
            initTopics();
            initListeners();
 
            ui
                .init(basemapId, currentTileSchema)
                .updateToggleLabel();
        }
    };
});