"use strict";

// Class definition
var KTAppHero = function () {
// Private variables
var preview;
var previewDrag;
var previewSlider;
var previewLight;
var previewLightImg;
var previewDark;
var previewDarkImg;

var slide = function(e) {
const sliderPos = e.target.value;

// Update the width of the foreground image
KTUtil.css(previewDark, "width", `${sliderPos}%`);

// Update the position of the slider button
KTUtil.css(previewDrag, "left", `calc(${sliderPos}% - 0px)`);
}

var handlePreview = function() {
calculate();
resize();

previewSlider.addEventListener("input", slide);
previewSlider.addEventListener("change", slide);
}

var calculate = function() {
const width = KTUtil.css(preview, "width");

KTUtil.css(previewLightImg, "width", width);
KTUtil.css(previewDarkImg, "width", width);
}

var resize = function() {
// Window resize Handling
window.addEventListener("resize", calculate);
}

// Public methods
return {
init: function () {
preview = document.querySelector(".preview");
previewSlider = document.querySelector(".preview .preview-slider");
previewDrag = document.querySelector(".preview .preview-drag");
previewLight = document.querySelector(".preview .preview-light");
previewLightImg = document.querySelector(".preview .preview-light > img");
previewDark = document.querySelector(".preview .preview-dark");
previewDarkImg = document.querySelector(".preview .preview-dark > img");

if (!preview) {
return;
}

handlePreview();
}
};
}();

// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppHero.init();
});