var isIOSEmulator = navigator.appVersion.includes('iPad') || navigator.appVersion.includes('iPhone') || navigator.appVersion.includes('iPod') ? true : false;
var isIPhone = (navigator.appVersion.includes('iPhone')) || (/iPhone/.test(navigator.platform));
var isIOSDevice = (/iPad|iPhone|iPod/.test(navigator.platform) || isIOSEmulator ||
  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
  !window.MSStream;
var videoUrl = 'https://360virtualtour-usct.streaming.media.azure.net/ebdcd21b-7806-4521-8f36-9e0440692edf/Video-313a75926abf4cadac0a451e31.ism/manifest(format=m3u8-aapl)';
var campgroundName = 'Willaby Campground';
var showAds = '0';
var odd = '2';
var downlink = navigator.connection != undefined ? navigator.connection.downlink : 0.5;
var computedBandwidth = downlink * 1000000;
var datePicker = document.getElementById("cgvDatesPicker");
var search = document.getElementById("cgvSearch");
var adsLibrary = ['ads', 'ads2', 'ads3', 'ads4', 'ads5'];
var cgvCInfo = document.getElementById("cgvCampgroundInfo");
var cgvPLink = document.getElementById("cgvPoweredLink");
var playerDiv = document.getElementById('playerContainer');
var audioURL = "/audio/Lux-Inspira-Baby-Smile.mp3";
var granted = false;
const videoAdUrl = "https://content.uplynk.com/f01dbe73de764fe7834be9bf14065b92.m3u8";

var pluginInData = {
  parentId: 799,
  campgroundName: 'Willaby Campground',
  startDate: new Date(1714780800000),
  endDate: new Date(1714953600000),
  datePicker: datePicker,
  search: search,
  resourcesCdnEndpoint: 'https://360cgv-assets.azureedge.net',
  playerHost: 'https://360.campgroundviews.com',
  supportsAvailability: true,
  pinTimelineRangeSec: 5,
  isPhone: isIOSDevice
}

function iOSPermission() {
    if (typeof(DeviceOrientationEvent) !== "undefined" && typeof (DeviceOrientationEvent).requestPermission === "function") {
        if (granted == false) {
            DeviceOrientationEvent.requestPermission()
                .then(response => {
                    if (response == "granted") {
                        window.addEventListener("deviceorientation", (e) => { });
                        granted = true;
                    }
                }).catch(console.error)
        }
    } else {
        //do nothing 
    }
}

function randomIntFromInterval(min, max) { // min and max included
  return Math.floor(Math.random() * (max - min + 1) + min)
}

function ThreeSixtyPlayerEvents() {
  player.threeSixty(pluginInData);
  player.on('pause', function () {
    var videoEl = document.getElementsByTagName("video")[0];
    if (videoEl.currentTime < 1) {
      document.querySelector(".vjs-big-play-button").style.opacity = "1";
      document.querySelector(".vjs-big-play-button").style.visibility = "visible";
      document.querySelector(".vjs-big-play-button").style.display = "block";
    }

    if (videoEl.currentTime > 1) {
      gtag("event", "video_pause", {
        paused: 1
      });
    }
  });

  player.on('play', function () {
    document.querySelector(".vjs-big-play-button").style.opacity = "0";
    document.querySelector(".vjs-big-play-button").style.visibility = "hidden";
    document.querySelector(".vjs-big-play-button").style.display = "none";
    var videoEl = document.getElementsByTagName("video")[0];
    if (videoEl.currentTime < 1) {
      gtag("event", "video_play", {
        video_play: 1
      });
    }
  });


  player.on('ratechange', function () {
    player.pause();
    player.play();
  });

  let qualityLevels = player.qualityLevels();

  qualityLevels.on('change', function () {
    if (!player.paused) {
      player.pause();
      player.play();
    }
  });


  if (isIOSDevice) {
    player.on('enterFullWindow', function (e) {
      var renderedCanvas = document.getElementsByTagName("canvas")[0];
      if (player.isFullscreen()) {
        var parentEl = renderedCanvas.parentElement;
        var postionInfo = parentEl.getBoundingClientRect();
        renderedCanvas.setAttribute("width", postionInfo.width.toString());
        renderedCanvas.setAttribute("height", postionInfo.height.toString());
      }
    });

    player.on('exitFullWindow', function (e) {
      var renderedCanvas = document.getElementsByTagName("canvas")[0];
      if (!player.isFullscreen()) {
        var parentEl = renderedCanvas.parentElement;
        var postionInfo = parentEl.getBoundingClientRect();
        renderedCanvas.setAttribute("width", postionInfo.width.toString());
        renderedCanvas.setAttribute("height", postionInfo.height.toString());
      }
    });
  }

  player.addChild('BigPlayButton');
  if (!isIPhone) {
    player.qualitySelectorHls({
      displayCurrentQuality: true,
      placementIndex: 2,
      vjsIconClass: "vjs-icon-hd"
    });
  }
}

function ThreeSixtyPlayer() {
  cgvCInfo.style.display = 'block';
  cgvPLink.style.display = 'block';
  player.muted(true);
  ThreeSixtyPlayerEvents();
  videoUrl = 'https://360virtualtour-usct.streaming.media.azure.net/ebdcd21b-7806-4521-8f36-9e0440692edf/Video-313a75926abf4cadac0a451e31.ism/manifest(format=m3u8-aapl)';
  player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
}


var videoOptions = {
  nativeControlsForTouch: false,
  fill: true,
  muted: true,
  preload: "metadata",
  poster: "",
  autoplay: false,
  playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
  inactivityTimeout: 0,
  controlBar: {
    pictureInPictureToggle: false,
    volumePanel: false,
    fullscreenToggle: true
  },
  techOrder: ["html5"],
  html5: {
    vhs: {
      overrideNative: true,
      useNetworkInformationApi: true,
      enableLowInitialPlaylist: false,
      limitRenditionByPlayerDimensions: false,
      useDevicePixelRatio: true,
    },
    nativeAudioTracks: false,
    nativeVideoTracks: false,

  },
  preferFullWindow: isIOSDevice,
  fullscreen: {
    options: { navigationUI: 'show' }
  },
  plugins: {
    hotkeys: {
      volumeStep: 0.1,
      seekStep: 5,
      enableModifiersForNumbers: false,
      enableNumbers: false
    }
  }
};

var player = videojs('player', videoOptions, function () {
  this.off(this.tech_, "mousedown", this.handleTechClick_);

  cgvCInfo.innerHTML = campgroundName;
  cgvPLink.innerHTML = "<a href='https://www.campgroundviews.com/' target='_blank'>Powered by Campground Views</a>";
  datePicker.style.height = '100%';
  datePicker.style.width = document.getElementById("playerContainer").style.width;
});


if (isIOSDevice) {
    var btnOrientation = document.createElement('button');
    btnOrientation.setAttribute('id', 'request');
    btnOrientation.setAttribute('class', 'orientation-button');
    btnOrientation.innerHTML = 'Request device orientation access';
    btnOrientation.addEventListener('click', iOSPermission);
    playerDiv.append(btnOrientation);
}

if (odd == '2') {
  const preRollIndx = randomIntFromInterval(1, 5);
  cgvCInfo.style.display = 'none';
  cgvPLink.style.display = 'none';
  videoUrl = videoAdUrl + "?ad=ads&ad.lib=ads" + preRollIndx + "&ad.preroll=1";
  player.muted(false);
  player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
  player.on('ready', function() { console.log('ready')});
  player.on('ended', function () {
    ThreeSixtyPlayer();
  });
} else if (odd == '3') {
  const preRollIndx = randomIntFromInterval(1, 5);
  const postRollIndx = randomIntFromInterval(1, 5);

  var bFirst = true;
  cgvCInfo.style.display = 'none';
  cgvPLink.style.display = 'none';
  videoUrl = videoAdUrl + "?ad=ads&ad.lib=ads" + preRollIndx + "&ad.preroll=1";
  player.muted(false);
  player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
  player.on('ended', function () {
    if (bFirst == true) {
      ThreeSixtyPlayer();
      bFirst = false;
    } else {
      player2.dispose();
      player.dispose();
      var videoPlayer = document.createElement('video');
      videoPlayer.setAttribute('id', 'player2');
      videoPlayer.setAttribute('controls', 'true');
      videoPlayer.setAttribute('playsInline', 'true');
      videoPlayer.setAttribute('crossorigin', 'anonymous');
      videoPlayer.setAttribute('class', 'video-js');
      var cgvPoweredLink = document.createElement('div');
      cgvPoweredLink.setAttribute('id', 'cgvPoweredLink');
      var cgvCampgroundInfo = document.createElement('div');
      cgvCampgroundInfo.setAttribute('id', 'cgvCampgroundInfo');
      var cgvDatesPicker = document.createElement('div');
      cgvDatesPicker.setAttribute('id', 'cgvDatesPicker');
      var cgvSearch = document.createElement('div');
      cgvSearch.setAttribute('id', 'cgvSearch');

      playerDiv.append(videoPlayer);
      playerDiv.append(cgvPoweredLink);
      playerDiv.append(cgvCampgroundInfo);
      playerDiv.append(cgvDatesPicker);
      playerDiv.append(cgvSearch);

      player = videojs('player2', videoOptions, function () {
        this.off(this.tech_, "mousedown", this.handleTechClick_);

        cgvCInfo.innerHTML = campgroundName;
        cgvPLink.innerHTML = "<a href='https://www.campgroundviews.com/' target='_blank'>Powered by Campground Views</a>";
        datePicker.style.height = '100%';
        datePicker.style.width = document.getElementById("playerContainer").style.width;
      });
      //
      cgvCInfo.style.display = 'none';
      cgvPLink.style.display = 'none';
      //
      player.muted(false);
      videoUrl = videoAdUrl + "?ad=ads&ad.lib==ads" + postRollIndx + "&ad.postroll=1";
      player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
      player.play();
      bFirst = true;
      player.on('ended', function () {
        if (bFirst == true) {
          ThreeSixtyPlayer();
          bFirst = false;
        }
        player2.currentTime(0);
      });

    }
  });
} else {
  player.muted(true);
  ThreeSixtyPlayer();
  player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
  player.on('ready', function() { console.log('ready')});
}