<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="predict-density">
  <style>
    .inputform {
      width: inherit;
    }
  </style>
  <template>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Predict Pickup density</h4>
          </div>
          <div class="modal-body">
            <div id="densityvis" style="margin-left: auto;margin-right: auto">
              <paper-card>
                <img style="height: 300px" src="../../images/real_density.png">
                <h4>Real Pickup Density</h4>
              </paper-card>
              <paper-card>
                <img style="height: 300px" src="../../images/predict_density.png">
                <h4>Predicted Pickup Density</h4>
              </paper-card>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <paper-progress id="loadprogress" value="0" style="display: none"></paper-progress>
      <div class="row">
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
              <paper-input value="2016-04-12" id="date" error-message="needs some text!" required label="Date: format(2016-04-12)"></paper-input>
              <paper-input value="12" id="hour" error-message="needs some text!" required label="Hour of the day"></paper-input>
              <paper-input value="0" id="snow" error-message="needs some text!" required label="Snow (inches)"></paper-input>
            </div>
          </div>
          <paper-button style="margin-left: auto;margin-right: auto; display: block; width: 150px; margin-top: 10px; background: #303a9f;color: white" on-click="getDensity" data-toggle="modal" data-target="#predictdialog" raised>New Predict</paper-button>
          <paper-button style="margin-left: auto;margin-right: auto; display: block; width: 150px; margin-top: 10px; background: #303a9f;color: white" on-click="visClicked" data-toggle="modal" data-target="#myModal">Visualization</paper-button>
          <vaadin-grid style="margin-top: 10px;" id="maingrid">
            <table>
              <colgroup>
                <col>
                <col>
              </colgroup>
              <thead>
              <tr>
                <th>Address</th>
                <th>Pickup Cnt/Hour</th>
              </tr>
              </thead>
            </table>
          </vaadin-grid>
        </div>
        <div class="col-md-6" style="margin-top: 40px">
          <paper-card>
            <google-map style="width: 500px; height: 500px" latitude="40.77" longitude="-73.86" zoom="11">
              <template is="dom-repeat" items="{{marker}}">
                <google-map-marker latitude="{{item.lat}}" longitude="{{item.lng}}" icon="../../images/marker.png">
                  Rank:{{item.order}}
                </google-map-marker>
              </template>
            </google-map>
          </paper-card>
        </div>
      </div>
      <div class="row">
        <paper-card>

        </paper-card>
        <vaadin-grid id="comparegrid" style="display:none">
          <table>
            <colgroup>
              <col>
              <col>
              <col>
            </colgroup>
            <thead>
            <tr>
              <th>Address</th>
              <th>Normal day</th>
              <th>Snow day(6 inch)</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Madison Square Garden</td>
              <td>419</td>
              <td>89 <span style="color: red;">(79% off)</span></td>
            </tr>
            <tr>
              <td>Laguardia Airport</td>
              <td>177</td>
              <td>94 <span style="color: red;">(47% off)</span></td>
            </tr>
            </tbody>
          </table>
        </vaadin-grid>
      </div>
    </div>
  </template>
  <script>
    (function () {
      'use strict';
      Polymer({
        is: 'predict-density',
        getDensity: function () {
          this.$$("#comparegrid").style.display="block";
          this.$$("#loadprogress").style.display="block";
          this.$$("#loadprogress").value = 10;
          var _this = this;
          var datevalidate = this.$$("#date").validate();
          var hourvalidate = this.$$("#hour").validate();
          var snowv = this.$$("#snow").validate();
          if (datevalidate && hourvalidate && snowv ) {
            var hour = this.$$("#hour").value;
            var date = this.$$("#date").value;
            var snow = this.$$("#snow").value;
            this.$$("#loadprogress").value = 20;
            $.ajax({
                method: "PUT",
                data: {hour: hour,date:date,prcp:0,snow:snow,tmax:57,tmin:36},
                url: "https://traveladvisor.herokuapp.com/densitypredict"
              })
              .done(function (data) {
                _this.$$("#loadprogress").value = 30;
                var griddata = [];
                var topdensityarray = data['top10'];
                var top10address = data['top10address'];
                for (var i = 0; i < 5; i++) {
                  var latlogstr = topdensityarray[i][1].toString();
                  if(parseInt(topdensityarray[i][0])>0){
                     griddata.push([top10address[i], parseInt(topdensityarray[i][0]),latlogstr])
                  }
                }
                _this.griddata = griddata;
                _this.grid.items = function (params, callback) {
                  callback(griddata.slice(params.index, params.index + params.count));
                };
                _this.grid.size = 5;
                var marker = [];
                for (var index=0;index<griddata.length;index++){
                  var ltuple = _this.griddata[index][2].split(",");
                  marker.push({lat:ltuple[0],lng:ltuple[1],order:index+1})
                }
                _this.marker = marker;
                _this.$$("#loadprogress").value = 70;
                setTimeout(function () {
                  _this.$$("#loadprogress").value = 100;
                  _this.$$("#loadprogress").style.display = "none";
                  _this.$$("google-map").resize()
                }, 1000); //wait ten seconds before continuing
              });
          }
        },
        ready: function () {
          this.lga = 177;
          this.marker = [];
          var _this = this;
          _this.griddata = [];
          this.grid = this.$$("#maingrid");
          $.ajax({
              method: "PUT",
              data: {hour: 12,date:"2016-04-12",prcp:0,snow:0,tmax:57,tmin:36},
              url: "https://traveladvisor.herokuapp.com/densitypredict"
            })
            .done(function (data) {
              var griddata = [];
              var topdensityarray = data['top10'];
              var top10address = data['top10address'];
              for (var i = 0; i < 5; i++) {
                var latlogstr = topdensityarray[i][1].toString();
                griddata.push([top10address[i], parseInt(topdensityarray[i][0]),latlogstr])
              }
              _this.griddata = griddata;
              _this.grid.items = function (params, callback) {
                callback(griddata.slice(params.index, params.index + params.count));
              };
              _this.grid.size = 5;
              var marker = [];
              for (var index=0;index<5;index++){
                var ltuple = _this.griddata[index][2].split(",");
                marker.push({lat:ltuple[0],lng:ltuple[1],order:index+1})
              }
              _this.marker = marker;
              setTimeout(function () {
                _this.$$("google-map").resize()
              }, 1000); //wait ten seconds before continuing
            });
        },

      });
    })();
  </script>
</dom-module>
