//(function () {

angular.module('MobileWebLogistics')
	.service('layersUI', function () {
		var layersUIServ = this;

		this.createList = function ($rootScope, $scope, $location) {
			if ($scope.isFeatureService) {
				var legendJsonLink = $scope.featureServUrl + "layers?f=json";
			} else {
				var legendJsonLink = $scope.featureServUrl + "legend?f=json";
			}
			//==code for secureSite==
			if (window.sessionStorage.getItem('esriToken') != null) {
				legendJsonLink += "&token=" + $rootScope.token;
			}
			//== end ==		
			var jqxhr = $.getJSON(legendJsonLink)
				.done(function (data) {
					$scope.mapLayers = data.layers;
					$scope.toggleUI = "";
					$scope.toggleUI = '<div class="labelGroupTitle" id = "baseMap" style="padding-left:10px; height:47px;line-height: 30px;">' +
						'<label for="baseMap">Basemap</label>' +
						'<div class="layerCheck">' +
						'<input type="checkbox" value="None" id="baseMapCheck" name="check" checked ng-click="toggleOpacity(\'baseMapTransparency\', $event)"/>' +
						'<label for="baseMapCheck"></label>' +
						'</div>' +
						'<div id="layerArea"><input type="range" min=0 max=100 value="50" id="baseMapTransparency" ng-model="baseMapTransparency" class="transparencyBar" ng-change="showVal(\'baseMapTransparency\')" /></div>' +
						'</div>';
					$scope.toggleUI += '<div class="labelGroupTitle" id = "gpLayers" style="padding-left:10px; height:47px;line-height: 30px;">' +
						'<label for="Transparency">Overlay Transparency</label>' +
						'<div class="layerCheck">' +
						'<input type="checkbox" value="None" id="baseMapCheck" name="check" checked ng-click="toggleOpacity(\'baseMapTransparency\', $event)"/>' +
						'</div>' +
						'<div id="layerArea"><input type="range" min=0 max=100 value="60" id="overlayTransparency" ng-model="overlayTransparency" class="transparencyBar" ng-change="showVal(\'overlayTransparency\')" /></div>' +
						'</div>';
					var layerLegend = [];

					try {
						if ($scope.isFeatureService) {
							var numOfLayers = data.layers[data.layers.length - 1].id + 1;
						} else {
							var numOfLayers = data.layers[data.layers.length - 1].layerId + 1;
						}

					} catch (err) {
						location.reload();
					}
					layerLegend.length = numOfLayers;
					for (var i = 0; i < data.layers.length; i++) { //data.layers.length
						if ($scope.isFeatureService) {
							// no legend endpoint available
							// convert each symbol JSON to a symbol class, construct a div and use dojo/gfx to create the symbol icon
							// TODO: test with annotation layers
							var lnametxt = data.layers[i].name;
							var lname = lnametxt.split(' ').join('_').replace('/', '').replace('&', 'and').replace(/'/g, "");
							var lyrLegend = data.layers[i].drawingInfo;
							var legendList = "";
							var uniqueValues = lyrLegend.renderer.type == "uniqueValue" ? true : false;
							var classBreaks = lyrLegend.renderer.type == "classBreaks" ? true : false;
							if (data.layers[i].name == $scope.parcelLyrName) {
								legendList = "<img style='width:20px;' src='img/parcel.png'>&nbsp;<br />";
								layerLegend[data.layers[i].id] = '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none">' + legendList + '</div>';
							} else if (uniqueValues || classBreaks) {
								let rendererKey = uniqueValues == true ? "uniqueValueInfos" : "classBreakInfos";
								layerLegend[data.layers[i].id] = '<div class="subLegend" style="display:none">';
								for (var k = 0; k < lyrLegend.renderer[rendererKey].length; k++) {
									var htmlElement = layersUIServ.createLayerIcon($scope, lyrLegend.renderer[rendererKey][k].symbol);
									legendList = htmlElement.innerHTML + "&nbsp;" + lyrLegend.renderer[rendererKey][k].label + "<br />";
									layerLegend[data.layers[i].id] += legendList;
								}
								layerLegend[data.layers[i].id] += '</div>';
							} else {
								var htmlElement = layersUIServ.createLayerIcon($scope, lyrLegend.renderer.symbol);
								legendList = htmlElement.innerHTML + "&nbsp;<br />";
								layerLegend[data.layers[i].id] = '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none">' + legendList + '</div>';
							}

						} else {
							var lnametxt = data.layers[i].layerName;
							var lname = lnametxt.split(' ').join('_').replace('/', '').replace('&', 'and').replace(/'/g, "");
							var lyrLegend = data.layers[i].legend;
							var legendList = "";
							for (var j = 0; j < lyrLegend.length; j++) {
								if (data.layers[i].layerName == $scope.parcelLyrName) legendList += "<img style='width:20px;' src='img/parcel.png'>&nbsp;" + lyrLegend[j].label + "<br />";
								else legendList += "<img style='width:20px;' src='data:image/png;base64," + lyrLegend[j].imageData + "'>&nbsp;" + lyrLegend[j].label + "<br />";
							}
							layerLegend[data.layers[i].layerId] = '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none">' + legendList + '</div>';
						}
					}

					var layerList = [];
					var labelGroupDiv = "none";
					var labelSubGroupDiv = "none";
					$scope.initLayerNamesArray = new Array();
					$scope.totalLayerCt = $scope.gisServStrucData.layers.length;
					for (var i = 0; i < $scope.gisServStrucData.layers.length; i++) {
						var lnametxt = $scope.gisServStrucData.layers[i].name;
						var minS = $scope.gisServStrucData.layers[i].minScale;
						if ($scope.gisServStrucData.layers[i].effectiveMinScale) {
							minS = $scope.gisServStrucData.layers[i].effectiveMinScale;
						}
						var maxS = $scope.gisServStrucData.layers[i].maxScale;
						var lname = lnametxt.split(' ').join('_').replace('/', '').replace('&', 'and').replace('(', '_').replace(')', '').replace(/'/g, "");;

						//capture the layer id from the service instead of the loop, this allows publishers to set their own unique ids in the map service if needed
						var lid = $scope.gisServStrucData.layers[i].id;
						var defaultVisibility = $scope.gisServStrucData.layers[i].defaultVisibility;
						if ($scope.gisServStrucData.layers[i].type == "Group Layer") {
							if (labelGroupDiv == "open") {
								layerList[i] = '</div><div class="labelGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="gp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="g"p_' + lname + 'Content">';
							} else {
								layerList[i] = '<div class="labelGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="gp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="gp_' + lname + 'Content">';
								labelGroupDiv = "open";
							}
						} else if ($scope.gisServStrucData.layers[i].type == "Feature Layer" || $scope.gisServStrucData.layers[i].type == "Annotation Layer" || $scope.gisServStrucData.layers[i].type == "Annotation SubLayer") {

							//excludeLayers
							var exLayer = "No";
							if ($scope.excludeLayers.length > 0) {
								for (var l = 0; l < $scope.excludeLayers.length; l++) {
									if ($scope.excludeLayers[l] == lname) {
										exLayer = "Yes";
										l = $scope.initLayers.length; //to exit for loop
									}
								}
							}
							if (exLayer == "No") {
								var valueToPush = new Array();
								valueToPush[0] = lname;
								valueToPush[1] = lid;
								valueToPush[2] = minS;
								valueToPush[3] = maxS;
								$scope.checkboxList.push(valueToPush);
								var defaultCheck = "";
								if (defaultVisibility == true) {
									defaultCheck = "checked";
									if ($scope.gisServStrucData.layers[i].type != "Annotation Layer") {
										$scope.initLayerNamesArray.push(lname);
										if (lnametxt != $scope.parcelLyrName) { //parcel layer's original name in the map service
											//$scope.initLayerIdsArray.push(lid); // moved to app.js for low speed internet environment
										}
									}
								}

								if ($scope.gisServStrucData.layers[i].type == "Feature Layer" || $scope.gisServStrucData.layers[i].type == "Annotation SubLayer") {
									if ($scope.gisServStrucData.layers[i].type == "Feature Layer" && labelSubGroupDiv == "open") {
										layerList[i] = '</div>';
										labelSubGroupDiv = "close";
									} else layerList[i] = '';
									if ($scope.gisServStrucData.layers[i].type == "Feature Layer" && labelGroupDiv == "open" && $scope.gisServStrucData.layers[i].parentLayer == null) { //if layer is not in a group, close group div
										layerList[i] = '</div>';
										labelGroupDiv = "close";
									}
									if ($scope.gisServStrucData.layers[i].type == "Annotation SubLayer") {
										layerList[i] += '<div class="labelTitle SubLayer" id="layerArea" >';
									} else {
										layerList[i] += '<div class="labelTitle" id="layerArea" >';
									}

									if ($scope.gisServStrucData.layers[i].parentLayer == null) { //if layer is not in a group
										layerList[i] += '<div class="colorKey decIndent" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/right.png"></div>' +
											'<label id="' + lname + '">' + lnametxt + '</label>' +
											'<div class="layerCheck incIndent">' +
											'<input type="checkbox" value="None" id="' + lname + 'Check" name="check" ng-click="toggleOpacity(\'' + lname + 'Transparency\', $event)" />' +
											'<label for="' + lname + 'Check"></label>' +
											'</div></div>';
									} else {
										layerList[i] += '<div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/right.png"></div>' +
											'<label id="' + lname + '">' + lnametxt + '</label>' +
											'<div class="layerCheck">' +
											'<input type="checkbox" value="None" id="' + lname + 'Check" name="check" ng-click="toggleOpacity(\'' + lname + 'Transparency\', $event)" />' +
											'<label for="' + lname + 'Check"></label>' +
											'</div></div>';
									}
									// the layerLegend dict was populated with the layer id set in the map service
									// use this to set the layerList object and not the loop iteration count
									if (layerLegend[lid]) {
										layerList[i] += layerLegend[lid];
									} else {
										layerList[i] += '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none"></div>'
									};
								} else if ($scope.gisServStrucData.layers[i].type == "Annotation Layer") {
									if (labelSubGroupDiv == "open") {
										layerList[i] = '</div><div class="labelGroupTitle labelSubGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="sgp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="sgp_' + lname + 'Content">';
									} else {
										layerList[i] = '<div class="labelGroupTitle labelSubGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="sgp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="sgp_' + lname + 'Content">';
										labelSubGroupDiv = "open";
									}
								}

							} else {
								layerList[i] = ''
							};
						} else {
							layerList[i] = ''
						};
					}
					for (var i = 0; i < layerList.length; i++) {
						$scope.toggleUI += layerList[i];
					}
					$scope.myVal = $scope.toggleUI; //assign toggle UI
					// trigger compiling toggleUI and set initial visible checkboxes
					$scope.$apply(); // it makes toggleUI to be compiled
					setTimeout(function () {
						$scope.initToggle(); // it sets initial checkboxes
					}, 800);
					// add small delay to allow layer checkboxes to render (fix checks not showing in checkboxes in Chrome)
					setTimeout(function () {
						$scope.updateVisEye();
					}, 500);
				});
		}

		this.createLayerIcon = function ($scope, symbol) {
			var esriSymbol = $scope.symbolJsonUtils.fromJson(symbol);
			var htmlElement = $scope.domConstruct.create("div");
			var mySurface = $scope.gfx.createSurface(htmlElement, 20, 20);
			var descriptors = $scope.symbolJsonUtils.getShapeDescriptors(esriSymbol);
			var shape = mySurface.createShape(descriptors.defaultShape).setFill(descriptors.fill).setStroke(descriptors.stroke);
			shape.applyTransform({
				dx: 10,
				dy: 10
			});
			return htmlElement;
		}

		this.toggleImg = function (event) {
			$header = $(event.target).parent().parent();
			// getting the next element
			$content = $header.next();
			// open up the content needed - toggle the slide- if visible, slide up, if not slidedown.          
			$content.slideToggle(100, function () {
				return $content.is(":visible") ? $(event.target).attr("src", "img/down.png") : $(event.target).attr("src", "img/right.png");
			});
		}
	});