.schedule-content
  %h2
    = "Schedule for #{@conference.title}"
  #unscheduled.unscheduled
    .unscheduled-header
      Unscheduled Events
  #schedule.schedule
    .schedule-dates-header
      %ul#date-tabs
        - @dates.each do |date|
          %li.date-selector
            = link_to "#{date}", "#", id: "#{date}-selector", onclick: "Schedule.changeDay('#{date}')"
    .schedule-rooms-container
      = render 'day_tab'

:javascript
  $(document).ready( function() {
      //Schedule.loadDaysAndTracks("#{@conference.short_title}");
      var conference = "#{@conference.short_title}"
      Schedule.loadEvents("#{@conference.short_title}", "#{@dates.first}");
      $('.schedule-room-slot').droppable({
                                      accept: '.schedule-event',
                                      tolerance: "pointer",
                                      drop: function(event, ui) {
                                          $(ui.draggable).appendTo(this);
                                          var myId = $(ui.draggable).attr("guid");
                                          var myRoom = $(this).attr("room-guid")
                                          var myDate = $(this).attr("date");
                                          var myTime = $(this).attr("hour");
                                          var length = $(ui.draggable).attr("length");
                                          $(ui.draggable).css("left", 0);
                                          $(ui.draggable).css("top", 0);
                                          $(this).css("background-color", "#ffffff");

                                          // 15 minute slots on the schedule are 30px,
                                          // thus the magic multiplier here
                                          $(ui.draggable).height(length * 2 - 7);
                                          $(ui.draggable).width($(this).width() - 10);
                                          Schedule.save(conference, myId, myRoom, myDate, myTime);
                                      },
                                      over: function(event, ui) {
                                        $(this).css("background-color", "#009ED8");
                                      },
                                      out: function(event, ui) {
                                        $(this).css("background-color", "#ffffff");
                                      }
                                  });
  });