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://camgroundviews13f7bb-virtualtour.azureedge.net/728cc7e1540b41b78481747d2b97cc06/66d91fb1-6e41-4045-ab7b-63abdf9c7a7b.m3u8';
var campgroundName = 'Bagby Campground and Recreation Area';
var showAds = '0';
var odd = '1';
var bEnable = '1';
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 = "https://360cgv-assets.azureedge.net/audio/Lux-Inspira-Baby-Smile.mp3";
var granted = false;
var firstPlay = 0;
const videoAdUrl = "url";
var jsonStr = '[{"PlayerId":1,"Id":33,"Label":"CampgroundViewsJingle.mp3","AudioUrl":"/api/campground/0/360-audio/33","Skip":0,"Loop":0,"Order":1,"Random":0},{"PlayerId":2,"Id":34,"Label":"WelcomeVoice.mp3","AudioUrl":"/api/campground/0/360-audio/34","Skip":0,"Loop":0,"Order":2,"Random":0},{"PlayerId":3,"Id":35,"Label":"DumpingtheTanks.mp3","AudioUrl":"/api/campground/0/360-audio/35","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":36,"Label":"WhydoIhavetocall.mp3","AudioUrl":"/api/campground/0/360-audio/36","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":37,"Label":"FirstComeFirstServed.mp3","AudioUrl":"/api/campground/0/360-audio/37","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":38,"Label":"MyAmericanDream.mp3","AudioUrl":"/api/campground/0/360-audio/38","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":39,"Label":"CampingWeekend.mp3","AudioUrl":"/api/campground/0/360-audio/39","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":19,"Label":"BetweentheLines.mp3","AudioUrl":"/api/campground/0/360-audio/19","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":20,"Label":"LostandFoundButMostlyLost.mp3","AudioUrl":"/api/campground/0/360-audio/20","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":21,"Label":"RollinHome.mp3","AudioUrl":"/api/campground/0/360-audio/21","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":22,"Label":"FasttoCampSlowtoHome.mp3","AudioUrl":"/api/campground/0/360-audio/22","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":23,"Label":"CampgroundViewsAnthem.mp3","AudioUrl":"/api/campground/0/360-audio/23","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":24,"Label":"CampgroundViewsAnthemToo.mp3","AudioUrl":"/api/campground/0/360-audio/24","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":17,"Label":"FreedomontheOpenRoad.mp3","AudioUrl":"/api/campground/0/360-audio/17","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":18,"Label":"ReadytoRoll.mp3","AudioUrl":"/api/campground/0/360-audio/18","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":25,"Label":"CampgroundViewsAdventure.mp3","AudioUrl":"/api/campground/0/360-audio/25","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":49,"Label":"Igetthingsdone.mp3","AudioUrl":"/api/campground/0/360-audio/49","Skip":0,"Loop":0,"Order":3,"Random":1},{"PlayerId":3,"Id":53,"Label":"OurnewRV.mp3","AudioUrl":"/api/campground/0/360-audio/53","Skip":0,"Loop":0,"Order":3,"Random":1}]';
var audios = JSON.parse(jsonStr.replace(/"/g,'"'));

var jsonAdStr = '[{"Id":3,"Label":"15s video - portrait video.mp4","AdUrl":"/api/campground/0/360-ads/3"},{"Id":4,"Label":"N13 New Ad Video - Vince.mp4","AdUrl":"/api/campground/0/360-ads/4"},{"Id":5,"Label":"Garnet - Seelevel Commercial V3 (Compressed).mp4","AdUrl":"/api/campground/0/360-ads/5"}]';
var ads = JSON.parse(jsonAdStr.replace(/"/g,'"'));
;
var i = 0;

var audioPlayer = document.createElement('audio');
  audioPlayer.setAttribute('id', 'audioplayer');
  audioPlayer.setAttribute('controls', 'true');
  audioPlayer.setAttribute('crossorigin', 'anonymous');
  audioPlayer.setAttribute('class', 'video-js');
  playerDiv.append(audioPlayer);

var player2 = videojs('audioplayer', {
  autoplay: false,
  loop: false
});

var pluginInData = {
  parentId: 847,
  campgroundName: 'Bagby Campground and Recreation Area',
  startDate: new Date(1726358400000),
  endDate: new Date(1726531200000),
  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 PopUp(){
  var popupContainer = document.getElementById("cgvSpeed");
  var popupBox = document.createElement('div');
  var closeBtn = document.createElement('span');
  var popUpCntnt = document.createElement('div');
  var fastBtn = document.createElement('button');
  var perfectBtn = document.createElement('button');
  var slowBtn = document.createElement('button');


  popUpCntnt.className = 'popup-content';
  popUpCntnt.setAttribute("id", "popup-content-div");
  popupBox.className = 'popup-box';
  popupBox.setAttribute("id", "popup-box-cntn");
  popupBox.appendChild(popUpCntnt);
  popUpCntnt.innerHTML = '<h6 id="popup-title-text">How\'s the speed?</h6>';

  perfectBtn.setAttribute("id", "perfect-pb-btn");
  fastBtn.setAttribute("id", "fast-pb-btn");
  slowBtn.setAttribute("id", "slow-pb-btn");

  perfectBtn.className = 'popup-btn-speed';
  fastBtn.className = 'popup-btn-speed';
  slowBtn.className = 'popup-btn-speed';

  
  perfectBtn.innerHTML = 'Perfect';
  fastBtn.innerHTML = 'Too Fast';
  slowBtn.innerHTML = 'Too Slow';

  popUpCntnt.appendChild(fastBtn);
  popUpCntnt.appendChild(perfectBtn);
  popUpCntnt.appendChild(slowBtn);

  closeBtn.className = 'close-btn-popup';
  closeBtn.innerHTML = '&times;';

  popupBox.appendChild(closeBtn);
  popupContainer.appendChild(popupBox);

  closeBtn.addEventListener('click', function() {
    var popupBox = document.getElementById("popup-box-cntn");
    popupContainer.removeChild(popupBox);
  });

  fastBtn.addEventListener('click', function() {
    var title = document.getElementById('popup-title-text');
    title.textContent = 'Is that better?';
    const rate = player.playbackRate();
    if (rate == 0.75) {
      player.playbackRate(0.50);
    } else {
      player.playbackRate(0.75);
    }

    if (!player.paused) {
      player.pause();
      player.play();
    }    
  });
  perfectBtn.addEventListener('click', function() {
    var popupBox = document.getElementById("popup-box-cntn");
    popupContainer.removeChild(popupBox);
    firstPlay++;
  });
  slowBtn.addEventListener('click', function() {
    var title = document.getElementById('popup-title-text');
    title.textContent = 'Is that better?';
    const rate = player.playbackRate();
    if (rate == 1.25) {
      player.playbackRate(1.50);
    } else {
      player.playbackRate(1.25);
    }

    if (!player.paused) {
      player.pause();
      player.play();
    }
  });
}

function ThreeSixtyPlayerEvents() {
  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
      });
    }
    player2.pause();
  });

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

  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";
    if (firstPlay == 0) {
      firstPlay++;
    } else if (firstPlay == 1) {
      setTimeout(function () { PopUp() }, 5000);
      var videoEl = document.getElementsByTagName("video")[0];
      if (videoEl.currentTime < 1) {
        v
      }
      player2.play();
    } else {
      player2.play();
    }
  });

  player.on('ended', function () {
    gtag("event", "video_stop", {
          video_stop: 1
        });
  });

  player.on('volumechange', function () {
    if (player.muted()) {
      player2.muted(true)
    } else {
      player2.muted(false);
    }
    player2.volume(player.volume());
  });

  player.on('ratechange', 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() {
  player.threeSixty(pluginInData);
  cgvCInfo.style.display = 'block';
  cgvPLink.style.display = 'block';
  player.muted(false);  
  videoUrl = 'https://camgroundviews13f7bb-virtualtour.azureedge.net/728cc7e1540b41b78481747d2b97cc06/66d91fb1-6e41-4045-ab7b-63abdf9c7a7b.m3u8';
  player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
  ThreeSixtyPlayerEvents();
}

function externalAudioPlayer() {
  audioURL = 'https://360.campgroundviews.com' + audios[i].AudioUrl;
  player2.src({ src: audioURL, type: 'audio/mp3' });
}

function externalAudioEvents() {
  player2.on('ended', function () {
    let randomAudio = 1;
    if (i === audios.length - 1) {
      i = 0;
    } else {
      i++;
      if (audios[i].Random == 0) {
        audioURL = 'https://360.campgroundviews.com' + audios[i].AudioUrl;
      } else {
        do{
          randomAudio = randomIntFromInterval(1, audios.length - 1);
        }while(audios[randomAudio].Random == 0);
        audioURL = 'https://360.campgroundviews.com' + audios[randomAudio].AudioUrl;
      }
    }

    player2.dispose();
    var audioPlayer = document.createElement('audio');
    audioPlayer.setAttribute('id', 'audioplayer' + i.toString());
    audioPlayer.setAttribute('controls', 'true');
    audioPlayer.setAttribute('crossorigin', 'anonymous');
    audioPlayer.setAttribute('class', 'video-js');
    playerDiv.append(audioPlayer);

    player2 = videojs('audioplayer' + i.toString(), {
      autoplay: false,
      muted: player.muted(),
      loop: false
    });
    player2.volume(player.volume());
   player2.src({ src: audioURL, type: 'audio/mp3' });
   externalAudioEvents();

   if (!player.paused()){
     player2.play();
   } else {
     player2.pause();
   }
  });

}

var videoOptions = {
  nativeControlsForTouch: false,
  autoplay: false,
  fill: true,
  muted: false,
  preload: "metadata",
  poster: "",
  playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
  inactivityTimeout: 0,
  controlBar: {
    pictureInPictureToggle: false,
    volumePanel: {inline: false},
    fullscreenToggle: true,
    subsCapsButton: false
  },
  techOrder: ["html5"],
  html5: {
    vhs: {
      overrideNative: true,
      useNetworkInformationApi: true,
      enableLowInitialPlaylist: false,
      limitRenditionByPlayerDimensions: false,
      useDevicePixelRatio: true,
    },
    nativeAudioTracks: false,
    nativeVideoTracks: false,
    nativeTextTracks: 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);
}

var adsCount = (ads != undefined || ads != null) ? ads.length : 1;
const preRollIndx = randomIntFromInterval(1, adsCount);
const postRollIndx = randomIntFromInterval(1, adsCount);

if (odd == '2') {
  if (ads != undefined || ads != null) {
    var bFirst = true;
    cgvCInfo.style.display = 'none';
    cgvPLink.style.display = 'none';
    videoUrl = 'https://360.campgroundviews.com' + ads[preRollIndx-1].AdUrl;
    player.muted(false);
    player.src({ src: videoUrl, type: 'video/mp4' });
    player.on('ready', function() { console.log('ready')});
    player.on('play', function () {
      gtag("event", "video_ad_play", {
          video_ad_play: 1
        });
    });
    player.on('ended', function () {
      if(bFirst) {
        gtag("event", "video_ad_stop", {
          video_ad_stop: 1
        });
        ThreeSixtyPlayer();
        if(bEnable == '1') {
          externalAudioPlayer();
          externalAudioEvents();
        }
        bFirst = false;
      }
    });
  } else {
    ThreeSixtyPlayer();
    if(bEnable == '1') {
      externalAudioPlayer();
      externalAudioEvents();
    }
  }

} else if (odd == '3') {
  if (ads != undefined || ads != null)
  {
    var bFirst = true;
    cgvCInfo.style.display = 'none';
    cgvPLink.style.display = 'none';
    videoUrl = 'https://360.campgroundviews.com' + ads[preRollIndx-1].AdUrl;
    player.muted(false);
    player.src({ src: videoUrl, type: 'video/mp4' });
    player.on('play', function () {
      gtag("event", "video_ad_play", {
          video_ad_play: 1
        });
    });
    player.on('ended', function () {
      if (bFirst == true) {
        gtag("event", "video_ad_stop", {
          video_ad_stop: 1
        });
        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 = 'https://360.campgroundviews.com' + ads[postRollIndx-1].AdUrl;
        //videoUrl = videoAdUrl + "?ad=ads&ad.lib==ads" + postRollIndx + "&ad.postroll=1";
        player.src({ src: videoUrl, type: 'video/mp4' });
        player.play();
        bFirst = true;
        player.on('ended', function () {
          if (bFirst == true) {
            externalAudioPlayer();
            ThreeSixtyPlayer();
            externalAudioEvents();
            bFirst = false;
          }
          player2.currentTime(0);
        });

      }
    });
  } else {
    ThreeSixtyPlayer();
    if(bEnable == '1') {
      externalAudioPlayer();
      externalAudioEvents();
    }
  }
} else {
  player.muted(false);
  ThreeSixtyPlayer();
  player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
  if(bEnable == '1') {
    externalAudioPlayer();
    externalAudioEvents();
  }
}