var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}







  // Loop all cards and insert their hashes to settings-links
  $(document).ready(function () {

    $(document).ajaxComplete(function () {

      $(".widget-card").each(function(){

        var thisId = $(this).attr("id");
        var thisHash = $(this).attr("data-widget-hash");

        // console.log("id: " + thisId);
        // console.log("hash: " + thisHash);
        // console.log("------------------");

        // TODO: Change this to long-tap
        // var settingsLink = "/settings/?widget-hash="+thisHash;
        // $("#"+thisId+" .settings-link").attr("href",settingsLink);


      });

    });

  });




  // We need to create dynamic keyframes to show the animation from full-screen to normal. So we create a stylesheet in which we can insert CSS keyframe rules
  $("body").append("<style id=\'lightbox-animations\' type=\'text/css\'></style>");



  // Zooming a Card
  function zoomCard(thisId) {

    var thisHash = $("#"+thisId).attr("data-widget-hash");
    var thisWidgetFolderName = $("#"+thisId).attr("data-widget-folder-name");


    if (thisId != 'widget-content-advertising') {

      // Remove Card Zoom (if there is one) TODO: add again if user wants zoom
      $("#"+thisId).find(".card").removeClass("card-zoom");


      // The position of the container will be set to fixed, so set the top & left properties of the container
      var bounding_box = $("#"+thisId).get(0).getBoundingClientRect();
      $("#"+thisId).css({ top: bounding_box.top + "px", left: bounding_box.left + "px" });

      // Set container to fixed position. Add animation
      $("#"+thisId).addClass("in-animation");

      $(".widget-card-zoom").hide();



      var windowHeight = $(window).height();
      var newHeight = (windowHeight-65);
      $(".in-animation .card").css("max-height", newHeight+"px");


      // Test with a backdrop
      $(".overlay").css("opacity", "1");
      $(".overlay").css("display", "block");
      $(".overlay").css("visibility", "visible");
      $(".overlay").css("z-index", "11000");
      $(".overlay").css("background-color", "#f2f4f7");

      $("#buttons-all").show();


      // Change settings-link

      var settingsLink = "/settings/?widget-hash="+thisHash;
      $("#settings-all").attr("href",settingsLink);

      var timestamp = new Date().getTime();
      var settingsLinkModal = "/?widget-settings="+thisWidgetFolderName+"&hash="+thisHash+"&timestamp="+timestamp;
      $("#settings-all-modal").attr("data-url",settingsLinkModal);
      $("#settings-all-modal .material-icons").attr("data-url",settingsLinkModal);






      // An empty container has to be added in place of the lightbox container so that the elements below don"t come up
      // ensions of this empty container is the same as the original container
      $("<div id=\'empty-container\'></div>").insertAfter(this);


      // Added variables for smoother animation
      var thisHeight = $("#"+thisId).height();
      var colWidth = $(".dashboard-col").width();

      // Setting correct height for #empty-container
      $("#empty-container").height(thisHeight);

      // To animate the container from full-screen to normal, we need dynamic keyframes
      var styles = "";
      styles = "@keyframes outlightbox {";
        styles += "0% {";
        styles += "height: 80%;";
        styles += "width: 80%;";
        styles += "top: 10%;";
        styles += "left: 10%;";
        styles += "}";
        styles += "50% {";
        styles += "height: "+thisHeight+"px;";
        styles += "top: " + bounding_box.y + "px;";
        styles += "}";
        styles += "100% {";
        styles += "height: "+thisHeight+"px;";
        /*styles += "width: "+colWidth+"px;";*/
        styles += "top: " + bounding_box.y + "px;";
        styles += "left: " + bounding_box.x + "px;";
        styles += "}";
      styles += "}";

      // Add keyframe to CSS
      $("#lightbox-animations").get(0).sheet.insertRule(styles, 0);

      // Hide the window scrollbar
      $("body").css("overflow", "hidden");

    }

  }











  // Click on the container
  // $(".widget-card").on("click", function() {
  $(".widget-card-zoom").on("click", function() {
  // $(document).on('click', '.widget-card-zoom', function(event) {

    // alert("here");

    var thisId = $(this).attr("id");
    var thisHash = $(this).attr("data-widget-hash");
    var thisWidgetFolderName = $(this).attr("data-widget-folder-name");


    if (thisId != 'widget-content-advertising') {

      // Remove Card Zoom (if there is one) TODO: add again if user wants zoom
      $(this).find(".card").removeClass("card-zoom");


      // The position of the container will be set to fixed, so set the top & left properties of the container
      var bounding_box = $(this).get(0).getBoundingClientRect();
      $(this).css({ top: bounding_box.top + "px", left: bounding_box.left + "px" });

      // Set container to fixed position. Add animation
      $(this).addClass("in-animation");




      var windowHeight = $(window).height();
      var newHeight = (windowHeight-65);
      $(".in-animation .card").css("max-height", newHeight+"px");


      // Test with a backdrop
      $(".overlay").css("opacity", "1");
      $(".overlay").css("display", "block");
      $(".overlay").css("visibility", "visible");
      $(".overlay").css("z-index", "11000");
      $(".overlay").css("background-color", "#f2f4f7");

      $("#buttons-all").show();


      // Change settings-link

      var settingsLink = "/settings/?widget-hash="+thisHash;
      $("#settings-all").attr("href",settingsLink);

      var timestamp = new Date().getTime();
      var settingsLinkModal = "/?widget-settings="+thisWidgetFolderName+"&hash="+thisHash+"&timestamp="+timestamp;
      $("#settings-all-modal").attr("data-url",settingsLinkModal);
      $("#settings-all-modal .material-icons").attr("data-url",settingsLinkModal);






      // An empty container has to be added in place of the lightbox container so that the elements below don"t come up
      // ensions of this empty container is the same as the original container
      $("<div id=\'empty-container\'></div>").insertAfter(this);


      // Added variables for smoother animation
      var thisHeight = $(this).height();
      var colWidth = $(".dashboard-col").width();

      // Setting correct height for #empty-container
      $("#empty-container").height(thisHeight);

      // To animate the container from full-screen to normal, we need dynamic keyframes
      var styles = "";
      styles = "@keyframes outlightbox {";
        styles += "0% {";
        styles += "height: 80%;";
        styles += "width: 80%;";
        styles += "top: 10%;";
        styles += "left: 10%;";
        styles += "}";
        styles += "50% {";
        styles += "height: "+thisHeight+"px;";
        styles += "top: " + bounding_box.y + "px;";
        styles += "}";
        styles += "100% {";
        styles += "height: "+thisHeight+"px;";
        /*styles += "width: "+colWidth+"px;";*/
        styles += "top: " + bounding_box.y + "px;";
        styles += "left: " + bounding_box.x + "px;";
        styles += "}";
      styles += "}";

      // Add keyframe to CSS
      $("#lightbox-animations").get(0).sheet.insertRule(styles, 0);

      // Hide the window scrollbar
      $("body").css("overflow", "hidden");

    }

  });






  // On animationend : from normal to full screen & full screen to normal
  $(".widget-card").on("animationend", function(e) {
    // On animation end from normal to full-screen
    if(e.originalEvent.animationName == "inlightbox") {
      $(this).find(".close").show();
    }
    // On animation end from full-screen to normal
    else if(e.originalEvent.animationName == "outlightbox") {


      var newHeight = $(this).find(".card-inner").height();
      // alert(newHeight);

      $(".in-animation .card").css("max-height", newHeight+"px");

      // Remove fixed positioning, remove animation rules
      $(this).removeClass("in-animation").removeClass("out-animation");


      // Remove Card Zoom (if there is one) TODO: add again if user wants zoom
      $(this).find(".card").addClass("card-zoom");


      // Backdrop
      $(".overlay").css("opacity", "0");
      $(".overlay").css("display", "none");
      $(".overlay").css("visibility", "invisible");

      // Remove the empty container that was earlier added
      $("#empty-container").remove();

      // Delete the dynamic keyframe rule that was earlier created
      $("#lightbox-animations").get(0).sheet.deleteRule(0);
    }
  });



  // Set widget width (smooth zoom-in animation)
  var colWidth = $(".dashboard-col").width();







