var img4HeightArr = [];

$( document ).ready(function() {
	
	/*setTimeout(function(){
	$(".four_image_int_holder").each(function(index) {
		img4HeightArr[index] = Number($(this).height());
		var img4Height =  Number($(this).height())
		$(this).attr('data-image4height', img4Height);
		
	});
		
		console.log("img4HeightArr = " + img4HeightArr)
		
	},1000)*/
	
	window.top.onorientationchange = function () {
		/* fix for four grid image display hiding on orientation change on iPad 053023 */
		/* $('.four_image_reveal').hide(); */
		setImg4Height();
		rePosImg4Pop();
	}
	

	$(window).resize(function() {		
		//$('.four_image_reveal').hide();
		
		$(".four_image_int_holder").each(function(index) {
			//img4HeightArr[index] = Number($(this).height());
			//var img4Height =  Number($(this).height())
			//$(this).attr('data-image4height', img4Height);

		});
		
		
		setImg4Height();
		rePosImg4Pop();
		
	});
	
	$('.four_image_btn').click(function(e){
		
		
		$('.four_image_reveal').hide();
		$('.four_image_btn').css('cursor','pointer');
		
		setImg4Height();
		

		var imgID = $(this).attr('id').split('btn_')[1];		
		var imgSec = imgID.split('_')[0];
		var iconItem = imgID.split('_')[1];
	
		var img_sec = '#sec_' + imgSec;
		var totalIcons = $('#sec_' + imgSec + ' .four_image_btn').length;
				
		var btnTop = $(this).position().top;
		
		$('#four_image_reveal_holder_'+imgSec).css("top",btnTop+"px");
		$('#four_image_reveal_'+imgSec+'_'+iconItem).fadeIn(500, function(){

			$(this).find(".four_image_reveal_content").each(function(index, element) {
     			// 20230110 fix to stop popup on phone appearing under nav bar
				if(isWeb){
					$(this).focus();
				}

			});
		});
		
		var intHeight = $('#four_image_int_holder_'+imgSec).innerHeight();
		//alert("intHeight = " + intHeight)
		var revealHeight = $('#four_image_reveal_'+imgSec+'_'+iconItem).height();
		var newHeight = btnTop + revealHeight;
		
	
		if(newHeight > intHeight){
			//alert("HI " + $(window).width())
			if($(window).width() < 1300){
				$('#four_image_int_holder_'+imgSec).css("height",newHeight+"px")
			}
		}else{
			
		}
		
				
		if(Number($(this).attr('data-image4')) == 0){
			$(this).attr('data-image4',1);
		}
		
		hideShow4Img(imgSec,true);
		
		isImage4Done(img_sec);		
		
		image4Visited(imgSec,totalIcons,this); // Hotspot selected state
		
				
	});	
	
	/* added keyboard accessibility */
	$('.four_image_btn').keypress(function (e) {
		if (e.keyCode == 13 || e.keyCode == 32) {
			
			$(this).trigger('click');
		}		
	});	
	
	$(".popup_close").click(function(e){
		var popID = $(this).parent().attr("id").split("_")[4];
		var secID = $(this).parent().attr("id").split("_")[3];

		$(this).parent().hide();

		setImg4Height();
		
		hideShow4Img(secID,false);
		$("#four_image_btn_"+secID+"_"+popID).focus();
		
	});
	
	$('.popup_close').keypress(function (e) {
		if (e.keyCode == 13 || e.keyCode == 32) {
			
			$(this).trigger('click');
		}		
	});	

});


/* 

	hide and show the buttons from screen reader

*/

function hideShow4Img(imgSec, boo){
	var totalIcons = $('#sec_' + imgSec + ' .four_image_btn').length;	
	for(var i = 1; i!=totalIcons+1; i++){
		
		//$('#four_image_btn_'+imgSec+'_'+i).attr("aria-hidden",boo);
	}
}

