/*
 * SCRIPT CALLED BY index.php FOR lib/portfolio.php
 */


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// PORTFOLIO //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var projectTotal, detailTotal;


// ONLOAD FUNCTION --------------------------------------------------------------------------------------------------------------------
$(function() {
	// PRELOAD PICTURES AND THEN INITIALIZE PROJECT GALLERY:
	preload("#portfolioShowBox", "black", initNav);
	// preload("#portfolioShowBox", "#e5e5e5", initNav);
	// preload("#portfolioShowBox", initNav);
});


// INITIALIZING PROJECT GALLERY -------------------------------------------------------------------------------------------------------
function initNav() {
	// SHOW GALLERY FIRST PICTURE (ALL PICTURES BEING DECLARED AS display:none THROUGH CSS):
	$("#portfolioShowBox img:first-child").show();
	
	// GET PROJECT AND DETAIL INFORMATION AS STOCKED IN GALLERY NAVIGATION:
	projectTotal	= $("#projectTotal").html() - 0;
	detailTotal		= $("#detailTotal").html() - 0;
	
	// NAVIGATION EVENT LISTENERS:
	if(projectTotal > 0) {
		$("#projectRightArrow").add("#portfolioShowBox").click(function() { switchProject(+1); });
		$("#projectLeftArrow").click(function() { switchProject(-1); });
	}
	if(detailTotal > 0) {
		$("#detailRightArrow").click(function() { switchDetail(+1); });
		$("#detailLeftArrow").click(function() { switchDetail(-1); });
	}
	
	// THUMBNAIL MENU EVENT LISTENER:
	$("#thumbMenuLink").click(function() { displayThumbMenu(); });
}


// FUNCTION SWITCHING PROJECT GALLERIES -----------------------------------------------------------------------------------------------
function switchProject(way) {
	// CONVERT CHOSEN NAV DIRECTION INTO NUMERIC VALUE:
	way -= 0;
	
	// GET CURRENT PROJECT POSITION:
	var currentProject = $("#projectNo").html() - 0;
	
	// CALCULATE NEW POSITION USING CHOSEN NAV DIRECTION:
	if(way == -1) var nextProject = currentProject == 1 ? projectTotal : currentProject - 1;
	if(way == +1) var nextProject = currentProject == projectTotal ? 1 : currentProject + 1;
		
	// SYNCHRONOUSLY LOAD WHOLE NEW PROJECT GALLERY INTO content BOX;
	// initThumbMenu() FUNCTION BELOW USES, WITH THUMB MENU, PROJECT IDS; HERE, WE USE PROJECT RELATIVE POSITION:
	$("#content").load("lib/rebuildProjectGallery.php", {projectID: 0, projectPos: nextProject, async: false}, function() {
		// AS THE WHOLE GALLERY HAS BEEN CHANGED, INITIALIZE IT (MAINLY: ITS LISTENERS) AFTER PICTURES LOADING CHECK:
		preload("#portfolioShowBox", "black", initNav);
		// preload("#portfolioShowBox", "#e5e5e5", initNav);
		// preload("#portfolioShowBox", initNav);
	});
}


