(function($){
'use strict';
document.addEventListener('DOMContentLoaded', function(){
FastClick.attach(document.body);
});
$(function(){
$('.j-mv360tour-public').each(function(i,e){
new MV360TourPublic($(e));
});
});
})(jQuery);
function MV360TourPublic($el){
this.$el=$el;
this.embed=this.$el.data('embed');
this.$embedEl='';
if(this.embed){
this.$embedEl=this.$el.parent();
}
this.initSlickMenu=false;
this.$wrapper=this.$el.parent();
this.dataDefault=JSON.parse($el.find('[data-default="1"]').html());
this.options=JSON.parse($el.find('.j-mv360tour-public-opt').html());
this.initVideo();
var opt={
controls: {
mouseViewMode: 'drag',
},
};
if(this.options.zoomScroll){
opt.controls.scrollZoom=false;
}
this.viewer=new Marzipano.Viewer(this.$el.get(0), opt);
if(this.options.zoom||this.options.move||this.options.gyro){
this.controls=this.viewer.controls();
this.deviceOrientationControlMethod=new MV360TourPublicDeviceOrientationControlMethod();
this.controls.registerMethod('deviceOrientation', this.deviceOrientationControlMethod);
this.velocity=0.7;
this.friction=3;
this.$controls=jQuery('<div class="mv360tour-controls"></div>');
this.$el.append(this.$controls);
if(this.options.move){ this.createMoveControls(); }
if(this.options.gyro){ this.createGyroscopeControls(); }
if(this.options.zoom){ this.createZoomControls(); }}
if(this.options.autostart){
this.autorotate=Marzipano.autorotate({
yawSpeed: 0.03,
targetPitch: 0,
targetFov: Math.PI/2
});
this.startAutorotate();
}
this.addSceneTitle();
this.createFirstScene();
if(!this.options.hideMenu){
this.addMenu();
}
this.createFullscreenControl();
jQuery(document).on('fullscreenchange mozfullscreenchange webkitfullscreenchange msfullscreenchange', this.changeFullscreenEvent.bind(this));
};
MV360TourPublic.prototype.initVideo=function(){
this.video=document.createElement('video');
this.video.controls=true;
this.video.autoplay=false;
this.video.loop=true;
this.video.playsInline=true;
this.video.webkitPlaysInline=true;
jQuery(this.video).on('timeupdate', this.updateProgressBar.bind(this));
jQuery(this.video).on('timeupdate', this.updateCurrentTimeIndicator.bind(this));
jQuery(this.video).on('loadedmetadata', this.updateDurationIndicator.bind(this));
this.$controls=jQuery('<div class="mv360tour-video-controls j-mv360tour-video-controls"></div>');
this.$progressFillElement=jQuery('<div class="mv360tour-video-controls-progress-fill"></div>');
this.$progressBackgroundElement=jQuery('<div class="mv360tour-video-controls-progress-background"></div>');
this.$progressBackgroundElement.append(this.$progressFillElement);
this.$currentTimeIndicatorElement=jQuery('<div class="mv360tour-video-controls-current-time-indicator">0:00</div>');
this.$durationIndicatorElement=jQuery('<div class="mv360tour-video-controls-duration-indicator">0:00</div>');
this.$indicators=jQuery('<div class="mv360tour-video-controls-indicators"></div>');
this.$indicators.append(this.$currentTimeIndicatorElement, this.$durationIndicatorElement);
this.$playPauseElement=jQuery('<div class="mv360tour-video-controls-play-pause"></div>');
this.$playMobile=jQuery('<div class="mv360tour-video-controls-play-mobile"><span></span></div>');
this.$muteElement=jQuery('<div class="mv360tour-video-controls-mute"></div>');
this.$controls.append(this.$progressBackgroundElement, this.$indicators, this.$playPauseElement, this.$muteElement);
this.$el.append(this.$controls, this.$playMobile);
this.$playPauseElement.bind('click', this.playPause.bind(this));
this.$playMobile.bind('click', this.playPause.bind(this));
this.$muteElement.bind('click', this.mute.bind(this));
this.$progressBackgroundElement.bind('click', this.progressBackground.bind(this));
};
MV360TourPublic.prototype.isTouch=function(){
return 'ontouchstart' in window||navigator.maxTouchPoints;
};
MV360TourPublic.prototype.isMobileOs=function(){
var check=false;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
check=true;
}
return check;
};
MV360TourPublic.prototype.addSceneTitle=function(){
this.$titleScene=jQuery('<div class="mv360tour-title-scene"></div>');
this.$titleSceneText=jQuery('<span></span>');
if(this.options.secondaryColor){
this.$titleScene.css('background-color', this.options.secondaryColor);
}
if(this.options.primaryColor){
this.$titleScene.css('color', this.options.primaryColor);
}
this.$el.append(this.$titleScene);
this.$titleScene.append(this.$titleSceneText);
};
MV360TourPublic.prototype.addMenu=function(){
this.$menuBtn=jQuery('<a href="#" class="mv360tour-menu-btn"><svg height="30px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg></a>');
this.$menuBtnClose=jQuery('<a href="#" class="mv360tour-menu-btn mv360tour-menu-btn-close"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" width="26" height="26" viewBox="0 0 26 26" enable-background="new 0 0 32 32" xml:space="preserve" id="svg4" sodipodi:docname="close.svg" inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"><path d="M 13,10.833875 2.1669381,0 0,2.1669375 10.833881,13 0,23.833875 2.1669381,26 13,15.166124 23.833881,26 26,23.833875 15.166119,13 26,2.1669375 23.833881,0 Z" style="stroke-width:0.81250012" /></svg></a>');
this.$menuBtn.bind('click', this.toggleMenu.bind(this));
this.$menuBtnClose.bind('click', this.toggleMenu.bind(this));
if(this.options.primaryColor){
this.$menuBtn.find('svg').css('fill', this.options.primaryColor);
this.$menuBtnClose.find('svg').css('fill', this.options.primaryColor);
}
this.$titleScene.append(this.$menuBtn);
this.$menuOverlay=jQuery('<div class="mv360tour-menu"></div>');
if(this.options.primaryColor){
this.$menuOverlay.css('color', this.options.primaryColor);
}
if(this.options.secondaryColor){
this.$menuOverlay.css('background-color', this.options.secondaryColor);
}
this.$menuOverlay.append(this.$menuBtnClose);
this.$menuList=jQuery('<ul></ul>');
this.$menuwrapper=jQuery('<div class="mv360tour-menu-wrapper"></div>');
this.$menuOverlay.append(this.$menuwrapper);
this.$menuwrapper.append(this.$menuList);
jQuery('.j-mv360tour-public-data').each(function(i, e){
var $e=jQuery(e);
var scene=JSON.parse($e.html());
var dataScene={
id:scene.id,
};
if(scene.position){
dataScene.position=scene.position;
}
var $list_el=jQuery('<li data-scene=\'' + JSON.stringify(dataScene) + '\'>' + scene.title + '</li>');
if(this.options.menu){
var $list_el=jQuery('<li data-scene=\'' + JSON.stringify(dataScene) + '\'><div><span>' + scene.title + '</span><img src="' + scene.thumb + '"></div></li>');
if(this.options.secondaryColor){
$list_el.find('span').css('color', this.options.secondaryColor);
}
if(this.options.primaryColor){
$list_el.find('span').css('background-color', this.options.primaryColor);
var rgba=$list_el.find('span').css('background-color').replace('rgb', 'rgba').replace(')',',.7)');
$list_el.find('span').css('background-color', rgba);
}}
$list_el.bind('click', this.changeScene.bind(this));
this.$menuList.append($list_el);
i++;
}.bind(this));
this.$el.prepend(this.$menuOverlay);
if(this.options.menu){
this.$menuList.on('init', function(){
if(this.options.primaryColor){
this.$menuList.find('.slick-arrow').css('background-color', this.options.primaryColor);
}
if(this.options.secondaryColor){
this.$menuList.find('.slick-arrow').css('color', this.options.secondaryColor);
}
this.initSlickMenu=true;
}.bind(this));
if(this.embed){
jQuery(window).bind('resize', this.slickMenuEmbed.bind(this));
this.slickMenuEmbed();
}else{
this.$menuList.slick({
slidesToShow: 3,
slidesToScroll: 1,
arrow: true,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2,
}},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
}}
]
});
}}
};
MV360TourPublic.prototype.slickMenuEmbed=function(){
if(this.initSlickMenu){
this.$menuList.slick('unslick');
}
if(this.$wrapper.width() <=600){
this.$menuList.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrow: true,
});
}else if(this.$wrapper.width() <=980){
this.$menuList.slick({
slidesToShow: 2,
slidesToScroll: 1,
arrow: true,
});
}else{
this.$menuList.slick({
slidesToShow: 3,
slidesToScroll: 1,
arrow: true,
});
}
this.$menuList.slick('setPosition');
};
MV360TourPublic.prototype.toggleMenu=function(e){
if(e){
e.preventDefault();
}
if(this.$menuOverlay.hasClass('is-open')){
this.$menuOverlay.removeClass('is-open');
setTimeout(function(){
this.$menuOverlay.removeClass('is-front');
}.bind(this), 400);
}else{
this.$menuOverlay.addClass('is-front');
if(this.options.menu){
this.$menuList.slick('setPosition');
}
setTimeout(function(){
this.$menuOverlay.addClass('is-open');
}.bind(this), 10);
}};
MV360TourPublic.prototype.startAutorotate=function(){
if(this.options.autostart){
this.viewer.startMovement(this.autorotate);
this.viewer.setIdleMovement(3000, this.autorotate);
}};
MV360TourPublic.prototype.stopAutorotate=function(){
if(this.options.autostart){
this.viewer.stopMovement();
this.viewer.setIdleMovement(Infinity);
}};
MV360TourPublic.prototype.stopEventsPropagation=function(element, eventList){
var eventList=['touchstart', 'touchmove', 'touchend', 'touchcancel', 'wheel', 'mousewheel', 'scroll'];
for (var i=0; i < eventList.length; i++){
element.addEventListener(eventList[i], function(event){
event.stopPropagation();
});
}};
MV360TourPublic.prototype.createZoomControls=function(){
this.$zoomIn=jQuery('<span class="mv360tour-zoom-in"></span>');
this.$zoomOut=jQuery('<span class="mv360tour-zoom-out"></span>');
if(this.options.secondaryColor){
this.$zoomOut.css('background-color', this.options.secondaryColor);
this.$zoomIn.css('background-color', this.options.secondaryColor);
}
if(this.options.primaryColor){
this.$zoomOut.css('color', this.options.primaryColor);
this.$zoomIn.css('color', this.options.primaryColor);
}
this.controls.registerMethod('inElement', new Marzipano.ElementPressControlMethod(this.$zoomIn.get(0), 'zoom', -this.velocity, this.friction), true);
this.controls.registerMethod('outElement', new Marzipano.ElementPressControlMethod(this.$zoomOut.get(0), 'zoom', this.velocity, this.friction), true);
this.$controls.append(this.$zoomIn);
this.$controls.append(this.$zoomOut);
};
MV360TourPublic.prototype.changeFullscreenEvent=function(e){
if((window.fullScreen)||(window.innerWidth==screen.width&&window.innerHeight==screen.height)){
this.$fullScreen.addClass('is-open');
}else{
this.$fullScreen.removeClass('is-open');
}};
MV360TourPublic.prototype.createFullscreenControl=function(){
var color='#fff';
if(this.options.primaryColor){
color=this.options.primaryColor;
}
this.$fullScreen=jQuery('<span class="mv360tour-fullscreen"><svg class="mv360tour-fullscreen--close" style="fill:' + color + ';" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M32 0h-13l5 5-6 6 3 3 6-6 5 5z"></path><path d="M32 32v-13l-5 5-6-6-3 3 6 6-5 5z"></path><path d="M0 32h13l-5-5 6-6-3-3-6 6-5-5z"></path><path d="M0 0v13l5-5 6 6 3-3-6-6 5-5z"></path></svg><svg class="mv360tour-fullscreen--open" style="fill:' + color + ';" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M18 14h13l-5-5 6-6-3-3-6 6-5-5z"></path><path d="M18 18v13l5-5 6 6 3-3-6-6 5-5z"></path><path d="M14 18h-13l5 5-6 6 3 3 6-6 5 5z"></path><path d="M14 14v-13l-5 5-6-6-3 3 6 6-5 5z"></path></svg></span>');
this.$fullScreen.bind('click', this.toggleFullscreen.bind(this));
this.$titleScene.append(this.$fullScreen);
};
MV360TourPublic.prototype.toggleFullscreen=function(){
if(!this.fullScreen){
if(this.$el.get(0).requestFullscreen){
this.$el.get(0).requestFullscreen();
}else if(this.$el.get(0).mozRequestFullScreen){ 
this.$el.get(0).mozRequestFullScreen();
}else if(this.$el.get(0).webkitRequestFullscreen){ 
this.$el.get(0).webkitRequestFullscreen();
}else if(this.$el.get(0).msRequestFullscreen){ 
this.$el.get(0).msRequestFullscreen();
}
this.fullScreen=1;
}else{
if(document.exitFullscreen){
document.exitFullscreen();
}else if(document.mozCancelFullScreen){ 
document.mozCancelFullScreen();
}else if(document.webkitExitFullscreen){ 
document.webkitExitFullscreen();
}else if(document.msExitFullscreen){ 
document.msExitFullscreen();
}
this.fullScreen=0;
}}
MV360TourPublic.prototype.createGyroscopeControls=function(){
var bg='#000';
if(this.options.secondaryColor){
bg=this.options.secondaryColor;
}
var color='#fff';
if(this.options.primaryColor){
color=this.options.primaryColor;
}
this.$gyroscope=jQuery('<span style="background-color:' + bg + ';" class="mv360tour-gyro"><svg style="fill:' + color + ';" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM3 16c0-7.18 5.82-13 13-13 3.424 0 6.538 1.325 8.86 3.488l-12.86 5.512-5.512 12.86c-2.164-2.322-3.488-5.436-3.488-8.86zM18.286 18.286l-8.003 3.43 3.43-8.003 4.573 4.573zM16 29c-3.424 0-6.539-1.325-8.86-3.488l12.86-5.512 5.512-12.86c2.164 2.322 3.488 5.436 3.488 8.86 0 7.18-5.82 13-13 13z"></path></svg></span>');
this.$gyroscope.bind('click', this.toggleGyro.bind(this));
this.$controls.append(this.$gyroscope);
};
MV360TourPublic.prototype.toggleGyro=function(){
if(!this.gyroEnabled){
this.deviceOrientationControlMethod.getPitch(function(err, pitch){
if(!err){
var view=this.scenes[this.getSceneOffset(this.activeSceneId)].scene._view;
var pos={
fov: view._fov,
pitch: view._pitch,
yaw: view._yaw,
};
pos.pitch=pitch;
this.scenes[this.getSceneOffset(this.activeSceneId)].scene.lookTo(pos, {transitionDuration:0});
}}.bind(this));
this.controls.enableMethod('deviceOrientation');
this.gyroEnabled=true;
}else{
this.controls.disableMethod('deviceOrientation');
this.gyroEnabled=false;
}};
MV360TourPublic.prototype.createMoveControls=function(){
this.$arrowTop=jQuery('<span class="mv360tour-arrow mv360tour-arrow--top"></span>');
this.$arrowBottom=jQuery('<span class="mv360tour-arrow mv360tour-arrow--bottom"></span>');
this.$arrowLeft=jQuery('<span class="mv360tour-arrow mv360tour-arrow--left"></span>');
this.$arrowRight=jQuery('<span class="mv360tour-arrow mv360tour-arrow--right"></span>');
if(this.options.secondaryColor){
this.$arrowTop.css('background-color', this.options.secondaryColor);
this.$arrowBottom.css('background-color', this.options.secondaryColor);
this.$arrowLeft.css('background-color', this.options.secondaryColor);
this.$arrowRight.css('background-color', this.options.secondaryColor);
}
if(this.options.primaryColor){
this.$arrowTop.css('color', this.options.primaryColor);
this.$arrowBottom.css('color', this.options.primaryColor);
this.$arrowLeft.css('color', this.options.primaryColor);
this.$arrowRight.css('color', this.options.primaryColor);
}
this.controls.registerMethod('upElement', new Marzipano.ElementPressControlMethod(this.$arrowTop.get(0), 'y', -this.velocity, this.friction), true);
this.controls.registerMethod('downElement', new Marzipano.ElementPressControlMethod(this.$arrowBottom.get(0), 'y', this.velocity, this.friction), true);
this.controls.registerMethod('leftElement', new Marzipano.ElementPressControlMethod(this.$arrowLeft.get(0), 'x', -this.velocity, this.friction), true);
this.controls.registerMethod('rightElement', new Marzipano.ElementPressControlMethod(this.$arrowRight.get(0), 'x', this.velocity, this.friction), true);
this.$controls.append(this.$arrowTop);
this.$controls.append(this.$arrowBottom);
this.$controls.append(this.$arrowLeft);
this.$controls.append(this.$arrowRight);
};
MV360TourPublic.prototype.getDefaultSceneOffset=function(){
var i=0;
var offset;
while (i < this.scenes.length){
if(this.scenes[i].data.default){
offset=i;
}
i++;
}
return offset;
};
MV360TourPublic.prototype.getSceneOffset=function(id){
var i=0;
var offset;
while (i < this.scenes.length){
if(this.scenes[i].data.id==id){
offset=i;
}
i++;
}
return offset;
};
MV360TourPublic.prototype.createFirstScene=function(){
var scene=this.createScene(this.dataDefault);
this.changeScene(null, scene);
if(this.dataDefault.img&&this.dataDefault.img.src){
this.scene=this.createSceneImage(this.dataDefault);
}else{
this.scene=this.createSceneVideo(this.dataDefault);
}};
MV360TourPublic.prototype.createScene=function(data){
var scene='';
if(data.img&&data.img.src){
scene=this.createSceneImage(data);
}else{
scene=this.createSceneVideo(data);
}
return scene;
};
MV360TourPublic.prototype.getScene=function(id){
if(typeof(id)=='object'){
id=id.id;
}
return this.createScene(JSON.parse(this.$el.find('[data-scene="' + id + '"]').html()));
};
MV360TourPublic.prototype.createSceneImage=function(data){
var source=Marzipano.ImageUrlSource.fromString(data.img.src);
var geometry=new Marzipano.EquirectGeometry([{ width: data.img.width }]);
var limiter=Marzipano.RectilinearView.limit.traditional(2600, 120*Math.PI/180);
var view=new Marzipano.RectilinearView(data.position, limiter);
var scene=this.viewer.createScene({
source: source,
geometry: geometry,
view: view,
pinFirstLevel: true
});
var i=0;
if(data.hotspots){
while (i < data.hotspots.length){
var hotspot=data.hotspots[i];
var element=this.createHotspotHtml(hotspot);
scene.hotspotContainer().createHotspot(element, { yaw: hotspot.position.yaw, pitch: hotspot.position.pitch });
i++;
}}
return {
data: data,
scene: scene,
view: view
};};
MV360TourPublic.prototype.createSceneVideo=function(data){
var asset=new VideoAsset();
var source=new Marzipano.SingleAssetSource(asset);
var limiter=Marzipano.RectilinearView.limit.traditional(2600, 120*Math.PI/180);
var view=new Marzipano.RectilinearView(data.position, limiter);
var scene=this.viewer.createScene({
source: source,
geometry: new Marzipano.EquirectGeometry([{ width: 1 }]),
view: view,
pinFirstLevel: true,
});
var i=0;
if(data.hotspots){
while (i < data.hotspots.length){
var hotspot=data.hotspots[i];
var element=this.createHotspotHtml(hotspot);
scene.hotspotContainer().createHotspot(element, { yaw: hotspot.position.yaw, pitch: hotspot.position.pitch });
i++;
}}
data.video.asset=asset;
return {
data: data,
scene: scene,
view: view
};};
MV360TourPublic.prototype.createHotspotHtml=function(hotspot){
var $el=jQuery('<div></div>');
this.stopEventsPropagation($el.get(0));
if(hotspot.icon&&hotspot.icon.url){
$el.addClass('mv360tour-hotspot-icon');
$el.css('background-image', 'url('+hotspot.icon.url+')');
if(hotspot.icon.width){
$el.css('width', hotspot.icon.width+'px');
$el.css('margin-left', hotspot.icon.width/2*-1+'px');
}
if(hotspot.icon.height){
$el.css('height', hotspot.icon.height+'px');
$el.css('margin-top', hotspot.icon.height/2*-1+'px');
}}else{
$el.addClass('mv360tour-hotspot');
}
switch (hotspot.type){
case 'image':
var $container=jQuery('<div class="mv360tour-hotspot__container mv360tour-hotspot__container--img"></div>');
if(hotspot.title){
var $title=jQuery('<div class="mv360tour-hotspot__title"><span>' + hotspot.title + '</span></div>');
if(hotspot.popup&&hotspot.popup.titleColor){
$title.css('color', hotspot.popup.titleColor);
}
$container.append($title);
}
$container.append('<img src="' + hotspot.image + '">');
if(hotspot.popup&&hotspot.popup.titleBgColor){
if($title){
$title.find('span').css('background-color', hotspot.popup.titleBgColor);
var rgba=$title.find('span').css('background-color').replace('rgb', 'rgba').replace(')',',.7)');
$title.find('span').css('background-color', rgba);
}}
$el.append($container);
var $clickOffset=jQuery('<span class="mv360tour-hotspot__click"></span>');
$el.append($clickOffset);
$clickOffset.bind('click touchend', this.toggleHotspot.bind(this));
break;
case 'text':
var $container=jQuery('<div class="mv360tour-hotspot__container mv360tour-hotspot__container--text"></div>');
if(hotspot.title){
var title=jQuery('<textarea />').html(hotspot.title).text();
var $title=jQuery('<div class="mv360tour-hotspot__title mv360tour-hotspot__title--text"><span>' + title + '</span></div>');
if(hotspot.popup&&hotspot.popup.titleColor){
$title.css('color', hotspot.popup.titleColor);
}
$container.append($title);
}
if(hotspot.text){
var text=jQuery('<textarea />').html(hotspot.text).text();
$container.append('<div class="mv360tour-hotspot__container__text">' + text + '</div>');
}
$el.append($container);
var $clickOffset=jQuery('<span class="mv360tour-hotspot__click"></span>');
$el.append($clickOffset);
$clickOffset.bind('click touchend', this.toggleHotspot.bind(this));
break;
case 'link':
var $container=jQuery('<div class="mv360tour-hotspot__container mv360tour-hotspot__container--link"></div>');
var $clickOffset=jQuery('<a target="_blank" href="' + hotspot.link + '" class="mv360tour-hotspot__click"></a>');
$el.append($clickOffset);
break;
case 'video':
var $container=jQuery('<div class="mv360tour-hotspot__container mv360tour-hotspot__container--video"></div>');
if(hotspot.title){
var $title=jQuery('<div class="mv360tour-hotspot__title mv360tour-hotspot__title--text"><span>' + hotspot.title + '</span></div>');
if(hotspot.popup&&hotspot.popup.titleColor){
$title.css('color', hotspot.popup.titleColor);
}
$container.append($title);
}
if(hotspot.url){
$container.append('<div class="mv360tour-hotspot__container__video">' + this.getVideoEmbed(hotspot.url) + '</div>');
}
$el.append($container);
var $clickOffset=jQuery('<span class="mv360tour-hotspot__click"></span>');
$el.append($clickOffset);
$clickOffset.bind('click touchend', this.toggleHotspot.bind(this));
break;
case 'scene':
var $container=jQuery('<div class="mv360tour-hotspot__container mv360tour-hotspot__container--scene"></div>');
if(hotspot.title){
var $title=jQuery('<div class="mv360tour-hotspot__title mv360tour-hotspot__title--scene">' + hotspot.title + '</div>');
$container=jQuery('<div class="mv360tour-hotspot__container mv360tour-hotspot__container--scene" data-scene=\'' + JSON.stringify(hotspot.scene) + '\'></div>');
if(hotspot.popup&&hotspot.popup.titleColor){
$title.css('color', hotspot.popup.titleColor);
}
$container.append($title);
}
$el.append($container);
var $clickOffset=jQuery('<span class="mv360tour-hotspot__click" data-scene=\'' + JSON.stringify(hotspot.scene) + '\'></span>');
$el.append($clickOffset);
$clickOffset.bind('click touchend', this.toggleHotspot.bind(this));
if(!this.isTouch()){
if($title){
$container.bind('click touchend', this.changeScene.bind(this));
}else{
$clickOffset.bind('click touchend', this.changeScene.bind(this));
}}else{
$clickOffset.bind('click touchend', this.changeScene.bind(this));
}
break;
default:
}
var paddingLeftRight=40;
if(hotspot.popup&&hotspot.popup.width){
$container.css('width', parseInt(hotspot.popup.width)+paddingLeftRight+'px');
}
if(this.embed){
$container.css('max-width', parseInt(this.$embedEl.width())-paddingLeftRight+'px');
}
$arrow=jQuery('<span class="mv360tour-hotspot__container__arrow"></span>')
$arrowShadow=jQuery('<span class="mv360tour-hotspot__container__arrow-shadow"></span>')
if(hotspot.popup&&hotspot.popup.titleBgColor){
$container.css('background-color', hotspot.popup.titleBgColor);
$container.css('color', hotspot.popup.titleBgColor);
$arrow.css('border-top-color', hotspot.popup.titleBgColor);
}
$container.append($arrow);
$container.append($arrowShadow);
if(this.embed){
jQuery(window).bind('resize', this.resizeEmbedContainerHotspot.bind(this));
this.resizeEmbedContainerHotspot();
}
return $el.get(0);
};
MV360TourPublic.prototype.resizeEmbedContainerHotspot=function(e){
this.$el.find('.mv360tour-hotspot__container').each(function(i,e){
jQuery(e).css('max-width', (this.$wrapper.width()-20)+'px');
}.bind(this));
};
MV360TourPublic.prototype.closeHotspotMobile=function(e){
e.preventDefault();
var $e=jQuery(e.currentTarget);
$e.parent().remove();
jQuery('.mv360tour-hotspot').focus();
};
MV360TourPublic.prototype.toggleHotspot=function(e){
e.preventDefault();
var $e=jQuery(e.currentTarget).parent();
if(this.isTouch()){
var $content=$e.find('.mv360tour-hotspot__container').clone();
if(!$content.hasClass('mv360tour-hotspot__container--scene')){
$content.addClass('mv360tour-hotspot__container--body');
var $closeHotspot=jQuery('<a href="#" class="j-mv360tour-hotspot-body-remove mv360tour-hotspot__container__remove"><span class="mv360tour-hotspot__container__remove__horizontal"></span><span class="mv360tour-hotspot__container__remove__vertical"></span></a>');
if(this.options.secondaryColor){
$closeHotspot.find('span').css('background-color', this.options.secondaryColor);
}
$closeHotspot.bind('click', this.closeHotspotMobile.bind(this));
$content.prepend($closeHotspot);
this.$el.append($content);
}}else{
if($e.hasClass('is-open')){
this.startAutorotate();
$e.removeClass('is-open');
setTimeout(function(){
$e.removeClass('is-front');
}, 400);
}else{
this.stopAutorotate();
$e.addClass('is-front');
setTimeout(function(){
$e.addClass('is-open');
}, 10);
this.viewer.lookTo(this.viewer._currentScene._view.screenToCoordinates({x:$e.offset().left-this.$el.offset().left, y: $e.offset().top-this.$el.offset().top-(this.$el.height()/4)}));
}}
};
MV360TourPublic.prototype.getVideoEmbed=function(url){
var retUrl='';
var iframeMarkup='';
if(url.indexOf('vimeo')!==-1){
var vimeoRegex=/(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
var parsed=url.match(vimeoRegex);
if(parsed&&parsed[1]){
retUrl='//player.vimeo.com/video/' + parsed[1];
}}else if(url.indexOf('youtube')!==-1){
var regExp=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match=url.match(regExp);
if(match&&match[2].length==11){
var id=match[2];
retUrl='//www.youtube.com/embed/' + id;
}}
if(retUrl){
iframeMarkup='<iframe src="' + retUrl + '" frameborder="0" allowfullscreen></iframe>';
}
return iframeMarkup;
};
MV360TourPublic.prototype.closeAllHotspot=function(){
this.$el.find('.mv360tour-hotspot').removeClass('is-open');
this.$el.find('.mv360tour-hotspot').removeClass('is-front');
this.$el.find('.mv360tour-hotspot-icon').removeClass('is-front');
this.$el.find('.mv360tour-hotspot-icon').removeClass('is-open');
};
MV360TourPublic.prototype.changeScene=function(e, newScene){
this.$controls.removeClass('is-visible');
this.video.src='';
var scene='';
if(e){
e.preventDefault();
scene=jQuery(e.currentTarget).data('scene');
scene=this.getScene(jQuery(e.currentTarget).data('scene'));
}else{
scene=newScene;
}
if(this.activeScene==scene.data.id){
if(scene.data.position&&scene.data.position.yaw&&scene.data.position.pitch){
this.viewer.lookTo(scene.data.position);
}}else{
this.closeAllHotspot();
scene.scene.switchTo();
this.activeScene=scene.data.id;
this.$titleSceneText.html(scene.data.title);
if(scene&&scene.data&&scene.data.video){
this.asset=scene.data.video.asset;
this.$controls.addClass('is-visible');
this.video.src=scene.data.video.src;
if(this.isMobileOs()){
this.$playMobile.addClass('is-open');
}
this.waitForReadyState(this.video, this.video.HAVE_METADATA, 100, function(){
this.waitForReadyState(this.video, this.video.HAVE_ENOUGH_DATA, 100, function(){
this.asset.setVideo(this.video);
this.video.play();
}.bind(this));
}.bind(this));
}
if(scene.position){
scene.scene.lookTo(scene.position, {transitionDuration:0});
}}
this.activeSceneId=scene.id;
if(this.$menuOverlay&&this.$menuOverlay.hasClass('is-open')){
this.toggleMenu();
}};
MV360TourPublic.prototype.updateDurationIndicator=function(){
var videoDuration=this.video ? this.formatTime(this.video.duration):'-';
this.$durationIndicatorElement.html(videoDuration);
}
MV360TourPublic.prototype.formatTime=function(d){
var h=Math.floor(d / 3600);
var m=Math.floor(d % 3600 / 60);
var s=Math.floor(d % 3600 % 60);
return ((h > 0 ? h + ":" + (m < 10 ? "0":""):"") + m + ":" + (s < 10 ? "0":"") + s);
};
MV360TourPublic.prototype.mute=function(e){
e.preventDefault();
if(!this.video){
return;
}
var newVolume=0;
if(this.video.volume > 0){
this.$muteElement.addClass('is-mute');
}else{
this.$muteElement.removeClass('is-mute');
newVolume=1;
}
this.video.volume=newVolume;
};
MV360TourPublic.prototype.playPause=function(e){
e.preventDefault();
if(!this.video){
return;
}
if(this.video.paused){
var playPromise=this.video.play();
if(playPromise!=='undefined'){
playPromise.then(function(){
this.$playMobile.removeClass('is-open');
}.bind(this)).catch(function(error){
this.$playMobile.addClass('is-open');
}.bind(this));
}
this.$playPauseElement.addClass('is-pause');
}else{
this.video.pause();
this.$playPauseElement.removeClass('is-pause');
}};
MV360TourPublic.prototype.updateCurrentTimeIndicator=function(e){
var html=this.video ? this.formatTime(this.video.currentTime):'-';
this.$currentTimeIndicatorElement.html(html);
};
MV360TourPublic.prototype.updateProgressBar=function(e){
if(!this.video){
return;
}
var progress=this.video.currentTime / this.video.duration;
this.$progressFillElement.width((progress * 100) + '%');
};
MV360TourPublic.prototype.progressBackground=function(e){
if(!this.video){
return;
}
this.video.currentTime=this.percentFromClick(e) * this.video.duration;
};
MV360TourPublic.prototype.percentFromClick=function(e){
var rect=this.$progressBackgroundElement.get(0).getBoundingClientRect();
var click=e.clientX - rect.left;
var total=rect.right - rect.left;
return click / total;
};
MV360TourPublic.prototype.waitForReadyState=function(element, readyState, interval, done){
var timer=setInterval(function(){
if(element.readyState >=readyState){
clearInterval(timer);
done(null, true);
}}, interval);
};
function MV360TourPublicDeviceOrientationControlMethod(){
this._dynamics={
yaw: new Marzipano.Dynamics(),
pitch: new Marzipano.Dynamics()
};
this._deviceOrientationHandler=this._handleData.bind(this);
if(window.DeviceOrientationEvent){
window.addEventListener('deviceorientation', this._deviceOrientationHandler);
}
this._previous={};
this._current={};
this._tmp={};
this._getPitchCallbacks=[];
}
Marzipano.dependencies.eventEmitter(MV360TourPublicDeviceOrientationControlMethod);
MV360TourPublicDeviceOrientationControlMethod.prototype.destroy=function(){
this._dynamics=null;
if(window.DeviceOrientationEvent){
window.removeEventListener('deviceorientation', this._deviceOrientationHandler);
}
this._deviceOrientationHandler=null;
this._previous=null;
this._current=null;
this._tmp=null;
this._getPitchCallbacks=null;
};
MV360TourPublicDeviceOrientationControlMethod.prototype.getPitch=function(cb){
this._getPitchCallbacks.push(cb);
};
MV360TourPublicDeviceOrientationControlMethod.prototype._handleData=function(data){
var previous=this._previous,
current=this._current,
tmp=this._tmp;
tmp.yaw=Marzipano.util.degToRad(data.alpha);
tmp.pitch=Marzipano.util.degToRad(data.beta);
tmp.roll=Marzipano.util.degToRad(data.gamma);
rotateEuler(tmp, current);
this._getPitchCallbacks.forEach(function(callback){
callback(null, current.pitch);
});
this._getPitchCallbacks.length=0;
if(previous.yaw!=null&&previous.pitch!=null&&previous.roll!=null){
this._dynamics.yaw.offset=-(current.yaw - previous.yaw);
this._dynamics.pitch.offset=(current.pitch - previous.pitch);
this.emit('parameterDynamics', 'yaw', this._dynamics.yaw);
this.emit('parameterDynamics', 'pitch', this._dynamics.pitch);
}
previous.yaw=current.yaw;
previous.pitch=current.pitch;
previous.roll=current.roll;
};
function rotateEuler(euler, result){
var heading, bank, attitude,
ch=Math.cos(euler.yaw),
sh=Math.sin(euler.yaw),
ca=Math.cos(euler.pitch),
sa=Math.sin(euler.pitch),
cb=Math.cos(euler.roll),
sb=Math.sin(euler.roll),
matrix=[
sh*sb - ch*sa*cb,   -ch*ca,    ch*sa*sb + sh*cb,
ca*cb,              -sa,      -ca*sb,
sh*sa*cb + ch*sb,    sh*ca,   -sh*sa*sb + ch*cb
];
if(matrix[3] > 0.9999){
heading=Math.atan2(matrix[2],matrix[8]);
attitude=Math.PI/2;
bank=0;
}
else if(matrix[3] < -0.9999){
heading=Math.atan2(matrix[2],matrix[8]);
attitude=-Math.PI/2;
bank=0;
}else{
heading=Math.atan2(-matrix[6],matrix[0]);
bank=Math.atan2(-matrix[5],matrix[4]);
attitude=Math.asin(matrix[3]);
}
result.yaw=heading;
result.pitch=attitude;
result.roll=bank;
};