/*
	image4Visited function sets visited state as follows:
	1.	Before selecting the hotspot: Image appears in full colour, text label in black.
	2.	Selected hotspot: Image appears in full colour, text label in black.
	3.	Visited hotspot (unselected): Image appears in visited state, text label in jewel tone of course.
	4.	Visited hotspot (selected): Image appears in full colour, text label in black.

*/

function image4Visited(sec,total,btn){	
	for(var i = 1; i!=total+1; i++){
		if(Number($('#four_image_btn_'+sec+'_'+i).attr('data-image4')) == 2){
			var imgEle, img, ext
			$('#four_image_btn_'+sec+'_'+i).find('img').each(function(index, element) {
				imgEle = $(this);
				img = $(this).attr('src').split('.')[0];
				ext = $(this).attr('src').split('.')[1];
			});

			if(img.indexOf('_visited') == -1){
				$(imgEle).attr('src', img + '_visited.' + ext);	
			}	
		}
	}	
}

function rePosImg4Pop(){

	$(".four_image_reveal").each(function(index) {
		
		if($(this).is(':visible')){
			var imgID = $(this).attr('id').split('reveal_')[1];		
			var imgSec = imgID.split('_')[0];
			var iconItem = imgID.split('_')[1];

			var btnTop = $("#four_image_btn_"+imgSec+"_"+iconItem).position().top;

			$('#four_image_reveal_holder_'+imgSec).css("top",btnTop+"px");
			
			
			var intHeight = $('#four_image_int_holder_'+imgSec).innerHeight();
			var revealHeight = $('#four_image_reveal_'+imgSec+'_'+iconItem).height();
			var newHeight = btnTop + revealHeight;

			if(newHeight > intHeight){
				if($(window).width() < 1300){
					$('#four_image_int_holder_'+imgSec).css("height", newHeight+"px")
				}
			}
			
			
		}
		
	});

}

function setImg4Height(){
	
	$(".four_image_holder").each(function(index) {
		img4HeightArr[index] = Number($(this).innerHeight());
		var img4Height =  Number($(this).innerHeight())
		//$(this).attr('data-image4height', img4Height);
		$(this).parent().css("height",img4Height);
		//console.log("innerHeight " + $(this).innerHeight())
		
	});
		
	//console.log("img4HeightArr = " + img4HeightArr)
	
	
	
}

/* 
	isImage4Done function 
	
	mark each hotspot as viewed when clicked
	called when hotspot clicked
*/

function isImage4Done(img_sec){
	secNum = img_sec.split('_')[1]
	var hotspotDone = 0;
	var clicked = 0;
	$(img_sec).find('.four_image_btn').each(function(index, element) {
				
		var data = Number($(this).attr('data-image4'));
		if(data === Number(1)){
			hotspotDone++;
			clicked = Number($('#sec_'+secNum).attr('data-clicked'));
			clicked +=1;
			$('#sec_'+secNum).attr('data-clicked',clicked);
			$(this).attr('data-image4','2');
		}
    });
					
	var totalClicked = Number($('#sec_'+secNum).attr('data-clicked'))
	var totalClicks = Number(document.clickArr[Number(secNum) - 1])
	if(totalClicked == totalClicks){	
		if(isAndroidTablet || isAndroidPhone || isMacChrome){
			document.intComplete = true;
			clearInterval(document.lockinterval)
			document.lockinterval = setInterval(function(){
				che = img_sec
				secNum = img_sec.split('_')[1]
				document.getnear(che);
				isPageComplete(secNum);
				if(($('#sec_'+(parseInt(secNum)+1)).is(':visible') || !$('#right_nav').hasClass('locked')) && document.courseLockedDown == true){
					clearInterval(document.lockinterval)
				} 
			},250)
		}else{
			document.intComplete = true;
			isPageComplete(secNum);
		}
		
		document.intComplete = true;
	
		isPageComplete(secNum);
		isHotSpotScreen = false;
	}
	
}


$('.four_image_btn').attr('data-image4',0);