function performerOverlay(name){
	//figure out which item from the cms we are looking for. 
	performerId = name.split("-");
	id = performerId.length - 1;
	performerId = performerId[id] - 1;// this was set as position() through xsl so correcting for this
	var thumbId = performerId[id];
	
	newUrl = performerInfo.promo.item[performerId].url;
	newTitle = performerInfo.promo.item[performerId].title;
	//enter values into the prepared container
	$("#performerOverlayImage").attr("src", performerInfo.promo.item[performerId].imagedir);
	$("#performerOverlayTitle").html("<p style='padding:0; margin:0;'><a href='"+ newUrl +"'>" + newTitle +"</a></p>");
	$("#performerOverlayCopy").text(performerInfo.promo.item[performerId].header);
	$("#performerOverlayLink").text(newUrl);
	
	//get position
	var topcoord = 1;
	var leftcoord = 1;
	var margLeft = 79;
	var margTop = 62;	
	var temp = 0;
	if(thumbId < 5){
		topcoord = 1 * margTop;
		leftcoord = thumbId * margLeft;
	}
	if((thumbId >= 5) && (thumbId < 9)){
		temp = 4; 
		topcoord = 2 * margTop;
		leftcoord = (thumbId - temp) * margLeft;
	}
	if((thumbId >= 9) && (thumbId < 13 )){
		temp = 8; 
		topcoord = 3 * margTop;
		leftcoord = (thumbId - temp) * margLeft;
	}
	if((thumbId >= 13) && (thumbId <17 )){
		temp = 12; 
		topcoord = 4 * margTop;
		leftcoord = (thumbId - temp) * margLeft;
	}
	
	console.log("id = " + thumbId +" and left coord = " + leftcoord + "and top coord = " + topcoord);


	//show the overlay effect
	
	$("#generalPerformerInfoHolder").css("display","block");
	$(".actualImageOverlay").css("display","block");
	
	$('#generalPerformerInfoHolder').mouseover( function(event) {
		$("#generalPerformerInfoHolder").css("display","block");
		$(".actualImageOverlay").css("display","block");
	});

	$('#generalPerformerInfoHolder').mouseout( function(event) {
		$("#generalPerformerInfoHolder").css("display","none");
		$(".actualImageOverlay").css("display","none");
	});
}