https://luneville.fr/wp-content/plugins/wpvr/public/lib/pannellum/src/js/pannellum.js?ver=8.5.76

263controls.orientation.addEventListener('click', function(e) {
264    if (orientation)
265        stopOrientation();
266    else
267        startOrientation();
268});
269controls.orientation.addEventListener('mousedown', function(e) {e.stopPropagation();});
270controls.orientation.addEventListener('touchstart', function(e) {e.stopPropagation();});
271controls.orientation.addEventListener('pointerdown', function(e) {e.stopPropagation();});
272controls.orientation.className = 'pnlm-orientation-button pnlm-orientation-button-inactive pnlm-sprite pnlm-controls pnlm-control';
273var orientationSupport = false;
274if (window.DeviceOrientationEvent && location.protocol == 'https:' &&
275    navigator.userAgent.toLowerCase().indexOf('mobi') >= 0) {
276    // This user agent check is here because there's no way to check if a
277    // device has an inertia measurement unit. We used to be able to check if a
278    // DeviceOrientationEvent had non-null values, but with iOS 13 requiring a
279    // permission prompt to access such events, this is no longer possible.
280    controls.container.appendChild(controls.orientation);
281    orientationSupport = true;
282}
283
284// Compass
285var compass = document.createElement('div');
286compass.className = 'pnlm-compass pnlm-controls pnlm-control';
287uiContainer.appendChild(compass);
288
289// Load and process configuration
290if (initialConfig.firstScene) {
291    // Activate first scene if specified in URL
292    mergeConfig(initialConfig.firstScene);
293} else if (initialConfig.default && initialConfig.default.firstScene) {
294    // Activate first scene if specified in file
295    mergeConfig(initialConfig.default.firstScene);
296} else {
297    mergeConfig(null);
298}
299processOptions(true);
300
301/**
302 * Initializes viewer.
303 * @private
304 */
305function init() {
306    // Display an error for IE 9 as it doesn't work but also doesn't otherwise
307    // show an error (older versions don't work at all)
308    // Based on: http://stackoverflow.com/a/10965203
309    var div = document.createElement("div");
310    div.innerHTML = "<!--[if lte IE 9]><i></i><![endif]-->";
311    if (div.getElementsByTagName("i").length == 1) {
312        anError();
313        return;
314    }
315
316    origHfov = config.hfov;
317    origPitch = config.pitch;
318
319    var i, p;
320
321    if (config.type == 'cubemap') {
322        panoImage = [];
323        for (i = 0; i < 6; i++) {
324            panoImage.push(new Image());
325            panoImage[i].crossOrigin = config.crossOrigin;
326        }
327        infoDisplay.load.lbox.style.display = 'block';
328        infoDisplay.load.lbar.style.display = 'none';
329    } else if (config.type == 'multires') {
330        var c = JSON.parse(JSON.stringify(config.multiRes));    // Deep copy
331        // Avoid "undefined" in path, check (optional) multiRes.basePath, too
332        // Use only multiRes.basePath if it's an absolute URL
333        if (config.basePath && config.multiRes.basePath &&
334            !(/^(?:[a-z]+:)?\/\//i.test(config.multiRes.basePath))) {
335            c.basePath = config.basePath + config.multiRes.basePath;
336        } else if (config.multiRes.basePath) {
337            c.basePath = config.multiRes.basePath;
338        } else if(config.basePath) {
339            c.basePath = config.basePath;
340        }
341        panoImage = c;
342    } else {
343        if (config.dynamic === true) {
344            panoImage = config.panorama;
345        } else {
346            if (config.panorama === undefined) {
347                anError(config.strings.noPanoramaError);
348                return;
349            }
350            panoImage = new Image();
351        }
352    }
353
354    // Configure image loading
355    if (config.type == 'cubemap') {
356        // Quick loading counter for synchronous loading
357        var itemsToLoad = 6;
358
359        var onLoad = function() {
360            itemsToLoad--;
361            if (itemsToLoad === 0) {
362                onImageLoad();
363            }
364        };
365
366        var onError = function(e) {
367            var a = document.createElement('a');
368            a.href = e.target.src;
369            a.textContent = a.href;
370            anError(config.strings.fileAccessError.replace('%s', a.outerHTML));
371        };
372
373        for (i = 0; i < panoImage.length; i++) {
374            p = config.cubeMap[i];
375            if (p == "null") { // support partial cubemap image with explicitly empty faces
376                console.log('Will use background instead of missing cubemap face ' + i);
377                onLoad();
378            } else {
379                if (config.basePath && !absoluteURL(p)) {
380                    p = config.basePath + p;
381                }
382                panoImage[i].onload = onLoad;
383                panoImage[i].onerror = onError;
384                panoImage[i].src = sanitizeURL(p);
385            }
386        }
387    } else if (config.type == 'multires') {
388        onImageLoad();
389    } else {
390        p = '';
391        if (config.basePath) {
392            p = config.basePath;
393        }
394
395        if (config.dynamic !== true) {
396            // Still image
397            p = absoluteURL(config.panorama) ? config.panorama : p + config.panorama;
398
399            panoImage.onload = function() {
400                window.URL.revokeObjectURL(this.src);  // Clean up
401                onImageLoad();
402            };
403
404            var xhr = new XMLHttpRequest();
405            xhr.onloadend = function() {
406                if (xhr.status != 200) {
407                    // Display error if image can't be loaded
408                    var a = document.createElement('a');
409                    a.href = p;
410                    a.textContent = a.href;
411                    anError(config.strings.fileAccessError.replace('%s', a.outerHTML));
412                }
413                var img = this.response;
414                parseGPanoXMP(img, p);
415                infoDisplay.load.msg.innerHTML = '';
416            };
417            xhr.onprogress = function(e) {
418                if (e.lengthComputable) {
419                    // Display progress
420                    var percent = e.loaded / e.total * 100;
421                    infoDisplay.load.lbarFill.style.width = percent + '%';
422                    var unit, numerator, denominator;
423                    if (e.total > 1e6) {
424                        unit = 'MB';
425                        numerator = (e.loaded / 1e6).toFixed(2);
426                        denominator = (e.total / 1e6).toFixed(2);
427                    } else if (e.total > 1e3) {
428                        unit = 'kB';
429                        numerator = (e.loaded / 1e3).toFixed(1);
430                        denominator = (e.total / 1e3).toFixed(1);
431                    } else {
432                        unit = 'B';
433                        numerator = e.loaded;
434                        denominator = e.total;
435                    }
436                    infoDisplay.load.msg.innerHTML = numerator + ' / ' + denominator + ' ' + unit;
437                } else {
438                    // Display loading spinner
439                    infoDisplay.load.lbox.style.display = 'block';
440                    infoDisplay.load.lbar.style.display = 'none';
441                }
442            };
443            try {
444                xhr.open('GET', p, true);
445            } catch (e) {
446                // Malformed URL
447                anError(config.strings.malformedURLError);
448            }
449            xhr.responseType = 'blob';
450            xhr.setRequestHeader('Accept', 'image/*,*/*;q=0.9');
451            xhr.withCredentials = config.crossOrigin === 'use-credentials';
452            xhr.send();
453        }
454    }
455
456    if (config.draggable)
457        uiContainer.classList.add('pnlm-grab');
458    uiContainer.classList.remove('pnlm-grabbing');
459
460    // Properly handle switching to dynamic scenes
461    update = config.dynamicUpdate === true;
462    if (config.dynamic && update) {
463        panoImage = config.panorama;
464        onImageLoad();
465    }
466}
467
468/**
469 * Test if URL is absolute or relative.
470 * @private
471 * @param {string} url - URL to test
472 * @returns {boolean} True if absolute, else false
473 */
474function absoluteURL(url) {
475    // From http://stackoverflow.com/a/19709846
476    return new RegExp('^(?:[a-z]+:)?//', 'i').test(url) || url[0] == '/' || url.slice(0, 5) == 'blob:';
477}
478
479/**
480 * Create renderer and initialize event listeners once image is loaded.
481 * @private
482 */
483function onImageLoad() {
484    if (!renderer)
485        renderer = new libpannellum.renderer(renderContainer);
486
487    // Only add event listeners once
488    if (!listenersAdded) {
489        listenersAdded = true;
490        dragFix.addEventListener('mousedown', onDocumentMouseDown, false);
491        document.addEventListener('mousemove', onDocumentMouseMove, false);
492        document.addEventListener('mouseup', onDocumentMouseUp, false);
493        if (config.mouseZoom) {
494            uiContainer.addEventListener('mousewheel', onDocumentMouseWheel, false);
495            uiContainer.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
496        }
497        if (config.doubleClickZoom) {
498            dragFix.addEventListener('dblclick', onDocumentDoubleClick, false);
499        }
500        container.addEventListener('mozfullscreenchange', onFullScreenChange, false);
501        container.addEventListener('webkitfullscreenchange', onFullScreenChange, false);
502        container.addEventListener('msfullscreenchange', onFullScreenChange, false);
503        container.addEventListener('fullscreenchange', onFullScreenChange, false);
504        window.addEventListener('resize', onDocumentResize, false);
505        window.addEventListener('orientationchange', onDocumentResize, false);
506        if (!config.disableKeyboardCtrl) {
507            container.addEventListener('keydown', onDocumentKeyPress, false);
508            container.addEventListener('keyup', onDocumentKeyUp, false);
509            container.addEventListener('blur', clearKeys, false);
510        }
511        document.addEventListener('mouseleave', onDocumentMouseUp, false);
512        if (window.PointerEvent) {
513            dragFix.addEventListener('pointerdown', onDocumentPointerDown, false);
514            dragFix.addEventListener('pointermove', onDocumentPointerMove, false);
515            dragFix.addEventListener('pointerup', onDocumentPointerUp, false);
516            dragFix.addEventListener('pointerleave', onDocumentPointerUp, false);
517        } else {
518            dragFix.addEventListener('touchstart', onDocumentTouchStart, { passive: false });
519            dragFix.addEventListener('touchmove', onDocumentTouchMove, { passive: false });
520            dragFix.addEventListener('touchend', onDocumentTouchEnd, false);
521        }
522
523        // Deal with MS pointer events
524        if (window.navigator.pointerEnabled)

679        renderContainer.style.display = 'block';
680        fireEvent('errorcleared');
681    }
682}
683
684/**
685 * Displays about message.
686 * @private
687 * @param {MouseEvent} event - Right click location
688 */
689function aboutMessage(event) {
690    var pos = mousePosition(event);
691    aboutMsg.style.left = pos.x + 'px';
692    aboutMsg.style.top = pos.y + 'px';
693    clearTimeout(aboutMessage.t1);
694    clearTimeout(aboutMessage.t2);
695    aboutMsg.style.display = 'block';
696    aboutMsg.style.opacity = 1;
697    aboutMessage.t1 = setTimeout(function() {aboutMsg.style.opacity = 0;}, 2000);
698    aboutMessage.t2 = setTimeout(function() {aboutMsg.style.display = 'none';}, 2500);
699    event.preventDefault();
700}
701
702/**
703 * Calculate mouse position relative to top left of viewer container.
704 * @private
705 * @param {MouseEvent} event - Mouse event to use in calculation
706 * @returns {Object} Calculated X and Y coordinates
707 */
708function mousePosition(event) {
709    var bounds = container.getBoundingClientRect();
710    var pos = {};
711    // pageX / pageY needed for iOS
712    pos.x = (event.clientX || event.pageX) - bounds.left;
713    pos.y = (event.clientY || event.pageY) - bounds.top;
714    return pos;
715}
716
717/**
718 * Event handler for mouse clicks. Initializes panning. Prints center and click
719 * location coordinates when hot spot debugging is enabled.
720 * @private
721 * @param {MouseEvent} event - Document mouse down event.
722 */
723function onDocumentMouseDown(event) {
724    // Override default action
725    event.preventDefault();
726    // But not all of it
727    container.focus();
728
729    // Only do something if the panorama is loaded
730    if (!loaded || !config.draggable) {
731        return;
732    }
733
734    // Calculate mouse position relative to top left of viewer container
735    var pos = mousePosition(event);
736
737    // Log pitch / yaw of mouse click when debugging / placing hot spots
738    if (config.hotSpotDebug) {
739        var coords = mouseEventToCoords(event);
740        console.log('Pitch: ' + coords[0] + ', Yaw: ' + coords[1] + ', Center Pitch: ' +
741            config.pitch + ', Center Yaw: ' + config.yaw + ', HFOV: ' + config.hfov);
742    }
743
744    // Turn off auto-rotation if enabled
745    stopAnimation();
746
747    stopOrientation();
748    config.roll = 0;
749
750    speed.hfov = 0;
751
752    isUserInteracting = true;
753    latestInteraction = Date.now();
754
755    onPointerDownPointerX = pos.x;
756    onPointerDownPointerY = pos.y;
757
758    onPointerDownYaw = config.yaw;
759    onPointerDownPitch = config.pitch;
760
761    uiContainer.classList.add('pnlm-grabbing');
762    uiContainer.classList.remove('pnlm-grab');
763
764    fireEvent('mousedown', event);
765    animateInit();
766}
767
768/**
769 * Event handler for double clicks. Zooms in at clicked location
770 * @private
771 * @param {MouseEvent} event - Document mouse down event.
772 */
773function onDocumentDoubleClick(event) {
774    if (config.minHfov === config.hfov) {
775        _this.setHfov(origHfov, 1000);
776    } else {
777        var coords = mouseEventToCoords(event);
778        _this.lookAt(coords[0], coords[1], config.minHfov, 1000);
779    }
780}
781
782/**
783 * Calculate panorama pitch and yaw from location of mouse event.
784 * @private
785 * @param {MouseEvent} event - Document mouse down event.
786 * @returns {number[]} [pitch, yaw]
787 */
788function mouseEventToCoords(event) {
789    var pos = mousePosition(event);
790    var canvas = renderer.getCanvas();
791    var canvasWidth = canvas.clientWidth,
792        canvasHeight = canvas.clientHeight;
793    var x = pos.x / canvasWidth * 2 - 1;
794    var y = (1 - pos.y / canvasHeight * 2) * canvasHeight / canvasWidth;
795    var focal = 1 / Math.tan(config.hfov * Math.PI / 360);
796    var s = Math.sin(config.pitch * Math.PI / 180);
797    var c = Math.cos(config.pitch * Math.PI / 180);
798    var a = focal * c - y * s;
799    var root = Math.sqrt(x*x + a*a);
800    var pitch = Math.atan((y * c + focal * s) / root) * 180 / Math.PI;
801    var yaw = Math.atan2(x / root, a / root) * 180 / Math.PI + config.yaw;
802    if (yaw < -180)
803        yaw += 360;
804    if (yaw > 180)
805        yaw -= 360;
806    return [pitch, yaw];
807}
808
809/**
810 * Event handler for mouse moves. Pans center of view.
811 * @private
812 * @param {MouseEvent} event - Document mouse move event.
813 */
814function onDocumentMouseMove(event) {
815    if (isUserInteracting && loaded) {
816        latestInteraction = Date.now();
817        var canvas = renderer.getCanvas();
818        var canvasWidth = canvas.clientWidth,
819            canvasHeight = canvas.clientHeight;
820        var pos = mousePosition(event);
821        //TODO: This still isn't quite right
822        var yaw = ((Math.atan(onPointerDownPointerX / canvasWidth * 2 - 1) - Math.atan(pos.x / canvasWidth * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
823        speed.yaw = (yaw - config.yaw) % 360 * 0.2;
824        config.yaw = yaw;
825        
826        var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvasHeight / canvasWidth) * 180 / Math.PI;
827
828        var pitch = ((Math.atan(pos.y / canvasHeight * 2 - 1) - Math.atan(onPointerDownPointerY / canvasHeight * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch;
829        speed.pitch = (pitch - config.pitch) * 0.2;
830        config.pitch = pitch;
831
832        var mirrorData = {
833            pitch: pitch,
834            yaw: yaw
835        }
836        fireEvent('mousemove', mirrorData);
837
838    }
839}
840
841/**
842 * Event handler for mouse up events. Stops panning.
843 * @private
844 */
845function onDocumentMouseUp(event) {
846    if (!isUserInteracting) {
847        return;
848    }
849    isUserInteracting = false;
850    if (Date.now() - latestInteraction > 15) {
851        // Prevents jump when user rapidly moves mouse, stops, and then
852        // releases the mouse button
853        speed.pitch = speed.yaw = 0;
854    }
855    uiContainer.classList.add('pnlm-grab');
856    uiContainer.classList.remove('pnlm-grabbing');
857    latestInteraction = Date.now();
858
859    fireEvent('mouseup', event);
860}
861
862/**
863 * Event handler for touches. Initializes panning if one touch or zooming if
864 * two touches.
865 * @private
866 * @param {TouchEvent} event - Document touch start event.
867 */
868function onDocumentTouchStart(event) {
869    // Only do something if the panorama is loaded
870    if (!loaded || !config.draggable) {
871        return;
872    }
873
874    // Turn off auto-rotation if enabled
875    stopAnimation();
876
877    stopOrientation();
878    config.roll = 0;
879
880    speed.hfov = 0;
881
882    // Calculate touch position relative to top left of viewer container
883    var pos0 = mousePosition(event.targetTouches[0]);
884
885    onPointerDownPointerX = pos0.x;
886    onPointerDownPointerY = pos0.y;
887
888    if (event.targetTouches.length == 2) {
889        // Down pointer is the center of the two fingers
890        var pos1 = mousePosition(event.targetTouches[1]);
891        onPointerDownPointerX += (pos1.x - pos0.x) * 0.5;
892        onPointerDownPointerY += (pos1.y - pos0.y) * 0.5;
893        onPointerDownPointerDist = Math.sqrt((pos0.x - pos1.x) * (pos0.x - pos1.x) +
894                                             (pos0.y - pos1.y) * (pos0.y - pos1.y));
895    }
896    isUserInteracting = true;
897    latestInteraction = Date.now();
898
899    onPointerDownYaw = config.yaw;
900    onPointerDownPitch = config.pitch;
901
902    fireEvent('touchstart', event);
903    animateInit();
904}
905
906/**
907 * Event handler for touch movements. Pans center of view if one touch or
908 * adjusts zoom if two touches.
909 * @private
910 * @param {TouchEvent} event - Document touch move event.
911 */
912function onDocumentTouchMove(event) {
913    if (!config.draggable) {
914        return;
915    }
916
917    // Override default action
918    event.preventDefault();
919    if (loaded) {
920        latestInteraction = Date.now();
921    }
922    if (isUserInteracting && loaded) {
923        var pos0 = mousePosition(event.targetTouches[0]);
924        var clientX = pos0.x;
925        var clientY = pos0.y;
926
927        if (event.targetTouches.length == 2 && onPointerDownPointerDist != -1) {
928            var pos1 = mousePosition(event.targetTouches[1]);
929            clientX += (pos1.x - pos0.x) * 0.5;
930            clientY += (pos1.y - pos0.y) * 0.5;
931            var clientDist = Math.sqrt((pos0.x - pos1.x) * (pos0.x - pos1.x) +
932                                       (pos0.y - pos1.y) * (pos0.y - pos1.y));
933            setHfov(config.hfov + (onPointerDownPointerDist - clientDist) * 0.1);
934            onPointerDownPointerDist = clientDist;
935        }
936
937        // The smaller the config.hfov value (the more zoomed-in the user is), the faster
938        // yaw/pitch are perceived to change on one-finger touchmove (panning) events and vice versa.
939        // To improve usability at both small and large zoom levels (config.hfov values)
940        // we introduce a dynamic pan speed coefficient.
941        //
942        // Currently this seems to *roughly* keep initial drag/pan start position close to
943        // the user's finger while panning regardless of zoom level / config.hfov value.
944        var touchmovePanSpeedCoeff = (config.hfov / 360) * config.touchPanSpeedCoeffFactor;
945
946        var yaw = (clientX - onPointerDownPointerX) * touchmovePanSpeedCoeff + onPointerDownYaw;
947        speed.yaw = (yaw - config.yaw) % 360 * 0.2;
948        config.yaw = yaw;
949
950        var pitch = (onPointerDownPointerY - clientY) * touchmovePanSpeedCoeff + onPointerDownPitch;
951        speed.pitch = (pitch - config.pitch) * 0.2;
952        config.pitch = pitch;
953        var mirrorData = {
954            pitch: pitch,
955            yaw: yaw
956        }
957        fireEvent('touchmove', mirrorData);
958    }
959}
960
961/**
962 * Event handler for end of touches. Stops panning and/or zooming.
963 * @private
964 */
965function onDocumentTouchEnd() {
966    isUserInteracting = false;
967    if (Date.now() - latestInteraction > 150) {
968        speed.pitch = speed.yaw = 0;
969    }
970    onPointerDownPointerDist = -1;
971    latestInteraction = Date.now();
972
973    fireEvent('touchend', event);
974}
975
976var pointerIDs = [],
977    pointerCoordinates = [];
978/**
979 * Event handler for touch starts in IE / Edge.
980 * @private
981 * @param {PointerEvent} event - Document pointer down event.
982 */
983function onDocumentPointerDown(event) {
984    if (event.pointerType == 'touch') {
985        // Only do something if the panorama is loaded
986        if (!loaded || !config.draggable)
987            return;
988        pointerIDs.push(event.pointerId);
989        var pos = mousePosition(event);
990        pointerCoordinates.push({clientX: pos.x, clientY: pos.y});
991        event.targetTouches = pointerCoordinates;
992        onDocumentTouchStart(event);
993        event.preventDefault();
994    }
995}
996
997/**
998 * Event handler for touch moves in IE / Edge.
999 * @private
1000 * @param {PointerEvent} event - Document pointer move event.
1001 */
1002function onDocumentPointerMove(event) {
1003    if (event.pointerType == 'touch') {
1004        if (!config.draggable)
1005            return;
1006        for (var i = 0; i < pointerIDs.length; i++) {
1007            if (event.pointerId == pointerIDs[i]) {
1008                var pos = mousePosition(event);
1009                pointerCoordinates[i].clientX = pos.x;
1010                pointerCoordinates[i].clientY = pos.y;
1011                event.targetTouches = pointerCoordinates;
1012                onDocumentTouchMove(event);
1013                event.preventDefault();
1014                return;
1015            }
1016        }
1017    }
1018}
1019
1020/**
1021 * Event handler for touch ends in IE / Edge.
1022 * @private
1023 * @param {PointerEvent} event - Document pointer up event.
1024 */
1025function onDocumentPointerUp(event) {
1026    if (event.pointerType == 'touch') {
1027        var defined = false;
1028        for (var i = 0; i < pointerIDs.length; i++) {
1029            if (event.pointerId == pointerIDs[i])
1030                pointerIDs[i] = undefined;
1031            if (pointerIDs[i])
1032                defined = true;
1033        }
1034        if (!defined) {
1035            pointerIDs = [];
1036            pointerCoordinates = [];
1037            onDocumentTouchEnd();
1038        }
1039        event.preventDefault();
1040    }
1041}
1042
1043/**
1044 * Event handler for mouse wheel. Changes zoom.
1045 * @private
1046 * @param {WheelEvent} event - Document mouse wheel event.
1047 */
1048function onDocumentMouseWheel(event) {
1049    // Only do something if the panorama is loaded and mouse wheel zoom is enabled
1050    if (!loaded || (config.mouseZoom == 'fullscreenonly' && !fullscreenActive)) {
1051        return;
1052    }
1053
1054    event.preventDefault();
1055
1056    // Turn off auto-rotation if enabled
1057    stopAnimation();
1058    latestInteraction = Date.now();
1059
1060    if (event.wheelDeltaY) {
1061        // WebKit
1062        setHfov(config.hfov - event.wheelDeltaY * 0.05);
1063        speed.hfov = event.wheelDelta < 0 ? 1 : -1;
1064    } else if (event.wheelDelta) {
1065        // Opera / Explorer 9
1066        setHfov(config.hfov - event.wheelDelta * 0.05);
1067        speed.hfov = event.wheelDelta < 0 ? 1 : -1;
1068    } else if (event.detail) {
1069        // Firefox
1070        setHfov(config.hfov + event.detail * 1.5);
1071        speed.hfov = event.detail > 0 ? 1 : -1;
1072    }
1073    animateInit();
1074}
1075
1076/**
1077 * Event handler for key presses. Updates list of currently pressed keys.
1078 * @private
1079 * @param {KeyboardEvent} event - Document key press event.
1080 */
1081function onDocumentKeyPress(event) {
1082    // Turn off auto-rotation if enabled
1083    stopAnimation();
1084    latestInteraction = Date.now();
1085
1086    stopOrientation();
1087    config.roll = 0;
1088
1089    // Record key pressed
1090    var keynumber = event.which || event.keycode;
1091
1092    // Override default action for keys that are used
1093    if (config.capturedKeyNumbers.indexOf(keynumber) < 0)
1094        return;
1095    event.preventDefault();
1096
1097    // If escape key is pressed
1098    if (keynumber == 27) {
1099        // If in fullscreen mode
1100        if (fullscreenActive) {
1101            toggleFullscreen();
1102        }
1103    } else {
1104        // Change key
1105        changeKey(keynumber, true);
1106    }
1107}
1108
1109/**
1110 * Clears list of currently pressed keys.
1111 * @private
1112 */
1113function clearKeys() {
1114    for (var i = 0; i < 10; i++) {
1115        keysDown[i] = false;
1116    }
1117}
1118
1119/**
1120 * Event handler for key releases. Updates list of currently pressed keys.
1121 * @private
1122 * @param {KeyboardEvent} event - Document key up event.
1123 */
1124function onDocumentKeyUp(event) {
1125    // Record key pressed
1126    var keynumber = event.which || event.keycode;
1127
1128    // Override default action for keys that are used
1129    if (config.capturedKeyNumbers.indexOf(keynumber) < 0)
1130        return;
1131    event.preventDefault();
1132
1133    // Change key
1134    changeKey(keynumber, false);
1135}
1136
1137/**
1138 * Updates list of currently pressed keys.
1139 * @private
1140 * @param {number} keynumber - Key number.
1141 * @param {boolean} value - Whether or not key is pressed.
1142 */
1143function changeKey(keynumber, value) {
1144    var keyChanged = false;
1145    switch(keynumber) {
1146        // If minus key is released
1147        case 109: case 189: case 17: case 173:
1148            if (keysDown[0] != value) { keyChanged = true; }
1149            keysDown[0] = value; break;
1150
1151        // If plus key is released
1152        case 107: case 187: case 16: case 61:
1153            if (keysDown[1] != value) { keyChanged = true; }
1154            keysDown[1] = value; break;
1155
1156        // If up arrow is released
1157        case 38:
1158            if (keysDown[2] != value) { keyChanged = true; }
1159            keysDown[2] = value; break;
1160
1161        // If "w" is released
1162        case 87:
1163            if (keysDown[6] != value) { keyChanged = true; }
1164            keysDown[6] = value; break;
1165
1166        // If down arrow is released
1167        case 40:
1168            if (keysDown[3] != value) { keyChanged = true; }
1169            keysDown[3] = value; break;
1170
1171        // If "s" is released
1172        case 83:
1173            if (keysDown[7] != value) { keyChanged = true; }
1174            keysDown[7] = value; break;
1175
1176        // If left arrow is released
1177        case 37:
1178            if (keysDown[4] != value) { keyChanged = true; }
1179            keysDown[4] = value; break;
1180
1181        // If "a" is released
1182        case 65:
1183            if (keysDown[8] != value) { keyChanged = true; }
1184            keysDown[8] = value; break;
1185
1186        // If right arrow is released
1187        case 39:
1188            if (keysDown[5] != value) { keyChanged = true; }
1189            keysDown[5] = value; break;
1190
1191        // If "d" is released
1192        case 68:
1193            if (keysDown[9] != value) { keyChanged = true; }
1194            keysDown[9] = value;
1195    }
1196
1197    if (keyChanged && value) {
1198        if (typeof performance !== 'undefined' && performance.now()) {
1199            prevTime = performance.now();
1200        } else {
1201            prevTime = Date.now();
1202        }
1203        animateInit();
1204    }
1205}
1206
1207/**
1208 * Pans and/or zooms panorama based on currently pressed keys. Also handles
1209 * panorama "inertia" and auto rotation.
1210 * @private
1211 */
1212function keyRepeat() {
1213    // Only do something if the panorama is loaded
1214    if (!loaded) {
1215        return;
1216    }
1217
1218    var isKeyDown = false;
1219
1220    var prevPitch = config.pitch;
1221    var prevYaw = config.yaw;
1222    var prevZoom = config.hfov;
1223
1224    var newTime;
1225    if (typeof performance !== 'undefined' && performance.now()) {
1226        newTime = performance.now();
1227    } else {
1228        newTime = Date.now();
1229    }
1230    if (prevTime === undefined) {
1231        prevTime = newTime;
1232    }
1233    var diff = (newTime - prevTime) * config.hfov / 1700;
1234    diff = Math.min(diff, 1.0);
1235
1236    // If minus key is down
1237    if (keysDown[0] && config.keyboardZoom === true) {
1238        setHfov(config.hfov + (speed.hfov * 0.8 + 0.5) * diff);
1239        isKeyDown = true;
1240    }
1241
1242    // If plus key is down
1243    if (keysDown[1] && config.keyboardZoom === true) {
1244        setHfov(config.hfov + (speed.hfov * 0.8 - 0.2) * diff);
1245        isKeyDown = true;
1246    }
1247
1248    // If up arrow or "w" is down
1249    if (keysDown[2] || keysDown[6]) {
1250        // Pan up
1251        config.pitch += (speed.pitch * 0.8 + 0.2) * diff;
1252        isKeyDown = true;
1253    }
1254
1255    // If down arrow or "s" is down
1256    if (keysDown[3] || keysDown[7]) {
1257        // Pan down
1258        config.pitch += (speed.pitch * 0.8 - 0.2) * diff;
1259        isKeyDown = true;
1260    }
1261
1262    // If left arrow or "a" is down
1263    if (keysDown[4] || keysDown[8]) {
1264        // Pan left
1265        config.yaw += (speed.yaw * 0.8 - 0.2) * diff;
1266        isKeyDown = true;
1267    }
1268
1269    // If right arrow or "d" is down
1270    if (keysDown[5] || keysDown[9]) {
1271        // Pan right
1272        config.yaw += (speed.yaw * 0.8 + 0.2) * diff;
1273        isKeyDown = true;
1274    }
1275
1276    if (isKeyDown)
1277        latestInteraction = Date.now();
1278
1279    // If auto-rotate
1280    if (config.autoRotate) {
1281        // Pan
1282        if (newTime - prevTime > 0.001) {
1283            var timeDiff = (newTime - prevTime) / 1000;
1284            var yawDiff = (speed.yaw / timeDiff * diff - config.autoRotate * 0.2) * timeDiff;
1285            yawDiff = (-config.autoRotate > 0 ? 1 : -1) * Math.min(Math.abs(config.autoRotate * timeDiff), Math.abs(yawDiff));
1286            config.yaw += yawDiff;
1287        }
1288
1289        // Deal with stopping auto rotation after a set delay
1290        if (config.autoRotateStopDelay) {
1291            config.autoRotateStopDelay -= newTime - prevTime;
1292            if (config.autoRotateStopDelay <= 0) {
1293                config.autoRotateStopDelay = false;
1294                autoRotateSpeed = config.autoRotate;
1295                config.autoRotate = 0;
1296            }
1297        }
1298    }
1299
1300    // Animated moves
1301    if (animatedMove.pitch) {
1302        animateMove('pitch');
1303        prevPitch = config.pitch;
1304    }
1305    if (animatedMove.yaw) {
1306        animateMove('yaw');
1307        prevYaw = config.yaw;
1308    }
1309    if (animatedMove.hfov) {
1310        animateMove('hfov');
1311        prevZoom = config.hfov;
1312    }
1313
1314    // "Inertia"
1315    if (diff > 0 && !config.autoRotate) {
1316        // "Friction"
1317        var slowDownFactor = 1 - config.friction;
1318
1319        // Yaw
1320        if (!keysDown[4] && !keysDown[5] && !keysDown[8] && !keysDown[9] && !animatedMove.yaw) {
1321            config.yaw += speed.yaw * diff * slowDownFactor;
1322        }
1323        // Pitch
1324        if (!keysDown[2] && !keysDown[3] && !keysDown[6] && !keysDown[7] && !animatedMove.pitch) {
1325            config.pitch += speed.pitch * diff * slowDownFactor;
1326        }
1327        // Zoom
1328        if (!keysDown[0] && !keysDown[1] && !animatedMove.hfov) {
1329            setHfov(config.hfov + speed.hfov * diff * slowDownFactor);
1330        }
1331    }
1332
1333    prevTime = newTime;
1334    if (diff > 0) {
1335        speed.yaw = speed.yaw * 0.8 + (config.yaw - prevYaw) / diff * 0.2;
1336        speed.pitch = speed.pitch * 0.8 + (config.pitch - prevPitch) / diff * 0.2;
1337        speed.hfov = speed.hfov * 0.8 + (config.hfov - prevZoom) / diff * 0.2;
1338
1339        // Limit speed
1340        var maxSpeed = config.autoRotate ? Math.abs(config.autoRotate) : 5;
1341        speed.yaw = Math.min(maxSpeed, Math.max(speed.yaw, -maxSpeed));
1342        speed.pitch = Math.min(maxSpeed, Math.max(speed.pitch, -maxSpeed));
1343        speed.hfov = Math.min(maxSpeed, Math.max(speed.hfov, -maxSpeed));
1344    }
1345
1346    // Stop movement if opposite controls are pressed
1347    if (keysDown[0] && keysDown[1]) {
1348        speed.hfov = 0;
1349    }
1350    if ((keysDown[2] || keysDown[6]) && (keysDown[3] || keysDown[7])) {
1351        speed.pitch = 0;
1352    }
1353    if ((keysDown[4] || keysDown[8]) && (keysDown[5] || keysDown[9])) {
1354        speed.yaw = 0;
1355    }
1356}
1357
1358/**
1359 * Animates moves.
1360 * @param {string} axis - Axis to animate
1361 * @private
1362 */
1363function animateMove(axis) {
1364    var t = animatedMove[axis];
1365    var normTime = Math.min(1, Math.max((Date.now() - t.startTime) / 1000 / (t.duration / 1000), 0));
1366    var result = t.startPosition + config.animationTimingFunction(normTime) * (t.endPosition - t.startPosition);
1367    if ((t.endPosition > t.startPosition && result >= t.endPosition) ||
1368        (t.endPosition < t.startPosition && result <= t.endPosition) ||
1369        t.endPosition === t.startPosition) {
1370        result = t.endPosition;
1371        speed[axis] = 0;
1372        delete animatedMove[axis];
1373    }
1374    config[axis] = result;
1375}
1376
1377/**
1378 * @param {number} t - Normalized time in animation
1379 * @return {number} Position in animation
1380 * @private
1381 */
1382function timingFunction(t) {
1383    // easeInOutQuad from https://gist.github.com/gre/1650294
1384    return t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
1385}
1386

1512            config.yaw = Math.max(minYaw, Math.min(maxYaw, config.yaw));
1513        }
1514
1515        if (!(config.autoRotate !== false)) {
1516            // When not auto-rotating, this check needs to happen after the
1517            // previous check (see issue #698)
1518            if (config.yaw > 360) {
1519                config.yaw -= 360;
1520            } else if (config.yaw < -360) {
1521                config.yaw += 360;
1522            }
1523        }
1524
1525        // Check if we autoRotate in a limited by min and max yaw
1526        // If so reverse direction
1527        if (config.autoRotate !== false && tmpyaw != config.yaw &&
1528            prevTime !== undefined) { // this condition prevents changing the direction initially
1529            config.autoRotate *= -1;
1530        }
1531
1532        // Ensure the calculated pitch is within min and max allowed
1533        var vfov = 2 * Math.atan(Math.tan(config.hfov / 180 * Math.PI * 0.5) /
1534            (canvas.width / canvas.height)) / Math.PI * 180;
1535        var minPitch = config.minPitch + vfov / 2,
1536            maxPitch = config.maxPitch - vfov / 2;
1537        var pitchRange = config.maxPitch - config.minPitch;
1538        if (pitchRange < vfov) {
1539            // Lock pitch to average of min and max pitch when both can be seen at once
1540            minPitch = maxPitch = (minPitch + maxPitch) / 2;
1541        }
1542        if (isNaN(minPitch))
1543            minPitch = -90;
1544        if (isNaN(maxPitch))
1545            maxPitch = 90;
1546        config.pitch = Math.max(minPitch, Math.min(maxPitch, config.pitch));
1547
1548        renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {roll: config.roll * Math.PI / 180});
1549
1550        renderHotSpots();
1551
1552        // Update compass
1553        if (config.compass) {
1554            compass.style.transform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)';
1555            compass.style.webkitTransform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)';
1556        }
1557    }
1558}
1559
1560/**
1561 * Creates a new quaternion.
1562 * @private
1563 * @constructor
1564 * @param {Number} w - W value
1565 * @param {Number} x - X value
1566 * @param {Number} y - Y value
1567 * @param {Number} z - Z value
1568 */
1569function Quaternion(w, x, y, z) {
1570    this.w = w;
1571    this.x = x;
1572    this.y = y;
1573    this.z = z;
1574}
1575
1576/**
1577 * Multiplies quaternions.
1578 * @private
1579 * @param {Quaternion} q - Quaternion to multiply
1580 * @returns {Quaternion} Result of multiplication
1581 */
1582Quaternion.prototype.multiply = function(q) {
1583    return new Quaternion(this.w*q.w - this.x*q.x - this.y*q.y - this.z*q.z,
1584                          this.x*q.w + this.w*q.x + this.y*q.z - this.z*q.y,
1585                          this.y*q.w + this.w*q.y + this.z*q.x - this.x*q.z,
1586                          this.z*q.w + this.w*q.z + this.x*q.y - this.y*q.x);
1587};
1588
1589/**
1590 * Converts quaternion to Euler angles.
1591 * @private
1592 * @returns {Number[]} [phi angle, theta angle, psi angle]
1593 */
1594Quaternion.prototype.toEulerAngles = function() {
1595    var phi = Math.atan2(2 * (this.w * this.x + this.y * this.z),
1596                         1 - 2 * (this.x * this.x + this.y * this.y)),
1597        theta = Math.asin(2 * (this.w * this.y - this.z * this.x)),
1598        psi = Math.atan2(2 * (this.w * this.z + this.x * this.y),
1599                         1 - 2 * (this.y * this.y + this.z * this.z));
1600    return [phi, theta, psi];
1601};
1602
1603/**
1604 * Converts device orientation API Tait-Bryan angles to a quaternion.
1605 * @private
1606 * @param {Number} alpha - Alpha angle (in degrees)
1607 * @param {Number} beta - Beta angle (in degrees)
1608 * @param {Number} gamma - Gamma angle (in degrees)
1609 * @returns {Quaternion} Orientation quaternion
1610 */
1611function taitBryanToQuaternion(alpha, beta, gamma) {
1612    var r = [beta ? beta * Math.PI / 180 / 2 : 0,
1613             gamma ? gamma * Math.PI / 180 / 2 : 0,
1614             alpha ? alpha * Math.PI / 180 / 2 : 0];
1615    var c = [Math.cos(r[0]), Math.cos(r[1]), Math.cos(r[2])],
1616        s = [Math.sin(r[0]), Math.sin(r[1]), Math.sin(r[2])];
1617
1618    return new Quaternion(c[0]*c[1]*c[2] - s[0]*s[1]*s[2],
1619                          s[0]*c[1]*c[2] - c[0]*s[1]*s[2],
1620                          c[0]*s[1]*c[2] + s[0]*c[1]*s[2],
1621                          c[0]*c[1]*s[2] + s[0]*s[1]*c[2]);
1622}
1623
1624/**
1625 * Computes current device orientation quaternion from device orientation API
1626 * Tait-Bryan angles.
1627 * @private
1628 * @param {Number} alpha - Alpha angle (in degrees)
1629 * @param {Number} beta - Beta angle (in degrees)
1630 * @param {Number} gamma - Gamma angle (in degrees)
1631 * @returns {Quaternion} Orientation quaternion
1632 */
1633function computeQuaternion(alpha, beta, gamma) {
1634    // Convert Tait-Bryan angles to quaternion
1635    var quaternion = taitBryanToQuaternion(alpha, beta, gamma);
1636    // Apply world transform
1637    quaternion = quaternion.multiply(new Quaternion(Math.sqrt(0.5), -Math.sqrt(0.5), 0, 0));
1638    // Apply screen transform
1639    var angle = window.orientation ? -window.orientation * Math.PI / 180 / 2 : 0;
1640    return quaternion.multiply(new Quaternion(Math.cos(angle), 0, -Math.sin(angle), 0));
1641}
1642
1643/**
1644 * Event handler for device orientation API. Controls pointing.
1645 * @private
1646 * @param {DeviceOrientationEvent} event - Device orientation event.
1647 */
1648function orientationListener(e) {
1649    var q = computeQuaternion(e.alpha, e.beta, e.gamma).toEulerAngles();
1650    if (typeof(orientation) == 'number' && orientation < 10) {
1651        // This kludge is necessary because iOS sometimes provides a few stale
1652        // device orientation events when the listener is removed and then
1653        // readded. Thus, we skip the first 10 events to prevent this from
1654        // causing problems.
1655        orientation += 1;
1656    } else if (orientation === 10) {
1657        // Record starting yaw to prevent jumping
1658        orientationYawOffset = q[2] / Math.PI * 180 + config.yaw;
1659        orientation = true;
1660        requestAnimationFrame(animate);
1661    } else {
1662        config.pitch = q[0] / Math.PI * 180;
1663        config.roll = -q[1] / Math.PI * 180;
1664        config.yaw = -q[2] / Math.PI * 180 + orientationYawOffset;
1665    }
1666}
1667
1668/**
1669 * Initializes renderer.
1670 * @private
1671 */
1672function renderInit() {
1673    try {
1674        var params = {};
1675        if (config.horizonPitch !== undefined)
1676            params.horizonPitch = config.horizonPitch * Math.PI / 180;
1677        if (config.horizonRoll !== undefined)
1678            params.horizonRoll = config.horizonRoll * Math.PI / 180;
1679        if (config.backgroundColor !== undefined)
1680            params.backgroundColor = config.backgroundColor;
1681        renderer.init(panoImage, config.type, config.dynamic, config.haov * Math.PI / 180, config.vaov * Math.PI / 180, config.vOffset * Math.PI / 180, renderInitCallback, params);
1682        if (config.dynamic !== true) {
1683            // Allow image to be garbage collected
1684            panoImage = undefined;
1685        }
1686    } catch(event) {
1687        // Panorama not loaded
1688
1689        // Display error if there is a bad texture
1690        if (event.type == 'webgl error' || event.type == 'no webgl') {
1691            anError();
1692        } else if (event.type == 'webgl size error') {
1693            anError(config.strings.textureSizeError.replace('%s', event.width).replace('%s', event.maxWidth));
1694        } else {
1695            anError(config.strings.unknownError);
1696            throw event;
1697        }
1698    }
1699}
1700
1701/**
1702 * Triggered when render initialization finishes. Handles fading between
1703 * scenes as well as showing the compass and hotspots and hiding the loading
1704 * display.
1705 * @private
1706 */
1707function renderInitCallback() {
1708    // Fade if specified
1709    if (config.sceneFadeDuration && renderer.fadeImg !== undefined) {
1710        renderer.fadeImg.style.opacity = 0;
1711        // Remove image
1712        var fadeImg = renderer.fadeImg;
1713        delete renderer.fadeImg;
1714        setTimeout(function() {
1715            renderContainer.removeChild(fadeImg);
1716            fireEvent('scenechangefadedone');
1717        }, config.sceneFadeDuration);
1718    }
1719
1720    // Show compass if applicable
1721    if (config.compass) {
1722        compass.style.display = 'inline';
1723    } else {
1724        compass.style.display = 'none';
1725    }
1726
1727    // Show hotspots
1728    createHotSpots();
1729
1730    // Hide loading display
1731    infoDisplay.load.box.style.display = 'none';
1732    if (preview !== undefined) {
1733        renderContainer.removeChild(preview);
1734        preview = undefined;
1735    }
1736    loaded = true;
1737
1738    animateInit();
1739
1740    fireEvent('load');
1741}
1742
1743/**
1744 * Creates hot spot element for the current scene.
1745 * @private
1746 * @param {Object} hs - The configuration for the hotspot
1747 */
1748function createHotSpot(hs) {
1749    // Make sure hot spot pitch and yaw are numbers
1750    hs.pitch = Number(hs.pitch) || 0;
1751    hs.yaw = Number(hs.yaw) || 0;
1752
1753    var div = document.createElement('div');
1754    div.className = 'pnlm-hotspot-base';
1755    if (hs.cssClass)
1756        div.className += ' ' + hs.cssClass;
1757    else
1758        div.className += ' pnlm-hotspot pnlm-sprite pnlm-' + escapeHTML(hs.type);
1759
1760    var span = document.createElement('span');
1761    if (hs.text)
1762        span.innerHTML = escapeHTML(hs.text);
1763
1764    var a;
1765    if (hs.video) {
1766        var video = document.createElement('video'),
1767            vidp = hs.video;
1768        if (config.basePath && !absoluteURL(vidp))
1769            vidp = config.basePath + vidp;
1770        video.src = sanitizeURL(vidp);
1771        video.controls = true;
1772        video.style.width = hs.width + 'px';
1773        renderContainer.appendChild(div);
1774        span.appendChild(video);
1775    } else if (hs.image) {
1776        var imgp = hs.image;
1777        if (config.basePath && !absoluteURL(imgp))
1778            imgp = config.basePath + imgp;
1779        a = document.createElement('a');
1780        a.href = sanitizeURL(hs.URL ? hs.URL : imgp, true);
1781        a.target = '_blank';
1782        span.appendChild(a);
1783        var image = document.createElement('img');
1784        image.src = sanitizeURL(imgp);
1785        image.style.width = hs.width + 'px';
1786        image.style.paddingTop = '5px';
1787        renderContainer.appendChild(div);
1788        a.appendChild(image);
1789        span.style.maxWidth = 'initial';
1790    } else if (hs.URL) {
1791        a = document.createElement('a');
1792        a.href = sanitizeURL(hs.URL, true);
1793        if (hs.attributes) {
1794            for (var key in hs.attributes) {
1795                a.setAttribute(key, hs.attributes[key]);
1796            }
1797        } else {
1798            //wpvr edit by sakib for in tab url open// -- handling from here
1799            if (hs.wpvr_url_open == 'on') {
1800                a.target = '_self';
1801            }
1802            else {
1803                a.target = '_blank';
1804            }
1805        }
1806        renderContainer.appendChild(a);
1807        div.className += ' pnlm-pointer';
1808        span.className += ' pnlm-pointer';
1809        a.appendChild(div);
1810    } else {
1811        if (hs.sceneId) {
1812            div.onclick = div.ontouchend = function() {
1813                if (!div.clicked) {
1814                    div.clicked = true;
1815                    loadScene(hs.sceneId, hs.targetPitch, hs.targetYaw, hs.targetHfov);
1816                }
1817                return false;

2213    }
2214    if (resize !== 'resize')
2215        fireEvent('fullscreenchange', fullscreenActive);
2216    // Resize renderer (deal with browser quirks and fixes #155)
2217    renderer.resize();
2218    setHfov(config.hfov);
2219    animateInit();
2220}
2221
2222/**
2223 * Increases panorama zoom. For use with zoom button.
2224 * @private
2225 */
2226function zoomIn() {
2227    if (loaded) {
2228        setHfov(config.hfov - 5);
2229        animateInit();
2230    }
2231}
2232
2233/**
2234 * Decreases panorama zoom. For use with zoom button.
2235 * @private
2236 */
2237function zoomOut() {
2238    if (loaded) {
2239        setHfov(config.hfov + 5);
2240        animateInit();
2241    }
2242}
2243
2244/**
2245 * Clamps horzontal field of view to viewer's limits.
2246 * @private
2247 * @param {number} hfov - Input horizontal field of view (in degrees)
2248 * @return {number} - Clamped horizontal field of view (in degrees)
2249 */
2250function constrainHfov(hfov) {
2251    // Keep field of view within bounds
2252    var minHfov = config.minHfov;
2253    if (config.type == 'multires' && renderer && !config.multiResMinHfov) {
2254        minHfov = Math.min(minHfov, renderer.getCanvas().width / (config.multiRes.cubeResolution / 90 * 0.9));
2255    }
2256    if (minHfov > config.maxHfov) {
2257        // Don't change view if bounds don't make sense
2258        console.log('HFOV bounds do not make sense (minHfov > maxHfov).');
2259        return config.hfov;
2260    }
2261    var newHfov = config.hfov;
2262    if (hfov < minHfov) {
2263        newHfov = minHfov;
2264    } else if (hfov > config.maxHfov) {
2265        newHfov = config.maxHfov;
2266    } else {
2267        newHfov = hfov;
2268    }
2269    // Optionally avoid showing background (empty space) on top or bottom by adapting newHfov
2270    if (config.avoidShowingBackground && renderer) {
2271        var canvas = renderer.getCanvas();
2272        newHfov = Math.min(newHfov,
2273                           Math.atan(Math.tan((config.maxPitch - config.minPitch) / 360 * Math.PI) /
2274                                     canvas.height * canvas.width) * 360 / Math.PI);
2275    }
2276    return newHfov;
2277}
2278
2279/**
2280 * Sets viewer's horizontal field of view.
2281 * @private
2282 * @param {number} hfov - Desired horizontal field of view in degrees.
2283 */
2284function setHfov(hfov) {
2285    config.hfov = constrainHfov(hfov);
2286    fireEvent('zoomchange', config.hfov);
2287}
2288
2289/**
2290 * Stops auto rotation and animated moves.
2291 * @private
2292 */
2293function stopAnimation() {
2294    animatedMove = {};
2295    autoRotateSpeed = config.autoRotate ? config.autoRotate : autoRotateSpeed;
2296    config.autoRotate = false;
2297}
2298
2299/**
2300 * Loads panorama.
2301 * @private
2302 */
2303function load() {
2304    // Since WebGL error handling is very general, first we clear any error box
2305    // since it is a new scene and the error from previous maybe because of lacking
2306    // memory etc and not because of a lack of WebGL support etc
2307    clearError();
2308    loaded = false;
2309
2310    controls.load.style.display = 'none';
2311    infoDisplay.load.box.style.display = 'inline';
2312    init();
2313}
2314
2315/**
2316 * Loads scene.
2317 * @private
2318 * @param {string} sceneId - Identifier of scene configuration to merge in.
2319 * @param {number} targetPitch - Pitch viewer should be centered on once scene loads.
2320 * @param {number} targetYaw - Yaw viewer should be centered on once scene loads.
2321 * @param {number} targetHfov - HFOV viewer should use once scene loads.
2322 * @param {boolean} [fadeDone] - If `true`, fade setup is skipped.
2323 */
2324function loadScene(sceneId, targetPitch, targetYaw, targetHfov, fadeDone) {
2325    if (!loaded)
2326        fadeDone = true;    // Don't try to fade when there isn't a scene loaded
2327    loaded = false;
2328    animatedMove = {};
2329
2330    // Set up fade if specified
2331    var fadeImg, workingPitch, workingYaw, workingHfov;
2332    if (config.sceneFadeDuration && !fadeDone) {
2333        var data = renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {returnImage: true});
2334        if (data !== undefined) {
2335            fadeImg = new Image();
2336            fadeImg.className = 'pnlm-fade-img';
2337            fadeImg.style.transition = 'opacity ' + (config.sceneFadeDuration / 1000) + 's';
2338            fadeImg.style.width = '100%';
2339            fadeImg.style.height = '100%';
2340            fadeImg.onload = function() {
2341                loadScene(sceneId, targetPitch, targetYaw, targetHfov, true);
2342            };
2343            fadeImg.src = data;
2344            renderContainer.appendChild(fadeImg);
2345            renderer.fadeImg = fadeImg;
2346            return;
2347        }
2348    }
2349
2350    // Set new pointing
2351    if (targetPitch === 'same') {
2352        workingPitch = config.pitch;
2353    } else {
2354        workingPitch = targetPitch;
2355    }
2356    if (targetYaw === 'same') {
2357        workingYaw = config.yaw;
2358    } else if (targetYaw === 'sameAzimuth') {
2359        workingYaw = config.yaw + (config.northOffset || 0) - (initialConfig.scenes[sceneId].northOffset || 0);
2360    } else {
2361        workingYaw = targetYaw;
2362    }
2363    if (targetHfov === 'same') {
2364        workingHfov = config.hfov;
2365    } else {
2366        workingHfov = targetHfov;
2367    }
2368
2369    // Destroy hot spots from previous scene
2370    destroyHotSpots();
2371
2372    // Create the new config for the scene
2373    mergeConfig(sceneId);
2374
2375    // Stop motion
2376    speed.yaw = speed.pitch = speed.hfov = 0;
2377
2378    // Reload scene
2379    processOptions();
2380    if (workingPitch !== undefined) {
2381        config.pitch = workingPitch;
2382    }
2383    if (workingYaw !== undefined) {
2384        config.yaw = workingYaw;
2385    }
2386    if (workingHfov !== undefined) {
2387        config.hfov = workingHfov;
2388    }
2389    fireEvent('scenechange', sceneId);
2390    load();
2391}
2392
2393/**
2394 * Stop using device orientation.
2395 * @private
2396 */
2397function stopOrientation() {
2398    window.removeEventListener('deviceorientation', orientationListener);
2399    controls.orientation.classList.remove('pnlm-orientation-button-active');
2400    orientation = false;