
$( document ).ready(function() {

	$(window).resize(function() {		
		
		//$('.image_reveal').hide();
		//$(".image_ind").hide();
		
	});
	
	$('.image_btn').click(function(e){
		
		$(this).parent().css("max-height","auto");
		
		var holderHeight = $(this).parent().height();
		
		$(this).parent().css("max-height",holderHeight+"px")
		
		
		var winWidth = $(window).width();
			
		if(winWidth >= 1024){	
			$(".image_ind").css("height",holderHeight+"px")
			$(".image_ind").css("width",14+"px")
		}else{
			$(".image_ind").css("height",14+"px")
			$(".image_ind").css("width",$(this).parent().width()+"px")
		}
		
		
		//$('.image_reveal').hide();
		$('.image_btn').css('cursor','pointer');

		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 + ' .image_btn').length;
		
		$('#sec_' + imgSec + ' .image_reveal').hide(); // 20220721 Fix
		
		//$("#image_leadin_"+imgSec).css("display","none")
		//$("#image_ind_"+imgSec).css("display","block")
		
		$('#image_reveal_'+imgSec+'_'+iconItem).fadeIn(500, function(){
			if(isWeb){
				$(this).focus();
			}
		});
		
				
		if(Number($(this).attr('data-image')) == 0){
			$(this).attr('data-image',1);
		}
		
		
		
		isImageCDDone(img_sec);		
		
		imageVisited(imgSec,totalIcons,this); // Hotspot selected state
		
		
		
		/* hotspot banner fix */
		if(isiPad){
			if(iOSApp){
				//$('.bar_robot').removeClass('displayBlock').addClass('displayNone');
			}
			setTimeout(function(){hotSpotAdjustBanner();},100);
		}		
		if(isAndroidTablet || isAndroidPhone || isMacChrome){
				$('html,body').scrollTop(windowTop -1)	
		}
		return false;		
	});	
	
	/* added keyboard accessibility */
	$('.image_btn').keypress(function (e) {
		if (e.keyCode == 13 || e.keyCode == 32) {
			
			$(this).trigger('click');
		}		
	});	

});

/*
	imageVisited 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 imageVisited(sec,total,btn){	
	for(var i = 1; i!=total+1; i++){
		if(Number($('#image_btn_'+sec+'_'+i).attr('data-image')) == 2){
			var imgEle, img, ext
			$('#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('_active') != -1){
					img = img.split("_active")[0];
					$(imgEle).attr('src', img + '_visited.' + ext);	
				}
				
				if(img.indexOf('_visited') != -1){
					img = img.split("_visited")[0];
					$(imgEle).attr('src', img + '_visited.' + ext);	
				}
				
			});
		}
	}
	
	
	$(btn).find('img').each(function(index, element) {
		var imgEle1, img1, ext1
		imgEle1 = $(this);
		img1 = $(this).attr('src').split('.')[0];
		ext1 = $(this).attr('src').split('.')[1];


		if(img1.indexOf('_visited') != -1){
			img1 = img1.split("_visited")[0];

			$(imgEle1).attr('src', img1 + '_active.' + ext1);	
		}else{
			$(imgEle1).attr('src', img1 + '_active.' + ext1);
		}

	});
	
}


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

function isImageCDDone(img_sec){
	secNum = img_sec.split('_')[1]
	var hotspotDone = 0;
	var clicked = 0;
	$(img_sec).find('.image_btn').each(function(index, element) {
				
		var data = Number($(this).attr('data-image'));
		if(data === Number(1)){
			hotspotDone++;
			clicked = Number($('#sec_'+secNum).attr('data-clicked'));
			clicked +=1;
			$('#sec_'+secNum).attr('data-clicked',clicked);
			$(this).attr('data-image','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;
	}
	
}


$('.image_btn').attr('data-image',0);