// Code goes here
(function () {
  var app = angular.module("weasel");
  
  var SearchController = function($scope, $http,$location, spotify, artistService){
    $scope.message = "Search The Weasel to find an Artist or a Band";
     
   var artistsFound = function (data) {
     
      artistService.name = data.artists.items;
      $location.path("/Artist/");
  };
  
  var onError = function () {
    $scope.Artistmessage = "No artist found";
  };
  
  
  $scope.search = function(){
    spotify.getArtists($scope.artist).then(artistsFound, onError);
    
    
  };
  
  
  $scope.Artistmessage = "";
  $scope.artist = "bloc party";
  };
  
  
  
  
  
   app.controller("SearchController",SearchController);
}());
/* Styles go here */

.Highlight
{
  background-color:#F0FFFF;
  cursor:pointer;
}
.cover {
    width: 300px;
    height: 300px;
    display: inline-block;
    background-size: cover;
}

.cover:hover {
    cursor: pointer;
}

.urlbar {
  border:solid 1px black;
  margin:20px 5px 20px 5px;
}
(function() {

  var app = angular.module("weasel", ["ngRoute"])

  app.config(function($routeProvider) { // can put our routing code in here routeProvidcer made availbale through ngRoute dependency

    $routeProvider
    .when("/Artist",{
        templateUrl: "Artist.html" ,
        controller: "ArtistController"
    })
    .when("/:Artist/:id",{
      templateUrl:"Albums.html",
      controller:"AlbumsController"
    })
    .when("/Artist/Album/:songid",{
      templateUrl: "Songs.html", 
      controller:"SongsController"
    })
    .otherwise({redirectTo:"/index"});


  });

}());
(function() {

  var app = angular.module("weasel");

  var ArtistController = function($scope, $http, $location, spotify, artistService) {

    $scope.getAlbum = function(id, artist) {
      $location.path("/" + artist + "/" + id);
    };

    $scope.artistsReturned = artistService.name;
  };
  app.controller("ArtistController", ArtistController);

}());
(function() {
  var app = angular.module("weasel");

  app.controller("AlbumsController", function($scope,spotify,$routeParams, $location){

      var albumsFound = function(data) {

        $scope.albumMessage = "Albums found";
        $scope.albumsReturned = data.items;

      };

      var onError = function() {

        $scope.albumMessage = "No albumFound";
      };
      
      $scope.chosenArtist = $routeParams.Artist;

      spotify.getAlbums($routeParams.id).then(albumsFound, onError);
      
      
      $scope.songs = function(id){
    
          $location.path("/Artist/Album/" + id);
    
  };

  });
  
  
      
}());
<div class="panel panel-default">
        <div class="panel-body">
<h1>{{chosenArtist}} Albums </h1>
</div>
</div>
<div class="col-sm-4" ng-repeat="albums in albumsReturned">
 
    <div class="row">
      <div >
     <b>{{albums.name}}</b> 
     <br>
      <img ng-show=" {{albums.images[0].url}}" ng-src=" {{albums.images[0].url}}" class="cover list-group-item" ng-click="songs(albums.id)">
  </div>
  </div>
</div>


