///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// STARTUP SCRIPT /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


// PAGELOAD STARTER ---------------------------------------------------------------------------------------------------------------

// TIMER VARIABLE USED BEFORE LAUNCHING HOMEPAGE DIASHOW:
var waitBeforeHomeDiashow;

// CONTROL VARIABLE USED TO AVOID "SERIAL-CLICKING" ON MENU LINKS:
// FIRST "OFFICIALLY-CLICKED" ITEM IS "home" LINK:
var previousClickedLink = "mainMenu_home";

// ONLOAD:
$(function() {
	// RESIZE WINDOW TO FULL SCREEN:
	fullScreen();
		   
	// SET MENU EVENT LISTENERS:
	addMenuListeners();

	// EVEN IF ALREADY DECLARED IN CSS, SET PICS OPACITY BECAUSE OF IE opacity INCOMPATIBILITY
	// (EXCEPT DIRAND'S NAME WHICH OPACITY IS 1.0):
	$("#showBox img:not(.homeFirstPic)").css("opacity", "0.0");
	
	// AS HOMEPAGE DIASHOW CAN'T BE USER-CONTROLLED, REMOVE CSS-DEFINED CURSOR:
	$("#showBox img").css("cursor", "default");

	// DIRAND'S LOGO LOAD CONTROL ---------------------------------------------
		// GET THE URL OF FIRST PICTURE (DIRAND'S NAME) INTO showBox:
		var firstPicURL = $("#showBox img:first-child").attr("src");
	
		// CREATE NEW IMAGE OBJECT:
		var cachePic = new Image();
		
		// IF cachePic (I.E. DIRAND'S LOGO) HAS BEEN LOADED, WAIT A LITTLE BIT BEFORE STARTING HOMEPAGE DIASHOW:
		cachePic.onload = function() {
			// PAUSE AND THEN LAUNCH HOMEPAGE DIASHOW:
			waitBeforeHomeDiashow = setTimeout(startHomePageDiaShow, 1500);
		};
		
		// FORCE BROWSER TO LOAD PICTURE INTO CACHE MEMORY BY CHANGING cachePic src PROPERTY:
		cachePic.src = firstPicURL;
	// ------------------------------------------------------------------------
});


