const zoom = 0;
var tourtype = "matterport";
var labelshowing = 0;
var IntersectCount = 0;
var zoomCache = 1;
var sharevideo = 2;
window.signalling = 0;
window.moving = 0;
var clickedlabel = "";
var haveControl = 0;
var widthcheck = 0;
var oldtag = 0;
window.el = 0;
var panorama;
var activeFrame = 2;
var pointing = 0;
var orientationCount = 0;
const tagcallback = (tag) => {
    if (haveControl == 1) {
        messagedata = {
            tag: tag
        };
        sendMessage(messagedata);
    }
}
   let events = [
        "ready",
        "startmove",
        "moving",
        "endmove",
        "look",
        "roomviewpointchanged",
        "labelclicked",
        "modelviewdoubleclick",
        "modelviewclick",
        "modelviewcamerachange",
        "switchview",
        "floorplanpanoclick",
        "floorplanroomclick",
        "floorplanchangefloorclick",
        "floorplanzoom",
        "floorplandrag"
    ];

// room2 name needs to be prefixed with 'observable-'

function onSuccess() {}

function onError(error) {
    console.error(error);
}
window.addEventListener("DOMContentLoaded", function() {
function initComparisons() {
  var x, i;
  /* Find all elements with an "overlay" class: */
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /* Once for each "overlay" element:
    pass the "overlay" element as a parameter when executing the compareImages function: */
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /* Get the width and height of the img element */
    w = img.offsetWidth;
    h = img.offsetHeight;
    /* Set the width of the img element to 50%: */
    img.style.width = (w / 2) + "px";
    /* Create slider: */
    slider = document.createElement("DIV");
    slider.setAttribute("id", "myslider");
    slider.setAttribute("class", "img-comp-slider");
	slider.innerHTML = "<i class='far fa-arrows-h'></i>";
    /* Insert slider */
    img.parentElement.insertBefore(slider, img);
    /* Position the slider in the middle: */
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /* Execute a function when the mouse button is pressed: */
    slider.addEventListener("mousedown", slideReady);
    /* And another function when the mouse button is released: */
    window.addEventListener("mouseup", slideFinish);
    /* Or touched (for touch screens: */
    slider.addEventListener("touchstart", slideReady);
     /* And released (for touch screens: */
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      /* Prevent any other actions that may occur when moving over the image: */
      e.preventDefault();
      /* The slider is now clicked and ready to move: */
      clicked = 1;
      /* Execute a function when the slider is moved: */
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /* The slider is no longer clicked: */
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /* If the slider is no longer clicked, exit this function: */
      if (clicked == 0) return false;
      /* Get the cursor's x position: */
      pos = getCursorPos(e)
	
      /* Prevent the slider from being positioned outside the image: */
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /* Execute a function that will resize the overlay image according to the cursor: */
      slide(pos);
    }
    function getCursorPos(e) {
	console.log(e);
      var a, x = 0;
      e = e || window.event;
	    if (e.touches) {
		e = e.touches[0]
		}
      /* Get the x positions of the image: */
      a = img.getBoundingClientRect();
	  
      /* Calculate the cursor's x coordinate, relative to the image: */
      x = e.pageX - a.left;
      /* Consider any page scrolling: */
      x = x - window.pageXOffset;
	  
      return x;
    }
    function slide(x) {
      /* Resize the image: */
      img.style.width = x + "px";
      /* Position the slider: */
      slider.style.left = img.offsetWidth - (slider.offsetWidth/2) + "px";
    }
  }
}
initComparisons();
var iframe = document.getElementById("showcase_iframe11");
var iframe2 = document.getElementById("showcase_iframe22");
//var clickIframe = window.setInterval(checkFocus, 200);
var i = 0;
//function checkFocus() {
 // if(document.activeElement == iframe) { 
  //	activeFrame = 1;
//	console.log("1");
  	//window.focus();
//   }
//  if(document.activeElement == iframe2) {
  //	activeFrame = 2;
//	console.log("2");
  	//window.focus();
