YaronMiro · YaronMiro · Apr 29, 2015 · Apr 29, 2015 · Apr 29, 2015 · Apr 29, 2015
diff --git a/app/index.html b/app/index.html
@@ -25,9 +25,9 @@
   <body id="myApp" ng-app="myApp">
     <!-- Add your site or application content here -->
     <div id="main" class="container">
-      <header id="main-header" name="main-header" ui-view="header"></header>
-      <main id="main-content" ui-view="content" class="fadein fadeout"></main>
-      <footer id="main-footer" ui-view="footer"></footer>
+      <header id="main-header" ng-class="{'fixed': $state.current.data.fixedPosition}" name="main-header" ui-view="header"></header>
+      <main id="main-content" ui-view="content" class="fadein fadeout" ng-class="{'fixed': $state.current.data.fixedPosition, 'slim': $stateParams.moviesCount <= $state.current.data.numberOfMoviesToCompare}"></main>
+      <footer id="main-footer" ng-class="{'fixed': $state.current.data.fixedPosition, 'slim': $stateParams.moviesCount <= $state.current.data.numberOfMoviesToCompare}" ui-view="footer"></footer>
     </div>
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
      <script>
@@ -60,6 +60,7 @@
     <script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
     <script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
     <script src="bower_components/angular-scroll/angular-scroll.js"></script>
+    <script src="bower_components/shuffle-array/dist/shuffle-array.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
@@ -72,7 +73,9 @@
     <script src="scripts/services/bookmarks.js"></script>
     <script src="scripts/directives/scrollBar.js"></script>
     <script src="scripts/directives/scrollDisplay.js"></script>
+    <script src="scripts/directives/scrollToMovie.js"></script>
     <script src="scripts/directives/movieLink.js"></script>
+    <script src="scripts/filters/alterCollection.js"></script>
     <!-- endbuild -->
 </body>
 </html>
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -52,7 +52,7 @@ angular
      *  Return the target movie {*}.
      */
     var gettingSelectedMovie = function(moviesData, $stateParams, $filter){
-      var selectedMovie = $filter('filter')(moviesData, {urlAlias: $stateParams.name});
+      var selectedMovie = $filter('filter')(moviesData.movies, {urlAlias: $stateParams.name});
       return selectedMovie[0];
     };
 
@@ -106,6 +106,11 @@ angular
           moviesData: function(Movies){
             return Movies.gettingMovies();
           }
+        },
+        // Example of adding custom data (hardcoded) for applying
+        // conditional css class.
+        data: {
+          fixedPosition: true
         }
        })
 
@@ -132,13 +137,33 @@ angular
           }
         },
         resolve: {
-          moviesData: function(Bookmarks){
-            return Bookmarks.getMovies();
+          moviesData: function(Bookmarks, $stateParams){
+            // The resolve object automatically resolved it self as a "promise".
+            // Usually you will call a function that just returns a "promise"
+            // object, But on this case we want to add extra logic before we
+            // resolve. That's why it's done manually.
+            return Bookmarks.getMovies().then(function(movies) {
+              $stateParams.moviesCount = movies.length;
+              return movies;
+            });
           }
+        },
+        // Callback function been executed immediately after a successful
+        // "state" transition. In this example we make sure we are scrolling to
+        // the top of the page.
+        onEnter: function($document) {
+            var element = angular.element(document.getElementById('myApp'));
+            $document.scrollToElementAnimated(element);
+          },
+        // Example of adding custom data (hardcoded) for applying
+        // conditional css class.
+        data: {
+          fixedPosition: true,
+          numberOfMoviesToCompare: 3
         }
        })
 
-      // Movies state.
+      // Movie state.
       .state('main.movie',{
         url: 'movie/{name}?originBookmark',
         abstract: true,
@@ -162,12 +187,11 @@ angular
           }
         }
       })
-
       // Single movie state.
       .state('main.movie.movieInfo',{
         // The "^" character excludes the parent prefix url
         // ("movie/{name}?originBookmark") format from this child state url, it
-        // will become only as "movie/info/{name}?originBookmark".
+        // will transform to "movie/info/{name}?originBookmark".
         url: '^/movie/info/{name}?originBookmark',
         views: {
           'content@': {
@@ -211,7 +235,7 @@ angular
         }
       })
   }])
