define([
                                "dojo/_base/declare",
                                "dojo/Evented",
                                "dojo/dom-construct",
                                "dojo/on",
                                "dojo/query",
                                "dojo/text!./BasemapPickerView.html",
                                "Hud.Common/BasemapPicker/BasemapPickerAjax"
                            ],
                            function (
                                declare,
                                Evented,
                                domConstruct,
                                on,
                                query,
                                BaseMapPickerView,
                                BasemapPickerAjax) {
                            
                                return declare([Evented], {
                                    //properties
                                    options: null,
                                    map: null,
                                    view: null,
                                    ajax: null,
                                    config: null,
                            
                                    /**
                            	     * Constructs a new BasemapPickerController class.
                            	     * A user interface control that displays a collection of basemaps from ArcGIS.com or a user-defined set of map or image services.
                                     *
                                     * @class Common.BasemapPickerController
                                     * @constructor
                            	     */
                                    constructor: function (options) {
                                        this.options = options;
                                        this.map = options.map;
                                        this.ajax = new BasemapPickerAjax({ appId: "hrl" });
                            
                                        this.initialize();
                                    },
                            
                                    /**
                            		 * Initializes a new Basemap Picker.
                                     * @method initialize
                                     */
                                    initialize: function () {
                                        var self = this;
                                        //get basemap config
                                        this.ajax.getBasemapConfig(function (basemapConfig) {
                                            self.config = basemapConfig;
                                            //get the GUI html
                            
                                            domConstruct.place(BaseMapPickerView, self.options.containerId, "last");
                            
                                            $("#" + self.options.buttonId).click(function () {
                                                self.show();
                                                self.emit("basemap-menu-shown", {});
                                            });
                            
                                            $("#basemap-picker-dialog").on('hidden.bs.modal', function () {
                                                self.emit("basemap-menu-hidden", {});
                                            });
                            
                            
                                            self.emit("loaded", {});
                                        });
                                    },
                                    /**
                            		* Shows the Basemap Picker UI.
                                    * @method show
                                    */
                                    show: function () {
                                        var self = this;
                                        var cssClass = "col-xs-6 col-sm-3";
                            
                                        var html = "";
                                        for (var id in self.config) {
                                            html +=
                                                "<div class=\"" + cssClass + "\">" +
                                                    "<div class=\"thumbnail basemap-thumbnail\">" +
                                                        "<a class=\"btnBasemapTile\" href=\"javascript:void(0);\" basemapId=\"" + id + "\">";
                            
                                            if (id === "osm") {
                                                html += "<img src=\"" + apiPath + "/images/osm_logo.png\" alt=\"" + self.config[id].name + "\" />";
                                            }
                                            else {
                                                html += "<img src=\"" + self._getBasemapImage(self.config[id]) + "\" alt=\"" + self.config[id].name + "\" />";
                                            }
                                            //"<div class=\"caption\">" +
                                            //    "<h5>" + self.config[id].name + "</h5>" +
                                            //"</div>" +
                            
                                            html +=
                                                            "<span>" + self.config[id].name + "</span>" +
                                                        "</a>" +
                                                    "</div>" +
                                                "</div>";
                                        }
                            
                                        domConstruct.place(html, "basemap-picker-container", "only");
                            
                                        //wire up click event
                                        query(".btnBasemapTile").on("click", function () {
                                            var basemap = this.attributes.basemapid.value;
                                            self.setBasemap(basemap);
                                        });
                            
                                        $("#basemap-picker-dialog").modal("show");
                                    },
                            
                                    /**
                                    * Hides the BasemapPicker UI.
                                    * @method hide  
                                    *
                                    */
                                    hide: function () {
                                        $("#basemap-picker-dialog").modal("hide");
                                    },
                            
                                    /**
                            		* Sets Basemap based on the basemap param.
                                    * @method setBasemap
                                    * @param {Object} basemap   
                                    *
                                    */
                                    setBasemap: function (basemap) {
                                        this.map.setBasemap(basemap);
                                        $("#basemap-picker-dialog").modal("hide");
                            
                                        this.emit("basemap-changed", { basemap: basemap, displayName: this.config[basemap].name });
                                    },
                            
                                    /**
                            		* 
                                    * @method _getBasemapImage
                                    * @param {Object} config
                                    */
                                    _getBasemapImage: function (config) {
                                        return config.baseMapLayers[0].url + this._getExportParameters();
                                    },
                                    /**
                            		*
                                    * @method _getExportParameters  
                                    */
                                    _getExportParameters: function () {
                                        var map = this.map;
                                        return '/export?bbox=' + map.extent.xmin.toFixed(2) + '%2C' + map.extent.ymin.toFixed(2) + '%2C' + map.extent.xmax.toFixed(2) + '%2C' + map.extent.ymax.toFixed(2) + '&size=230%2C230&transparent=false&f=image';
                                    }
                                });
                            });