<script type="text/javascript">
  $(document).ready(function() {
    $('#other-calendar').fullCalendar({
      editable: false,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      events: function(start,end,callback) {
        if($('#user_id').val() != undefined && $('#user_id').val() != "") {
          $.getJSON("<%= availabilities_calendar_appointments_url %>",  {
              start: start,
              end: end,
              user_id: $('#user_id').val()
            },
            function(result) {
              var eventArray = $.map(result, function(value){
                return {
                  id: value.id,
                  title: "",
                  tooltip: value.title,
                  start: value.start_date,
                  allDay: true,
                  className: interactionTypeClass(value.interaction_type_id)
                }
              });
              callback(eventArray);
            }
          )
        }
      },
      eventClick: function(calEvent, jsEvent, view) {
        $("#appointment_note").val("");
        $("#appointment_availability_id").val(calEvent.id);
        $("#available-time-slot").html(calEvent.tooltip);
        $('#appointment-form-container').show();
      }
    });

    $('#other-calendar-overlay').hide();
  });
</script>

<div id="other-calendar-overlay" class="overlay">
  <div id="other-calendar-container" class="ui-corner-all calendar-container overlay-content">
    <input id="user_id" type="hidden" name="user_id"/>
    <div id="other-calendar-header" class="calendar-header">
      <%= link_to_function 'X', "$('#other-calendar-overlay').hide()", :class => "close" %>
      Partner's Calendar
    </div>
    <div id="other-calendar"></div>
    <div id="appointment-form-container" class="form-container">
      <%= render :partial => "appointments/appointment_form" %>
    </div>
  </div>
</div>