// Main script for /bookclubs
var Bookclubs = {

  // Finds the current user's id
  currentUserId: function() { return parseInt($('div.bookclubs-all').attr('data-current-user')); },

  // Bind events to Bookclubs
  bind: function() {
    $('.new_bookclub').on('submit', this.sendNewBookclubRequest.bind(this));
    $('.bookclubs-all').on('click', 'button.bookclub-join', this.sendJoinBookclubRequest.bind(this));
  },

  init: function(model) {
    this.bind();
    this.renderList();
  },

  // Render list of bookclubs
  renderList: function() {
    // Fetch bookclubs on load
    var ajaxRequest = $.ajax({
          url: '/bookclubs/all',
          type: 'GET'
        });
    ajaxRequest.done(this.showBookclubListHtml.bind(this));
  },

  // Prepare bookclubs list HTML
  bookclubsHtml: "<ul class='bookclubs'>",

  // Return html for all bookclubs
  showBookclubListHtml: function(data) {
    var bookclubs = data.bookclubs;
    for(var i = 0; i < bookclubs.length; i++) {
      var bookclub = bookclubs[i];
      this.bookclubsHtml += this.getBookclubHtml(bookclub, this.currentUserId());
    }

    this.bookclubsHtml += "</ul>";

    $('.bookclubs-all').prepend(this.bookclubsHtml);

  },

  // Return html for one bookclub
  getBookclubHtml: function(bookclub, currentUserId) {
    // If current user is not in the bookclub,
    // add a + so that the user can join the bookclub
    var joinBookclub = "";
    if ($.inArray(currentUserId, bookclub.user_ids) == -1) {
      joinBookclub = "<button class='bookclub-join'>+</button>";
    }

    // If current user is the admin of the bookclub,
    // add a bookclub-admin class to the li
    var adminBookclub = "";
    if (currentUserId == bookclub.admin_id) {
      adminBookclub = "class='bookclub-admin'";
    }

    var html = "<li id='" +
                bookclub.id.toString() +
                "'" +
                adminBookclub +
                ">" +
                bookclub.name +
                ": " +
                bookclub.description +
                joinBookclub +
                "</li>";  

    return html;
  },

  // Request new bookclub creation
  sendNewBookclubRequest: function(e) {
    e.preventDefault();

    var newBook = $(e.target).serialize();

    var ajaxRequest = $.ajax({
      url: '/bookclubs',
      type: 'POST',
      data: newBook
    });
    // when new bookclub is valid, show it on the page
    ajaxRequest.done(this.showNewBookclub.bind(this));
    // when new bookclub is invalid, show error message in console log for now
    ajaxRequest.fail(function(data){
      console.log(data.responseJSON.message);
    });
  },

  showNewBookclub: function(data) {
    $('.bookclubs').append(this.getBookclubHtml(data.bookclub));
    this.formFields().reset();
  },

  // Retrieve formFields for reset after submitting
  formFields: function() {
    return $('form.new_bookclub')[0];
  },

  // Request user to join bookclub
  sendJoinBookclubRequest: function(e) {
    e.preventDefault();

    // set id of bookclub to join
    var bookclubId = $(e.target).parent().attr('id');

    // remove + button after clicking join
    $(e.target).remove();

    var ajaxRequest = $.ajax({
      url: '/bookclubs/join',
      type: 'PUT',
      data: { bookclub_id: bookclubId }
    });
    ajaxRequest.done(this.showJoinBookclub.bind(this));
  },

  // run this function when we decide how to visualize 
  // that a user has joined a bookclub. 
  showJoinBookclub: function(data) {
    // data.bookclub_id can be used to access the li of the bookclub
    // by id. may be useful later for selecting the li for styling.
  }

};

//On document load
$(document).ready(function(){
  Bookclubs.init();



  
});
@@ -1402,32 +1402,63 @@
 nBookclub = %22%22;%0A
+    var belongToBookclub = %22%22;%0A
     if ($.inArra
@@ -1568,24 +1568,89 @@
 ton%3E%22;%0A    %7D
+ else %7B%0A      belongToBookclub = %22class='bookclub-belong'%22;%0A    %7D
 %0A%0A    // If 
@@ -1740,36 +1740,8 @@
  li%0A
-    var adminBookclub = %22%22;%0A
     
@@ -1784,29 +1784,32 @@
 id) %7B%0A      
-admin
+belongTo
 Bookclub = %22
@@ -1803,32 +1803,57 @@
 oBookclub = 
-%22class='
+belongToBookclub.replace(/'$/, %22 
 bookclub-adm
@@ -1856,16 +1856,17 @@
 -admin'%22
+)
 ;%0A    %7D%0A
@@ -1973,21 +1973,24 @@
         
-admin
+belongTo
 Bookclub
@@ -1983,32 +1983,33 @@
 longToBookclub +
+ 
 %0A               
@@ -2822,16 +2822,38 @@
 bookclub
+, this.currentUserId()
 ));%0A    
@@ -3467,88 +3467,60 @@
  // 
-run this function when we decide how to visualize %0A  // that a user has joined a
+data.bookclub_id can be used to access the li of the
  boo
@@ -3524,18 +3524,23 @@
 bookclub
-.
  
+by id.
 %0A  showJ
@@ -3573,18 +3573,25 @@
 ) %7B%0A    
-//
+$('li#' +
  data.bo
@@ -3603,121 +3603,49 @@
 b_id
- can be used to access the li of the bookclub%0A    // by id. may be useful later for selecting the li for styling.
+.toString()).addClass('bookclub-belong');
 %0A  %7D
@@ -3722,12 +3722,8 @@
 t();
-%0A%0A%0A%0A
   %0A%7D

Add admin and belongto classes to bookclubs