/* 
 * file: Header.js
 * @author: Richard
 * 
 * Depends on existence of anchor elements in "#header div.updates", these are used to lookup the corrosponding popup template (in the map popupTemplates below)
 *
 * TODO: This isn't exactly restricted to header functionality, more related to the updates popups. Rename this file.
 */

loadTemplates("/static/code/widgets/Header.html", function() {	
	if($("#header-wrapper div.updates").length == 0) return;

	// A map {class -> template} for the anchor children of div.updates
	var popupTemplates = {
		'social' : templates.PostToSocialMediaService,
		'note' : templates.PostNote	
	};

	var popupContainerElement;

	// Add the popups container elemenet
	$(document.body).append(
		$("<div id='header-popups'></div>")	
			.css('top', $('#header').outerHeight())
			.append(
				popupContainerElement = $("<div>").addClass("inner")
			)
	);

	// Populate the container with popups
	if (Creole.user && Creole.user.services) {
		popupContainerElement.append(
				$(templates.PostToSocialMediaService())
					.hide()
			);
	} else {
		$("#header .updates a.social").hide();
	}
	
	if (Creole.user) {
		popupContainerElement.append(
			$(templates.PostNote())
				.hide()
		);
	} else {
		$("#header .updates a.note").hide();
	}

	// Close the popups when click occurs
	$(document).click(function(event) {
		if(
			$(event.target).closest(".pop-up").length == 0 && 
			$(event.target).closest("#header-wrapper div.updates a").length == 0 &&
			$(event.target).closest("#DateTimeInput").length == 0
		) {		
			//
			popupContainerElement
				.find(".pop-up")
				.hide()

			//
			$("#header-wrapper div.updates a").removeClass("active");
		}
	});			

	// On header icon click
	$("#header-wrapper div.updates a").click(function() {	
		// Toggle and quit
		if($(this).hasClass("active")) {
			$("#header-wrapper div.updates a").removeClass("active");
			
			popupContainerElement.find(".pop-up").hide();
			
			return false;
		}

		// Close other open popups (NOTE: arguably this would be better as a custom event...)
		$(document).click();			

		// Set this update link as active
		$("#header-wrapper div.updates a").removeClass("active");
	
		$(this).addClass("active");

		// Hide all popups and show this one
		popupContainerElement
			.find(".pop-up")
			.hide()
			.filter("." + $(this).attr("type"))
				.show();	

		return false;		
	});
	
	// On submit
	popupContainerElement.find(".pop-up").submit(function() {
		var popupElement = $(this);
				
		var formElement = popupElement.find("form");
		var formValues = $(formElement).serializeObject();
		
		var submitButtonElement = formElement.children("button.submit");
		var textAreaElement = formElement.find("textarea");
		var statusElement = formElement.children("p.status");

		// Reset status
		statusElement.text('');

		// Disallow erronious input
		if(popupElement.find(".DateField.error").length > 0) {
			statusElement.text("Please correct the values in the date field input above.").show();			
				
			return false;	
		}

		if(formValues.text.trim().length == 0) {
			statusElement.text("Cannot send empty message.").show();					

			return false;
		}

		submitButtonElement.attr("disabled", "disabled");

		statusElement.text("Posting message...").show();			

		formElement.ajaxSubmit(function(response) {
			//
			function doneMessage() {				
				submitButtonElement.removeAttr("disabled");

				textAreaElement.val('');

				if(response.success) {
					if(formValues.pubDate == "" || formValues.pubDate == undefined) {			
						statusElement.text("Message posted");
					} else {
						statusElement.text("Message scheduled for " + formValues.pubDate);					
					}

					setTimeout(resetAndClosePopup, 2000);
				} else {
					statusElement.text("Your message could not be sent. Error: " + response.errors.join(", "));
				}

				statusElement.show();
			};

			//
			function resetAndClosePopup() {
				popupElement.hide();
				$("#header-wrapper div.updates a").removeClass("active");				
	
				statusElement.text("").hide();

				popupElement.find("input.DateField").val("");
			};
			
			setTimeout(doneMessage, 500);				
		});

		return false;
	});

	// Service toggle
	popupContainerElement.find("div.pop-up div.services a").click(function() {
		if($(this).hasClass("selected")) {
			$(this).removeClass("selected");
		} else {
			$(this).addClass("selected");
		}

		var services = new Array(); 
	
		$(this).parent().children("a.selected").each(function()  { services.push($(this).attr("service")); });

		$(this).closest("form").children('input[name="service"]').val(services.join(','));

		if(services.length == 0) {
			$(this).closest("form").find("button").attr("disabled", "disabled");
		} else {
			$(this).closest("form").find("button").removeAttr("disabled");					
		}

		return false;			
	});

	// "Ajaxify"
	activateCounters();

	ajaxifyDateFields();	
});