// Enable Tooltips Everywhere
$('[data-toggle="tooltip"]').tooltip()












// Settings - Portfolio, Delete Asset
$(document).on("click", ".delete-content", function(event) {


  // Need to send
  var getAction           = "delete-widget-content";
  var getWidgetId         = $(this).attr("data-widget-id");
  var getHash             = $(this).attr("data-hash");
  var getType             = $(this).attr("data-type");
  var getRemoveCategory   = $(this).attr("data-remove-category");
  var getRemoveValue      = $(this).attr("data-remove-value");
  var timestamp = new Date().getTime();

  $.ajax({
    type:"GET",
    dataType:"JSON",
    url:"/",
    data:"action="+getAction+"&widget-hash="+getHash+"&widget-id="+getWidgetId+"&type="+getType+"&remove-category="+getRemoveCategory+"&remove-value="+getRemoveValue+"&timestamp="+timestamp,
    success:function(data)
    {

      var data=eval(data);
      message=data.message;
      success=data.success;
      $("#heading").html(success);
      $("#body").html(message);




      // Get user information
      var ua = data;
      var role = Cookies.get("user-role");
      var hash = Cookies.get("user-hash");


      // Update Cookies
      Cookies.set("user-updated-at", data);


      // Update Reload With Timestamp link
      $(".downupPopup-kapat").attr("onclick", "location.reload();");
      $("#modal-close-reload").attr("onclick", "location.reload();");
      $("#dark-back").attr("onclick", "location.reload();");
      


      // Remove localStorage
      localStorage.removeItem("content-portfolio-new2");
      localStorage.removeItem("widget-content-portfolio");

      
      // Preload (and use localStorage for caching)
      var localStorageKey = "content-portfolio-new2";
      var getUrl = "/content-portfolio";
      preloadLocalStorage(localStorageKey, getUrl, hash, ua);

    }

  });

});







