<html ng-app="ionic.weather">
  <head>
    <meta charset="utf-8">
    <title>Weather</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/dist/css/ionic.css">

    <link rel="stylesheet" href="weather.css">

    <script src="/dist/js/ionic.js"></script>
    <script src="/dist/js/angular/angular.js"></script>
    <script src="/dist/js/angular/angular-animate.js"></script>
    <script src="/dist/js/angular/angular-route.js"></script>
    <script src="/dist/js/angular/angular-resource.js"></script>
    <script src="/dist/js/angular/angular-touch.js"></script>
    <script src="/dist/js/angular/angular-sanitize.js"></script>
    <script src="/dist/js/ionic-angular.js"></script>

    <script src="services.js"></script>
    <script src="directives.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="WeatherCtrl">
    <div id="bg-image" ng-style="getActiveBackgroundImage()"></div>

    <header id="header" class="bar bar-header bar-clear">
      <h1 class="title">
        <span class="city">{{current.display_location.city}}</span><br>
        <current-time localtz="current.local_tz_short"></current-time>
      </h1>
    </header>
    <div id="scroller" class="scroll padding" style="margin-top:44px">
      <small-weather>
        <h5>{{current.weather}}</h5>
        <h5>H: {{forecast.forecastday[0].high.fahrenheit}} L: {{forecast.forecastday[0].low.fahrenheit}}</h5>
        <h1 class="current-temp">{{current.temp_f | int}}&deg;</h1>
      </small-weather>
      <weather-box title="Forecast" style="height: 400px">
      </weather-box>
      <weather-box title="Details" style="height: 400px">
      </weather-box>
    </div>
  </body>

  <script>
    var s = document.getElementById('scroller');
    var bgImage = document.getElementById('bg-image');
    var header = document.getElementById('header');

    var scroll = new ionic.views.Scroll({
      el: s,
      decelerationRate: 0.87,
      inertialEventInterval: 100
    });

    var height = window.innerHeight;
    s.addEventListener('momentumScrolled', function(e) {
      setTimeout(function() {
        var bgAmount = e.detail.scrollTop;
        //bgImage.style.webkitTransform = 'translate3d(0, ' + -(bgAmount / 20) + 'px, 0)';

        //var blurAmount = Math.min(3, e.detail.scrollTop / 200);

        var brightness = 1;
        if(e.detail.scrollTop > 200) {
          var diff = Math.min(600, e.detail.scrollTop - 200);
          var per = 1 - (diff / 600);
          brightness = Math.max(0.7, per);
        }
        //bgImage.style.webkitFilter = 'brightness(' + brightness + ')';
      });
    });
  </script>
</html>
