/**
 * 鹰眼视图widget
 * @author Liuyl
 * @date 2015/10/9
 */
define([
	"dojo/_base/declare",
	"base/BaseControl",
	"dojo/_base/array",
	"dojo/_base/lang",
	"dojo/dom",
	"dojo/dom-class",
	"dojo/dom-style",
	"dojo/topic",
	"dojo/aspect",
	"dojo/on",
	"dojo/text!controls/overview/OverviewControl.html",
	"esri/map",
	"esri/graphic",
	"esri/Color",
	"esri/geometry/Polygon",
	"esri/symbols/SimpleFillSymbol",
	"esri/symbols/SimpleLineSymbol",
	"esri/layers/GraphicsLayer",
	"esri/toolbars/edit",
	"esri/graphicsUtils",
	"utils/LayerUtil",
	"controls/overview/config",
	"base/AppEvent"
], function(
	declare,
	BaseControl,
	arrayUtil,
	lang,
	dom,
	domClass,
	domStyle,
	topic,
	aspect,
	on,
	template,
	Map,
	Graphic,
	Color,
	Polygon,
	SimpleFillSymbol,
	SimpleLineSymbol,
	GraphicsLayer,
	Edit,
	graphicsUtils,
	LayerUtil,
	config,
	AppEvent) {
	var Widget = declare([BaseControl], {

		templateString: template,
		defaultOptions: {
			rate: 2.5,
			base_class: "overview-default-base-class",
			fill_color: [135, 206, 250, 0.3],
			border_color: [135, 206, 250, 1]
		},
		/**
		 * GroupLayers的配置
		 */
		grouplayersConfig: null,
		/**
		 * 当前显示的GroupLayer的Id
		 */
		visibleGroupLayerId: "",

		/**
		 * 根据图层配置信息转换成实例化后的图层结果对象
		 */
		_parseResult: null,

		/**
		 * options
		 */
		constructor: function(options) {
			/**
			 * 确保实例化时传入图层组配置参数和该鹰眼初始显示的图层组Id
			 */
			if (!options || !options.grouplayersConfig || !options.visibleGroupLayerId) {
				throw {
					message: "初始化参数不完整，应指定grouplayersConfig和visibleGroupLayerId参数"
				};
			}
			declare.safeMixin(this, options);
			//$.extend(true, config, this.defaultOptions, options);
			//this.map = config.basemap;
			//			dojo.create("link", {
			//					href: require.toUrl("widgets/overview/") + 'OverviewWidget.css',
			//					type: 'text/css',
			//					rel: 'stylesheet'
			//				},
			//				document.getElementsByTagName('head')[0]);
			//this.MAP_DOM_ID = srcRefNode + this.MAP_DOM_ID;
			this.base_class = "overview-default-base-class";
			//this.map = config.basemap;
			this._myMap = null;
			this._layer1 = null;
			this._layer2 = null;
			this._graphic1 = null;
			this._graphic2 = null;
		},
		startup: function() {
			this.inherited(arguments);
			this._init();
			AppEvent.addAppEventListener(AppEvent.SWITCH_BASEMAP, lang.hitch(this, this.onSwitchBaseMap));
		},
		postCreate: function() {
			this.inherited(arguments);
		},
		_init: function() {
			if (this.myMapNode.id == "") {
				this.myMapNode.id = uuid();
			}

			//初始化自己的地图
			this._myMap = new Map(this.myMapNode.id, {
				logo: false,
				slider: false
			});
			//this._myMap = map;
			//禁用鹰眼地图的所有用户导航方式
			this._myMap.on("load", lang.hitch(this, function(map) {
				this._myMap.disableMapNavigation();
				this._myMap.hideZoomSlider();
			}));

			//var _cs = domStyle.getComputedStyle(this.mapNode);
			//根据配置添加图层
			this._addLayer();
			this._initGraphic();
			var resizeTimer;
			clearTimeout(resizeTimer);
			resizeTimer = setTimeout(lang.hitch(this, function() {
				this._myMap.resize();
				this._myMap.reposition();

			}), 500);
		},
		_addLayer: function() {
			//仅显示baselayer即可，去掉baselayer的displaylevel限制，让其在所有显示级别都可以显示
			this._parseResult = LayerUtil.parseGroups(this.grouplayersConfig);
			var groups = this._parseResult.groups;
			for (var key in groups) {
				var layer;
				var visible = (key == this.visibleGroupLayerId);
				if(visible == false){
					continue;
				}
				if(groups[key].baselayers==null){
					groups[key].baselayers=LayerUtil.parseLayers(groups[key].baselayersConfig);
				}
				for (var i = 0; i < groups[key].baselayers.length; i++) {
					layer = groups[key].baselayers[i];
					layer.visible = visible;
					if (layer.setDisplayLevels) {
						layer.setDisplayLevels(null);
					}
					this._myMap.addLayer(layer);
				}
			}
		},
		onSwitchBaseMap: function(evt) {
			if (evt.hockId != this.hockId || !evt.grouplayer)
				return;
			if (this.visibleGroupLayerId == evt.grouplayer) {
				return;
			} else {
				//先隐藏原来的图层
				var grouplayer = this._parseResult.groups[this.visibleGroupLayerId];
				for (var key in grouplayer.baselayers) {
					var layer = grouplayer.baselayers[key];
					//layer.setVisibility(false);
					this._myMap.removeLayer(layer);
				}

				//再显示需要展示的图层
				var grouplayer = null;
				for (var key in this._parseResult.groups) {
					if (key == evt.grouplayer) {
						var grouplayer = this._parseResult.groups[key];
						if(grouplayer.baselayers == null){
							grouplayer.baselayers=LayerUtil.parseLayers(grouplayer.baselayersConfig);
						}
						for (var index in grouplayer.baselayers) {
							var layer = grouplayer.baselayers[index];
							//layer.setVisibility(true);
							this._myMap.addLayer(layer);
						}
					}
				}
				this.visibleGroupLayerId = evt.grouplayer;
			}
		},
		_initGraphic: function() {
			var _symbol = new SimpleFillSymbol()
				.setStyle(SimpleFillSymbol.STYLE_SOLID)
				.setColor(new Color(config.fill_color))
				.setOutline(new SimpleLineSymbol().setColor(new Color(config.border_color)).setWidth(0.5));
			this._layer1 = new GraphicsLayer({
				id: "rect1"
			});
			this._layer2 = new GraphicsLayer({
				id: "rect2"
			});
			this._myMap.addLayer(this._layer1);
			this._myMap.addLayer(this._layer2);
			this._graphic1 = new Graphic(Polygon.fromExtent(this.map.extent), _symbol);
			this._graphic2 = new Graphic(Polygon.fromExtent(this.map.extent), _symbol);
			this._layer1.add(this._graphic1);
			this._layer2.add(this._graphic2);
			var _startMapPoint = null;
			var _basemapExtent = null;


			this.map.on("mouse-drag-start", lang.hitch(this, function(evt) {
				_startMapPoint = evt.mapPoint;
				_basemapExtent = this.map.extent;
			}));
			this.map.on("mouse-drag", lang.hitch(this, function(evt) {
				var _curMapPoint = evt.mapPoint;

				var _deltaX = _curMapPoint.x - _startMapPoint.x;
				var _deltaY = _curMapPoint.y - _startMapPoint.y;
				var _basemapCenter = _basemapExtent.getCenter();
				_basemapCenter.x -= _deltaX;
				_basemapCenter.y -= _deltaY;
				_newExtent = _basemapExtent.centerAt(_basemapCenter);
				var _newPolygon = Polygon.fromExtent(_newExtent);
				this._graphic2.setGeometry(_newPolygon);
				this._layer2.redraw();
			}));

			this.map.on("extent-change", lang.hitch(this, function(evt) {
				var _newPolygon = Polygon.fromExtent(evt.extent);
				var _extent = new esri.geometry.Extent(evt.extent);
				var _deltaX = (_extent.xmax - _extent.xmin) / 2.0 * (config.rate - 1);
				var _deltaY = (_extent.ymax - _extent.ymin) / 2.0 * (config.rate - 1);
				_extent.xmin -= _deltaX;
				_extent.xmax += _deltaX;
				_extent.ymin -= _deltaY;
				_extent.ymax += _deltaY;
				this._myMap.setExtent(_extent).then(lang.hitch(this, function() {
					this._redrawRect(_newPolygon);
				}));
				//主地图缩放时让矩形框具有动态效果
				this.map.on("zoom", lang.hitch(this, function(evt) {
					try {
						var _curZoomLevel = evt.level;
						var _newPolygon = Polygon.fromExtent(evt.extent);
						this._redrawRect(_newPolygon);
					} catch (err) {
						console.log(err);
					}

				}));
			}));
			this._initEditing();

		},
		_redrawRect: function(polygon) {
			this._graphic2.setGeometry(polygon);
			this._layer2.redraw();
			this._graphic1.setGeometry(polygon);
			this._layer1.redraw();
		},
		_initEditing: function() {
			var editToolBar = new Edit(this._myMap);
			editToolBar.activate(Edit.MOVE, this._graphic2);
			editToolBar.on("graphic-move-stop", lang.hitch(this, function(g, t) {
				var _newCenter = graphicsUtils.graphicsExtent([g.graphic]).getCenter();
				this.map.centerAt(_newCenter);
			}));
		},
		_toggle: function() {
			require(["dojo/_base/fx", "dojo/dom", "dojo/domReady!"], lang.hitch(this, function(baseFx, dom) {
				var _prop = null;
				//				var _cs = domStyle.getComputedStyle(this.mapNode);
				//				var _width = -parseInt(_cs.width.substr(0, _cs.width.length - 2));
				//				var _height = -parseInt(_cs.height.substr(0, _cs.height.length - 2));
				if (domClass.contains(this.toggleNode, "overview-toggle-show")) {
					//由于控件初始化后无法设置成正确的显示范围
					//故在显示鹰眼前手动触发一次basemap的extent-change事件以重新设置鹰眼地图的显示范围
					domStyle.set(this._myMap.container, "height", domStyle.get(this.mapNode, "height") + "px");
					this._myMap.resize();
					this.map.centerAt(this.map.extent.getCenter());
					domStyle.set(this.mapNode, "display", "block");
					_prop = {
						//						right: {
						//							start: _width,
						//							end: '0',
						//							units: 'px'
						//						},
						//						bottom: {
						//							start: _height,
						//							end: '0',
						//							units: 'px'
						//						},
						opacity: {
							start: 0,
							end: 1
						}
					}
					baseFx.animateProperty({
						node: this.mapNode,
						properties: _prop,
						duration: 1000
					}).play();
					domClass.remove(this.toggleNode, "overview-toggle-show");
					domClass.add(this.toggleNode, "overview-toggle-hide");
				} else {

					_prop = {
						//						right: {
						//							end: _width,
						//							units: 'px'
						//						},
						//						bottom: {
						//							end: _height,
						//							units: 'px'
						//						},
						opacity: {
							start: 1,
							end: 0
						}
					}

					var anim = baseFx.animateProperty({
						node: this.mapNode,
						properties: _prop,
						duration: 1000
					});
					aspect.after(anim, "onEnd", lang.hitch(this, function() {
						domStyle.set(this.mapNode, "display", "none");
					}, true));
					anim.play();
					domClass.remove(this.toggleNode, "overview-toggle-hide");
					domClass.add(this.toggleNode, "overview-toggle-show");
				}

			}));
		},
		destroy: function() {
			this.inherited(arguments);
			var layerIds = this._myMap.layerIds;
			for (var index in layerIds) {
				this._myMap.removeLayer(this._myMap.getLayer(layerIds[index]));
			}
		}

	});
	return Widget;
});