// START - Long Press on Widget
// ------------------------------------------------------------------------------------------------------------------

$(document).on("mousedown touchstart", ".widget .no-scrollbars", function(event) {

  setTimeout(function() {
    $("#presstimer").val(0);
  }, 200);

});

$(document).on("mousedown touchstart", ".no-long-tap", function(event) {

  setTimeout(function() {
    $("#presstimer").val(0);
  }, 200);

});


$(document).on("mousedown mouseup touchstart touchend", ".widget", function(event) {

  // console.log(event.type);

  var thisId = $(this).attr("id");
  var thisName = thisId.replace('widget-', '');
  // var thisHash = $(this).attr("data-hash");
  var thisUpdatedAt = $(this).attr("data-updated-at");


  var parentWidgetId = thisId.replace('widget-', 'widget-content-');
  var thisHash = $("#"+parentWidgetId).attr("data-widget-hash");


  $("#debug").val("");


  var thisScrollTop0 = $("#"+thisId).offset().top; //get the offset top of the element
  var scrollTop0 = (thisScrollTop0 - $(window).scrollTop());

  var thisScrollLeft0 = $("#"+thisId).offset().left; //get the offset top of the element
  var scrollLeft0 = (thisScrollLeft0 - $(window).scrollLeft());



  if (event.type == 'mousedown') {
    var t0 = new Date().getTime();
    $("#presstimer").val(t0);
    $("#presstimer_top").val(scrollTop0);
    $("#presstimer_left").val(scrollLeft0);
  }
  if (event.type == 'touchstart') {
    var t0 = new Date().getTime();
    $("#presstimer").val(t0);
    $("#presstimer_top").val(scrollTop0);
    $("#presstimer_left").val(scrollLeft0);
  }


  if (event.type == 'mouseup') {
    var t0 = new Date().getTime();
    $("#presstimer").val(0);
    $("#presstimer_top").val(0);
    $("#presstimer_left").val(0);
  }
  if (event.type == 'touchend') {
    var t0 = new Date().getTime();
    $("#presstimer").val(0);
    $("#presstimer_top").val(0);
    $("#presstimer_left").val(0);
  }


  if (event.type == 'mousedown' || event.type == 'touchstart') {


    $("#debug").val("touchstart");







    setTimeout(function() {

      var scrolled = 'scrolled';

      var gett0 = $("#presstimer").val();
      var getpt0 = $("#presstimer_top").val();
      var getpl0 = $("#presstimer_left").val();
      getpt0 = parseInt(getpt0, 10);
      getpl0 = parseInt(getpl0, 10);

      // Set time to 0 if page has been scrolled
      var thisScrollTop1 = $("#"+thisId).offset().top; //get the offset top of the element
      var scrollTop1 = (thisScrollTop1 - $(window).scrollTop());

      // Scroll Top Check
      if (getpt0 > 0) {
        // console.log(getpt0); //position of the ele w.r.t window
        // console.log(scrollTop1); //position of the ele w.r.t window
        if (getpt0 == scrollTop1) {
          // console.log("NOT Scrolled");
          scrolled = 'not scrolled';
        } else {
          // console.log("Scrolled Up/Down");
          gett0 = 0;
        }
      }



      // Set time to 0 if page has been scrolled
      var thisScrollLeft1 = $("#"+thisId).offset().left; //get the offset top of the element
      var scrollLeft1 = (thisScrollLeft1 - $(window).scrollLeft());

      // Scroll Left Check
      if (getpl0 > 0) {
        // console.log(getpl0); //position of the ele w.r.t window
        // console.log(scrollLeft1); //position of the ele w.r.t window
        if (getpl0 == scrollLeft1) {
          // console.log("NOT Scrolled");
          scrolled = 'not scrolled';
        } else {
          // console.log("Scrolled Left/Right");
          gett0 = 0;
        }
      }


      var t1 = new Date().getTime();

      // console.log("gett0: "+gett0);
      // console.log("t1: "+t1);

      if (gett0 > 0) {
        var diff = (t1-gett0);
      } else {
        var diff = 0;
      }
      // console.log("diff: "+diff);

      if (diff > 300 && scrolled == 'not scrolled') {


        $("#"+thisId).css("transform", "scale(0.97)");



        setTimeout(function() {

          // Restore widget's scale
          $("#"+thisId).css("transform", "scale(1)");

          var headline = 'Widget';
          var url = '/long-tap/1.0.0/long-tap.php?widget-settings='+thisName+'&hash='+thisHash+'&ua='+thisUpdatedAt;
          var type = 'all';

          $("#debug").val("open modal");
          dashboardModal(type, headline, url);
        }, 100);

      }

    }, 300);



    return false;
  }

});