-  .run([ '$rootScope', '$state', '$stateParams', 'localStorageService', 'Bookmarks', function ($rootScope, $state, $stateParams, localStorageService, Bookmarks) {
+  .run([ '$rootScope', '$state', '$stateParams', 'localStorageService', function ($rootScope, $state, $stateParams, localStorageService) {
     // It's very handy to add references to $state and $stateParams to the
     // $rootScope so that you can access them from any scope within your
     // applications.
@@ -224,6 +248,9 @@ angular
       return console.log(data);
     };
 
+    //Debug variable
+    $rootScope.debug = false;
+
     // Access local storage service from any scope.
     $rootScope.localStorageService = localStorageService;
   }])
diff --git a/app/scripts/controllers/movie.js b/app/scripts/controllers/movie.js
@@ -13,7 +13,7 @@ angular.module('myApp')
     var self = this;
 
     // Array of movies.
-    self.movies = moviesData;
+    self.movies = moviesData.movies;
 
     // Bookmarks service object.
     self.bookmarksService = Bookmarks;
@@ -24,4 +24,11 @@ angular.module('myApp')
     // Movie trailer.
     self.movieTrailerUrl = Movies.gettingMovieTrailerUrl(self.selectedMovie.trackName, $state.current.data.trailer);
 
+    // filter params.
+    self.filterParams = {};
+    self.filterParams.RelatedMoviesByGenre = {
+      primaryGenreName: self.selectedMovie.primaryGenreName,
+      id: '!' + self.selectedMovie.id
+    };
+
   }]);
diff --git a/app/scripts/controllers/movies.js b/app/scripts/controllers/movies.js
@@ -13,7 +13,13 @@ angular.module('myApp')
     var self = this;
 
     // Movies data.
-    self.data = moviesData;
+    self.data = moviesData.movies;
+
+    // Movies data.
+    self.filterByGenre = '!All';
+
+    // Movies genres.
+    self.genres = moviesData.genres;
 
     // Bookmarks service object.
     self.bookmarksService = Bookmarks;

