'use strict';

(function() {
  var Marzipano = window.Marzipano;
  var bowser = window.bowser;
  var data = window.data;
  var sceneElements;
  var type;

  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  
  // Grab elements from DOM.
  var panoElement = document.querySelector('#pano');
  var autorotateToggleElement = document.querySelector('#autorotateToggle');


 // Detect desktop or mobile mode.
  if (window.matchMedia) {
    var setMode = function() {
      if (mql.matches) {
        document.body.classList.remove('desktop');
        document.body.classList.add('mobile');
		type="mobile";
      } else {
        document.body.classList.remove('mobile');
        document.body.classList.add('desktop');
		type="desktop";
      }
    };
    var mql = matchMedia("(max-width: 768px), (max-height: 500px)");
    setMode();
    mql.addListener(setMode);
	
  } else {
    document.body.classList.add('desktop');
	type="desktop";
  }
  
  var limiter;
  
  if(type == "mobile"){
	  sceneElements = document.querySelectorAll('#mobile #sceneList .scene');
	  
	  limiter = Marzipano.util.compose(
	  Marzipano.RectilinearView.limit.vfov(0.15, 2.2),
	  Marzipano.RectilinearView.limit.hfov(0.15, 2.2),
	  Marzipano.RectilinearView.limit.pitch(-Math.PI/2, Math.PI/2));
	  
  }else if(type == "desktop"){
	  sceneElements = document.querySelectorAll('#desktop #sceneList .scene');
	  
	  limiter = Marzipano.util.compose(
	  Marzipano.RectilinearView.limit.vfov(0.3, 2.35),
	  Marzipano.RectilinearView.limit.hfov(0.3, 2.35),
	  Marzipano.RectilinearView.limit.pitch(-Math.PI/2, Math.PI/2));
  }
  
  // Detect whether we are on a touch device.
  document.body.classList.add('no-touch');
  window.addEventListener('touchstart', function() {
    document.body.classList.remove('no-touch');
    document.body.classList.add('touch');

  });

  // Use tooltip fallback mode on IE < 11.
  if (bowser.msie && parseFloat(bowser.version) < 11) {
    document.body.classList.add('tooltip-fallback');
  }

  // Viewer options.
  var viewerOpts = {
    controls: {
      mouseViewMode: data.settings.mouseViewMode
    }
  };

  // Initialize viewer.
  var viewer = new Marzipano.Viewer(panoElement, viewerOpts);


	var autorotate = Marzipano.autorotate({
	  yawSpeed: 0.005, 		// Yaw rotation speed
	  pitchSpeed: 0.005,
	  targetPitch: -0.001,        // Pitch value
	  targetFov: Math.PI/2   // Fov value
	});
  if (data.settings.autorotateEnabled) {
    autorotateToggleElement.classList.add('enabled');
  }

  // Set handler for autorotate toggle.
  autorotateToggleElement.addEventListener('click', toggleAutorotate);

	//viewer.setIdleMovement(8000, autorotate);

  // Create scenes.
  var scenes = data.scenes.map(function(data) {
	var urlPrefix = "tiles";
    var source = Marzipano.ImageUrlSource.fromString(
      urlPrefix + "/" + data.id + "/{z}/{f}/{y}/{x}.jpg",
     { cubeMapPreviewUrl: urlPrefix + "/" + data.id + "/preview.jpg" });
	
	
    var geometry = new Marzipano.CubeGeometry(data.levels);
  
  
    var view = new Marzipano.RectilinearView(data.initialViewParameters, limiter);

    var scene = viewer.createScene({
      source: source,
      geometry: geometry,
      view: view,
      pinFirstLevel: true
    });
	
	
    // Create info hotspots.
    data.infoHotspots.forEach(function(hotspot) {
      var element = createInfoHotspotElement(hotspot);
      scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });
    });

    return {
      data: data,
      scene: scene,
      view: view
    };
  });
  
  // Set handler for scene switch(mobile and desktop).
   if(type == "mobile"){
		scenes.forEach(function(scene) {
      var el = document.querySelector('#mobile #sceneList .scenes .scene[data-id="' + scene.data.id + '"]');
	if(el != null){
      window.onload=el.addEventListener('click', function() {
        switchScene(scene);
	});}
    });
  }else if(type == "desktop"){
    scenes.forEach(function(scene) {
      var el = document.querySelector('#desktop #sceneList .scenes .scene[data-id="' + scene.data.id + '"]');
      if(el != null){
		  window.onload=el.addEventListener('click', function() {
        switchScene(scene);
      });}
    });
  }
  // DOM elements for view controls.
  var viewUpElement = document.querySelector('#viewUp');
  var viewDownElement = document.querySelector('#viewDown');
  var viewLeftElement = document.querySelector('#viewLeft');
  var viewRightElement = document.querySelector('#viewRight');
  var viewInElement = document.querySelector('#viewIn');
  var viewOutElement = document.querySelector('#viewOut');

  // Dynamic parameters for controls.
  var velocity = 0.7;
  var friction = 3;

  // Associate view controls with elements.
  var controls = viewer.controls();
  controls.registerMethod('upElement',    new Marzipano.ElementPressControlMethod(viewUpElement,     'y', -velocity, friction), true);
  controls.registerMethod('downElement',  new Marzipano.ElementPressControlMethod(viewDownElement,   'y',  velocity, friction), true);
  controls.registerMethod('leftElement',  new Marzipano.ElementPressControlMethod(viewLeftElement,   'x', -velocity, friction), true);
  controls.registerMethod('rightElement', new Marzipano.ElementPressControlMethod(viewRightElement,  'x',  velocity, friction), true);
  controls.registerMethod('inElement',    new Marzipano.ElementPressControlMethod(viewInElement,  'zoom', -velocity, friction), true);
  controls.registerMethod('outElement',   new Marzipano.ElementPressControlMethod(viewOutElement, 'zoom',  velocity, friction), true);

  function switchScene(scene) {
    scene.view.setParameters(scene.data.initialViewParameters);
    scene.scene.switchTo();
    updateSceneList(scene);
  }

  function updateSceneList(scene) {
    for (var i = 0; i < sceneElements.length; i++) {
      var el = sceneElements[i];
      if (el.getAttribute('data-id') === scene.data.id) {
        el.classList.add('current');
		el.setAttribute("id", "active_id");
      } else {
        el.classList.remove('current');
		el.removeAttribute("id");
      }
    }
  }

  function startAutorotate() {
    if (!autorotateToggleElement.classList.contains('enabled')) {
      return;
    }
    viewer.startMovement(autorotate);
    //viewer.setIdleMovement(3000, autorotate);
  }

  function stopAutorotate() {
    viewer.stopMovement();
    viewer.setIdleMovement(Infinity);
  }

  function toggleAutorotate() {
    if (autorotateToggleElement.classList.contains('enabled')) {
      autorotateToggleElement.classList.remove('enabled');
      stopAutorotate();
    } else {
      autorotateToggleElement.classList.add('enabled');
      startAutorotate();
    }
  }

  function createInfoHotspotElement(hotspot) {

    var wrapper = document.createElement('div');
    wrapper.classList.add('hotspot');
    wrapper.classList.add('info-hotspot');

    var header = document.createElement('div');
    var titleWrapper = document.createElement('div');
    var title = document.createElement('div');
    var closeWrapper = document.createElement('div');

    switch(hotspot.color){
      case "blue":
          header.classList.add('info-hotspot-header-blue');
          titleWrapper.classList.add('info-hotspot-title-wrapper');
          title.classList.add('info-hotspot-title');
          title.innerHTML = hotspot.title;
          titleWrapper.appendChild(title);
        break;
      case "green":
          header.classList.add('info-hotspot-header-green');
          titleWrapper.classList.add('info-hotspot-title-wrapper');
          title.classList.add('info-hotspot-title');
          title.innerHTML = hotspot.title;
          titleWrapper.appendChild(title);
        break;
      case "yellow":
          header.classList.add('info-hotspot-header-yellow');
          titleWrapper.classList.add('info-hotspot-title-wrapper');
          title.classList.add('info-hotspot-title');
          title.innerHTML = hotspot.title;
          titleWrapper.appendChild(title);
        break;
      case "pink":
          header.classList.add('info-hotspot-header-pink');
          titleWrapper.classList.add('info-hotspot-title-wrapper');
          title.classList.add('info-hotspot-title');
          title.innerHTML = hotspot.title;
          titleWrapper.appendChild(title);
        break;
	case "red":
          header.classList.add('info-hotspot-header-red');
          titleWrapper.classList.add('info-hotspot-title-wrapper');
          title.classList.add('info-hotspot-title');
          title.innerHTML = hotspot.title;
          titleWrapper.appendChild(title);
        break;
    }

    closeWrapper.classList.add('info-hotspot-close-wrapper');
    // Create close element.
    var closeIcon = document.createElement('img');
    closeIcon.src = 'img/close.png';
    closeIcon.classList.add('info-hotspot-close-icon');
    closeWrapper.appendChild(closeIcon);

    // Construct header element.
    header.appendChild(titleWrapper);
    header.appendChild(closeWrapper);

    // Create text element.
    var text = document.createElement('div');
    text.classList.add('info-hotspot-text');
    text.innerHTML = hotspot.text;

    // Place header and text into wrapper element.
    wrapper.appendChild(header);
    wrapper.appendChild(text);
	
	
    // Create a modal for the hotspot content to appear on mobile mode.
    var modal = document.createElement('div');
    modal.innerHTML = wrapper.innerHTML;
    modal.classList.add('info-hotspot-modal');
	
    document.body.appendChild(modal);
	
    var toggle = function() {
		wrapper.classList.toggle('visible');
		modal.classList.toggle('visible');
		
		var existVisible = document.getElementsByClassName("visible");
		if(existVisible.length > 0){
      autorotateToggleElement.classList.remove('enabled');
			viewer.stopMovement();
		}else if(existVisible.length == 0){
			viewer.startMovement(autorotate); 
      autorotateToggleElement.classList.add('enabled');
		}
    };
	

    switch(hotspot.color){
      case "blue":
          wrapper.querySelector('.info-hotspot-header-blue').addEventListener('click', toggle);
        break;
      case "green":
          wrapper.querySelector('.info-hotspot-header-green').addEventListener('click', toggle);
        break;
      case "yellow":  
          wrapper.querySelector('.info-hotspot-header-yellow').addEventListener('click', toggle);
        break;
      case "pink":
          wrapper.querySelector('.info-hotspot-header-pink').addEventListener('click', toggle);
        break;
		case "red":
          wrapper.querySelector('.info-hotspot-header-red').addEventListener('click', toggle);
        break;
    }

	
		  // Hide content when close icon is clicked.
    modal.querySelector('.info-hotspot-close-wrapper').addEventListener('click', toggle);
			  

    // Prevent touch and scroll events from reaching the parent element.
    // This prevents the view control logic from interfering with the hotspot.
    stopTouchAndScrollEventPropagation(wrapper);

    return wrapper;
  }

  // Prevent touch and scroll events from reaching the parent element.
  function stopTouchAndScrollEventPropagation(element, eventList) {
    var eventList = [ 'touchstart', 'touchmove', 'touchend', 'touchcancel',
                      'wheel', 'mousewheel' ];
    for (var i = 0; i < eventList.length; i++) {
      element.addEventListener(eventList[i], function(event) {
        event.stopPropagation();
      });
    }
  }
  switchScene(scenes[0]);

  
  
  var listHotspots = document.getElementsByClassName("hotspot");
  
  viewer.startMovement(autorotate);

	
  function closeBox(){
    document.getElementById("pano").style.pointerEvents = "auto";
	var listHotspots = document.getElementsByClassName("hotspot");
	for (var i = 0; i < listHotspots.length; i++) {
		listHotspots[i].style.pointerEvents = "auto";
	}
	viewer.stopMovement();
  }


  
  $(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});
  
  function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
  }
  
  
})();