/*global define, $, esri, tmpl */
/*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/popupManager", "utils/tmplHelper", "utils/array"],

function (
        // Dojo
        dojoArray, dojoLang, domAttr, query, topic,
        // Templates
        basemapselectorTemplate,
        // Ramp
        GlobalStorage, RampMap, EventManager,
        // Esri
        BasemapGallery,
        // Util
        PopupManager, TmplHelper, UtilArray) {
    "use strict";

    var basemapGallery,
        basemaps = [],
        config,

        placementAnchorId = "basemapGallery",

        baseMapControls,
        baseMapToggle,
        basemapGalleryNode,

        cssButtonPressedClass = "button-pressed",

        ui = {
            /**
            * Initiates additional UI components of the widget, setting listeners and registering the popup functionality
            *
            * @method init
            * @private
            * @return {object} itself
            *
            */
            init: function () {
                baseMapControls = $("#basemapControls");
                baseMapToggle = $("#baseMapToggle");
                basemapGalleryNode = $("#basemapGallery").attr("role", "listbox");

                // Set alt text for selector thumbnails
                dojoArray.forEach(config.basemaps, function (basemap) {
                    domAttr.set(query(String.format("#galleryNode_{0} img", basemap.id))[0], "alt", basemap.altText);
                });

                // load JSON templates for basemap and skin every node under the basemap selector
                tmpl.templates = JSON.parse(TmplHelper.stringifyTemplate(basemapselectorTemplate));
                dojoArray.forEach($(".esriBasemapGalleryNode"), function (node, i) {
                    $(node).html(tmpl(config.siteTemplate.basemapTemplate, TmplHelper.dataBuilder(config.basemaps[i])));
                });

                // turn on the opening and closing of the basemap selector section
                PopupManager.registerPopup(baseMapControls, "hoverIntent",
                    function (d) {
                        basemapGalleryNode.slideDown("fast", function () { d.resolve(); });
                    },
                    {
                        activeClass: cssButtonPressedClass,
                        target: basemapGalleryNode,
                        closeHandler: function (d) {
                            basemapGalleryNode.slideUp("fast", function () { d.resolve(); });
                        },
                        timeout: 500
                    }
                );

                topic.publish(EventManager.BasemapSelector.UI_COMPLETE, { title: basemaps[0].title });

                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,
                title: basemap.title,
                cssStyle: basemap.scaleCssClass
            });
        });
    }

    /**
    * Initializes class listeners.
    *
    * @method initListeners
    * @private
    */
    function initListeners() {
        /* SUBSCRIBE */
        topic.subscribe(EventManager.BasemapSelector.TOGGLE, function (eventArg) {
            basemapGallery.select(eventArg.id);
        });
    }

    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 () {
            config = GlobalStorage.config;

            dojoArray.forEach(config.basemaps, function (basemap) {
                var layerDijit, basemapDijit;

                layerDijit = new esri.dijit.BasemapLayer({ url: basemap.url });
                basemapDijit = new esri.dijit.Basemap({
                    id: basemap.id,
                    layers: [layerDijit],
                    title: String.format("{0} ({1})", basemap.name, basemap.type),
                    thumbnailUrl: basemap.thumbnail
                });
                basemapDijit.scaleCssClass = basemap.scaleCssClass;

                basemaps.push(basemapDijit);
            });

            //Create and start the selector
            basemapGallery = new BasemapGallery({
                showArcGISBasemaps: false,
                basemaps: basemaps,
                map: RampMap.getMap()
            }, placementAnchorId);

            basemapGallery.startup();

            var startId = UtilArray.find(GlobalStorage.config.basemaps, function (basemap) {
                return basemap.showOnInit;
            }).id;

            basemapGallery.select(startId);

            //take over the click
            $(".esriBasemapGalleryNode").on("mousedown keyup", function (evt) {
                if (evt.which === 1 || evt.which === 13 || evt.which === 32) {
                    var curr_id = basemapGallery.getSelected().id,
                        selected_node = evt.currentTarget.id,
                        selected_id = selected_node.slice(selected_node.indexOf("_") + 1);

                    if (curr_id === selected_id) {
                        return false; //prevent the basemap from changing
                    } else { //didn't select the same basemap
                        basemapGallery.select(selected_id);
                    }
                }
            });

            initTopics();
            initListeners();

            ui
                .init()
                .updateToggleLabel();
        }
    };
});