// FUNCTION UPDATING NAVIGATION COUNTERS, DISPLAYING NEW DETAIL AND AJAX-LOADING DETAIL TEXT ------------------------------------------
function switchDetail(way) {
	// CONVERT CHOSEN NAV DIRECTION INTO NUMERIC VALUE:
	way -= 0;
	
	// GET CURRENT DETAIL POSITION:
	var currentDetail = $("#detailNo").html() - 0;
	
	// CALCULATE NEW POSITION USING CHOSEN NAV DIRECTION:
	if(way == -1) var nextDetail = currentDetail == 1 ? detailTotal : currentDetail - 1;
	if(way == +1) var nextDetail = currentDetail == detailTotal ? 1 : currentDetail + 1;
	
	// HIDE CURRENT DETAIL PICTURE AND SHOW THE NEW ONE:
	$("#portfolioShowBox img:nth-child(" + (currentDetail) + ")").hide();
	$("#portfolioShowBox img:nth-child(" + (nextDetail) + ")").show();
	
	// UPDATE NAVIGATION DETAIL POSITION:
	$("#detailNo").html(nextDetail);
	
	// GET NEW DETAIL ID AND AJAX-LOAD ITS CORRESPONDING TEXT:
	var newDetailID = $("#portfolioShowBox img:nth-child(" + (nextDetail) + ")").attr("id").split("_")[1];
	$("#detailTextBox").load("lib/getDetailText.php", {picID: newDetailID});
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// THUMBNAIL MENU /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// FUNCTION LOADING THUMBNAIL MENU ----------------------------------------------------------------------------------------------------
function displayThumbMenu() {
	// GET CURRENT PROJECT POSITION:
	var currentProject = $("#projectNo").html() - 0;
	
	// SYNCHRONOUSLY LOAD THUMBNAIL MENU:
	$("#content").load("lib/buildThumbMenu.php", {projectPos: currentProject, setPos: 0, async: false}, function() {
		// CHECK MENU THUMBNAIL LOADING AND INITIALIZE THUMBMENU NAVIGATION:
		preload("#thumbMenu", "black", initThumbMenu);
	});
}


// THUMBNAIL MENU INITIALIZATION ------------------------------------------------------------------------------------------------------
function initThumbMenu() {
	// WHILE LOADING, THE SELECTED PROJECT IS GIVEN A FAKE CLASS (SO THAT USER DOESN'T SEE ITS BORDER, WHITE BY DEFAULT);
	// AFTER THE IMAGES HAVE BEEN LOADED (NOW !), REPLACE FAKE SELECTED CLASS WITH THE REAL ONE, GIVING TOP AND BOTTOM BLACK BORDERS TO THUMB LINKS:
	$("[class=selectedProjectWhileLoading]").removeClass("selectedProjectWhileLoading").addClass("selectedProject");
	
	// ONCE LOADED, DISPLAY THUMB MENU IMAGES (TILL NOW: display: none):
	$("#thumbMenu img").show();
	
	// WHEN A THUMB IS HOVERED, EMPHASIZE IT AND DISPLAY CORRESPONDING PROJECT TEXT:
	$("[id^=projectThumb_]").mouseenter(function() {
		// GET HOVERED THUMB=PROJECT ID:
		var projectID = $(this).attr("id").split("_")[1];
		
		// SET ALL THUMB AS "NEUTRAL":
		$("#thumbMenu li a").removeClass("selectedProject");
		
		// ADD selectedProject CLASS TO HOVERED PROJECT LIST ITEM LINK:
		$(this).addClass("selectedProject");
		
		// HIDE ALL PROJECT TEXTS:
		$("[id^=projectText_]").removeClass("displayedProjectText").addClass("hiddenProjectText");
		
		// SHOW TEXT CORRESPONDING TO HOVERED THUMB/PROJECT:
		$("#projectText_" + projectID).removeClass("hiddenProjectText").addClass("displayedProjectText");
	});
	
	// THUMBNAIL MENU NAVIGATION LISTENERS:
	$("#projectRightArrow").click(function() { switchProjectSet(+1); });
	$("#projectLeftArrow").click(function() { switchProjectSet(-1); });
	
	// THUMBNAIL/PROJECT SELECTION LISTENERS:
	$("[id^=projectThumb_]").click(function() {
		// GET CLICKED PROJECT ID:
		var projectID = $(this).attr("id").split("_")[1];
		
		// SYNCHRONOUSLY LOAD WHOLE CLICKED PROJECT GALLERY INTO content BOX;
		// switchProject() FUNCTION ABOVE USES, WITH PROJECT GALLERY, PROJECT POSITIONS; HERE, WE USE PROJECT ID:
		$("#content").load("lib/rebuildProjectGallery.php", {projectID: projectID, projectPos: 0, async: false}, function() {
			// AS THE WHOLE GALLERY HAS BEEN CHANGED, INITIALIZE IT (MAINLY: ITS LISTENERS) AFTER PICTURES LOADING CHECK:
			preload("#portfolioShowBox", "black", initNav);
		});
	});
}


// FUNCTION CHANGING THE SET OF PROJECT THUMBNAILS ------------------------------------------------------------------------------------
function switchProjectSet(way) {
	// CONVERT CHOSEN NAV DIRECTION INTO NUMERIC VALUE:
	way -= 0;
	
	// GET CURRENT PROJECT SET POSITION:
	var currentSet = $("#setNo").html() - 0;
	
	// GET THE NUMBER OF PROJECTS:
	var setTotal = $("#setTotal").html() - 0;
	
	// CALCULATE NEW POSITION USING CHOSEN NAV DIRECTION:
	if(way == -1) var nextSet = currentSet <= 1 ? setTotal : currentSet - 1;
	if(way == +1) var nextSet = currentSet == setTotal ? 1 : currentSet + 1;
		
	// SYNCHRONOUSLY LOAD WHOLE NEW SET OF PROJECT THUMBNAILS INTO content BOX:
	$("#content").load("lib/buildThumbMenu.php", {projectPos: 0, setPos: nextSet, async: false}, function() {
		// CHECK MENU THUMBNAIL LOADING AND INITIALIZE THUMBMENU NAVIGATION:
		preload("#thumbMenu", "black", initThumbMenu);
	});
}