<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>ADT for Spokane County</title>

    <!-- Include ArcGIS stylesheets -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">

    <!-- Include jquery -->
    <script type="text/javascript" src="./jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./jquery/jquery-ui-1.10.4/ui/jquery-ui.js"></script>

    <!-- Include ArcGIS API -->
    <script src="https://js.arcgis.com/4.0/"></script>
    

    <style>

           /*!
 * style sheet for Average Daily Traffic
 */
       html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
       }

       #viewDiv {
            height: 95.2%;
            width: 100%;
            position: absolute;
            z-index: 0 !important;
        }

        #homeButton {
            position: absolute;
            top: 145px;
            left: 20px;
            z-Index: 50;
        }

        #header {
            height: 70px;
            background: #4C604C;
            color: #fff /*{b-bar-color}*/;
            font-size: 20px;
            font-family: Arial;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }




        #btnPublicWorks {
            float: left;
            margin-left: 5px;
            font-size: 16px;
        }

        #spanHeader {
            vertical-align: middle;
        }


        .btnheader {
            background-color: transparent;
            color: white;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        #btnPublicWorks:hover, #btnMenu:hover {
           background: #354335;
           color:#fff;
           height: 70px;
//           padding-top: 10px;
//           padding-bottom: 10px;
//           padding-left: 0;
        }

        .ui-btn-hover-b {
            border: 1px solid #00415e /*{b-bhover-border}*/;
            background: #4b88b6 /*{b-bhover-background-color}*/;
            font-weight: bold;
            color: #fff /*{b-bhover-color}*/;
            text-shadow: 0 /*{b-bhover-shadow-x}*/ 1px /*{b-bhover-shadow-y}*/ 0 /*{b-bhover-shadow-radius}*/ #194b7e /*{b-bhover-shadow-color}*/;
            background-image: -webkit-gradient(linear, left top, left bottom, from( #6facd5 /*{b-bhover-background-start}*/ ), to( #4272a4 /*{b-bhover-background-end}*/ )); /* Saf4+, Chrome */
            background-image: -webkit-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/ ); /* Chrome 10+, Saf5.1+ */
            background-image: -moz-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/ ); /* FF3.6 */
            background-image: -ms-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/ ); /* IE10 */
            background-image: -o-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/ ); /* Opera 11.10+ */
            background-image: linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/ );
        }

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 95%;
            width: 100%;
        }
    
        #optionsDiv {
            background-color: dimgray;
            color: white;
            z-index: 99;
            position: absolute;
            top: 50px;
            right: 10px;
            padding: 0px 0px 0px 10px;
            border-bottom-left-radius: 5px;
            max-width: 350px;
       }

       .info-window-mobile-button {
           display: none;
           font-size: inherit;
           padding: 0.7em 0.7em;
           border-width: 0.125em;
       }
   
       @media screen and (max-width: 768px) {
          .esriPopup .titleButton.maximize {
              display: none;
          }
          .esriPopup .titleButton.close {
              display: none;
          }
          .info-window-mobile-button {
              display: block;
          }
       }

       /*  ESRI legend */
       
       #legendPane {
           width: 20%;
           float:right;
           padding: 5px 5px 5px 5px;
           max-height: 80%;
       }

       #btnLegendClose {
           position: relative;
           top: -1px;
           display:inline-block; 
           padding: 2px 5px;
           background: #4583c0;
           color: #fff;
       }

       #btnLegendClose:hover {
           position: relative;
           top: -1px;
           display: inline-block;
           padding: 2px 5px;
           background: #274b6e;
           color: #fff;
        }


        .esri-legend {
            background-color: #f3f3f3;
            padding: 0 0;
            margin: 100px 0 0 0;
            min-width: 150px;
        }
 
        .esri-legend__service-label {
            display: none;
            margin-top: 3px;
        }

        .esri-view-height-medium .esri-ui-corner .esri-legend {
            max-height: 80%;
        }