// ------------------------------------------------------------------------------------------------------------------
// END - Long Press on Widget



// Making register button to spinner on click for mobile registration carousel
$("#app-register-button").on("click", function() {
  $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
});

$("#login-page-login-button").on("click", function() {
  var thisWidth = $("#login-page-login-button").width();
  $("#login-page-login-button").width(thisWidth);
  $("#login-page-login-button").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
});








function reloadWithTimestamp(timestamp) {

  Cookies.remove("user-updated-at");
  

  // Remove localStorage
  // localStorage.removeItem("content-portfolio-new2");
  localStorage.removeItem("widget-content-portfolio");
  localStorage.removeItem("widget-content-portfolio-fullscreen");



  var full_url = window.location.href;
  full_url = full_url.split('#')[0];

  if (timestamp == 0) {

      

  } else {

    // Set Timestamp & Preload
    var ua = timestamp;
    var hash = Cookies.get("user-hash");

    // Update Cookies
    Cookies.set("user-updated-at", ua);

    // Preload content-portfolio & portfolio-widget
    setTimeout(function() {
      
      
      // Use GET and save to localStorage
      $.get("/content-portfolio?hash="+hash+"&ua="+ua, function(data) {
          // localStorage.setItem("content-portfolio-new2", data);
      });  
      
      $.get("/widget_portfolio_2.0.1/?hash="+hash+"&ua="+ua+"&timestamp="+timestamp, function(data) {
        // localStorage.setItem("widget-content-portfolio-fullscreen", data);
      });

    }, 100);

  }

  if (full_url.includes("?")) {
    if (full_url.includes("timestamp")) {
      var new_url = full_url;
    } else {
      var new_url = full_url + "&timestamp=" + timestamp;
    }
    
  } else {
    var new_url = full_url + "?timestamp=" + timestamp;
  }

  // Test
  var new_url = full_url;

  $('#dashboard-modal .modal-dialog').fadeOut();

  window.location.replace(new_url);

}





$('.menu, .overlay').click(function () {
	$('.menu').toggleClass('clicked');
	$('#nav-menu-left').toggleClass('show');
});





$(".btn-cta").click(function() {

  // Get width
  var ctaWidth = $(this).width();

  // Set width
  $(this).width(ctaWidth);

  // $(this).html("<img src=\'/img/icons/material-icons/data_usage-24px.svg\' style=\'width: 24px; padding-bottom: 2px; vertical-align: middle;\' class=\'material-icons-spin\'>");
  $(this).css("padding-top", "6px");
  $(this).css("padding-bottom", "10px");
  $(this).html("<span class=\'spinner-border spinner-border-sm\' role=\'status\' aria-hidden=\'true\'></span>");


});















