/**
 *	This is the basic framework for StudioE18 projects
 *	which are meant to be easily deployable. One should
 *	not include any own functions here unless they are
 *	generalizable enough to be used in multiple other
 *	projects.
 *
 *	Functions:
 *		- setPageBackground
 *		- validateFormFields
 *		- flexBox
 *		- read site settings from an XML file
 */


/**
	Global variables.
 */
var e18backgroundImageWidth = 0;
var e18backgroundImageHeight = 0;
var e18imageAspectRatio =  0;

var e18contactEmail = "";
var e18contactTelephone = "";

var e18currentOverlay = null;
var e18currentOverlayContent = null;

/**
	A function that reads an XML file that describes
	variables such as page titles, phone numbers and 
	emails that the site uses.
 */
function readSiteXML (fileName) {
	$.ajax({
		type: "GET",
		url: fileName,
		dataType: "xml",
		success: function(xml) {
			// Not good for SEO, but should work nice in many cases.
			$(xml).find('siteTitle').each( function() { document.title = $(this).text(); });
			
			$(xml).find('email').each( function() { e18contactEmail = $(this).text(); });
			$(xml).find('telephone').each( function() { e18contactTelephone = $(this).text(); });
		} // XML handler function
	}); // XML retriever, $.ajax
} // readSiteXML


/**
	A function that creates an img tag and a dimmer to the
	top of the DOM. Parameters adjust the color and how the
	image will be fit to the window.
 */ 
function setPageBackground (imageURL, backgroundColor, dimmerColor, dimmerOpacity) {
	// Adjust BODY element style
		$('body').css("margin", "0px");
		$('body').css("padding", "0px");
		$('body').css("background", backgroundColor);
		$('body').css("overflow", "hidden");

	// Create the dimmer DIV and set the style for it
	$('body').prepend('<div class="e18pageDimmer"></div>');
		$('.e18pageDimmer').css("background", dimmerColor);
		$('.e18pageDimmer').css("opacity", dimmerOpacity);

	// Create the image element
	$('body').prepend('<img id="e18backgroundImage" class="e18backgroundImage" src="' + imageURL + '" alt="Background image." />');
	$('.e18backgroundImage').css("visibility",  "hidden" );
	
	$(".e18backgroundImage").load( function () {
				e18backgroundImageWidth = $('.e18backgroundImage').width();
				e18backgroundImageHeight = $('.e18backgroundImage').height();
				e18imageAspectRatio = e18backgroundImageWidth / e18backgroundImageHeight;
				
				$(window).bind('resize', function() {
					var windowAspectRatio = $(window).width() / $(window).height();
				
					if ( e18imageAspectRatio > windowAspectRatio ) {
						// Image is wider than that window
						$('.e18backgroundImage').css("height",  $(window).height() );
						$('.e18backgroundImage').css("width",  $(window).height() * e18imageAspectRatio );
					} else {
						// Window is in portrait, make image as tall as possible
						$('.e18backgroundImage').css("width",  $(window).width() );
						$('.e18backgroundImage').css("height", $(window).width() / e18imageAspectRatio );
					}
				}); // Window resize function
				
				// And lets do the image resizing manually this first time
				var windowAspectRatio = $(window).width() / $(window).height();
			
				if ( e18imageAspectRatio > windowAspectRatio ) {
					// Image is wider than that window
					$('.e18backgroundImage').css("height",  $(window).height() );
					$('.e18backgroundImage').css("width",  $(window).height() * e18imageAspectRatio );
				} else {
					// Window is in portrait, make image as tall as possible
					$('.e18backgroundImage').css("width",  $(window).width() );
					$('.e18backgroundImage').css("height", $(window).width() / e18imageAspectRatio );
				}
	
					$('.e18backgroundImage').css("visibility",  "visible" );
	
	}); // Images loaded -function
} // setPageBackground

function e18openOverlay( overlayName, overlayContent, aWidth, aHeight ) {
	overlayName.animate({ height: aHeight, opacity: "1.0" }, 300 );
	overlayName.animate({ width: aWidth }, 300, function() {
		overlayContent.animate({ opacity: "1.0" }, 100 );
	} );
	
	e18currentOverlay = overlayName;
	e18currentOverlayContent = overlayContent;
}

function e18closeOverlay( overlayName, overlayContent, callback ) {
	if( overlayName.css("display")  == "none" ) {
		if( callback != null ) {
			callback();
		} else {
			e18currentOverlay = null;
			e18currentOverlayContent = null;
		}
	} else {
		overlayContent.animate({ opacity: "0.0" }, 100, "", function() {
			overlayName.animate({ width: "100px" }, 300 );
			overlayName.animate({ height: "1px", opacity: "0.0" }, 300, "", function() {
				overlayName.hide();
				if( callback != null ) callback(); else {
					e18currentOverlay = null;
					e18currentOverlayContent = null;
				}
			} );
		} );
	} // Else
}	

function e18switchOverlay( overlayName, overlayContent, aWidth, aHeight ) {
	if ( e18currentOverlay != overlayName ) {
		if ( e18currentOverlay != null ) {
			// We are switching from an old overlay to a new one, so close previous 
			callback = function() { e18openOverlay( overlayName, overlayContent, aWidth, aHeight ) };
			e18closeOverlay( e18currentOverlay, e18currentOverlayContent, callback );
			//alert("Current:" + e18currentOverlay + " To: " + overlayName);
		} else {
			// We just open an overlay and that's it.
			e18openOverlay( overlayName, overlayContent, aWidth, aHeight );
		}
	} else {
		// The overlay is already open.
	}
}