diff --git a/app/scripts/directives/scrollBar.js b/app/scripts/directives/scrollBar.js
@@ -6,7 +6,6 @@ angular.module('myApp')
       restrict: 'EA',
 
       link: function(scope, element) {
-
         // Adding scrollbar js library.
         element.mCustomScrollbar({
           setHeight: 75,

diff --git a/app/scripts/directives/scrollToMovie.js b/app/scripts/directives/scrollToMovie.js
@@ -0,0 +1,19 @@
+'use strict';
+angular.module('myApp')
+  .directive('scrollToMovie', ['$document', function ($document) {
+    return {
+      restrict: 'EA',
+      scope: {
+        itemId: '@'
+      },
+      link: function (scope, element) {
+
+          var scrollToMovie = function(id) {
+            var element = angular.element(document.getElementById(id));
+            $document.scrollToElementAnimated(element)
+          }
+
+          element.bind('click', scrollToMovie(scope.itemId));
+      }
+    };
+  }]);
diff --git a/app/scripts/filters/alterCollection.js b/app/scripts/filters/alterCollection.js
@@ -0,0 +1,19 @@
+angular.module('myApp').filter('alterCollection', function($window, $filter) {
+  return function(collection, params) {
+    console.log(params);
+    console.log(collection);
+
+
+    // Exclude self movie and movies from different genres.
+    return $filter('filter')(collection, params.config).slice(0,6);
+
+    var newCollection = new Array();
+    angular.copy(collection, newCollection);
+    // Shuffle the collection.
+    newCollection = $window.shuffle(newCollection);
+//    newCollection = ;
+
+//    var newCollection = ;
+    return newCollection
+  };
+});
diff --git a/app/scripts/services/bookmarks.js b/app/scripts/services/bookmarks.js
@@ -4,9 +4,26 @@ angular.module('myApp')
   .factory('Bookmarks', ['localStorageService', '$filter', '$q', function (localStorageService, $filter, $q) {
 
     // Private data array of movies.
-    var data =[];
-    data = localStorageService.get('bookmarks');
-    data = data != null ? data : new Array();
+    var data = {
+      movies: localStorageService.get('bookmarks') || new Array(),
+      genres: {}
+    };
+
+    /**
+     * Get all of the existing genres and a counter for each one.
+     *
+     * @param movies
+     *  Movies array.
+     * @returns {*}
+     *  Array of genres names and counter for each genre.
+     */
+    function getMoviesGenres(movies) {
+      var genres = {'All': movies.length};
+      angular.forEach(movies, function(movie) {
+        angular.isDefined(genres[movie.primaryGenreName]) ? genres[movie.primaryGenreName]++ : genres[movie.primaryGenreName] = 1;
+      });
+      return genres;
+    }
 
     return {
 
@@ -28,7 +45,7 @@ angular.module('myApp')
         angular.copy(movie, movieCopy);
 
         // Get array of movies.
-        var movies = data;
+        var movies = data.movies;
 
         // Adding a flag to the movie object to reference it's relationship
         // to the bookmark type movie.
@@ -72,7 +89,7 @@ angular.module('myApp')
         var deferred = $q.defer();
 
         // Get array of movies.
-        var movies = data;
+        var movies = data.movies;
 
         // Find the target movie from with in the movies array.
         var targetMovie = $filter('filter')(movies, {id: movie.id});
@@ -90,15 +107,14 @@ angular.module('myApp')
 
         // In case of success.
         if (deleted) {
-
           // On success un-mark the movie as bookmarked.
           movie.isBookmarked = false;
 
-          deferred.resolve({"deleted": deleted, "error": false});
+          deferred.resolve({"error": false});
         }
         // In case of error.
         else {
-          deferred.reject({"deleted": deleted, "error": true});
+          deferred.reject({"error": true});
         }
 
         // Return promise object.
@@ -113,6 +129,9 @@ angular.module('myApp')
        */
       getMovies: function() {
         var deferred = $q.defer();
+        data.genres = getMoviesGenres(data.movies);
+        // count numbers of movies that are returned.
+        data.count = data.length;
         deferred.resolve(data);
         // Return promise object.
         return deferred.promise;
@@ -128,7 +147,7 @@ angular.module('myApp')
      * @returns bool
      */
     isMovieBookmarked: function(movieId) {
-      var movies = data;
+      var movies = data.movies;
       // Find the target movie from with in the movies array.
       var targetMovie = $filter('filter')(movies, {id: movieId});
       return targetMovie.length ? true : false;

diff --git a/app/scripts/services/movies.js b/app/scripts/services/movies.js
@@ -1,10 +1,10 @@
 'use strict';
 
 angular.module('myApp')
-  .factory('Movies', ['$http', '$q', '$sce', 'Bookmarks', function ($http, $q, $sce, Bookmarks) {
+  .factory('Movies', ['$http', '$q', '$sce', '$filter', 'Bookmarks', function ($http, $q, $sce, $filter, Bookmarks) {
 
     /**
-     * Return the promise {*} with the list of top movies Ids amount by moviesCount.
+     * Return the movies IDs from the list of "top movies".
      *
      * @param moviesCount
      *  Number of movies to return.
@@ -78,8 +78,27 @@ angular.module('myApp')
       return deferred.promise;
     }
 
-    // Public API here
+    /**
+     * Get all of the existing genres and a counter for each one.
+     *
+     * @param movies
+     *  Movies array.
+     * @returns {*}
+     *  Array of genres names and counter for each genre.
+     */
+    function getMoviesGenres (movies) {
+      var genres = {'All': movies.length};
+      angular.forEach(movies, function(movie) {
+        angular.isDefined(genres[movie.primaryGenreName]) ? genres[movie.primaryGenreName]++ : genres[movie.primaryGenreName] = 1;
+      });
+      return genres;
+    }
+
+    // Public API here.
     return {
+
+      self: this,
+
       /**
        * Return a promise object of the list of Movies.
        *
@@ -88,12 +107,17 @@ angular.module('myApp')
       gettingMovies: function(moviesCount) {
         var deferred = $q.defer();
 
-        moviesCount = angular.isDefined(moviesCount) ? moviesCount : 60;
+        moviesCount = angular.isDefined(moviesCount) ? moviesCount : 99;
 
         // Get the top movies ids.
         requestTopMoviesIds(moviesCount).then(function(moviesIds) {
           requestMoviesById(moviesIds).then(function(movies) {
-            deferred.resolve(movies);
+
+            var data = {
+              movies: movies,
+              genres: getMoviesGenres(movies)
+            };
+            deferred.resolve(data);
           })
         });