// START - localStorage Functions
// ----------------------------------------------------------------------


function saveToLocalStorage(key, value) {
  try {
    localStorage.setItem(key, value);
    // console.log("Success: saved to local storage.");
  } catch (error) {
    // console.log("Error: unable to save to local storage. " + error);
  }
}


// Preload URL & localStorage
function preloadLocalStorage(localStorageKey, getUrl, hash, ua) {

  // Variables
  var debug = 0;
  var urlWithHashAndUa = getUrl+"?hash="+hash+"&ua="+ua;

  // TODO: Use timestamp if there is not hash


  // Use GET and save to localStorage
  $.get(urlWithHashAndUa, function(data) {

    // Save to localStorage (if there is a "role" variable and it is not guest)
    saveToLocalStorage(localStorageKey, data);

    // Debug
    if (debug == 1) {
      console.log("----------------");
      console.log("PRELOAD: Fetched from URL + Set to localStorage");
    }

  }); 

}


// Preload Portfolio Widget
function preloadPortfolioWidget(hash, ua) {

  // Variables
  var debug = 0;
  var portfolioWidgetVersion = "2.0.1";
  var localStorageKey = "widget-content-portfolio";
  var urlWithHashAndUa = "/widget_portfolio_"+portfolioWidgetVersion+"?hash="+hash+"&ua="+ua;



  // Use GET and save to localStorage
  $.get(urlWithHashAndUa, function(data) {

    // Save to localStorage (if there is a "role" variable and it is not guest)
    saveToLocalStorage(localStorageKey, data);

    // Debug
    if (debug == 1) {
      console.log("----------------");
      console.log("PRELOAD: Fetched from URL + Set to localStorage [portfolio-widget]");
    }

  }); 

}



