$(document).ready(function(){
	fDrawBoxes();
});

$(window).resize(function(){
	fCalculateBoxes();
});

var nCurrentlyIn=0;

function fDrawBoxes()
{
	$(".slide-container").each(function($oContainer){
		$nRoom_ID = $(this).data("id");
		if(typeof aBoxes[$nRoom_ID] !== 'undefined')
		{
			var aRoomBoxes = aBoxes[$nRoom_ID];
			aRoomBoxes.forEach(function(oBox){
				$(".slide-container[data-id='"+$nRoom_ID+"']").append('<div id="canvasBox'+oBox.nRoomHotspot_ID+'" data-nid="'+oBox.nRoomHotspot_ID+'" class="canvasBox">');
			});
		}
	});

	$(".canvasBox").on("click",function(){
		var nID = $(this).data("nid");
		var $nRoom_ID = $(this).parent().data("id");
		if(typeof aBoxes[$nRoom_ID] !== 'undefined')
		{
			var aRoomBoxes = aBoxes[$nRoom_ID];
			aRoomBoxes.forEach(function(oBox){
				if(oBox.nRoomHotspot_ID == nID)
				{
					window.location = oBox.sURL;
				}
			});
		}
	});

	$(".canvasBox").on("mouseover",function(oMouseEvent){
		var posX = oMouseEvent.clientX;
		var posY = oMouseEvent.clientY;
		var oBoxTooltip = $("#boxTooltip");
		var nTooltipWidth = oBoxTooltip.outerWidth();
		var nTooltipHeight = oBoxTooltip.outerHeight();
		if(posX+nTooltipWidth+50<=window.innerWidth)
		{
			// Right
				oBoxTooltip.css("left",posX+20);
		}
		else
		{
			// Left
				oBoxTooltip.css("left",posX-nTooltipWidth-20);
		}

		if(posY+nTooltipHeight+50<=window.innerHeight)
		{
			// Bottom
				oBoxTooltip.css("top",posY+20);
		}
		else
		{
			// Top
				oBoxTooltip.css("top",posY-nTooltipHeight-20);
		}
		nCurrentlyIn++;

		var nID = $(this).data("nid");
		var $nRoom_ID = $(this).parent().data("id");
		if(typeof aBoxes[$nRoom_ID] !== 'undefined')
		{
			var aRoomBoxes = aBoxes[$nRoom_ID];
			aRoomBoxes.forEach(function(oBox){
				if(oBox.nRoomHotspot_ID == nID)
				{
					$("#boxShopProdName").html(oBox.sShopProdName);
					$("#boxShopProdPrice").html(oBox.nPrice);
					$("#boxShopProdImage").attr("src",oBox.sPictureURL);
				}
			});
		}

		$("#boxTooltip").css("opacity","1");
	});

	$(".canvasBox").on("mouseout",function(){
		nCurrentlyIn--;
		if(nCurrentlyIn<=0)
		{
			nCurrentlyIn=0;
			$("#boxTooltip").css("opacity","0");
		}
	});

	fCalculateBoxes();
}

function fCalculateBoxes()
{
	$(".slide-container").each(function($oContainer){
		$nRoom_ID = $(this).data("id");
		if($(this).width()/$(this).height()>1.6)
		{
			var heightShouldBe = $(this).width()/1.6;
			var amountMissing = heightShouldBe - $(this).height();
			var aRoomBoxes = aBoxes[$nRoom_ID];
			aRoomBoxes.forEach(function(oBox){
				var nPercentX = oBox.nX/6;
				var nPercentY = oBox.nY/3.75;

				var newTop = (heightShouldBe/100*nPercentY)-(amountMissing/2);
				var newLeft = ($(".slide-container").width()/100*nPercentX);

				var nWidth = ($(".slide-container").width()/100)*(oBox.nWidth/6);

				var nHeight = (heightShouldBe/100)*(oBox.nHeight/3.75);

				$("#canvasBox"+oBox.nRoomHotspot_ID).css("top",newTop+"px");
				$("#canvasBox"+oBox.nRoomHotspot_ID).css("left",newLeft+"px");

				$("#canvasBox"+oBox.nRoomHotspot_ID).css("width",nWidth+"px");
				$("#canvasBox"+oBox.nRoomHotspot_ID).css("height",nHeight+"px");
			});
		}
		else if($(this).width()/$(this).height()<1.6)
		{
			var widthShouldBe = $(this).height()*1.6;
			var amountMissing = widthShouldBe - $(this).width();
			var aRoomBoxes = aBoxes[$nRoom_ID];
			aRoomBoxes.forEach(function(oBox){
				var nPercentX = oBox.nX/6;
				var nPercentY = oBox.nY/3.75;

				var newTop = ($(".slide-container").height()/100*nPercentY);
				var newLeft = ((widthShouldBe/100)*nPercentX)-(amountMissing/2);

				var nWidth = (widthShouldBe/100)*(oBox.nWidth/6);

				var nHeight = ($(".slide-container").height()/100)*(oBox.nHeight/3.75);

				$("#canvasBox"+oBox.nRoomHotspot_ID).css("top",newTop+"px");
				$("#canvasBox"+oBox.nRoomHotspot_ID).css("left",newLeft+"px");

				$("#canvasBox"+oBox.nRoomHotspot_ID).css("width",nWidth+"px");
				$("#canvasBox"+oBox.nRoomHotspot_ID).css("height",nHeight+"px");
			});
		}
	});
}