<script id="results-template" type="text/x-handlebars-template">
    {{#each albums.items}}
    <div style="background-image:url({{images.0.url}})" data-album-id="{{id}}" class="cover"></div>
    {{/each}}
</script>

<a href="#/index">Clear the results</a>
<div>
     <ul class="list-group">
       <li class="list-group-item" ng-click="getAlbum(artist.id,artist.name)" ng-class="{Highlight: hover}" ng-mouseenter="hover = true"  ng-mouseleave="hover = false" ng-repeat="artist in artistsReturned">
  
        
         <br>
         
        <div class="panel panel-default">
        <div class="panel-heading">
        <b> {{artist.name}} </b>
        </div>
        
        <br>
        <div class="container">
    <div class="row">
      <div class="col-sm-5">
        <center><img ng-show="{{artist.images[0].url}}" ng-src="{{artist.images[0].url}}" height="300" width ="300"/></center>
        <br>
      </div>
      <div class="col-sm-7">
        <div class="well">
          <dl class="dl-horizontal">
            <dt ng-show="artist.genres[0]">Genres:</dt>
            <dd ng-show="artist.genres">{{artist.genres[0]}}</dd>

            <dt ng-show="artist.followers">Followers:</dt>
            <dd ng-show="artist.followers">{{artist.followers.total  | number}}</dd>

            <dt ng-show="artist.popularity">Popularity:</dt>
            <dd ng-show="artist.popularity">
              {{artist.popularity}}/100
                
            </dd>

          </dl>
        </div>
      </div>
    </div>
  </div>
  
  <div class="container-fluid">
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;"><a>View Albums</a></div>
  </div>
</div>

    
         
          
         
          
          
        </div>
          
        
       </li>
     </ul>
</div>       

<a href="#/index">Clear the results</a>
<!DOCTYPE html>
<html ng-app="weasel">

  <head>
     <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script data-require="angular-route@1.4.6" data-semver="1.4.6" src="https://code.angularjs.org/1.4.6/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="router.js"></script>
    <script src="SpotifyService.js"></script>
    <script src="ArtistService.js"></script>
    <script src="SearchController.js"></script>
    <script src="ArtistController.js"></script>
    <script src="AlbumsController.js"></script>
    <script src="SongsController.js"></script>
    <script src="urlbarController.js"></script>
  
  </head>

  <body>
    <div class='urlbar' ng-controller='urlbarController'>{{url()}}</div>
    
    <div ng-controller="SearchController" >
    <div class="panel -default">
   <img src="http://img1.wikia.nocookie.net/__cb20140204154543/cow-and-chicken/images/5/50/I.M._Weasel.png"  style="width:100px;height:100px;">
   {{message}}
     </div>
        <form class="navbar-form" role="search" name="searchUser" ng-submit="search(artist)">
           <div class="input-group">
      <input type="search" class="form-control" required="" placeholder="Search for an Artist" ng-model="artist" />
      <div class="input-group-btn">
       <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
       </div>
      </div>
    </form>
   </div>
    <div ng-view=""></div>
   
  </body>

</html>
(function(){
  var spotify = function($http){
  
  
  var getArtists = function(artist){
  return $http.get("https://api.spotify.com/v1/search?q=" + artist + "&type=artist")
  .then(function(response){ return  response.data });
  };
  
   
  
  var getAlbums = function(id){
    
   return  $http.get("https://api.spotify.com/v1/artists/" + id + "/albums?market=GB")
   .then(function(response){ return  response.data });
  };
  
  
  var getSongs = function(id){
    return $http.get("https://api.spotify.com/v1/albums/" + id)
    .then(function(response){return response.data});
  };
  
  
  var playSongs = function(id){
    return $http.get("https://api.spotify.com/v1/tracks/" + id)
    .then(function(response){return response.data});
  };
  
  var pauseSongs = function(id){
    return $http.get("https://api.spotify.com/v1/tracks/" + id)
    .then(function(response){return response.data});
  };
  
  return{
    getArtists:getArtists,
    getAlbums:getAlbums, 
    getSongs:getSongs,
    playSongs:playSongs,
    pauseSongs:pauseSongs
  };
  
  };
   var module = angular.module("weasel");
    module.factory("spotify", spotify);
}());


(function(module) {

  var artistService = function() {
    return {
      name: undefined
    };
  };

  module.factory("artistService", artistService);

}(angular.module("weasel")));
(function() {
  var app = angular.module("weasel");

  var SongsController = function($scope, spotify, $routeParams, $http) {

    var songsFound = function(data) {

      $scope.songsReturned = data.tracks.items;
    };

    var onError = function() {
      alert("no songs");
    };


    var songsPlaid = function(data) {
      $scope.playing; 
      $scope.paused;
      data.preview_url;
      $scope.audio = document.createElement('audio');
      $scope.audio.src = data.preview_url;
      $scope.audio.play();
    };

    var songsPaused = function(data){
      $scope.audio.pause();
    };

    $scope.playSong = function(id) {

      spotify.playSongs(id).then(songsPlaid, onError);


    };
    
    
     $scope.pauseSong = function(id) {

      spotify.pauseSongs(id).then(songsPaused, onError);


    };

    spotify.getSongs($routeParams.songid).then(songsFound, onError);

  };
  app.controller("SongsController", SongsController);
}());
<div class="panel panel-default">
<div class="panel-body">
<h1>Songs</h1>
</div>
</div>
<div>
  <ul >
    <li id="music-button" ng-class="{Highlight: hover}" ng-mouseenter="hover = true"  ng-mouseleave="hover = false" class="list-group-item" ng-repeat="songs in songsReturned"> 
      {{songs.name}} <button class="btn btn-link" ng-click="playSong(songs.id)">Play</button>  <button class="btn btn-link" ng-click="pauseSong(songs.id)">Pause</button>
    </li>
    
  </ul>
</div>
(function() {
  
  var urlbarController = function($scope, $location) {
    $scope.url = function() { return $location.url(); }
  }

  angular.module('weasel').controller('urlbarController', urlbarController);

  
})();