function getSetLocalStorage(localStorageKey, getUrl, divToLoadIn, role, hash, ua) {

  // Variables
  var debug = 0;
  var timestamp = new Date().getTime();
  var urlWithHash = getUrl+"?hash="+hash+"&ua="+timestamp;
  var urlWithHashAndUa = getUrl+"?hash="+hash+"&ua="+ua;

  // Debug
  if (debug == 1) {
    console.log("INPUT VARIABLES");
    console.log("----------------");
    console.log("localStorageKey: " + localStorageKey);
    console.log("getUrl: " + getUrl);
    console.log("divToLoadIn: " + divToLoadIn);
    console.log("role: " + role);
    console.log("hash: " + hash);
    console.log("ua: " + ua);
    console.log("----------------");
  }


  // If there is NOT ua variable
  if (typeof ua === "undefined") {

    // There is NOT a ua variable
    if (debug == 1) {
      console.log("----------------");
      console.log("There is NOT a ua variable");
    }

    

    // Get From localStorage (if exists)
    if (localStorage && localStorage.getItem(localStorageKey)) {
  
      // There is a localStorage

      // Debug
      if (debug == 1) {
        console.log("There is a localStorage");
      }
    
      // Get data from localStorage
      var data = localStorage.getItem(localStorageKey);

      // Set content in DIV
      $("#"+divToLoadIn).html(data);

     
      // Debug
      if (debug == 1) {
        console.log("----------------");
        console.log("Get from localStorage + Set to DIV");
      } 

    
      // Reload localStorage
      setTimeout(function() {
    
        // Use GET and save to localStorage
        $.get(urlWithHash, function(data) {
      
          // Save to localStorage (if there is a "role" variable and it is not guest)
          if (typeof role !== "undefined") {
              
            if (role != "guest") {
              saveToLocalStorage(localStorageKey, data);

              // Debug
              if (debug == 1) {
                console.log("----------------");
                console.log("PRELOAD: Fetched from URL + Set to localStorage");
              }

            }

          } // END: if (typeof role !== "undefined") {       
      
        });    
    
      }, 5000);
    
    } else {
    
      // ua is undefined AND there is NOT a localStorage

      // Debug
      if (debug == 1) {
        console.log("----------------");
        console.log("There is NOT a localStorage");
      }
    
  
        // Use GET and save to localStorage
        $.get(urlWithHash, function(data) {
      
            // Put DIV HTML to Dashboard
            $("#"+divToLoadIn).html(data);
            
            // Debug
            if (debug == 1) {
              console.log("----------------");
              console.log("Fetched from URL + Set to DIV");
            }
      
            // Save to localStorage
            if (role != "guest") {
              saveToLocalStorage(localStorageKey, data);
            
              // Debug
              if (debug == 1) {
                console.log("----------------");
                console.log("Set to localStorage");
              }
            }


      
        });        
  
  
    
    } // END: if (localStorage && localStorage.getItem("content-portfolio-new2")) {
  
  
  } else {

    // This is if there is a ua variable
  
    // Debug
    if (debug == 1) {
      console.log("----------------");
      console.log("There is a ua variable sent with the function, the value is: " + ua);
    }
    
    
    // Get From localStorage (if exists)
    if (localStorage && localStorage.getItem(localStorageKey)) {

      // We have a value in the localStorage

      // Debug
      if (debug == 1) {
        console.log("----------------");
        console.log("We have a value in the localStorage");
      }
  
      // Get data from localStorage
      var data = localStorage.getItem(localStorageKey);    
      
      // Set in DIV (if action is to load)
      $("#"+divToLoadIn).html(data);

      // Debug
      if (debug == 1) {
        console.log("----------------");
        console.log("Get from localStorage + Set to DIV");
      }
  
      // Reload localStorage
      setTimeout(function() {
  
        // Use GET and save to localStorage
        $.get(urlWithHashAndUa, function(data) {
      
            // Save to localStorage (if possible)
            saveToLocalStorage(localStorageKey, data);

            // Debug
            if (debug == 1) {
              console.log("----------------");
              console.log("PRELOAD: Fetched from URL + Set to localStorage");
            }
      
        });
  
      }, 5000);
      
  
    } else {

      // We don't have a value in the localStorage

      // Debug
      if (debug == 1) {
        console.log("----------------");
        console.log("We don't have a value in the localStorage");
      }
  
      
  
      // First load a loader
  
        // Use GET and save to localStorage
        $.get(urlWithHashAndUa, function(data) {
      
            // Save to localStorage (if possible)
            saveToLocalStorage(localStorageKey, data);
      
            // Put DIV HTML to Dashboard
            $("#"+divToLoadIn).html(data);

            // Debug
            if (debug == 1) {
              console.log("----------------");
              console.log("Fetched from URL + Set to localStorage + Set to DIV");
            }
      
        });
  
      // });
      
  
    }
    
  
    
  
  }

}







// Function to loads widgets on /dashboard
function loadWidgetWithLocalStorageAndFetch(storageName, localStorageKey, getUrl, timestamp) {

  // Variables
  var debug = 0;
  
  // Debug
  if (debug == 1) {
    console.log("");
    console.log("");
    console.log("---------------------------");
    console.log("storageName: " + storageName);
    console.log("localStorageKey: " + localStorageKey);
    console.log("timestamp: " + timestamp);
    console.log("getUrl: " + getUrl);
  }
  
  
  // Get From localStorage (if exists)
  if (localStorage && localStorage.getItem(localStorageKey)) {
  
    // Debug
    if (debug == 1) {
      console.log("---------");
      console.log("There is a localStorage value");
    }
  
    // Get from localStorage
    var widgetContent = localStorage.getItem(localStorageKey);
  
    // Set to DIV
    $("#" + storageName).html(widgetContent);
  
    // Debug
    if (debug == 1) {
      console.log("---------");
      console.log("Get from localStorage && Set to DIV");
    }
  
  
    // Reload localStorage cache
    setTimeout(function() {
  
      // Save Widget Content to localStorage for faster load next time (after 5 seconds)
      $.get(getUrl, function(data) {
  
          // Save to localStorage
          saveToLocalStorage(localStorageKey, data);
  
          // TODO: If new localStorage does not match the old, refresh DIV
  
          // Debug
          if (debug == 1) {
            console.log("---------");
            console.log("PRELOAD: Fetch from URL && Set to localStorage [" + storageName + "]");
          }
  
      });
    }, 5000);
  
  } else {
  
    // There is no localStorage
  
    // Debug
    if (debug == 1) {
      console.log("---------");
      console.log("There is NOT a localStorage value");
    }
  
    // Save Widget Content to localStorage for faster load next time (after 5 seconds)
    $.get(getUrl, function(data) {
  
        // Save to localStorage
        saveToLocalStorage(localStorageKey, data);
  
  
        // Put DIV HTML to Dashboard
        $("#" + storageName).html(data);
  
  
        // Debug
        if (debug == 1) {
          console.log("---------");
          console.log("[" + storageName + "] Fetch from URL && Set to localStorage && Set to DIV");
        }
  
  
    });
    
    
  }

} // END: function loadWidgetWithLocalStorageAndFetch(storageName, localStorageKey, getUrl, updateFrequency) {








