define([
	'Global',
	'CalendarData',
	'Text!../html/templates/overbooking-countdown-header.html'
],
	function (Global, CalendarData, template) {
		'use strict';

		return Backbone.View.extend({
			tagName: "tr",
			attributes: {
				"class": "overbooking-header"
			},

			initialize: function () {
				this.template = _.template(template);
			},

			render: function () {
				var $container = $('.fc-header tbody'),
					calendarData = CalendarData.instance(),
					clinic = calendarData.getClinic(),
					numClinics = calendarData.getNumClinics(),
					$view = $('.fc-view-agendaDay'),
					overbookClinics = [];

				for (var i = 0; i < numClinics; i++) {
					var className = "clinic" + i,
						$clinicEvents = $view.find("." + className);

					if ($clinicEvents.length > 0) {
						var $clinicEvent = $clinicEvents.eq(0),
							overbookings = clinic.get('maxOverbooksPerDay'),
							left = $clinicEvent.css('left'),
							width = $clinicEvent.css('width'),
							style = "left: " + left + "; width: " + width + ";";

						overbookClinics.push({
							className: className,
							overbookings: overbookings,
							style: style
						});
					}
				}

				$('.overbooking-header').remove();

				this.$el
					.empty()
					.append(this.template({overbookClinics: overbookClinics}));

				$container.append(this.$el);
			}
		});
	}
);
