var serviceURL = "https://verify.flickfusion.net/ff_verify_spin.php?";

function FFLoad360(VendorKey,spinDivID,walkAroundID,options){
  erroHandling(VendorKey,spinDivID,walkAroundID,options, function () {
    FFLoad360Main(VendorKey,spinDivID,walkAroundID,options);
  });
}

function FFLoad360Main(VendorKey,spinDivID,walkAroundID,options){

  var serviceKey;
  var videoFkey = walkAroundID.val || document.querySelector('#'+walkAroundID.element).value;

  if (typeof options === "undefined"){
      options= {preload:1};
  }

  if (typeof walkAroundID.type === "undefined"){
      walkAroundID.type="id";
  }

  if(walkAroundID.type === "id")
      serviceKey = "video_fkey="
  if(walkAroundID.type === "vin")
      serviceKey = "vin="

  var playerBlock = document.querySelector("#"+spinDivID);

	requestDataJSONP(serviceURL+serviceKey+videoFkey, "jsoncallback", function(data) {
		if (data.code == 200 && data.spin.data[0].is_360 == 1) {
      if(typeof options === 'object'){
          if(options.preload == 0){
          loadPosterWithThumb(playerBlock,videoFkey, options, 'poster');
          return false;
        }else if(options.button){
          loadPosterWithThumb(playerBlock,videoFkey,options,'popup');
        }else{
          loadFlickPlayer(playerBlock, videoFkey);
        }
     }else{
      loadFlickPlayer(playerBlock, videoFkey);
     }
		} else {
			loadFyuse(videoFkey, playerBlock, options);
			var fyusePlayerAspectRatio = 16/9;
			setPlayerDimentions(playerBlock, fyusePlayerAspectRatio);
		}
	});

}
function erroHandling(VendorKey,spinDivID,walkAroundID,options,runPlayer) {


  if(walkAroundID.val || walkAroundID.element){
    if(walkAroundID.element && document.querySelector('#'+walkAroundID.element) === null || document.querySelector('#'+ spinDivID) === null){
        console.warn('Embed script error..! No valid element found.');
        return false;
    }
    var videoFkey = walkAroundID.val || document.querySelector('#'+walkAroundID.element).value;
  }
  else{
    console.warn('Embed script error..! please check documetation for more details.');
    return false;
  }

  runPlayer(VendorKey,spinDivID,videoFkey,options);
}