// ----------------------------------------------------------------------
// END - localStorage Functions



function loadPage(pagename) {

  // If app, change active state
  if (navigator.userAgent.indexOf("dashboard-app") > -1) {

    // Vibrate
    native.postMessage('appVibrate');

    // Reset all active buttons
    if (pagename == "dashboard") { native.postMessage('setActiveButton-0'); }
    else if (pagename == "app-dashboards") { native.postMessage('setActiveButton-0'); }
    else if (pagename == "portfolio") { native.postMessage('setActiveButton-1'); }
    else if (pagename == "profile") { native.postMessage('setActiveButton-2'); }
    else { native.postMessage('setActiveButton-');}
  };

  // Add the fade-to-white class to the body
  document.body.classList.add('fade-to-white');

  // Redirect to the new page after 50ms
  setTimeout(() => {
    window.location.href = '/' + pagename;
  }, 50);
  
}




// Vibrate + Sound for apps
$(document).on('click', '.btn', function() {

  if (navigator.userAgent.indexOf("dashboard-app") > -1) {
    native.postMessage('appVibrate');
  };

});





// Function for user() to load /api/user
function fetchUserData() {
  return $.getJSON("/api/user")
    .then(function(data) {
      localStorage.setItem("user", JSON.stringify(data));
      return data;
    })
    .catch(function(error) {
      console.error('Error fetching user data:', error);
      localStorage.removeItem("user");
      return null;
    });
}

function redirectGuestToLogin(userData) {
  if (!userData || !userData.data || userData.data.role === 'guest') {
    window.location.href = "/login";
  }
}

// Make a function that redirect guests to /frontpage if it's a desktop and /app-frontpage if it's mobile
function redirectGuestToFrontpage(userData) {
  if (!userData || !userData.data || userData.data.role === 'guest') {
    if (navigator.userAgent.indexOf("dashboard-app") > -1) {
      window.location.href = "/app-frontpage";
    } else {
      window.location.href = "/frontpage";
    }
  }
}

function redirectLoggedInToDashboard(userData) {
  if (userData && userData.data && userData.data.role !== 'guest') {
    window.location.href = "/dashboard";
  }
}







// index.js

var versionsLoaded = false;
var versionsPromise = null;

function getVersions() {
  if (versionsPromise) {
    return versionsPromise;
  }

  var storedVersions = localStorage.getItem('versions');
  if (storedVersions) {
    var versions = JSON.parse(storedVersions);
    var currentTimestamp = Date.now();
    var storedTimestamp = versions.timestamp;
    var sevenDaysInMillis = 7 * 24 * 60 * 60 * 1000;
    if (currentTimestamp - storedTimestamp < sevenDaysInMillis) {
      versionsLoaded = true;
      return Promise.resolve(versions);
    }
  }

  versionsPromise = $.getJSON('/api/data/versions')
    .then(function(data) {
      data.timestamp = Date.now();
      localStorage.setItem('versions', JSON.stringify(data));
      versionsLoaded = true;
      return data;
    })
    .catch(function() {
      console.log('Failed to fetch versions from the API');
      return null;
    });

  return versionsPromise;
}

function getVersion(type, name) {
  if (versionsLoaded) {
    var versions = JSON.parse(localStorage.getItem('versions'));
    return versions && versions[type] && versions[type][name] ? versions[type][name] : null;
  } else {
    return getVersions().then(function(versions) {
      return versions && versions[type] && versions[type][name] ? versions[type][name] : null;
    });
  }
}

function getVersionNumber(type, name) {
  return getVersion(type, name);
}

async function getDashboardVersion(type, name) {
  try {
    var pageVersion = await getVersionNumber(type, name);
    return pageVersion;
  } catch (error) {
    console.error('Error retrieving version:', error);
    return null;
  }
}




function preloadImage(url) {
  const img = new Image();
  img.src = url;
}