var favorites = angular.module('myFavorites',[]);
var favoritesCtrl = function () {}

var renderFavoritesController = function ($scope) {
  $scope.bookList = []; 
  // firebase loads asynchronously
  setTimeout(function() {
    var userId = firebase.auth().currentUser.uid;
    firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
      var bkObj = snapshot.val();
      var bkArr = [];
      for (var key in bkObj) {        
        bkArr.push(bkObj[key]);
      }

      $scope.$apply(function() {
        $scope.bookList = bkArr;
      });
    });    
  },500);

  //remove a favorited book from the list should setoff above..will need to fix.
  this.removeFavorite = function(bookTitle) {   
    //located and removed book from ui 
    $scope.bookList.forEach(function(book,bookIndex) {
      if(book.title === bookTitle){
        $scope.bookList.splice(bookIndex,1);
      }
    });
    // var userId = firebase.auth().currentUser.uid;
    // firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
    //   var bkObj = snapshot.val();
    //   var bkArr = [];
    //   for (var key in bkObj) {        
    //     if(bkObj[key].title === bookTitle){
    //       //this is the object we want removed from database and from screen

    //     }
    //   }

    //   $scope.$apply(function() {
    //     $scope.bookList = bkArr;
    //   });
    // });         
  }
}

var renderFavoritesComponent = {
  template:`
    <a>My Favorites</a>
    <div ng-repeat="book in bookList track by $index">
      <div class="card" ng-style="{float:'left', width:'30%', margin: '5px', height:'35em', 'background-color':'#fcf1d4'}">
        <div ng-style="{height: '100%', width:'100%' }">
          <img class="card-img-top" ng-src="{{ book.book_picture }}" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Title: {{ book.title }}</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text">Published: {{ book.published }}</p>
            <a href="#" ng-click="$ctrl.removeFavorite(book.title,book)" class="btn btn-primary">Remove Book</a> 
            <p>Count:{{ $index }}</p>
          </div>
        </div>
      </div>    
    </div>
  `,
  controller: ['$scope', renderFavoritesController]
}

favorites.controller('myFavoritesCtrl',favoritesCtrl);
favorites.component('test',renderFavoritesComponent);





@@ -39,20 +39,30 @@
 rites',%5B
+'firebase'
 %5D);%0A
-
 var favo
@@ -137,16 +137,33 @@
  ($scope
+, $firebaseObject
 ) %7B%0A  $s
@@ -181,16 +181,37 @@
 st = %5B%5D;
+%0A  $scope.users = %7B%7D;
  %0A  // f
@@ -644,135 +644,137 @@
 %0A%0A  
-//
+this.
 remove
- a f
+F
 avorite
-d book from the list should setoff above..will need to fix.%0A  this.removeFavorite = function(bookTitle) %7B   
+ = function(bookTitle) %7B%0A    var ref = firebase.database().ref();   %0A    $scope.users = $firebaseObject(ref);%0A
 %0A   
@@ -966,125 +966,85 @@
 %7D);%0A
+    %0A
     // 
-var userId = firebase.auth().currentUser.uid;%0A    // firebase.database().ref('/users/' + userId).once('value')
+loading firebase data is async!%0A    $scope.users.$loaded()%0A      
 .the
@@ -1054,32 +1054,28 @@
 unction(
-snapshot
+data
 ) %7B%0A    
 //   var
@@ -1070,107 +1070,162 @@
     
-//   var bkObj = snapshot.val();%0A    //   var bkArr = %5B%5D;%0A    //   for (var key in bkObj
+    for (var key in data.users) %7B%0A          for (var uniqueId in data.users%5Bkey%5D) %7B%0A            for (var bookProp in data.users%5Bkey%5D%5BuniqueId%5D
 ) %7B
+%0A
         
 %0A   
@@ -1220,23 +1220,17 @@
         
-%0A
  
-   //
      if(
@@ -1234,23 +1234,66 @@
 if(b
-kObj%5Bkey%5D.title
+ookProp === 'title' && data.users%5Bkey%5D%5BuniqueId%5D%5BbookProp%5D
  ===
@@ -1307,138 +1307,452 @@
 tle)
+ 
 %7B%0A    
-//       //this is the object we want removed from database and from screen%0A
+            delete data.users%5Bkey%5D%5BuniqueId%5D;%0A                %0A                //update firebase w/ change%0A                $scope.users.$save()%0A                  .then(function(ref) %7B%0A                    console.log('book removed!');%0A                  %7D,function(error) %7B%0A                    console.log('unable to save to database', error);%0A                  %7D);
 %0A    
-//
+  
      
-%7D%0A
+   %7D%0A   
     
-//
+  
    %7D%0A
-%0A    //   $scope.$apply
+          %7D%0A        %7D%0A      %7D)%0A      .catch
 (fun
@@ -1761,67 +1761,81 @@
 ion(
+error
 ) %7B%0A   
- //
      
-$scope.bookList = bkArr;%0A    //   %7D
+console.log('error loading firebase data', error
 );%0A    
-//
+ 
  %7D);
@@ -1842,17 +1842,16 @@
         
- 
 %0A  %7D%0A%7D%0A%0A
@@ -1940,20 +1940,27 @@
 repeat=%22
+(key, 
 book
+)
  in book
@@ -2654,21 +2654,16 @@
 ok.title
-,book
 )%22 class
@@ -2801,16 +2801,16 @@
 v%3E%0A  %60,%0A
-
   contro
@@ -2826,16 +2826,34 @@
 scope', 
+'$firebaseObject',
 renderFa

update remove method to remove book from firebase