app.js

jQuery(document).ready(function() {

/*
 *
 * add hover actions to display topic area
 * under image
 *
 * 
 */

	var i = 0;
	var thrustAreas = {
	
		"areas": [
		
			{"appendID" : "#researchAreaID", "classRef" : "cls-1", "imageBlock": ".cls-1", "anchorLink" : "a.microgrids-and-smart-grids-res-area > img.gray-default", 'bgColor': '#25aae1', 'textID' : 'microgrids-smart-cards'},
			{"appendID" : "#researchAreaID", "classRef" : "cls-2", "imageBlock": ".cls-2", "anchorLink" : "a.bioenergy-and-biofuels-res-area > img.gray-default", 'bgColor' : '#2bb673', 'textID' : "bioenergy-and-biofuels"},
			{"appendID" : "#researchAreaID", "classRef" : "cls-3", "imageBlock": ".cls-3", "anchorLink" : "a.data-science-process-systems-res-area > img.gray-default", 'bgColor' : '#8dc63f', 'textID' : "data-science"},
			{"appendID" : "#researchAreaID", "classRef" : "cls-4", "imageBlock": ".cls-4", "anchorLink" : "a.materials-for-energy-conversion-res-area > img.gray-default", 'bgColor' : '#f15a29', 'textID' : 'materials-for-energy-conversion'},
			{"appendID" : "#researchAreaID", "classRef" : "cls-5", "imageBlock": ".cls-5", "anchorLink" : "a.electrochemical-devices-energy-storage-res-area > img.gray-default", 'bgColor' : '#fbb040', 'textID' : 'electrochemical-devices-and-energy-storage'},
			{"appendID" : "#researchAreaID", "classRef" : "cls-6", "imageBlock": ".cls-6", "anchorLink" : "a.thermochemical-energy-conversion-res-area > img.gray-default", 'bgColor' : '#ec008c', 'textID' : 'thermochemical-energy-conversion'},
			{"appendID" : "#researchAreaID", "classRef" : "cls-7", "imageBlock": ".cls-7", "anchorLink" : "a.electrical-energy-conversion-res-area > img.gray-default", 'bgColor' : '#1c75bc', 'textID' : 'electrical-energy-conversion'},
			{"appendID" : "#researchAreaID", "classRef" : "cls-8", "imageBlock": ".cls-8", "anchorLink" : "a.water-and-the-environment-res-area > img.gray-default", 'bgColor' : '#662d91', 'textID' : 'water-and-environment'},
		
		]
	
		};

	for(i = 0; i < thrustAreas.areas.length; i++) {
	
	jQuery(thrustAreas.areas[i].imageBlock).click({thrustContent : thrustAreas, current : i}, function(info) {
	
	var j = 0;
	var areas = info.data.thrustContent.areas;
	var currObject = info.data.thrustContent.areas[info.data.current];
	
		// reset board

		for(j = 0; j < areas.length; j++) {
		
		jQuery(areas[j].anchorLink).css("filter", "grayscale(1)");
		
		}
	
	if(jQuery(currObject.anchorLink).css("filter") == "grayscale(1)") {
	
	jQuery(currObject.anchorLink).css("filter", "grayscale(0)");
		
	} else if(jQuery(currObject.anchorLink).css("filter") == "grayscale(0)") { 

	jQuery(currObject.anchorLink).css("filter", "grayscale(1)");
		
	} else { }
		
		
	});
	
	jQuery(thrustAreas.areas[i].imageBlock).hover(
												  
		function(info){ // mouse on trigger function
		
		var i = 0;

		// loop through SVG Elements
		
		for(i = 0; i < thrustAreas.areas.length; i++){
			
			if(info.target.className.baseVal ==  thrustAreas.areas[i].classRef) {
			
			jQuery("#" + thrustAreas.areas[i].textID).css({"display" : "none"});
			jQuery(thrustAreas.areas[i].imageBlock).css({"fill" : "#ccc"});
			jQuery(thrustAreas.areas[i].imageBlock).css({"cursor" : "pointer"});
			jQuery(thrustAreas.areas[i].appendID).html("<p align = \"center\"><b>" + jQuery("#" + thrustAreas.areas[i].textID).attr("data-name") + "</b></p>");
						
			} 
			
		}

		},
		
		function(info){ // mouse out function
		
		var i = 0;

		for(i = 0; i < thrustAreas.areas.length; i++){
			
			if(info.target.className.baseVal ==  thrustAreas.areas[i].classRef) {
			
			jQuery("#" + thrustAreas.areas[i].textID).css({"display" : "inline"});
			jQuery(thrustAreas.areas[i].imageBlock).css({"fill" : thrustAreas.areas[i].bgColor});
			jQuery(thrustAreas.areas[i].appendID).html("");
						
			} 
			
		}

		}	
	);

	}
	
});