<div id="cal-day-box">
	<% if(all_day.length) {%>
		<div class="row-fluid clearfix cal-day-hour">
			<div class="span1 col-xs-1"><b><%= cal.locale.all_day %></b></div>
			<div class="span11 col-xs-11">
				<% _.each(all_day, function(event){ %>
					<div class="day-highlight dh-<%= event['class'] %>">
						<a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
						   data-event-class="<%= event['class'] %>" class="event-item">
							<%= event.title %></a>
					</div>
				<% }); %>
			</div>
		</div>
	<% }; %>
	<% if(before_time.length) {%>
		<div class="row-fluid clearfix cal-day-hour">
			<div class="span1 col-xs-3"><b><%= cal.locale.before_time %></b></div>
			<div class="span5 col-xs-5">
				<% _.each(before_time, function(event){ %>
					<div class="day-highlight dh-<%= event['class'] %>">
						<span class="cal-hours pull-right"><%= event.end_hour %></span>
						<a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
						   data-event-class="<%= event['class'] %>" class="event-item">
							<%= event.title %></a>
					</div>
				<% }); %>
			</div>
		</div>
	<% }; %>

		<div id="cal-day-panel-hour">
			<% for(i = 0; i < hours; i++){ %>
				<div class="cal-day-hour">
					<% for(l = 0; l < cal._hour_min(i); l++){ %>
						<div class="row-fluid cal-day-hour-part">
							<div class="col-xs-1"><b><%= cal._hour(i, l) %></b></div>
							<div class="col-xs-11"></div>
						</div>
				<% }; %>
				</div>
			<% }; %>
		</div>
	<div id="cal-day-panel" class="clearfix">
		<%
			var events = [];
			var cal_times = hours*60;
		    var eventsLength = by_hour.length;
			var timeslots = [];
			var event, i, j;

			// Step 0: Sort events by id.
			events = by_hour.sort(function(a, b){return a.id - b.id;});
			// console.log(events);

			// Step 1: Initialize timeslots.
			for (i=0; i<cal_times; i++) {
				timeslots[i] = [];
			}

			// Step 2: Arrange the events by timeslot.
			for (i = 0; i < eventsLength; i++) {
				event = events[i];

				// Safety first.
				var evt_start = event.top * 30;
				var evt_end = (event.top + event.lines) * 30;
				// console.log("START "+evt_start);
				// console.log("END "+evt_end);
				if (evt_start > evt_end) {
					var temp = evt_start;
					evt_start = evt_end;
					evt_end = temp;
				}

				for (j=evt_start; j<evt_end; j++) {
					timeslots[j].push(i+1);
				}
			}
			// console.log(timeslots);
		   // Step 3: Get each event it's horizontal position,
		   //         and figure out the max number of conflicts it has.
			 for (i=0; i<cal_times; i++) {
			   var next_hindex = 0;
			   var timeslotLength = timeslots[i].length;


			   // If there's at least one event in the timeslot,
			   // we know how many events we will have going across for that slot.
			   if (timeslotLength > 0) {
				 // Store the greatest concurrent event count (cevc) for each event.
				 for (j=0; j<timeslotLength; j++) {
				   event = events[timeslots[i][j]-1];

				   if (!event.cevc || event.cevc < timeslotLength) {
					 event.cevc = timeslotLength;

					 // Now is also a good time to coordinate horizontal ordering.
					 // If this is our first conflict, start at the current index.

					   if(events.indexOf(timeslots[i][j]-2) == -1){
							event.hindex = next_hindex;

					   } else {
							var temp = events[timeslots[i][j]-2].hindex;
							event.hindex = temp++;
							next_hindex = events[timeslots[i][j]-2].hindex;
					   }

					   // We also want to boost the index,
					   // so that whoever we conflict with doesn't get the same one.
					   next_hindex++;

				   }
				 }
			   }
			 }

		 _.each(events, function(event){


			// Height and y-coordinate are already known.
			event.pxh = event.lines * 30;
			event.pxy = event.top * 30;

			// Width is based on calendar width and the cevc.
			event.pxw = 100 / event.cevc;

			// Height uses the same calendar/cevc figure,
			// multiplied by the horizontal index to prevent overlap.
			event.pxx = event.hindex * event.pxw;
		    // console.log(event);
		 %>
			<div ondblclick="edit_event(<%= event.id %>)"class="event-click day-event day-highlight dh-<%= event['class'] %>" style="top: <%= event.pxy %>px; left: <%= event.pxx %>%; height: <%= event.pxh %>px; width: <%= (event.pxw) %>%; "
				<span class="cal-hours"><b><%= event.start_hour %> - <%= event.end_hour %></b></span>
					<%= event.title %>
			</div>
		<% }); %>
	</div>
	<% if(after_time.length) {%>
	<div class="row-fluid clearfix cal-day-hour">
		<div class="span1 col-xs-3"><b><%= cal.locale.after_time %></b></div>
		<div class="span11 col-xs-9">
			<% _.each(after_time, function(event){ %>
			<div class="day-highlight dh-<%= event['class'] %>">
				<span class="cal-hours"><%= event.start_hour %></span>
				<a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
				   data-event-class="<%= event['class'] %>" class="event-item">
					<%= event.title %></a>
			</div>
			<% }); %>
		</div>
	</div>
	<% }; %>
</div>