/*        .esri-footer { 
            background-color: lightblue;
        }  */

        .esri-legend__layer-table .esri-legend__layer-caption {
            content: "Average Daily Traffic Count"
        }

        .esri-legend__layer-table {
            margin-bottom: 3px;
        }

 /*       esri-page-menu {
            display: visible;
        }
     */

        /*  ESRI popup */
       .esri-popup .esri-popup-main {
            background-color:  #f3f3f3;
            max-width: 375px;
       }              
          
       .esri-popup, .esri-popup-header, .esri-popup-footer {
            background-color: #4583c0 ;
       }

       .esri-popup-header {
           color: #fff;
       }

       .esri-popup .esri-dock {
           color: #fff;
       }

       .esri-popup .esri-dock:hover {
           color: #14f9f3 ;
       }

       .esri-popup .esri-close {
           color: #fff;
       }

       .esri-popup .esri-close:hover {
           color: #14f9f3;
       }

       /****************************************************
           Side Panel styling
       */

  
    .panel-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    .panel-side {
      padding: 2px;
      box-sizing: border-box;
      width: 300px;
      height: 100%;
      position: absolute;
      margin-top: 30px;
      right: 0;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.6);
      overflow: auto;
      z-index: 60;
    }
    
    .panel-side h2 {
      padding: 0 20px;
      margin: 20px 0;
    }
    
    .panel-side ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .panel-side li {
      list-style: none;
      padding: 10px 20px;
    }
    
    .panel-result {
      cursor: pointer;
      margin: 2px 0;
      background-color: rgba(0, 0, 0, 0.3);
    }
    
    .panel-result:hover,
    .panel-result:focus {
      color: orange;
      background-color: rgba(0, 0, 0, 0.75);
    }

    </style>

    <script type="text/javascript">

        $(document).ready(function () {
            $('#legendDiv').css('max-height', $(window).height() * .80);
            $('#legendPane').css('max-height', $(window).height() * .88);
            function querySt(Key) {
                var url = window.location.href;
                KeysValues = url.split(/[\?&]+/);
                for (i = 0; i < KeysValues.length; i++) {
                    KeyValue = KeysValues[i].split("=");
                    if (KeyValue[0] == Key) {
                        return KeyValue[1];
                    }
                }
            }


            var map;
            var roadx;
            var roady;
            var chkPrint = 0;
            var maptype = "Roads";
            var defaultVisible = [0];
            var identify = [];
            var foundFeatures = [];
            var foundGeometry = [];
            var currentFeature;


            require([
                "esri/Map",
                "esri/Graphic",
                "esri/symbols/Symbol",
                "esri/geometry/Polyline",
                "esri/symbols/SimpleLineSymbol",
                "esri/views/MapView",
                "esri/geometry/Extent",
                "esri/geometry/SpatialReference",
                "esri/layers/FeatureLayer",
                "esri/layers/GraphicsLayer",
                "esri/PopupTemplate",
                "esri/widgets/Legend",
                "esri/widgets/Home",
                "esri/widgets/Search",
                "esri/tasks/QueryTask",
                "esri/tasks/support/Query",
                "dijit/a11yclick",
                "dojo/_base/array",
                "dojo/on",
                "dojo/dom",
                "dojo/dom-attr",
                "dojo/dom-construct",
                "dojo/domReady!"
            ],
              function (
                Map,
                Graphic,
                Point,
                Polyline,
                SimpleLineSymbol,
                MapView,
                Extent,
                SpatialReference,
                FeatureLayer,
                GraphicsLayer,
                PopupTemplate,
                Legend,
                Home,
                Search,
                QueryTask,
                Query,
                a11yclick,
                arrayUtils,
                on,
                dom,
                domAttr,
                domConstruct
              ) {

                  //*********************************************************
                  // URL to feature service containing lines representing the 
                  // Average Daily Traffic counts
                  //*********************************************************
                  var urlADT = "http://gis.spokanecounty.org/arcgis/rest/services/Engineering/AverageDailyTraffic/MapServer/0";
                  var urlCnty = "http://gis.spokanecounty.org/arcgis/rest/services/Engineering/AverageDailyTraffic/MapServer/1";


                  //*********************************************************
                  //Create the PopupTemplate
                  //*********************************************************

                  var tpl = new PopupTemplate({
                      title: "{RoadName} ({FromDesc})",
                      content: "<br/><b>Average Daily Traffic (ADT): </b> {ADT}" +
                          "<br/><b>ADT Year: </b> {ADTYear}" +
                          "<br/><b>ADT Source: </b> {ADTSource}" +
                          "<br/><b>From: </b> {FromDesc}" +
                          "<br/><b>To: </b> {ToDesc}" +
                          "<br/><b>Mile Length: </b> {MileLength}" +
                          "<br/><b>Federal Function Class: </b> {FFCDesc}<br/>",
                      fieldInfos: [{
                          fieldName: "ADT",
                          format: {
                              digitSeparator: true, // Use a comma separator for large numbers
                              places: 0 // Sets the number of decimal places to 0 and rounds up
                          }
                      }, {
                          fieldName: "ADTYear",
                          format: {
                              digitSeparator: false,
                              places: 0
                          }
                      }, {
                          fieldName: "ADTSource",
                      }, {
                          fieldName: "FromDesc",
                      }, {
                          fieldName: "ToDesc",
                      }, {
                          fieldName: "MileLength",
                          format: {
                              digitSeparator: true,
                              places: 2
                          }
                      }, {
                          fieldName: "FFCDesc",
                      }]
                  });

                  //*****************************************************************
                  // Create graphics layer and symbol to use for displaying the results of query    
                  //*****************************************************************
                  var resultsLyr = new GraphicsLayer();

                  //*****************************************************************
                  //  Point QueryTask to URL of feature service  
                  //*****************************************************************
                  var qTask = new QueryTask({
                      url: urlADT
                  });



//                  alert("got to here");
                  //*****************************************************************
                  // Creat the map with a base layer
                  // Add the graphics(results) layer to the map
                  //*****************************************************************
                  var map = new Map({
                      basemap: "streets-vector"
//                      layers: [resultsLyr]
                  });


                  var view = new MapView({
                      container: "viewDiv",
                      map: map,
                      center: [-117.427677, 47.644390],
                      zoom: 9,
                      padding: {
                          right: 200
                      },
                      popup: {
                          dockEnabled: true,
                          dockOptions: {
                              buttonEnabled: true,  //disables the dock button from the popup
                              breakpoint: false,   // to prevent automatic docking when screen gets small
                              position: "bottom-left",
                          }
                      }
                  });


                  view.constraints = {
                      minScale: 2000000,  // User cannot zoom out beyond a scale of 1:2,000,000
                      maxScale: 0,  // User can overzoom tiles
                      rotationEnabled: false  // Disables map rotation
                  };

                  //*****************************************************************
                  // Add home button
                  //*****************************************************************
                  var homeButton = new Home({
                      view: view
                  });
                  homeButton.startup();

                  // Add the home widget to the top left corner of the view
                  view.ui.add(homeButton, "top-left");

                  var listNode = dom.byId("graphicsADT");

                  //*****************************************************************
                  // Set the query parameters to always return geometry and all fields.
                  // Returning geometry allows us to display results on the map/view
                  //*****************************************************************
                  var params = new Query({
                      returnGeometry: true,
                      outFields: ["*"],
                      orderByFields: ["RoadNumber ASC", "BeginMP ASC"],
                      outSpatialReference: map.spatialReference
                  });


                  //*****************************************************************
                  // Add feature layer
                  //*****************************************************************

                  var lyrADT = new FeatureLayer({
                      url: urlADT,
                      outFields: ["*"],
                      popupTemplate: tpl,
                      title: "Average Traffic Count"
                  });

                  var lyrCnty = new FeatureLayer({
                      url: urlCnty,
                      outFields: ["*"],
                      title: "County Boundary"
                  });

                  map.addMany([lyrCnty, lyrADT]);


                  //*****************************************************************
                  // Add Legend
                  //*****************************************************************
                  view.then(function () {
                      // get the first layer in the collection of operational layers in the WebMap
                      // when the resources in the MapView have loaded.
                      //            var featureLayer = webmap.layers.getItemAt(0);

                      var legend = new Legend({
                          view: view,
                          layerInfos: [{
                              layer: lyrADT,
                              title: "Average Daily Traffic"
                          }]
                      }, "legendDiv");
                      legend.startup();
                      //              document.getElementsByClassName("esri-legend__service-label").innerHTML = "My Legend Text";
                      //              document.getElementsByClassName("esri-legend__layer-caption").innerHTML = "Average Daily Traffic Count";
                      // Adds an instance of Legend widget to the
                      // bottom right of the view.
                      //                      view.ui.add(legend, "bottom-left");
                      //                      document.getElementById("legendDiv").innerHTML = legend;
                  });


                  //*****************************************************
                  //open/close the Legend when the menu button is clicked
                  //*****************************************************
                  $("#btnMenu").click(function () {
                      $("#legendPane").toggle();
                  })

                  //*********************************************
                  // search field on map
                  //*********************************************
                  var attributeName = dom.byId("attSelect");

                  //*********************************************
                  // Executes each time the button is clicked  
                  //*********************************************
                  function doQuery() {
                      // Clear the results from a previous query
                      resultsLyr.removeAll();
                      /*********************************************
                       *
                       * Set the where clause for the query. This can be any valid SQL expression.
                       * 
                       * params.where = "RoadName LIKE 'Charles%";  
                       * 
                       * RoadName is the field name for ADT Road Name and is assigned to the value of the
                       * select option in the HTML below.
                       *
                       **********************************************/
                      params.where = "RoadName LIKE " + "'" + attributeName.value + "%'";

                      // executes the query and calls getResults() once the promise is resolved
                      // promiseRejected() is called if the promise is rejected
                      qTask.execute(params)
                        .then(getResults)
                        .otherwise(promiseRejected);
                  }
                  //*********************************************
                  // Called each time the promise is resolved    
                  //*********************************************
                  function getResults(response) {

                      var extent;
                      map.add(response);

                      // Loop through each of the results and assign a symbol and PopupTemplate
                      // to each so they may be visualized on the map
                      var resultsADT = arrayUtils.map(response.features, function (feature) {

                          // Sets the symbol of each resulting feature to 
                          // a wide turquoise line
                          feature.symbol = new SimpleLineSymbol({
                              color: "#00F9FF",
                              style: "solid",
                              width: 2
                          });

                          extent = feature.geometry.getExtent().expand(3);
//                          map.setExtent(extent);

                          feature.popupTemplate = tpl;
                          return feature;
                      });

                      resultsLyr.addMany(resultsADT);
                      // animate to the results after they are added to the map  
                      //                      view.goTo(resultsADT);
                      // print the number of results returned to the user
                      dom.byId("printResults").innerHTML = resultsADT.length +
                        " results found!";
                      listResults(resultsADT);
                  }


                  //*********************************************
                  // Called each time the promise is rejected    
                  //*********************************************
                  function promiseRejected(err) {
                      console.error("Promise rejected: ", err.message);
                  }







                  //*********************************************
                  // Create list of DoQuery results 
                  //*********************************************

                  var graphics;

                  //*********************************************
                  // Called each time the promise is rejected    
                  //*********************************************
                  function listResults(results) {
//                      alert("inside listResults");
                        graphics = results;

                        var fragment = document.createDocumentFragment();

                        results.forEach(function (result, index) {
                            var attributes = result.attributes;
                            var name = attributes.RoadName + " (" +
                            attributes.FromDesc + ")"

                            // Create a list zip codes in NY
                            domConstruct.create("li", {
                                className: "panel-result",
                                tabIndex: 0,
                                "data-result-id": index,
                                textContent: name
                            }, fragment);
                        });

                        domConstruct.place(fragment, listNode, "only");
                    }


                  // listen to click event on the road name list
                  on(listNode, on.selector("li", a11yclick), function (evt) {
                      var target = evt.target;
                      var resultId = domAttr.get(target, "data-result-id");

                      // get the graphic corresponding to the clicked zip code
                      var result = resultId && graphics && graphics[parseInt(resultId,10)];

                      if (result) {
                          // open the popup at the road name polyline
                          // and set the popup's features which will populate popup content and title.
                          view.popup.visible = true;
//                          var content = result.getContent();
//                          alert(content);
                          view.popup.open({
                              features: [result],
                              location: result.geometry
                          });
                      }
                  });



                  //*********************************************
                  // Call doQuery() each time the button is clicked   
                  //*********************************************
                  on(dom.byId("doBtn"), "click", doQuery);


              }); //end require

        }); //end $document

        </script>