//   }
//}
$(".changeStagev3").on('click', function() {
	if ($('#showcase_iframe22').hasClass("showing")) {
    $('#showcase_iframe11').addClass('showing').removeClass('collapsed');
    $('#showcase_iframe22').addClass('collapsed').removeClass('showing');
	$(".changeStagev3").html("SHOW UNSTAGED");
	  	activeFrame = 1;
	} else {
    $('#showcase_iframe22').addClass('showing').removeClass('collapsed');
    $('#showcase_iframe11').addClass('collapsed').removeClass('showing');
	$(".changeStagev3").html("SHOW STAGED");
	  	activeFrame = 2;
	}
});
showcaseLoader();
var load2 = setTimeout(function () {
showcaseLoader2();
}, 3000);
function showcaseLoader() {
    try {
        var showcase = MP_SDK.connect(
                iframe, // Obtained earlier
                'bc2c9f62713a42acba1d0a00d5b8c81c', // Your API key
                '3.5' // SDK version you are using
                // Use the latest version you can for your app
            )
            .then(function(mpSdk) {
                window.SDK = mpSdk;
                // Model.Event.MODEL_LOADED
                console.log("MATTERPORT SDK CONNECTED, YIPEEKAIEY");
                //loadedShowcaseHandler(mpSdk);
            })
            .catch(function(error) {});
    } catch (e) {
        console.error(e);
    }
}
function showcaseLoader2() {
    try {
		console.log(iframe2);
        var showcase = MP_SDK.connect(
                iframe2, // Obtained earlier
                'bc2c9f62713a42acba1d0a00d5b8c81c', // Your API key
                '3.5' // SDK version you are using
                // Use the latest version you can for your app
            )
            .then(function(mpSdk2) {
                window.SDK2 = mpSdk2;
                // Model.Event.MODEL_LOADED
                console.log("2ND MATTERPORT SDK CONNECTED, YIPEEKAIEY");				
                //loadedShowcaseHandler(mpSdk);
            })
            .catch(function(error) {});
    } catch (e) {
        console.error(e);
    }
}
						var poll = setInterval(function () {
							if ((typeof window.SDK != "undefined" && typeof window.SDK2 == "undefined")||(typeof window.SDK == "undefined" && typeof window.SDK2 != "undefined") ){
								$(".loadingMsg").html("SYNCHRONISING");
							}
							if (typeof window.SDK != "undefined" && typeof window.SDK2 != "undefined") {
								$(".loading ").css("display", "none");
								console.log("POLL COMPLETED");
								clearInterval(poll);
								loadedShowcaseHandler();
							} else {
							}
						}, 100);

        function countWindowMoving() {
            window.n = n + 1;
        }

        function resetWindowMoving() {
            window.n = 0;
            window.moving = 0;
        }
		function isElementInViewport (el) {
		 var el = document.getElementsByClassName("img-comp-overlay");
		 var width = el[0].offsetWidth;
    // Special bonus for those using jQuery
    if (width > 0) {
    return true;
	} else {
		return false;
	}
}		
        function loadedShowcaseHandler() {
			window.focus();
			mpSdk = window.SDK;
			mpSdk2 = window.SDK2;
			window.onkeydown =function(e) {
				//activeFrame = 2;
				e = e || window.event;
				var getKey = e.keyCode ? e.keyCode:e.charCode;
				switch (getKey) {
					case  37: if ($("#showcase_iframe22").hasClass("showing")){mpSdk2.Camera.rotate( -45, 0); console.log("F1");break;} else {mpSdk.Camera.rotate( -45, 0); console.log("F2");break; };
					case  38: if ($("#showcase_iframe22").hasClass("showing")){mpSdk2.Camera.moveInDirection("FORWARD"); break;} else {mpSdk.Camera.moveInDirection("FORWARD"); break;};
					case  39: if ($("#showcase_iframe22").hasClass("showing")){mpSdk2.Camera.rotate( 45, 0); break; } else {mpSdk.Camera.rotate( 45, 0); break; };
					case  40: if ($("#showcase_iframe22").hasClass("showing")){mpSdk2.Camera.moveInDirection("BACK"); break; } else {mpSdk2.Camera.moveInDirection("BACK"); break;};
				}
			};
            if (tourtype == "matterport") {
                var poseCache;
				var intersectionCache;
                mpSdk.Camera.zoom.subscribe(function(zoom) {
                    zoomCache = zoom.level;
                });
                mpSdk.on(mpSdk.Camera.Event.MOVE, function(pose) {
				if (activeFrame == 1) {
					console.log("1MOVED");
                    poseCache = pose;
                    const modetransition = mpSdk.Mode.TransitionType.FLY;
                    var mode = pose.mode;
                    var sweep = pose.sweep;
					console.log("SW1" + sweep);
                    var rotation = pose.rotation;
                    var position = pose.position;
                    var zoomLevel = zoomCache;
                    if (mode != "mode.transitioning" && mode != "mode.inside" && mode != "mode.outside") {
                        if (window.moving == 1) {
                            return;
                        } else {
                            	//window.moving = 1;		   
                            mpSdk2.Mode.moveTo(mode, {
                                    position: position,
                                    rotation: rotation,
                                    transition: modetransition,
                                    zoom
                                }).then(function(mode, moving) {console.log("moving")})
                                .catch(function(error) {
                                    console.log(error);
                            	//window.moving = 0;
                                }).finally(function() {
                               //window.moving = 0;
                                });
                        }
                    }
                    if (mode == "mode.inside" || mode == "mode.outside") {
                        if (window.moving == 1) {
                            countWindowMoving();
                            if (window.n > 6) {
                                resetWindowMoving();
                            }
                            return;
                        } else {
                            resetWindowMoving();
                            if (zoomLevel > 0.91 && zoomLevel < 1.09) {
                                window.moving = 1;
                                mpSdk2.Sweep.moveTo(sweep, {
                                    rotation: rotation,
                                   transition: mpSdk.Sweep.Transition.FLY
                               }).then(function(sweepId, moving) {}).catch(function(error) {
                                   window.moving = 0;
                                   console.log(error);
                               }).finally(function() {
                                   window.moving = 0;
                               });
                            } else {
                              mpSdk2.Camera.setRotation(rotation, {
                                    speed: 200
                                });
                               mpSdk2.Camera.zoomTo(zoomLevel)
                            }
                            window.moving = 0;

                        }
                    }	
				}
                });

                mpSdk2.Camera.zoom.subscribe(function(zoom) {
                    zoomCache = zoom.level;
                });
                mpSdk2.on(mpSdk2.Camera.Event.MOVE, function(pose) {
					if (activeFrame == 2) {					
                    poseCache = pose;
                    const modetransition = mpSdk.Mode.TransitionType.FLY;
                    var mode = pose.mode;
                    var sweep = pose.sweep;
					console.log("SW2" + sweep)
                    var rotation = pose.rotation;
                    var position = pose.position;
                    var zoomLevel = zoomCache;
                    if (mode != "mode.transitioning" && mode != "mode.inside" && mode != "mode.outside") {
                        if (window.moving == 1) {
                            return;
                        } else {
                            //	window.moving = 1;		   
                            mpSdk.Mode.moveTo(mode, {
                                    position: position,
                                    rotation: rotation,
                                    transition: modetransition,
                                    zoom
                                }).then(function(mode, moving) {console.log("moving")})
                                .catch(function(error) {
                                    console.log(error);
                           	// window.moving = 0;
                                }).finally(function() {
                            //   window.moving = 0;
                                });
                        }
                    }
                    if (mode == "mode.inside" || mode == "mode.outside") {
                        if (window.moving == 1) {
                            countWindowMoving();
                            if (window.n > 6) {
                                resetWindowMoving();
                            }
                            return;
                        } else {
                            resetWindowMoving();
                            if (zoomLevel > 0.91 && zoomLevel < 1.09) {
                                window.moving = 1;
                                mpSdk.Sweep.moveTo(sweep, {
                                    rotation: rotation,
                                   transition: mpSdk.Sweep.Transition.FLY
                               }).then(function(sweepId, moving) {}).catch(function(error) {
                                   window.moving = 0;
                                   console.log(error);
                               }).finally(function() {
                                   window.moving = 0;
                               });
                            } else {
                              mpSdk.Camera.setRotation(rotation, {
                                    speed: 200
                                });
                               mpSdk.Camera.zoomTo(zoomLevel)
                            }
                           // window.moving = 0;

                        }
                    }
					}					
                });							
            }
        }
})