var layer
var flayer = Array(20).fill(0);

require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/layers/SceneLayer",
  "esri/renderers/SimpleRenderer",
  "esri/symbols/MeshSymbol3D",
  "esri/symbols/FillSymbol3DLayer",
  "esri/layers/MapImageLayer",
  "esri/layers/ImageryLayer",
  "esri/layers/FeatureLayer",
  "esri/widgets/DirectLineMeasurement3D",
  "esri/widgets/AreaMeasurement3D",
  "esri/widgets/Popup",
  "esri/widgets/Home",
  "esri/widgets/ScaleBar",
  "esri/views/MapView",
  "esri/core/watchUtils",
  "esri/widgets/Search",
], function(Map, SceneView,  SceneLayer, SimpleRenderer, MeshSymbol3D,
  FillSymbol3DLayer, MapImageLayer, ImageryLayer, FeatureLayer,
  DirectLineMeasurement3D, AreaMeasurement3D, Popup, Home, ScaleBar, MapView, watchUtils, Search) {


    // ========================================================================= Disclaimer
    // $("#Disclaimer").dialog({modal: true, width: "500px", closeOnEscape: true,
    // buttons: {
    //   "Accept": function () {
    //     $(this).dialog('close');
    //     callback(true);
    //   }
    // }
    // });

    // ========================================================================= Creat mainMap
    var OregonExtent = { // == autocasts as new Extent()
      xmax: -12976000,
      xmin: -13850000,
      ymax: 5860000,
      ymin: 5060000,
      spatialReference: { // == autocasts as new SpatialReference()
        wkid: 3857
      }
    };
    var map = new Map({ // == Create Map
      basemap: "national-geographic",  // == satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic
      ground: "world-elevation"
    });
    var view = new SceneView({ // == Create the SceneView
      container: "viewDiv",
      map: map,
      camera: {
        position: [-122.8, 45.3, 7000],
        tilt: 70,
        heading: 30
      },
      popup: {
        dockEnabled: true,
        dockOptions: {
          buttonEnabled: false, // == Disables the dock button from the popup
          breakpoint: false,    // == Ignore the default sizes that trigger responsive docking
        }
      }
    });




    // ========================================================================= Default Map
    var oregonBoundary = new FeatureLayer({
      url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/OTH/MapServer/0"
    });
    map.add(oregonBoundary);


    var sceneLayer = new SceneLayer({  // Create SceneLayer and add to the map
      url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_Portland/SceneServer",
    });
    map.add(sceneLayer);
    var symbol = new MeshSymbol3D( // == Create MeshSymbol3D for symbolizing SceneLayer
      new FillSymbol3DLayer({
        material: {
          color: [150, 150, 200]
        }
      })
    );
    // Add the renderer to sceneLayer
    sceneLayer.renderer = new SimpleRenderer({
      symbol: symbol
    });
    sceneLayer.opacity = 0.7;





    // ========================================================================= General map
    function toggleDialog(button_id, content_id) {
      $(content_id).dialog({autoOpen: false});
      $(button_id).click(function() {
        if(!$(content_id).dialog("isOpen")) {
          $(content_id).dialog("open");
          $(content_id).dialog({position:{my:"left bottom",at:"left+100 bottom-50", of:"body"}});
        } else {
          $(content_id).dialog("close");
        }
      });
    };
    function addFeatureLayer(fLayerID){
        // var FL = new MapImageLayer({
        // url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/GEN/MapServer",
        // sublayers: [{  id: fLayerID }], opacity: 1 });
        fLayerfile = "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/GEN/MapServer/" + fLayerID;
        var FL = new FeatureLayer(fLayerfile,{});
        map.add(FL);
        return FL;
    }


    // add zoom to layer 


    $("#content-GeneralMaps").accordion( // create menu
      {collapsible: true, active: false},
      {heightStyle: "content"},
      {icons:{header: "ui-icon-plus",activeHeader: "ui-icon-minus"}}
    );
    $('#header-GeneralMaps').bind('click', function () {
      $('#content-GeneralMaps').slideToggle("fast");
      $('#content-CSZMaps').slideUp("fast");
      $('#content-ProbMaps').slideUp("fast");
      //$('.slider-Scenario').slideUp("fast");
    });
    toggleDialog("#info_30mresolution","#infocontent_30mresolution");
    toggleDialog("#legend_30mresolution","#legendcontent_30mresolution");
    toggleDialog("#info_surficialgeology","#infocontent_surficialgeology");
    toggleDialog("#legend_surficialgeology","#legendcontent_surficialgeology");
    toggleDialog("#info_faults","#infocontent_faults");
    toggleDialog("#legend_faults","#legendcontent_faults");
    toggleDialog("#info_nehrp","#infoContent_nehrp");
    toggleDialog("#legend_nehrp","#legendContent_nehrp");
    toggleDialog("#info_polygon","#infocontent_polygon");
    toggleDialog("#legend_polygon","#legendcontent_polygon");
    toggleDialog("#info_points","#infocontent_points");
    toggleDialog("#legend_points","#legendcontent_points");
    toggleDialog("#info_TRA0","#infocontent_TRA0");
    toggleDialog("#legend_TRA0","#legendcontent_TRA0");
    toggleDialog("#info_TRA1","#infocontent_TRA1");
    toggleDialog("#legend_TRA1","#legendcontent_TRA1");
    toggleDialog("#info_bh","#infocontent_bh");
    toggleDialog("#legend_bh","#legendcontent_bh");
    toggleDialog("#info_bridges","#infocontent_bridges");
    toggleDialog("#info_highway","#infocontent_highway");


    $(".GENradio").bind('click', function () {
      map.remove(layer);
      var layerID = $('input[name="GENradio"]:checked').val();
      if (layerID < 21) {
        layer = new MapImageLayer({
          url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/GEN/MapServer",
          sublayers: [{  id: layerID  }], opacity: 0.6 });
        }
        else if (layerID == 22) {
          layer = new MapImageLayer({
            url: "https://gis.dogami.oregon.gov/arcgis/rest/services/Public/SLIDO3_4/MapServer",
            opacity: 1 });
          }
          else if (layerID == 23) {
            layer = new FeatureLayer({
              url: "https://gis.dogami.oregon.gov/arcgis/rest/services/Public/HistoricLandslidePoints_3_4/MapServer",
              opacity: 1 });
            }
            else if (layerID == 27) {
              layer = new FeatureLayer({
                url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/BODO/BODO_20181018/MapServer",
                opacity: 1 });
              }
            map.add(layer);
        });

      $('.GENcheck').on('change', function(){
        $("input[name='GENcheck']").each( function () {
          if (this.checked) {
            if (flayer[this.value] == 0) {
              flayer[this.value] = addFeatureLayer(this.value);
            }
          }
          else {
            if (flayer[this.value] !== 0) {
              map.remove(flayer[this.value]);
              flayer[this.value] = 0;
            }
          }
        });
      });



      // ========================================================================= CSZ map
      $("#content-CSZMaps").accordion( // create menu
        {collapsible: true, active: false},
        {heightStyle: "content"},
        {icons:{header: "ui-icon-plus",activeHeader: "ui-icon-minus"}}
      );
      $('#header-CSZMaps').bind('click', function () {
        $('#content-CSZMaps').slideToggle("fast");
        $('#content-GeneralMaps').slideUp("fast");
        $('#content-ProbMaps').slideUp("fast");
      });
      toggleDialog("#info_modifiedmercalli","#infocontent_modifiedmercalli");
      toggleDialog("#legend_modifiedmercalli","#legendcontent_modifiedmercalli");
      toggleDialog("#info_peakgroundacceleration","#infocontent_peakgroundacceleration");
      toggleDialog("#legend_peakgroundacceleration","#legendcontent_peakgroundacceleration");
      toggleDialog("#info_peakgroundvelocity","#infocontent_peakgroundvelocity");
      toggleDialog("#legend_peakgroundvelocity","#legendcontent_peakgroundvelocity");
      toggleDialog("#info_spspectralresponse","#infocontent_spspectralresponse");
      toggleDialog("#legend_spspectralresponse","#legendcontent_spspectralresponse");
      toggleDialog("#info_losspectralresponse","#infocontent_osspectralresponse");
      toggleDialog("#legend_osspectralresponse","#legendcontent_osspectralresponse");
      toggleDialog("#info_lsprobab","#infocontent_lsprobab");
      toggleDialog("#legend_lsprobab","#legendcontent_lsprobab");
      toggleDialog("#info_landslidedisp","#infocontent_landslidedisp");
      toggleDialog("#legend_landslidedisp","#legendcontent_landslidedisp");
      toggleDialog("#info_lqprobab","#infocontent_lqprobab");
      toggleDialog("#legend_lqprobab","#legendcontent_lqprobab");
      toggleDialog("#info_hzdp","#infocontent_hzdp");
      toggleDialog("#legend_hzdp","#legendcontent_hzdp");
      toggleDialog("#info_Ext","#infocontent_Ext");
      toggleDialog("#info_sbmg","#infocontent_sbmg");
      toggleDialog("#legend_sbmg","#legendcontent_sbmg");
      toggleDialog("#info_inundationarea","#infocontent_inundationarea");

      $(".CSZradio").bind('click', function () {
        map.remove(layer);
        var layerID = $('input[name="CSZradio"]:checked').val();
        if (layerID < 9) {
          layer = new MapImageLayer({
            url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer",
            sublayers: [{  id: layerID  }], opacity: 0.6 });
          }
          else if (layerID == 11) {
            layer = new MapImageLayer({
              url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer",
              sublayers: [{  id: layerID  }], opacity: 0.6 });
            }
            else if (layerID == 12) {
              layer = new FeatureLayer({
                url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer/12"});
              }
              map.add(layer);
            });






      // ========================================================================= ProbMaps
      $("#content-ProbMaps").accordion( // create menu
        {collapsible: true, active: false},
        {heightStyle: "content"},
        {icons:{header: "ui-icon-plus",activeHeader: "ui-icon-minus"}}
      );
      $('#header-ProbMaps').bind('click', function () {
        $('#content-ProbMaps').slideToggle("fast");
        $('#content-GeneralMaps').slideUp("fast");
        $('#content-CSZMaps').slideUp("fast");
      });
      toggleDialog("#info_peakgroundacceleration2p50","#infocontent_peakgroundacceleration2p50");
      toggleDialog("#legend_peakgroundacceleration2p50","#legendcontent_peakgroundacceleration2p50");
      toggleDialog("#info_peakgroundacceleration10p50","#infocontent_peakgroundacceleration10p50");
      toggleDialog("#legend_peakgroundacceleration10p50","#legendcontent_peakgroundacceleration10p50");
      toggleDialog("#info_ls2p50","#infocontent_ls2p50");
      toggleDialog("#legend_ls2p50","#legendcontent_ls2p50");
      toggleDialog("#info_ls10p50","#infocontent_ls10p50");
      toggleDialog("#legend_ls10p50","#legendcontent_ls10p50");
      toggleDialog("#info_ls_susep1","#infocontent_ls_susep1");
      toggleDialog("#legend_ls_susep1","#legendcontent_ls_susep1");
      toggleDialog("#info_ls_susep2","#infocontent_ls_susep2");
      toggleDialog("#legend_ls_susep2","#legendcontent_ls_susep2");
      toggleDialog("#info_ls_susep3","#infocontent_ls_susep3");
      toggleDialog("#legend_ls_susep3","#legendcontent_ls_susep3");
      toggleDialog("#info_ls_susep4","#infocontent_ls_susep4");
      toggleDialog("#legend_ls_susep4","#legendcontent_ls_susep4");

      $(".Probradio").bind('click', function () {
        map.remove(layer);
        var layerID = $('input[name="Probradio"]:checked').val();
        if (layerID < 4) {
          layer = new MapImageLayer({
            url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/PROB/MapServer",
            sublayers: [{  id: layerID  }], opacity: 0.6 });
          }
          // else if (layerID == 11) {
          //   layer = new MapImageLayer({
          //     url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer",
          //     sublayers: [{  id: layerID  }], opacity: 0.6 });
          //   }
          //   else if (layerID == 12) {
          //     layer = new FeatureLayer({
          //       url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer/12"});
          //     }
              map.add(layer);
            });



      // ========================================================================= Widget
      var homeBtn = new Home({ // == Add the home button to the top left corner of the view
        view: view
      });
      view.ui.add(homeBtn, "top-left");

      var searchWidget = new Search({ // == Add the search widget to the top right corner of the view
        view: view
      });
      view.ui.add(searchWidget, "bottom-left");

      // == (1) basemap
      $('#header-basemaps').bind('click', function () {
        $('#content-basemaps').slideToggle("fast");
        $('#content-measure').slideUp("fast");
        $('#slider-Transparency').slideUp("fast");
        // $('#content-report').slideUp("fast");
      });
      $('#basemapStreets').bind('click', function () {map.basemap = 'streets';});
      $('#basemapImagery').bind('click', function () {map.basemap = 'satellite';});
      $('#basemapTopo').bind('click', function () {map.basemap = 'topo-vector';});

      // == (2) Transparency
      $('#header-trans').bind('click', function () {
        $('#content-basemaps').slideUp("fast");
        $('#slider-Transparency').slideToggle("fast");
        // $('#content-report').slideUp("fast");
        $('#content-measure').slideUp("fast");
      });

      $("#slider-Bar").slider({
        animate: true,
        min: 0,
        max: 100,
        value: 60,
        slide: function(event,ui){
          $("#showSliderValue").val(ui.value);
          layer.opacity = ui.value/100;
        }
      });

      // == (4) measure
      $('#header-measure').bind('click', function () {
        $('#content-measure').slideToggle("fast");
        $('#content-basemaps').slideUp("fast");
        $('#slider-Transparency').slideUp("fast");
        // $('#content-report').slideUp("fast");
      });
      $('#measure-line').bind('click', function () {setActiveWidget("distance");});
      $('#measure-polygon').bind('click', function () {setActiveWidget("area");});
      $('#measure-clear').bind('click', function () {setActiveWidget(null);});
      var activeWidget;
      function setActiveWidget(type) {
        if (activeWidget) {
          view.ui.remove(activeWidget);
          activeWidget.destroy();
          activeWidget = null;
        }
        switch (type) {
          case "distance":
          activeWidget = new DirectLineMeasurement3D({
            view: view
          });
          view.ui.add(activeWidget, "bottom-left");
          setActiveButton(document.getElementById('distanceButton'));
          break;
          case "area":
          activeWidget = new AreaMeasurement3D({
            view: view
          });
          view.ui.add(activeWidget, "bottom-left");
          setActiveButton(document.getElementById('areaButton'));
          break;
          case null:
          if (activeWidget) {
            view.ui.remove(activeWidget);
            activeWidget.destroy();
            activeWidget = null;
          }
          break;
        }
      }
      function setActiveButton(selectedButton) {
        // == focus the view to activate keyboard shortcuts for sketching
        view.focus();
        var elements = document.getElementsByClassName("active");
        for (var i = 0; i < elements.length; i++) {
          elements[i].classList.remove("active");
        }
        if (selectedButton) {
          selectedButton.classList.add("active");
        }
      }

      // == (5) Clear button
      $('#clearButton').bind('click', function () {
        map.remove(layer);
      });





      // ========================================================================= Overview map
      // == Create another Map, to be used in the overview "view"
      var overviewMap = new Map({
        basemap: "topo"
      });
      // == Create the MapView for overview map
      var mapView = new MapView({
        container: "overviewDiv",
        map: overviewMap,
        constraints: {
          rotationEnabled: false
        }
      });
      // == Remove the default widgets
      mapView.ui.components = [];
      var extentDiv = document.getElementById("extentDiv");
      mapView.when(function() {
        // == Update the overview extent whenever the MapView or SceneView extent changes
        view.watch("extent", updateOverviewExtent);
        mapView.watch("extent", updateOverviewExtent);
        // == Update the minimap overview when the main view becomes stationary
        watchUtils.when(view, "stationary", updateOverview);
        function updateOverview() {
          // == Animate the MapView to a zoomed-out scale so we get a nice overview.
          // == We use the "progress" callback of the goTo promise to update
          // == the overview extent while animating
          mapView.goTo({
            center: view.center,
            scale: view.scale * 2 * Math.max(view.width /
              mapView.width,
              view.height / mapView.height)
            });
          }
          function updateOverviewExtent() {
            // == Update the overview extent by converting the SceneView extent to the
            // == MapView screen coordinates and updating the extentDiv position.
            var extent = view.extent;
            var bottomLeft = mapView.toScreen(extent.xmin, extent.ymin);
            var topRight = mapView.toScreen(extent.xmax, extent.ymax);
            extentDiv.style.top = topRight.y + "px";
            extentDiv.style.left = bottomLeft.x + "px";
            extentDiv.style.height = (bottomLeft.y - topRight.y) + "px";
            extentDiv.style.width = (topRight.x - bottomLeft.x) + "px";
          }
        });
        // ==Add the widget to the bottom left corner of the view
        var scaleBar = new ScaleBar({
          view: mapView,
          unit: "dual" // == The scale bar displays both metric and non-metric units.
        });
        mapView.ui.add(scaleBar, "bottom-left");

      });