anchor.diff:          <!-- this passes the host_id aka user_id as a pairing_id, please do not panic it's ok. -->
         <% end %>
       </ul>
  -
  -  </div>
  -
  -  <div id="user_availabilities" class="displays">
  -    <h1>Availabilities</h1>
  -    <div id="available">
  -    <% @user.availabilities.each do |availability| %>
  +  </div>
  +
  +<div id="user_availabilities" class="displays">
  +  <h1>Availabilities</h1>
  +  <div id="available">
  +  <% @user.availabilities.each do |availability| %>
  +    <% if availability.booked == false %>
         <p id="<%= availability.date.last(2) %>" class="id_for_me"><%= availability.id %></p>
       <% end %>
  -    </div>
  +  <% end %>
  +  </div>
  +  <div id="booked">
  +  <% @user.availabilities.each do |availability| %>
  +    <% if availability.booked == true %>
  +      <p id="<%= availability.date.last(2) %>" class="id_for_me"><%= availability.id %></p>
  +    <% end %>
  +  <% end %>
  +  </div>
       <br>
       <div id="demo" class="yui3-skin-sam yui3-g"> <!-- You need this skin class -->
   
  
positive.code:       // Get a reference to Y.DataType.Date
        var dtdate = Y.DataType.Date;
  
        var divLength = $("#available p").length
        for (var i = 0; i < divLength; i++) {
          var availableDay = $("#available p")[i].id
          if (availableDay[0] === "0") {
            availableDay = availableDay[1];
          }
          availableDay = "_" + availableDay;
          $("td[id$='" + availableDay + "']:not(.yui3-calendar-column-hidden)").addClass("available").css("background-color", "#14A714")
        }
  
        // Listen to calendar's selectionChange event.
  
negative.code: 
          var newDate = ev.newSelection[0];
          var date = dtdate.format(newDate);
          var day = date.slice(-2);
          var day_id = "#" + day;
          var day_selector = +day; // convert possible leading-zero, single-digit to integer (+"01" = 1)
  
          var selected_day_node = $("td[id$='_" + day_selector + "']:not(.yui3-calendar-column-hidden):not(.booked)");
          $.each(selected_day_node, function(index, node){
            var user_id = currentUserId();
            node = $(node);
            if (node.hasClass("available")) {
              node.removeClass("available").css("background-color", "white");
              var request = $.ajax({
                url: "/users/" + user_id + "/availabilities/" + $(day_id).text(),
                type: "DELETE"
              });
            } else {
              node.addClass("available").css("background-color", "#14A714");
              var request = $.ajax({
                url: "/users/" + user_id + "/availabilities",
                type: "POST",
                data: { date: date}
              });
              request.done(function(response) {
                if (response["id"]) {
                  $("#available").append("<p id= " + response['day'] + " class='id_for_me'>" + response['id'] + "</p>");
                }
              });
            }
          });
        });
      });
    });
  