// RESIZE WINDOW SO THAT IT TAKES WHOLE SCREEN ------------------------------------------------------------------------------------
function fullScreen() {
	window.moveTo(0, 0);
	
	if (document.getElementById || document.all) {
		window.resizeTo(screen.availWidth, screen.availHeight);
	}
	else if(document.layers) {
		if (window.outerHeight < screen.availHeight || window.outerWidth < screen.availWidth) {
			window.outerHeight = screen.availHeight;
			window.outerWidth = screen.availWidth;
		}
	}
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// HOMEPAGE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


// HOMEPAGE TIMER DECLARATION -----------------------------------------------------------------------------------------------------
var homePageDiaShowTimer;


// HOMEPAGE DIASHOW STARTER -------------------------------------------------------------------------------------------------------
function startHomePageDiaShow() {
	// STOP PAUSE ON DIRAND'S NAME:
	clearTimeout(waitBeforeHomeDiashow);
													  
	// FIRST PIC LOAD CONTROL -------------------------------------------------
		// GET THE URL OF FIRST PICTURE AFTER DIRAND'S LOGO (THE ONE WHICH HAS BEEN ADDED active CLASS):
		var firstPicURL = $("#showBox img.active").attr("src");
		
		// CREATE NEW IMAGE OBJECT:
		var cachePic = new Image();
		
		// IF cachePic HAS BEEN FULLY LOADED, REMOVE DIRAND'S LOGO AND LAUNCH FIRST PICTURE FADE-IN:
		cachePic.onload = function() {
			// FADE OUT DIRAND'S LOGO:
			$("#showBox .homeFirstPic").fadeOut(500, function() {
				// ONCE FADED OUT, REMOVE DIRAND'S LOGO FROM DOM TREE:
				$("#showBox .homeFirstPic").remove();
				
				// SHOW MAIN MENU:
				$("#navBox").show();
				
				// FADE IN HOMEPAGE DIASHOW FIRST PICTURE:
				$("#showBox img:first-child").animate({opacity : 1.0}, 1000, function() {
					// TO AVOID FIRST PICTURE STAYING TOO LONG BEFORE DIASHOW LOOP, SWITCH FIRST IMAGE QUICKLY BEFORE DIASHOW:
					waitBefore2ndPic = setTimeout(function() {
						// REMOVE WAITING PERIOD:
						clearTimeout(waitBefore2ndPic);
						
						// DISPLAY 2ND PICTURE:
						$("#showBox img:first-child").removeClass("active");
						$("#showBox img:nth-child(2)").addClass("active");
						homePageDiaSwitch();
					
						// THEN START DIASHOW WITH NORMAL REFRESHING SPEED:
						diashowOn = true;
						homePageDiaShowTimer = setInterval("homePageDiaSwitch()", 5000);
					}, 1500);
				});
			});	
		};
		
		// FORCE BROWSER TO LOAD FIRST PICTURE INTO CACHE MEMORY BY CHANGING cachePic src PROPERTY:
		cachePic.src = firstPicURL;
	// ------------------------------------------------------------------------
}


// HOMEPAGE DIAPORAMA -------------------------------------------------------------------------------------------------------------
function homePageDiaSwitch() {
	// CATCH CURRENT PICTURE:
	var $active = $("#showBox img.active");

	// IF NO PICTURE WAS FOUND, DEFAULT PICTURE IS THE LAST SO... WE'LL START BY THE FIRST:
	if($active.length == 0) $active = $("#showBox img:last");

	// IF WE'RE IN THE END OF PICTURES LIST, THE NEXT ONE WILL BE THE FIRST IMAGE:
	var $next = $active.next().length ? $active.next() : $("#showBox img:first");

	// CHANGE CURRENT PICTURE z-index (PUT IT BACK):
	$active.addClass("lastActive");

	// FADIN THE NEW PICTURE AND DECLASSIFY PREVIOUS ONE:
	$next.css({opacity: 0.0})
		.addClass("active")
		.animate({opacity: 1.0}, 2500, function() {
			$active.removeClass("active lastActive").animate({opacity: 0.0}, 1000);
		});
}


// HOMEPAGE DIASHOW REBUILDING FOR 'home' MAIN MENU LINK --------------------------------------------------------------------------
function rebuildHomeDiashow() {
	// BEFORE ANY DOM MANIPULATION, HIDE PICTURE CONTROL BOX:
	$("#controlBox").hide();

	// IF VISITOR COMES FROM MEDIA PAGE, REMOVE MEDIA CONTENT BOX, REMOVE BACK LINK AND RESTORE DIASHOW START LINK (WITHOUT SHOWING IT!):
	if($("#page div").is("#mediaContent")) {
		$("#mediaContent").remove();
		$("#backLink").replaceWith("<a id='diaShowStart'>diashow</a>");
	}

	// IF BEFORE LAUNCHING THIS DIASHOW, A TWO-PIC DIASHOW HAS BEEN DISPLAYED, REMOVE ITS TRACE:
	if($("#controlBox ul").is("#pseudoPicNav")) {
		$("#pseudoPicNav").remove();
		$("#picNav").removeClass("twoPicsSpecialCase").hide();
	}
	
	// IF VISITOR COMES FROM CONTACT PAGE, SOME ELEMENTS MUST BE DELETED:
	$("#contactPageFilling").add("#contactBox").remove();
	
	// BECAUSE OF CONTACT LAYOUT, RESTORE NAVIGATION BOX WIDTH:
	$("#navBox").css("width", "470px");
	
	// BE SURE showBox IS IN page:		
	if(!$("#page div").is("#showBox")) $("#page").prepend("<div id='showBox'>");
	
	// EMPTY showBox, ADD A LOADER GIF AND LOAD HOMEPAGE PICTURES:
	$("#showBox")
		.empty()
		.show()
		.css("background", "url(img/ui/showBoxLoader.gif) center center no-repeat")
		.load("lib/rebuildHomeDiashow.php", {async : false}, function() {
			// EVEN IF ALREADY DECLARED IN CSS, SET PICS OPACITY BECAUSE OF IE opacity INCOMPATIBILITY:
			$("#showBox img").css("opacity", "0.0");
			
			// AS HOMEPAGE DIASHOW CAN'T BE USER-CONTROLLED, REMOVE CSS-DEFINED CURSOR:
			$("#showBox img").css("cursor", "default");
			
			// FADE IN HOMEPAGE DIASHOW FIRST PICTURE:
			$("#showBox img:first-child").animate({opacity : 1.0}, 1000, function() {
				// TO AVOID FIRST PICTURE STAYING TOO LONG BEFORE DIASHOW LOOP, SWITCH FIRST IMAGE QUICKLY BEFORE DIASHOW:
				waitBefore2ndPic = setTimeout(function() {
					// REMOVE WAITING PERIOD:
					clearTimeout(waitBefore2ndPic);
					
					// DISPLAY 2ND PICTURE:
					$("#showBox img:first-child").removeClass("active");
					$("#showBox img:nth-child(2)").addClass("active");
					homePageDiaSwitch();
				
					// THEN START DIASHOW WITH NORMAL REFRESHING SPEED:
					diashowOn = true;
					homePageDiaShowTimer = setInterval("homePageDiaSwitch()", 5000);
				}, 1500);
			});
		});
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// DIASHOW ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


// TIMER VARIABLE DECLARATION -----------------------------------------------------------------------------------------------------
var diaShowTimer;


// DIASHOW EVENT LISTENERS --------------------------------------------------------------------------------------------------------
function addDiaShowListeners() {
	// WHEN COMING FROM HOMEPAGE, DIASHOW CONTROL BOX CAN BE HIDDEN; SHOW IT:
	$("#controlBox").show();
	
	// IF BEFORE LAUNCHING THIS DIASHOW, A TWO-PIC DIASHOW HAS BEEN DISPLAYED, REMOVE ITS TRACE:
	if($("#controlBox ul").is("#pseudoPicNav")) {
		$("#pseudoPicNav").remove();
		$("#picNav").removeClass("twoPicsSpecialCase");
	}
	
	/* IN THE SPECIAL CASE OF TWO PICTURES ONLY,
	 * DOUBLE THE NUMBER OF PICTURES INTO showBox,
	 * HIDE picNav AND REPLACE IT BY A pseudoPicNav
	 * WHICH DIGITS WILL SIMPLY ALTERNATE THEIR selected CLASS.
	 * THIS TRICK AVOIDS FLICKERING IN THE CASE OF A TWO PICTURES GALLERY. */
	if($("#showBox img").size() == 2) {
		// CLONE THE TWO PICTURES OF GALLERY:
		$("#showBox img").clone().appendTo("#showBox");
		// FOR THE SCRIPT TO WORK PROPERLY, ONLY THE FIRST PICTURE KEEPS IT active CLASS:
		$("#showBox img:not(:first-child)").removeClass("active");
		// ADD TWO ROWS TO picNav LIST, BUT HIDE THIS LIST BY ADDING A HIDING-CLASS:
		$("#picNav").hide().addClass("twoPicsSpecialCase").append("<li><a>3</a></li><li><a>4</a></li>");
		// CREATE A PSEUDO-PICTURE NAVIGATION ONLY FOR DISPLAY PURPOSE:
		$("#picNav").before("<ul id='pseudoPicNav'><li class='selected'><a>1</a></li><li><a>2</a></li></ul>");
		// IF A NOT-SELECTED PSEUDO-LIST ITEM IS BEING CLICKED, SIMPLY DISPLAY NEXT PICTURE:
		$("#pseudoPicNav li a").click(function() {
			if(!$(this).parent().hasClass("selected")) switchPic(0, 1000);
			// AVOID USUAL LINK BEHAVIOR:
			return false;
		});
	}
	
	// LAUNCH DIASHOW WHEN CLICKING ON #diaShowStart;
	// REMOVE THAT LINK IF THE PICTURES ARE LESS THAN 4:
	if($("#showBox").children().size() < 4 || $("#picNav").hasClass("twoPicsSpecialCase")) {
		$("#diaShowStart").hide();
	}
	else {
		$("#diaShowStart").show();
		
		$("#diaShowStart").click(function() {
			startDiaShow();
			// AVOID USUAL LINK BEHAVIOR:
			return false;
		});
	}
	
	// WHEN CLICKING ON A PICTURE NUMBER, STOP DIASHOW AND SHOW SINGLE PICTURE;
	// IF THERE'S ONLY ONE PICTURE, DON'T SHOW PICTURE NAVIGATION:
	if($("#showBox").children().size() < 2) {
		$("#picNav").hide();
		
		$("#showBox img").css("cursor", "default");
	}
	else {
		// IF WE DON'T FACE SPECIAL TWO-PICS CASE, DISPLAY picNav:
		if(!$("#picNav").hasClass("twoPicsSpecialCase")) $("#picNav").show();
		
		$("#picNav li a").click(function() {
			// ONLY SHOW SELECTED PICTURE WHEN picNav ITEM ISN'T ALREADY SELECTED: 
			if(!$(this).parent().hasClass("selected")) {
				// STOP DIASHOW LOOP:
				if(diaShowTimer) stopDiaShow();
				
				// SHOW SELECTED PICTURE:
				var clickedPic = $(this).text();
				switchPic(Number(clickedPic), 1000);
			}
			
			// AVOID USUAL LINK BEHAVIOR:
			return false;
		});
		
		// WHEN CLICKING ON A PICTURE, STOP DIASHOW AND DISPLAY NEXT IMAGE:
		$("#showBox img").click(function() {
			// ONLY DISPLAY NEXT PICTURE WHEN ACTIVE PICTURE IS FINISHED (OPACITY = 1.0);
			// WE THUS AVOID "SERIAL CLICKING" THAT BREAKS FADE-IN/FADE-OUT ROUTINE.
			if($(this).css("opacity") == 1) {
				// STOP DIASHOW LOOP:
				if(diaShowTimer) stopDiaShow();
				
				// SHOW NEXT PICTURE:
				switchPic(0, 1000);
			}
		});
	}
}


// CANCEL PRECEDING FUNCTION ------------------------------------------------------------------------------------------------------
function removeDiaShowListeners() {
	// REMOVE #diaShowStart LISTENER:
	$("#diaShowStart").unbind("click");
	
	// REMOVE PICTURE NUMBER LISTENERS:
	$("#picNav li a").unbind("click");
	
	// REMOVE PICTURE LISTENERS:
	$("#showBox img").unbind("click");
}


// PICTURES FADE IN AND FADE OUT --------------------------------------------------------------------------------------------------
function switchPic(picID, fadeSpeed) {
	// GET CURRENT DISPLAYED PICTURE:
	var $active = $("#showBox img").eq(givePicID("current") - 1);
	
	// CHANGE CURRENT PICTURE z-index SO THAT IT GOES BEHIND:
	$active.addClass("lastActive");

	// IF LAUNCHING DIASHOW, NEXT PICTURE DEPENDS ON THE CURRENT ONE:
	if(picID == 0) {
		var $next = $("#showBox img").eq(givePicID("next") - 1);
	}
	// IF DISPLAYING A SINGLE PICTURE, NEXT PICTURE IS THE ONE DEFINED BY picID:
	else {
		var $next = $("#showBox img").eq(picID - 1);
	}

	// UPDATE picNav LIST:
	var $activePicLink = $("#picNav li").eq(givePicID("current") - 1);
	var $nextPicLink = (picID == 0) ? $("#picNav li").eq(givePicID("next") - 1) : $("#picNav li").eq(picID - 1);
	$activePicLink.removeClass("selected");
	$nextPicLink.addClass("selected");
	
	// IN THE TWO-PICS SPECIAL CASE, SIMPLY ALTERNATE PSEUDO-PICTURE NAVIGATION HIGHLIGHTED DIGIT:
	if($("#picNav").hasClass("twoPicsSpecialCase")) $("#pseudoPicNav li").toggleClass("selected");
	
	// GIVE NEXT PICTURE 'ACTIVE' CLASS, FADE IT IN, DECLASSIFY CURRENT PICTURE:
	$next.css({opacity: 0.0})
		.addClass("active")
		.animate({opacity: 1.0}, fadeSpeed, function() {
			// THE LAST animate EFFECT IS HERE TO AVOID FLICKR ON EXPLORER 6:
			$active.removeClass("active lastActive").animate({opacity: 0.0}, 1000);
		});					
}


// FUNCTION STARTING DIASHOW LOOP -------------------------------------------------------------------------------------------------
function startDiaShow() {
	// CHANGE diaShowStart BUTTON COLOR, CURSOR STYLE AND REMOVE EVENT LISTENER:
	$("#diaShowStart").addClass("diaShowStartOn").css("cursor", "wait").unbind('click');
	
	// BEFORE STARTING DIASHOW, FIRST DISPLAY NEXT PICTURE OF THE LIST:
	switchPic(0, 1000);
	
	// START DIASHOW RECURRENCE:
	diaShowTimer = setInterval("switchPic(0, 2500)", 5000);
}


// DIASHOW STOP FUNCTION ----------------------------------------------------------------------------------------------------------
function stopDiaShow() {
	// STOP DIASHOW RECURRENCE BY REMOVING TIMER VARIABLE:
	clearInterval(diaShowTimer);
	
	// CHANGE diaShowStart BUTTON COLOR, REMOVE EVENT LISTENER AND CHANGE IT BY A 'START DIASHOW' LISTENER:
	$("#diaShowStart").removeClass("diaShowStartOn").unbind('click').css("cursor", "pointer").click(function() { startDiaShow(); });
}


// FUNCTION THAT RETURNS PREVIOUS/CURRENT/NEXT PIC ID -----------------------------------------------------------------------------
function givePicID(relativePos) {
	var numberOfPics = $("#showBox img").length;
	
	var currentPicID	= $("#picNav li.selected a").text() - 0;
	var previousPicID	= (currentPicID != 1) ? currentPicID - 1 : numberOfPics;
	var nextPicID		= (currentPicID != numberOfPics) ? currentPicID + 1 : 1;
	
	switch(relativePos) {
		case "previous":	return previousPicID;
		case "next":		return nextPicID;
		default:			return currentPicID;
	}
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// MENU NAVIGATION ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


// FUNCTION ADDING EVENT LISTENERS TO ALL MENU ELEMENTS ---------------------------------------------------------------------------
function addMenuListeners() {
	// MAIN MENU ITEM EVENT LISTENER:
	$("#mainMenu li").click(function() {
		// AVOID SERIAL-CLICKING BY CHECKING IF CURRENT ITEM ISN'T THE ONE PREVIOUSLY CLICKED:
		if($(this).attr("id") != previousClickedLink) {
			previousClickedLink = $(this).attr("id");
			
			// BECAUSE OF CONTACT LAYOUT, RESTORE NAVIGATION BOX WIDTH AND SHOW SUBNAVIGATION:
			$("#contactBox").remove();
			$("#navBox").css("width", "470px");
			$("#subMenuContainer").show();
			
			// HIGHLIGHT CHOSEN ITEM:
			$(this).siblings().removeClass("selected");
			$(this).addClass("selected");
			
			// BE SURE THAT ALL SUBLIST ITEMS AREN'T HIGHLIGHTED:
			$("ul.subMenu li").removeClass("selected");
				
			// HIDE ALL SUBMENUS (PARTICULARLY LAST ONE SHOWN):
			$("ul.subMenu").hide();
			
			// GET CLICKED MENU SECTION NAME:
			var chosenSectionName = $(this).attr("id").split("_")[1];
			
			// CHANGE page CONTENT ON THE BASIS OF CLICKED MENU ITEM --------------------------
			switch(chosenSectionName) {
				case "home":
					if(diaShowTimer) stopDiaShow();
					if(homePageDiaShowTimer) clearInterval(homePageDiaShowTimer);
					rebuildHomeDiashow();
					break;
					
				case "medias":
					if(diaShowTimer) stopDiaShow();
					if(homePageDiaShowTimer) clearInterval(homePageDiaShowTimer);
					displayMediaContent();
					break;
					
				case "contact":
					if(homePageDiaShowTimer) clearInterval(homePageDiaShowTimer);
					displayContactContent();
					break;
					
				default: // IF A PROJECT CATEGORY HAS BEEN CHOSEN:
					// SHOW CORRESPONDING SUBMENU:
					// $("#subMenu_" + chosenSectionName).fadeIn(500);
					$("#subMenu_" + chosenSectionName).show();
			} // ------------------------------------------------------------------------------
		}
	});
	
	// SUBMENU ITEM EVENT LISTENERS:
	$("ul.subMenu li").click(function() {
		// AVOID SERIAL-CLICKING BY CHECKING IF CURRENT ITEM ISN'T THE ONE PREVIOUSLY CLICKED:
		if($(this).attr("id") != previousClickedLink) {
			previousClickedLink = $(this).attr("id");
			
			// REMOVE CURRENT DIASHOW EVENT LISTENERS:
			removeDiaShowListeners();
			
			// GET CLICKED SUBMENU PROJECT NAME:
			var chosenProjectName = $(this).attr("id").split("_")[2];
			
			// HIGHLIGHT CHOSEN ITEM:
			$(this).siblings().removeClass("selected");
			$(this).addClass("selected");
	
			// IF VISITOR IS COMING FROM MEDIA PAGE, REMOVE MEDIA CONTENT BOX, REMOVE BACK LINK AND RESTORE DIASHOW START LINK:
			if($("#page div").is("#mediaContent")) {
				$("#mediaContent").remove();
				$("#backLink").replaceWith("<a id='diaShowStart'>diashow</a>");
				$("#controlBox").show();
			}
			
			// IF VISITOR COMES FROM CONTACT PAGE, SOME ELEMENTS MUST BE DELETED:
			$("#contactPageFilling").add("#contactBox").remove();
			// BECAUSE OF CONTACT LAYOUT, RESTORE NAVIGATION BOX WIDTH:
			$("#navBox").css("width", "470px");
			
			// IF A DIASHOW IS RUNNING, STOP IT:
			if(homePageDiaShowTimer) clearInterval(homePageDiaShowTimer);
			if(diaShowTimer) stopDiaShow();
			
			// REMOVE PICTURE NAVIGATION CONTENT:
			$("#picNav").empty();
			
			// BE SURE showBox IS IN page:		
			if(!$("#page div").is("#showBox")) $("#page").prepend("<div id='showBox'>");
			
			// EMPTY showBox, ADD A LOADER GIF, LOAD PROJECT PICTURES AND LAUNCH EVENT LISTENERS:
			$("#showBox")
				.empty()
				.show()
				.css("background", "url(img/ui/showBoxLoader.gif) center center no-repeat")
				.load("lib/buildShowBox.php", {projectName : chosenProjectName, async : false}, function() {					
					// EVEN IF ALREADY DECLARED IN CSS, SET PICS OPACITY BECAUSE OF IE opacity INCOMPATIBILITY:
					$("#showBox img").css("opacity", "0.0");
					
					// GET FIRST PICTURE URL:
					var firstPicURL = $("#showBox img:first-child").attr("src");
					
					// CREATE NEW IMAGE OBJECT:
					var cachePic = new Image();
					
					// IF cachePic HAS BEEN FULLY LOADED, LAUNCH FIRST PICTURE FADE-IN:
					cachePic.onload = function() {
						// AFTER PICTURE HAS BEEN DISPLAYED, REMOVE LOADER GIF:
						$("#showBox img:first-child").animate({opacity : 1.0}, 1500, function() { $("#showBox").css("background", "none"); });
						
						// FINALLY, LOAD PICTURE NAVIGATION CONTENT:
						$("#picNav").load("lib/buildPicNav.php", {projectName : chosenProjectName}, function() {
							// RESTORE DIASHOW EVENT LISTENERS:
							addDiaShowListeners();
						});
					};
					
					// FORCE BROWSER TO LOAD PICTURE INTO CACHE MEMORY BY CHANGING cachePic src PROPERTY:
					// CF. http://codetrinis.blogspot.com/2008/07/imgonload-error-with-internet-explorer.html
					cachePic.src = firstPicURL;
				});
		}
	});
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// MEDIAS /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


// MEDIA HOME DISPLAY -------------------------------------------------------------------------------------------------------------
function displayMediaContent() {
	// HIDE DIASHOW DOM ELEMENTS:
	$("#showBox").add("#controlBox").hide();
	
	// REMOVE CONTACT ELEMENTS:
	$("#contactPageFilling").add("#contactBox").remove();

	// BECAUSE OF CONTACT LAYOUT, RESTORE NAVIGATION BOX WIDTH:
	$("#navBox").css("width", "470px");
	
	// IN CASE OF DOUBLE-CLICK ON MEDIAS MENU ITEM, CHECK IF mediaContent ISN'T ALREADY IN page BOX:
	if($("#page div").is("#mediaContent")) $("#mediaContent").remove();
	
	// ADD NEW mediaContent BOX AND ADAPT LAYOUT TO FIT mediaContent WIDTH:
	$("#page").prepend("<div id='mediaContent'>");
	
	// AJAX-LOAD mediaContent CONTENT AND LAUNCH EVENT LISTENERS FOR COLUMN LIFTS:
	$("#mediaContent").load("lib/buildMediaContent.php", function() { addLiftListeners(); addViewDocLinkListeners(); });
}


// LIFT EVENT LISTENERS AND USEFULNESS TEST ---------------------------------------------------------------------------------------
function addLiftListeners() {
	// CONTENT MUST BE HIGH ENOUGH TO REQUIRE A LIFT:
	if($("#leftColumnContainer").height() > $("#leftColumn").height()) {
		$("#leftLift").bind("drag", function(event) { moveLift("left", event.offsetY); });
	}
	// IF CONTENT ISN'T HIGH ENOUGH, HIDE USELESS LIFT:
	else {
		$("#leftLift").hide();
	}
	
	// CONTENT MUST BE HIGH ENOUGH TO REQUIRE A LIFT:
	if($("#rightColumnContainer").height() > $("#rightColumn").height()) {
		$("#rightLift").bind("drag", function(event) { moveLift("right", event.offsetY); });
	}
	// IF CONTENT ISN'T HIGH ENOUGH, HIDE USELESS LIFT:
	else {
		$("#rightLift").hide();
	}
}


// LIFT VERTICAL-ONLY MOVEMENT ----------------------------------------------------------------------------------------------------
function moveLift(lift, cursorYPos) {
	// GET PAGE BOX TOP MARGIN, LIFT SHAFT HEIGHT AND LIFT HEIGHT (FOR THIS FUNCTION TO BE USED IN OTHER CONTEXTS):
	// var pageYPos			= document.getElementById("page").offsetTop;
	var pageYPos			= $("#page").offset().top; // ON IE6, jQuery offset() METHOD WORKS BETTER THAN offsetTop DOM PROPERTY.
	var shaftHeight			= $("#" + lift + "Shaft").height();
	var liftHeight			= $("#" + lift + "Lift").height();
	
	// LIFT POSITION DEPENDS FROM CURSOR POSITION:
	var liftPos				= cursorYPos - pageYPos;
	// IF CURSOR IS TOO HIGH, MINIMUM POSITION IS LIFT START:
	if(liftPos < 0) liftPos = 0;
	// IF CURSOR IS TOO LOW, MAXIMUM POSITION IS LIFT SHAFT BOTTOM: 
	if(liftPos > (shaftHeight - liftHeight)) liftPos = shaftHeight - liftHeight;
	
	// COMPUTE TEXT CONTAINER MOVEMENT AMPLITUDE ('LIBERTY'):
	var columnHeight		= $("#" + lift + "Column").height();
	var containerHeight		= $("#" + lift + "ColumnContainer").height();
	var containerLiberty	= containerHeight - columnHeight;
	
	// THE LOWER THE LIFT, THE HIGHER THE CONTAINER:
	var liftRelativePos		= liftPos / (shaftHeight - liftHeight);
	var containerYPos		= 0 - Math.round(containerLiberty * liftRelativePos);

	// IF CONTAINER IS HIGHER THAN COLUMN HEIGHT (SECOND CHECK!) MOVE LIFT DOWN AND CONTAINER UP: 
	if(containerLiberty > 0) {
		$("#" + lift + "Lift").css("top", liftPos);
		$("#" + lift + "ColumnContainer").css("top", containerYPos);
	}
}


// SHOW DOCUMENT EVENT HANDLERS ---------------------------------------------------------------------------------------------------
function addViewDocLinkListeners() {
	// CATCH ALL LINKS PROVIDED FOR VIEWING DOCUMENT SCANS AND ADD EVENT LISTENERS:
	$("a[id*=_viewDocLink]").click(function() {
		// WHEN THE LINK IS CLICKED, GET ITS DOCUMENT REFERENCE:
		var chosenDoc = $(this).attr("id").split("_")[2];

		// HIDE ALL PROJECT SUBMENUS:
		$("ul.subMenu li").removeClass("selected");
		$("ul.subMenu").hide();
		
		// HIGHLIGHT MEDIAS MAIN MENU ITEM:
		$("#mainMenu li").removeClass("selected");
		$("#mainMenu_medias").addClass("selected");

		// MOMENTARILY HIDE TWO-COLUMNS MEDIA LIST:
		$("#mediaContent").hide();

		// SET UP SCAN DIASHOW:
		$("#showBox")
			// PUT LOADER GIF IN BACKGROUND:
			.css("background", "url(img/ui/showBoxLoader.gif) center center no-repeat")
			// BE SURE THE SHOW BOX IS EMPTY:
			.empty()
			// AJAX-LOAD THE SCANS TO VIEW IN SHOW BOX:
			.show().load("lib/buildDocView.php", {chosenDoc : chosenDoc}, function() {
				// EVEN IF ALREADY DECLARED IN CSS, SET PICS OPACITY BECAUSE OF IE opacity INCOMPATIBILITY:
				$("#showBox img").css("opacity", "0.0");
				
				// GET FIRST SCAN URL:
				var firstScanURL = $("#showBox img:first-child").attr("src");
				
				// CREATE NEW IMAGE OBJECT:
				var cacheScan = new Image();
				
				// IF cachePic HAS BEEN FULLY LOADED, LAUNCH FIRST SCAN FADE-IN:
				cacheScan.onload = function() {
					// AFTER SCAN HAS BEEN DISPLAYED, REMOVE LOADER GIF:
					$("#showBox img:first-child").animate({opacity : 1.0}, 1500, function() { $("#showBox").css("background", "none"); });
					
					// AJAX-LOAD SCAN NAVIGATION:
					$("#picNav").load("lib/buildDocNav.php", {chosenDoc : chosenDoc}, function() {
						// INSTEAD OF DIASHOW START BUTTON, PUT A LINK LEADING BACK TO TWO-COLS MEDIA LIST:
						$("#diaShowStart").replaceWith("<a id='backLink'>back</a>");
						
						// IF backLink IS CLICKED, RESTORE DIASHOW START BUTTON, HIDE SHOW BOX, CONTROL BOX, AND DISPLAY MEDIA LIST:
						$("#backLink").click(function() {
							$("#backLink").replaceWith("<a id='diaShowStart'>diashow</a>");
							$("#showBox").add("#controlBox").hide();
							$("#mediaContent").show();
						});
						
						// ADD CUSTOM DIASHOW NAVIGATION LISTENERS (PICTURE AND PICTURE NAVIGATION CLICKS):
						addDiaShowListeners();
						
						// NOW IT'S READY, SHOW PICTURES/SCANS CONTROL BOX:
						$("#controlBox").show();
					});
				};
				
				// FORCE BROWSER TO LOAD SCAN INTO CACHE MEMORY BY CHANGING cachePic src PROPERTY:
				// CF. http://codetrinis.blogspot.com/2008/07/imgonload-error-with-internet-explorer.html
				cacheScan.src = firstScanURL;
		});
	});
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CONTACT ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


// CONTACT PAGE CONSTRUCTION ------------------------------------------------------------------------------------------------------
function displayContactContent() {
	// HIDE ALL ELEMENTS OF OTHER WEBSITE SECTIONS:
	$("#mediaContent").add("#showBox").add("#controlBox").add("#subMenuContainer").hide();
	
	// ADD AN EMPTY BOX OCCUPYING THE SAME ROOM AS showBox OR mediaContent:
	if(!$("#page div").is("#contactPageFilling")) $("#page").prepend("<div id='contactPageFilling'>");
	
	// WIDEN NAVIGATION BOX TO RECEIVE contactBox (CONTAINING RIGHT AND LEFT COLUMNS OF ADDRESS):
	$("#navBox").css("width", "700px");
	
	// INSERT CONTACT BOX INTO navBox:
	$("#minHeightBox").after("<div id='contactBox'>");
	
	// LOAD CONTACT BOX CONTENT (2 COLUMNS):
	$("#contactBox").load("lib/buildContactBox.php", function() {
		// OPEN EXTERNAL LINKS IN NEW WINDOW:
		$("a[href^=http://]").attr("target", "_blank");
	});
}