<!DOCTYPE html>
<html>

<head>
  <title>F-1 Feeder</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />


  <!-- Custom styles for this template -->
  <link href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">
</head>

<body ng-app="F1FeederApp" ng-controller="driversController">


  <header class="plain-header">
    <div class="container">
      <nav>
        <ul class="nav navbar-nav navbar-left" id="home_link">
          <li><a href="http://bryanttunbutr.com/">Bryant Tunbutr</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://bryanttunbutr.wordpress.com/">Blog</a></li>
          <li><a href="http://www.bryanttunbutr.com/projects">Projects</a></li>
          <li><a href="mailto:BTunbutr@gmail.com">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

    <div class="container">

  <ng-view></ng-view>

    </div>

  <footer class="footer">
    <div class="container">

      <span style="float:left;">©2015 Bryant Tunbutr</span>

      <span style="float:right;">
            <a href="http://www.bryanttunbutr.com/projects" id="home">Projects</a>
            <a href="https://bryanttunbutr.wordpress.com/" id="blog" style="padding-left:20px">Blog</a></span>
    </div>
    <!-- end Container-->
  </footer>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  
  
  <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>-->
  <!--<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>-->
  <script src="js/app.js"></script>  
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>


  <script>
  </script>

</body>


</html>
angular.module('F1FeederApp.controllers', []).

  /* Drivers controller */
  controller('driversController', function($scope, ergastAPIservice) {
    $scope.nameFilter = null;
    $scope.driversList = [];
    $scope.searchFilter = function (driver) {
        var re = new RegExp($scope.nameFilter, 'i');
        return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
    };

    ergastAPIservice.getDrivers().success(function (response) {
        //Digging into the response to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
  }).

  /* Driver controller */
  controller('driverController', function($scope, $routeParams, ergastAPIservice) {
    $scope.id = $routeParams.id;
    $scope.races = [];
    $scope.driver = null;

    ergastAPIservice.getDriverDetails($scope.id).success(function (response) {
        $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; 
    });

    ergastAPIservice.getDriverRaces($scope.id).success(function (response) {
        $scope.races = response.MRData.RaceTable.Races; 
    }); 
  });

 .categories {
   /* margin: 0 0 10px; */
   margin-left: auto;
   margin-right: auto;
 }
 
 .categories ul {
   /*   margin-left: auto;
margin-right: auto; */
   margin: 0 auto 0 auto;
   padding: 0;
   width: 100px;
   background: #f0f0f0;
   border: solid 1px #333;
   text-align: center;
list-style-type: none;
 }
 
 img {
   max-width: 250px;
 }
 
 .footer {
   height: 40px;
   background-color: transparent !important;
 }
 
 .plain-header {
   a {
     color: #428bca;
   }
   a:hover,
   a:focus {
     background-color: #FFF;
     color: #0085a1;
   }
   position: relative;
   padding: 30px 15px;
   text-align: center;
   font-size: 20px;
 }
 
 #home_link {
   font-size: 1.7em;
   color: white;
   text-transform: uppercase;
   letter-spacing: -1px;
   padding: 9px 15px;
   font-weight: bold;
 }
 
 #logo {
   color: #428bca;
   position: relative;
   text-align: center;
   font-size: 20px;
   padding: 30px 15px;
   text-align: left;
   :hover, :focus {
     background-color: #eeeeee;
     color: #0085a1;
   }
 }
 
 #logo:hover,
 #logo:focus {
   background-color: #eeeeee;
   color: #0085a1;
 }
 
 .footer {
   height: 40px;
   background-color: transparent;
 }
 
 h1,
 h3 {
   text-align: center;
 }
 
 .centering {
   text-align: center;
 }
 
 .center-block {
   float: none !important
 }
angular.module('F1FeederApp', [
  'F1FeederApp.services',
  'F1FeederApp.controllers',
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
	when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).
	when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}).
	otherwise({redirectTo: '/drivers'});
}]);
angular.module('F1FeederApp.services', [])
  .factory('ergastAPIservice', function($http) {

    var ergastAPI = {};

    ergastAPI.getDrivers = function() {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverDetails = function(id) {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverRaces = function(id) {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'
      });
    }

    return ergastAPI;
  });

    <div class="container">
      
      <input type="text" ng-model="nameFilter" placeholder="Search..."/>
<table>
<thead>
  <tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>

  <tr ng-repeat="driver in driversList | filter: searchFilter">
    <td>{{$index + 1}}</td>
    <td>
      <img src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/flags/{{driver.Driver.nationality}}.png" />
      <a href="#/drivers/{{driver.Driver.driverId}}">
	  	{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
	  </a>
	</td>
    <td>{{driver.Constructors[0].name}}</td>
    <td>{{driver.points}}</td>
  </tr>
  
</tbody>
</table>
  </div>

    <div class="container">
      
      <section id="main">
  <a href="./#/drivers"><- Back to drivers list</a>
  <nav id="secondary" class="main-nav">
    <div class="driver-picture">
      <div class="avatar">
        <img ng-show="driver" src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/drivers/{{driver.Driver.driverId}}.png" />
        <img ng-show="driver" src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/flags/{{driver.Driver.nationality}}.png" /><br/>
        {{driver.Driver.givenName}} {{driver.Driver.familyName}}
      </div>
    </div>
    <div class="driver-status">
      Country: {{driver.Driver.nationality}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
      Birth: {{driver.Driver.dateOfBirth}}<br/>
      <a href="{{driver.Driver.url}}" target="_blank">Biography</a>
    </div>
  </nav>

  <div class="main-content">
    <table class="result-table">
      <thead>
        <tr><th colspan="5">Formula 1 2013 Results</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Round</td> <td>Grand Prix</td> <td>Team</td> <td>Grid</td> <td>Race</td>
        </tr>
        <tr ng-repeat="race in races">
          <td>{{race.round}}</td>
          <td><img  src="https://raw.githubusercontent.com/raonibr/f1feeder-part1/master/app/img/flags/{{race.Circuit.Location.country}}.png" />{{race.raceName}}</td>
          <td>{{race.Results[0].Constructor.name}}</td>
          <td>{{race.Results[0].grid}}</td>
          <td>{{race.Results[0].position}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
  </div>