SeatingAreaControl = Class.create();
SeatingAreaControl.UNAVAILABLE = "Sorry, this booth is unavailable.";
SeatingAreaControl.AVAILABLE = "Click to book this booth.";
SeatingAreaControl.serviceURL = "/resource/application/service/booking.php";
SeatingAreaControl.seatingDetailURL = "/resource/page-component/seating-detail.php";
SeatingAreaControl.prototype = {
	initialize: function(element, venueId, seatingGroupId, date) {
		this.element = $(element);
		this.venueId = venueId;
		this.seatingGroupId = seatingGroupId;
		this.bookingDate = new Date();
		this.bookingDate.setFromTimestamp(date);
		this.load();
		this.loadAvailability(date);
	},

	load: function() {		
		new Ajax.Request(SeatingAreaControl.serviceURL, {
			method: "get",
			parameters: {
				Action: "Load",
				VenueId: this.venueId,
				seatingGroupId: this.seatingGroupId				
			},
			onSuccess: (function(response) {
				response = response.responseText.evalJSON();
				if (response.success) {
					this.seats = response.data;
					this.setup();
				}
			}).bind(this)
		});
		return true;
	},
	
	loadAvailability: function(date) {
		var myDate = new Date();
		myDate.setFromTimestamp(date);
		new Ajax.Request(SeatingAreaControl.serviceURL, {
			method: "get",
			parameters: {
				Action: "LoadAvailability",
				seatingGroupId: this.seatingGroupId,
				BookingDate: myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate()
			},
			onSuccess: (function(response) {
				response = response.responseText.evalJSON();
				if (response.success) {
					this.update(response.data);
				}
			}).bind(this)
		});
		return true;
	},
	
	update: function(updateSeats) {
		$H(updateSeats).each((function(seat) {
			this.updateSeat(seat[1]);
		}).bind(this));
	},

	setup: function() {
		this.element.innerHTML = "";	
		$H(this.seats).each((function(seat) {
			this.updateSeat(seat[1]);
		}).bind(this));
	},

	updateSeat: function(seat) {
		var seatElement = $(seat.linkIdentifier);
		if (!seatElement) {
			seatElement = document.createElement("div");
			Element.extend(seatElement);
			this.element.appendChild(seatElement);
			seatElement.className = "booth";
			seatElement.id = seat.linkIdentifier;
			seatElement.reference = seat.id;
			seatElement.innerHTML = "<h4><span>" + seat.name + "</span></h4>";
		}

		if (seat.available) {
			seatElement.removeClassName("booked");
			seatElement.title = SeatingAreaControl.AVAILABLE;
			seatElement.onclick = (function() {
				this.loadSeatingInclude(seatElement.reference);
	 		}).bind(this);
		} else {
			seatElement.onclick = null;
			seatElement.addClassName("booked");
			seatElement.title = SeatingAreaControl.UNAVAILABLE;
		}
		
		
	},

	loadSeatingInclude: function(seatingAreaId, additionalSeatingAreaId) {
		if (!additionalSeatingAreaId) {
			additionalSeatingAreaId = null;
		}

		new Ajax.Request(SeatingAreaControl.seatingDetailURL, {
			method: "get",
			parameters: {
				SeatingAreaId: seatingAreaId,
				AdditionalSeatingAreaId: additionalSeatingAreaId,	
				BookingDate: this.bookingDate.getTime()
			},
			onSuccess: (function(response) {
				this.displaySeatingArea(seatingAreaId, response.responseText);
			}).bind(this)
		});
		return true;
	},
	
	displaySeatingArea: function(seatingAreaId, seatingAreaHtml) {
		this.bookingBackground = $("background-screen");
		
		if (!this.bookingBackground) {
			this.bookingBackground = document.createElement("div");
			this.bookingBackground.id = "background-screen";
			this.bookingBackground.className = "booking-background";
			Element.extend(this.bookingBackground);		
			this.bookingBackground.onclick = (function() {			
				this.bookingBackground.remove();
				this.seatingDisplay.remove();
			}).bind(this);
			
			document.body.appendChild(this.bookingBackground);
		}
		this.seatingDisplay = document.createElement("div");
		this.seatingDisplay.id = "preview-seating-area";
		this.seatingDisplay.innerHTML = seatingAreaHtml;
		Element.extend(this.seatingDisplay);
		document.body.appendChild(this.seatingDisplay);		
		$A(this.seatingDisplay.getElementsByTagName("script")).each(function(s) {
			eval(s.text);
		});
		
		$('background-image').onclick = (function() {		
			this.bookingBackground.remove();
			this.seatingDisplay.remove();
		}).bind(this);
		
	}
}