define([
  "dojo/_base/declare",
  "dojo/_base/lang",
  "dojo/_base/json",
  "dojo/cookie",
  "dojo/on",
  "dojo/query",
  "dojo/aspect",
  "dojo/topic",
  "dojo/query",
  "dojo/on",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dojo/text!./templates/Locations.html",
  "esri/dijit/Bookmarks",
  "esri/layers/GraphicsLayer",
  "esri/symbols/PictureMarkerSymbol",
  "esri/symbols/TextSymbol",
  "esri/Color",
  "esri/graphic",
  "esri/symbols/Font",
  "app/util"
  ], function (declare, lang, json, cookie, on, query, aspect, topic, Query, on,
    _WidgetBase, _TemplatedMixin, template,
    Bookmarks, GraphicsLayer, PictureMarkerSymbol, TextSymbol, Color, Graphic, Font,
    util) {

    return declare("app.widgets.Locations", [_WidgetBase, _TemplatedMixin], {

      templateString: template,
      config: null,
      map: null,
      useLocalStorage: null,
      bookmarksWidget: null,
      storageName: 'esrijsapi_bookmarks',
      graphicsLayer: null,
      handles: [],

      postCreate: function () {
        this.inherited(arguments);

        if(this.config.app.company) {
          this.storageName = this.config.app.company.replace(/\s/, "-") + "_bookmarks";
        }
        this.useLocalStorage = util.supports_local_storage();

        this.initBookMarks(this.config);
        this._attachEventHandlers();
        this.graphicsLayer = new GraphicsLayer();
        this.map.mapDijit.addLayer(this.graphicsLayer);
        this.showBookmarks();
        topic.subscribe("Sidebar/Selected", lang.hitch(this, function(args) {
        	if(args.id == "locationsTab") {
        	    this.graphicsLayer.show();
        	} else {
        		this.graphicsLayer.hide();
        	}
        }));
      },

      _attachEventHandlers: function () {
        var self = this;
        this.own();
      },

      initBookMarks: function(config) {
        var self = this;
        var bookmarksWidget;
        var bmJSON;
    
        this.bookmarksWidget = bookmarksWidget = new Bookmarks({
            map: map,
            bookmarks: [],
            editable: true
        }, this.Bookmarks);
        bookmarksWidget.on("edit", lang.hitch(this, this.refreshBookmarks));
        bookmarksWidget.on("remove", lang.hitch(this, this.refreshBookmarks));

        if (this.useLocalStorage) {
            bmJSON = window.localStorage.getItem(this.storageName);
        } else {
            bmJSON = cookie(this.storageName);
        }
        
        // Load bookmarks
        // Fall back to a single bookmark if no cookie
        if (bmJSON && bmJSON != 'null' && bmJSON.length > 4) {
            //console.log('cookie: ', bmJSON, bmJSON.length);
            var bmarks = json.fromJson(bmJSON);
            for(var i = 0; i < bmarks.length; i++) {
              var b = bmarks[i];
              bookmarksWidget.addBookmark(b);
            }
        }
      },

      refreshBookmarks: function() {
          if (this.useLocalStorage) {
              window.localStorage.setItem(this.storageName, json.toJson(this.bookmarksWidget.toJson()));
          } else {
              var exp = 7;
              // number of days to persist the cookie
              cookie(this.storageName, json.toJson(this.bookmarksWidget.toJson()), {
                  expires: exp
              });
          }
          this.showBookmarks();
          
      },
      
      showBookmarks:function() {
      	  this.graphicsLayer.clear();
		  var bookmarks = this.bookmarksWidget.bookmarks;
		  for(var i = 0; i < bookmarks.length; i++) {
		  	var bookmark = bookmarks[i];
		  	var center = bookmark.extent.getCenter();
		  	var infoSymbol = new PictureMarkerSymbol({
				"angle": 0,
				"xoffset": 0,
				"yoffset": 12,
				"type": "esriPMS",
				"url": "http://static.arcgis.com/images/Symbols/Basic/ShinyPin.png",
				"contentType": "image/png",
				"width": 24,
				"height": 24
			});
			var textSymbol =  new TextSymbol(bookmark.name).setColor(
			    new Color([128,0,0])).setAlign(TextSymbol.ALIGN_START).setFont(
			    new Font("12pt").setWeight(Font.WEIGHT_BOLD)).setOffset(10, 0);
			this.graphicsLayer.add(new Graphic(center, infoSymbol, {title: bookmark.name}));
			var gTextGraphic = new Graphic(center, textSymbol);
			gTextGraphic.hide();
			this.graphicsLayer.add(gTextGraphic);
		  }
		  
		  for(var k = 0; k < this.handles.length; k++) {
		  	this.handles[k].remove();
		  }
		  this.handles = [];
		  query(".esriBookmarkItem", this.Bookmarks).forEach(lang.hitch(this, function(el, i) {
		  	this.handles[this.handles.length] = on(el, "mouseout", lang.hitch(this, function() {
        		for(var k = 0; k < this.graphicsLayer.graphics.length; k++) {
        			if(k%2 == 0) {
        				continue;
        			}
        			this.graphicsLayer.graphics[k].hide();
        		}
        	
        	}));
        	this.handles[this.handles.length] = on(el, "mouseover", lang.hitch(this, function() {
        		this.graphicsLayer.graphics[i * 2 + 1].show();
        	}));
          }));
      	
      },

      updateAddNewText: function(string) {
        if(!this.bookmarksWidget) return;

        var addNewBUtton = query(".esriAddBookmark div", this.bookmarksWidget.Bookmarks);
        if(addNewBUtton.length) {
          addNewBUtton[0].innerHTML = string || "Save Current Map View";
        }
        
      }

      // clearBookmarks: function() {
      //     var conf = confirm('Click OK to remove your map bookmarks.');
      //     if (conf) {
      //         if (this.useLocalStorage) {
      //             // Remove from local storage
      //             window.localStorage.removeItem(this.storageName);
      //         } else {
      //             // Remove cookie
      //             cookie(this.storageName, null, {
      //                 expires: -1
      //             });
      //         }
      //         // Remove all user defined bookmarks
      //         // First get all bookmark names
      //         var bmNames = dojo.map(this.bookmarksWidget.bookmarks, function(bm) {
      //             if (bm.name != 'Central Pennsylvania') {
      //                 return bm.name;
      //             }
      //         });
      //         // Run removeBookmark
      //         dojo.forEach(bmNames, function(bName) {
      //             bookmark.removeBookmark(bName);
      //         });
      //         // alert('Bookmarks Removed.');
      //     }
      // }

  });
});