</head>
<body class="calcite">
    <div id="header">
        <button class="btnheader" id="btnPublicWorks" onclick="window.location.href = 'http://www.spokanecounty.org/257/Public-Works'">
            <img src="./Logos/PublicWorksLogoThumbnail.png"  align="middle"/><p style="display:inline; "></p>
        </button>
        <span id="spanHeader">Average Daily Traffic</span>
        <div class="dropdown">
            <button class="btnheader" id="btnMenu"><img src="./icons/icons-png/bars-white.png" /> Menu</button>
        </div>
    </div>
    <div id="viewDiv" class="page-map">

        <div id="legendPane" hidden="hidden" class="esri-ui-top-right esri-ui-corner">

                <p id="legendDiv">
                    <button id="btnLegendClose" class="close" onclick="document.getElementById('legendPane').style.display='none'">✖</button>
                </p>
        </div>

   </div> <!--end .page-map-->

    <div id="homeButton"> </div>

    <div id="optionsDiv" class="panel-side">
        <h2>Average Daily Traffic</h2>
        <input type="text" id="attSelect" placeholder="Enter Road Name">
        <br>
        <br>
        <button id="doBtn">Do Query</button>
        <br>
        <p id="printResults">Print Results Here</p>
        <ul id="graphicsADT">
            <li>List Items Here</li>
        </ul>
    </div>



</body>
</html>