function checkValidImage(url) {
  if(!(typeof url === 'object') && url != undefined)
  return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

function loadFlickPlayer(playerBlock,videoFkey) {
  var iframeElement = document.createElement("iframe"),
      playerAspectRatio = 16/9;
      iframeElement.scrolling = "no";
      iframeElement.style.border = "none";
      //iframeElement.src = "https://media.flickfusion.net/p/360.php?io=1&referer=www.autotrader.com&video_fk=" + videoFkey;
      iframeElement.src = "https://media.flickfusion.net/p/360.php?referer=www.autotrader.com&video_fk=" + videoFkey;
      playerBlock.appendChild(iframeElement);
      setPlayerDimentions(iframeElement, playerAspectRatio);
}

function loadPosterWithThumb(playerBlock,videoFkey, settings, type) {

    var preloadHolder = document.createElement('div');
        preloadHolder.style.cssText = "display:flex;align-items:center;justify-content:center;width:100%;position:relative;";

    var preloadImage = document.createElement('img');
        preloadImage.setAttribute("alt",'poster image');
        preloadImage.style.width = "100%";
        preloadHolder.appendChild(preloadImage);

    var playClickButton = document.createElement('span');
        playClickButton.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer";
    var playThumbnail = "//media.flickfusion.net/360/tap_360_icn_120x.png";
        if(settings.thumbnail) playThumbnail = settings.thumbnail;
        playClickButton.style.background = "rgba(0, 0, 0, 0.5) url("+playThumbnail+")"+"no-repeat center center";

        if(type === 'popup'){
          preloadImage.src = "http://media.flickfusion.net/videos/global/images/360_spin.png";
          if(settings.button_image)
          preloadImage.src = settings.button_image;

          var scriptTag = document.createElement("script");
          scriptTag.setAttribute("src", "http://media.flickfusion.net//videos/global/open_ff_window_new.js");
          scriptTag.setAttribute("type", "text/javascript");
          document.head.appendChild(scriptTag);

          playerBlock.style.cursor = "pointer";
          playerBlock.appendChild(preloadHolder);
          playerBlock.addEventListener('click', function () {
            new ConModal({
              width: 960,
              videoPage: 2,
              modalTitle: "Video",
              //iframeUrl: "player_360.html",
              iframeUrl: "https://media.flickfusion.net/p/pt.php?video_fkey=" + videoFkey
            });
          })
        }
        if(type === 'poster'){
          preloadImage.src = "https://media.flickfusion.net/videos/global/thumbnail.php?video_fkey="+videoFkey;
          if(settings.poster) preloadImage.src = settings.poster
          preloadHolder.appendChild(playClickButton);
          playerBlock.appendChild(preloadHolder);
          playClickButton.addEventListener('click', function () {
            preloadHolder.parentNode.innerHTML = "";
            loadFlickPlayer(playerBlock, videoFkey);
          })
        }


}

function setPlayerDimentions(player, aspectRatio) {

// -- 16/9 & 4/3 are most common aspect ratios, if other than both two we are setting aspect ratio to default i.e 16/9
if(!(aspectRatio == 16/9 || aspectRatio == 4/3))
      aspectRatio = 16/9;

  player.style.width = "100%";
  player.style.maxWidth = "960px";
  player.style.maxHeight = "540px";

  if(aspectRatio == 4/3)
    player.style.maxHeight = "720px";

  player.style.height = Math.round(player.parentElement.offsetWidth / (aspectRatio)) + "px";

  window.onresize = function() {
    player.style.height = Math.round(player.parentElement.offsetWidth / (aspectRatio)) + "px";
  };
}

function requestDataJSONP(url, key, callback) {
  var doc = document,
    head = doc.head,
    script = doc.createElement("script"),
    callbackName = "f" + Math.round(Math.random() * Date.now());

  script.setAttribute( "src", url + (url.indexOf("?") > 0 ? "&" : "?") + key + "=" + callbackName );

  window[callbackName] = function(json) {
    window[callbackName] = undefined;
    setTimeout(function() {
      head.removeChild(script);
    }, 0);
    callback(json);
  };

  head.appendChild(script);
}

function loadFyuse(fyuseId, playerBlock, options) {

  var preload = 1;
  if(typeof options === 'object' && options.preload == 0)
        preload = options.preload;

  function loadFyuseAPI(callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    //script.src = "https://fyu.se/embed?v=3.0";
    script.src = "https://cdn.fyusion.com/assets/fyu-viewer-4.0.js";
    script.onreadystatechange = callback;
    script.onload = callback;
    document.head.appendChild(script);
  }

  function loadFyuse() {
    function handler() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {

          if(JSON.parse(xhr.responseText).error){
            playerBlock.innerText = "360 Spin not available";
            playerBlock.style.cssText = "font-size:22px;"
            return false;
          }
          var spin = FYU.add(fyuseId, "spin", {
            aspect: { mode: 0, align: "top" },
            preload: preload,
            nologo: 1,
            logo: 0,
            zoom: 1,
            zoomBtns: 1,
            thumb_index: 0,
            fullscreen: 0,
            inlineBtn: 1
          });
          //spin.tags();
        }
      }
    }
    var xhr = new XMLHttpRequest(),
      method = "GET",
      //url = FYU.protocol + "//" + FYU.host + "/embed/" + fyuseId;
      url = "https://fyu.se" + "/embed/" + fyuseId;

    xhr.onreadystatechange = handler;
    xhr.open(method, url, true);
    xhr.send();
  }

  if (typeof fyuseId !== "undefined") {
    loadFyuseAPI(loadFyuse);
  }
}