/* functions to control hotspot interactivities */

var numberOfHotspot;
/* transitions: scale up/down hotspot button images */
var currHotSpotItem = 0;
/* transitions: grow up/down hotword displays */
var lastHotSpotItem = 0;
var hotBanPos;
var isHotSpotScreen;
/* transitions: grow up/down hotword displays */
var currHotSpot = 0;

var hotSpotPos; // hotspot screen jump fix

$( document ).ready(function() {

	/* fix for wrapping icon display not aligning properly on switch between portrait and landscape on iPad 052423 */
	window.top.onorientationchange = function () {
		//repositionReveals(); /* 20230601 Fix for display issue on phones */
		setTimeout(function(){repositionReveals();},300);  /* 20230601 Fix for display issue on phones */
	}
	
	/* fix for wrapping icon display not aligning properly on switch between portrait and landscape on iPad 052423 */
	$(window).resize(function() {
		//repositionReveals(); /* 20230601 Fix for display issue on phones */
		setTimeout(function(){repositionReveals();},300); /* 20230601 Fix for display issue on phones */
	});	
	
	$('.icon_btn').click(function(e){
		
		isHotSpotScreen = true;
		hotSpotPos = $(window).scrollTop(); // hotspot screen jump fix
		
		
		$('.icon_content').hide();
		$('.icon_btn').css('cursor','pointer');

		var iconID = $(this).attr('id').split('btn_')[1];		
		var iconSec = iconID.split('_')[0];
		var iconItem = iconID.split('_')[1];
	
		var icon_sec = '#sec_' + iconSec;
		var totalIcons = $('#sec_' + iconSec + ' .icon_btn').length;
		
		
		
		$('#icon_reveal_'+iconSec+'_'+iconItem).fadeIn(500, function(){
			if(isWeb){
				/* 20240130 accessibility 2024 */
				$(this).find('.icon_start').focus();
			}
		});
		
		var leftPos = $('#icon_btn_'+iconSec+'_'+1).offset().left;
		var thisWidth = $(this).width();
		var thisLeft = $(this).offset().left;
		var newLeft = leftPos - thisLeft;
				
		var posDiff = thisLeft - leftPos;
				
		var indLeft = posDiff + (thisWidth/2) - 16;
		
		$('#icon_reveal_'+iconSec+'_'+iconItem).css('left',newLeft)
		
		if(document.textDirection == "rtl"){
			var posDiff = leftPos - thisLeft;			
			
			var indLeft = posDiff + (thisWidth/2) - 16;
			
			var indRight = ($('#icon_reveal_'+iconSec+'_'+iconItem).width() - indLeft) - 36;
			
			$('#icon_reveal_'+iconSec+'_'+iconItem + ' .icon_indicator').css('background-position', indRight+'px 0px')
			
		}else{
		
			$('#icon_reveal_'+iconSec+'_'+iconItem + ' .icon_indicator').css('background-position', indLeft+'px 0px')
		}
		
				
		if(Number($(this).attr('data-icon')) == 0){
			$(this).attr('data-icon',1);
		}
		
		/* v4 Reskin */
		$('#sec_' + iconSec + ' .icon_btn_bg').removeClass("icon_btn_selected");
		$('#icon_btn_'+iconSec+'_'+iconItem + ' .icon_btn_bg').addClass("icon_btn_selected");
		//$(this).addClass("icon_btn_selected")
		
		
		isIconDone(icon_sec);		
		
		iconVisited(iconSec,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 */
	$('.icon_btn').keypress(function (e) {
		if (e.keyCode == 13 || e.keyCode == 32) {
			
			$(this).trigger('click');
		}		
	});	

});

/* fix for wrapping icon display not aligning properly on switch between portrait and landscape on iPad 052423 */
function repositionReveals(){	
	$('.icon_btn_selected').each(function(index, element) {
		var iconID = $(this).parent().attr('id').split('btn_')[1];		
		var iconSec = iconID.split('_')[0];
		var iconItem = iconID.split('_')[1];		
		var leftPos = $('#icon_btn_'+iconSec+'_'+1).offset().left;
		var thisWidth = $(this).width();
		var thisLeft = $(this).offset().left;
		var newLeft = leftPos - thisLeft;
				
		var posDiff = thisLeft - leftPos;
				
		var indLeft = posDiff + (thisWidth/2) - 16;
		
		if (isiPhone || isAndroidPhone)
		{
			//$('#icon_reveal_'+iconSec+'_'+iconItem).css('left',0);
			$('#icon_reveal_'+iconSec+'_'+iconItem).css('left',newLeft); /* 20230601 Fix for display issue on phones */
		}
		else
		{
			$('#icon_reveal_'+iconSec+'_'+iconItem).css('left',newLeft);
		}			
		
		if(document.textDirection == "rtl"){
			var posDiff = leftPos - thisLeft;			
			
			var indLeft = posDiff + (thisWidth/2) - 16;
			
			var indRight = ($('#icon_reveal_'+iconSec+'_'+iconItem).width() - indLeft) - 36;
			
			$('#icon_reveal_'+iconSec+'_'+iconItem + ' .icon_indicator').css('background-position', indRight+'px 0px')
			
		}else{
		
			$('#icon_reveal_'+iconSec+'_'+iconItem + ' .icon_indicator').css('background-position', indLeft+'px 0px')
		}
		/* 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;
	});
}
	
/* 20240130 handling of src possibly returning full url from some browsers in LMS */

/*
	iconVisited 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 iconVisited(sec,total,btn){	
	
	for(var i = 1; i!=total+1; i++){
		if(Number($('#icon_btn_'+sec+'_'+i).attr('data-icon')) == 2){
			var imgEle
			$('#icon_btn_'+sec+'_'+i).find('img').each(function(index, element) {
				imgEle = $(this);	
			});				
			$(imgEle).attr('src', 'images/icon_btn_'+sec+'_' + i + '_visited.png');	
			
		}
	}
	
	
	$(btn).find('img').each(function(index, element) {
		var imgEle11, img1
		imgEle1 = $(this);
		img1 = 'images/' + $(btn).attr('id');
		$(imgEle1).attr('src', img1 + '_active.png');
	});

}


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

function isIconDone(icon_sec){
	secNum = icon_sec.split('_')[1]
	var hotspotDone = 0;
	var clicked = 0;
	$(icon_sec).find('.icon_btn').each(function(index, element) {
				
		var data = Number($(this).attr('data-icon'));
		if(data === Number(1)){
			hotspotDone++;
			clicked = Number($('#sec_'+secNum).attr('data-clicked'));
			clicked +=1;
			$('#sec_'+secNum).attr('data-clicked',clicked);
			$(this).attr('data-icon','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 = icon_sec
				secNum = icon_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;
	}
	
}
/* hotspot banner fix */
function hotSpotAdjustBanner(){
		
	if(iOSApp){
		$('.bar_robot').removeClass('displayNone').addClass('displayBlock');
		var pageTop = $(parent.parent.document).scrollTop();
		var bannerTop = parseInt($('.bar_robot').css('top'));
		var posDiff = bannerTop - pageTop;
		var newBanPos = bannerTop - posDiff;
		if(posDiff > 0){
			$('.bar_robot').css('top',(newBanPos)+'px');
			$('.bar_robot').removeClass('displayNone').addClass('displayBlock');
		}
	}
}

$('.icon_btn').attr('data-icon',0);