<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<%= javascript_include_tag 'fullcalendar' %>
<%= javascript_include_tag 'calendar_frontend' %>
<%= javascript_include_tag 'bootstrap-datetimepicker' %>

<%= stylesheet_link_tag "fullcalendar"%>
<%= stylesheet_link_tag "calendar"%>

<div id="orbit_calendar">
  <div id='sec1' class="cal-fn">
    <div class="btn-toolbar" id="navigation">
      <div id="calendar-nav">
        <button class="btn" id="today_btn">Today</button>
        <div class="btn-group">
          <button class="btn" id="prev_month_btn">
            <i class="icon-chevron-left"></i>
          </button>
          <button class="btn" id="next_month_btn">
            <i class="icon-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="form-inline" id="range_selection"></div>
  </div>
  <div id='sec3' class="btn-toolbar">
    <div class="btn-group calendar_mode">
      <button class="btn mode_switch" data-mode="agendaDay" >day</button>
      <button class="btn mode_switch" data-mode="agendaWeek" >week</button>
      <button class="btn active mode_switch" data-mode="month" >month</button>
      <button class="btn mode_switch" data-mode="agenda" >agenda</button>
    </div>
    <button id="refresh_btn" class="btn">
      <i class="icons-cycle"></i>
    </button>
  </div>
  <div id="view_holder">
    <h3 id="current_title" class="current_day_title"></h3>
    <div id="calendar"></div>
    <div id="calendar_agenda"></div>
  </div>
</div>
<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
<div id="calendar-loading">Loading...</div>

<script type="text/javascript">
  var calendar = new Calendar("#calendar");
</script>
