window.HELP_IMPROVE_VIDEOJS = false;

$(document).ready(function() {
    // Check for click events on the navbar burger icon
    $('#00000_view-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00000_view_shading');
        updateImage(parseInt(this.value), '#00000_view_appearance');
    });
    $('#00000_light-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00000_light_shading');
        updateImage(parseInt(this.value), '#00000_light_appearance');
    });
    $('#00000_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00000_latent_shading');
        updateImage(parseInt(this.value), '#00000_latent_appearance');
    });
    $('#00001_view-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00001_view_shading');
        updateImage(parseInt(this.value), '#00001_view_appearance');
    });
    $('#00001_light-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00001_light_shading');
        updateImage(parseInt(this.value), '#00001_light_appearance');
    });
    $('#00001_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00001_latent_shading');
        updateImage(parseInt(this.value), '#00001_latent_appearance');
    });
    $('#00002_view-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00002_view_shading');
        updateImage(parseInt(this.value), '#00002_view_appearance');
    });
    $('#00002_light-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00002_light_shading');
        updateImage(parseInt(this.value), '#00002_light_appearance');
    });
    $('#00002_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00002_latent_shading');
        updateImage(parseInt(this.value), '#00002_latent_appearance');
    });
    $('#00003_view-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00003_view_shading');
        updateImage(parseInt(this.value), '#00003_view_appearance');
    });
    $('#00003_light-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00003_light_shading');
        updateImage(parseInt(this.value), '#00003_light_appearance');
    });
    $('#00003_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00003_latent_shading');
        updateImage(parseInt(this.value), '#00003_latent_appearance');
    });
    $('#00004_view-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00004_view_shading');
        updateImage(parseInt(this.value), '#00004_view_appearance');
    });
    $('#00004_light-slider').on('input', function(event) {
        // updateImage(parseInt(this.value), '#00004_light_shading');
        updateImage(parseInt(this.value), '#00004_light_appearance');
    });
    $('#00004_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00004_latent_shading');
        updateImage(parseInt(this.value), '#00004_latent_appearance');
    });
    $('#00005_view-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00005_view_shading');
        updateImage(parseInt(this.value), '#00005_view_appearance');
    });
    $('#00005_light-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00005_light_shading');
        updateImage(parseInt(this.value), '#00005_light_appearance');
    });
    $('#00005_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00005_latent_shading');
        updateImage(parseInt(this.value), '#00005_latent_appearance');
    });
    $('#00006_view-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00006_view_shading');
        updateImage(parseInt(this.value), '#00006_view_appearance');
    });
    $('#00006_light-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00006_light_shading');
        updateImage(parseInt(this.value), '#00006_light_appearance');
    });
    $('#00006_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00006_latent_shading');
        updateImage(parseInt(this.value), '#00006_latent_appearance');
    });
    $('#00007_view-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00007_view_shading');
        updateImage(parseInt(this.value), '#00007_view_appearance');
    });
    $('#00007_light-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00007_light_shading');
        updateImage(parseInt(this.value), '#00007_light_appearance');
    });
    $('#00007_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00007_latent_shading');
        updateImage(parseInt(this.value), '#00007_latent_appearance');
    });
    $('#00008_view-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00008_view_shading');
        updateImage(parseInt(this.value), '#00008_view_appearance');
    });
    $('#00008_light-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00008_light_shading');
        updateImage(parseInt(this.value), '#00008_light_appearance');
    });
    $('#00008_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00008_latent_shading');
        updateImage(parseInt(this.value), '#00008_latent_appearance');
    });
    $('#00009_view-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00009_view_shading');
        updateImage(parseInt(this.value), '#00009_view_appearance');
    });
    $('#00009_light-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00009_light_shading');
        updateImage(parseInt(this.value), '#00009_light_appearance');
    });
    $('#00009_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00009_latent_shading');
        updateImage(parseInt(this.value), '#00009_latent_appearance');
    });
    $('#00010_view-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00010_view_shading');
        updateImage(parseInt(this.value), '#00010_view_appearance');
    });
    $('#00010_light-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00010_light_shading');
        updateImage(parseInt(this.value), '#00010_light_appearance');
    });
    $('#00010_latent-slider').on('input', function(event) {
        updateImage(parseInt(this.value), '#00010_latent_shading');
        updateImage(parseInt(this.value), '#00010_latent_appearance');
    });

    bulmaSlider.attach();

    // updateImage($('#00000_view-slider').val(), '#00000_view_shading');
    // updateImage($('#00000_view-slider').val(), '#00000_view_appearance');
})

window.onresize = function(){
    updateImage($('#00000_view-slider').val(), '#00000_view_shading');
    updateImage($('#00000_view-slider').val(), '#00000_view_appearance');
    updateImage($('#00000_light-slider').val(), '#00000_light_shading');
    updateImage($('#00000_light-slider').val(), '#00000_light_appearance');
    updateImage($('#00000_latent-slider').val(), '#00000_latent_shading');
    updateImage($('#00000_latent-slider').val(), '#00000_latent_appearance');
    
    updateImage($('#00001_view-slider').val(), '#00001_view_shading');
    updateImage($('#00001_view-slider').val(), '#00001_view_appearance');
    updateImage($('#00001_light-slider').val(), '#00001_light_shading');
    updateImage($('#00001_light-slider').val(), '#00001_light_appearance');
    updateImage($('#00001_latent-slider').val(), '#00001_latent_shading');
    updateImage($('#00001_latent-slider').val(), '#00001_latent_appearance');
        updateImage($('#00002_view-slider').val(), '#00002_view_shading');
    updateImage($('#00002_view-slider').val(), '#00002_view_appearance');
    updateImage($('#00002_light-slider').val(), '#00002_light_shading');
    updateImage($('#00002_light-slider').val(), '#00002_light_appearance');
    updateImage($('#00002_latent-slider').val(), '#00002_latent_shading');
    updateImage($('#00002_latent-slider').val(), '#00002_latent_appearance');
        updateImage($('#00003_view-slider').val(), '#00003_view_shading');
    updateImage($('#00003_view-slider').val(), '#00003_view_appearance');
    updateImage($('#00003_light-slider').val(), '#00003_light_shading');
    updateImage($('#00003_light-slider').val(), '#00003_light_appearance');
    updateImage($('#00003_latent-slider').val(), '#00003_latent_shading');
    updateImage($('#00003_latent-slider').val(), '#00003_latent_appearance');
        updateImage($('#00004_view-slider').val(), '#00004_view_shading');
    updateImage($('#00004_view-slider').val(), '#00004_view_appearance');
    updateImage($('#00004_light-slider').val(), '#00004_light_shading');
    updateImage($('#00004_light-slider').val(), '#00004_light_appearance');
    updateImage($('#00004_latent-slider').val(), '#00004_latent_shading');
    updateImage($('#00004_latent-slider').val(), '#00004_latent_appearance');
        updateImage($('#00005_view-slider').val(), '#00005_view_shading');
    updateImage($('#00005_view-slider').val(), '#00005_view_appearance');
    updateImage($('#00005_light-slider').val(), '#00005_light_shading');
    updateImage($('#00005_light-slider').val(), '#00005_light_appearance');
    updateImage($('#00005_latent-slider').val(), '#00005_latent_shading');
    updateImage($('#00005_latent-slider').val(), '#00005_latent_appearance');
        updateImage($('#00006_view-slider').val(), '#00006_view_shading');
    updateImage($('#00006_view-slider').val(), '#00006_view_appearance');
    updateImage($('#00006_light-slider').val(), '#00006_light_shading');
    updateImage($('#00006_light-slider').val(), '#00006_light_appearance');
    updateImage($('#00006_latent-slider').val(), '#00006_latent_shading');
    updateImage($('#00006_latent-slider').val(), '#00006_latent_appearance');
        updateImage($('#00007_view-slider').val(), '#00007_view_shading');
    updateImage($('#00007_view-slider').val(), '#00007_view_appearance');
    updateImage($('#00007_light-slider').val(), '#00007_light_shading');
    updateImage($('#00007_light-slider').val(), '#00007_light_appearance');
    updateImage($('#00007_latent-slider').val(), '#00007_latent_shading');
    updateImage($('#00007_latent-slider').val(), '#00007_latent_appearance');
        updateImage($('#00008_view-slider').val(), '#00008_view_shading');
    updateImage($('#00008_view-slider').val(), '#00008_view_appearance');
    updateImage($('#00008_light-slider').val(), '#00008_light_shading');
    updateImage($('#00008_light-slider').val(), '#00008_light_appearance');
    updateImage($('#00008_latent-slider').val(), '#00008_latent_shading');
    updateImage($('#00008_latent-slider').val(), '#00008_latent_appearance');
        updateImage($('#00009_view-slider').val(), '#00009_view_shading');
    updateImage($('#00009_view-slider').val(), '#00009_view_appearance');
    updateImage($('#00009_light-slider').val(), '#00009_light_shading');
    updateImage($('#00009_light-slider').val(), '#00009_light_appearance');
    updateImage($('#00009_latent-slider').val(), '#00009_latent_shading');
    updateImage($('#00009_latent-slider').val(), '#00009_latent_appearance');
        updateImage($('#00010_view-slider').val(), '#00010_view_shading');
    updateImage($('#00010_view-slider').val(), '#00010_view_appearance');
    updateImage($('#00010_light-slider').val(), '#00010_light_shading');
    updateImage($('#00010_light-slider').val(), '#00010_light_appearance');
    updateImage($('#00010_latent-slider').val(), '#00010_latent_shading');
    updateImage($('#00010_latent-slider').val(), '#00010_latent_appearance');
     
};


$(window).on("load", function(){
    updateImage($('#00000_view-slider').val(), '#00000_view_shading');
    updateImage($('#00000_view-slider').val(), '#00000_view_appearance');
    updateImage($('#00000_light-slider').val(), '#00000_light_shading');
    updateImage($('#00000_light-slider').val(), '#00000_light_appearance');
    updateImage($('#00000_latent-slider').val(), '#00000_latent_shading');
    updateImage($('#00000_latent-slider').val(), '#00000_latent_appearance');

    updateImage($('#00001_view-slider').val(), '#00001_view_shading');
    updateImage($('#00001_view-slider').val(), '#00001_view_appearance');
    updateImage($('#00001_light-slider').val(), '#00001_light_shading');
    updateImage($('#00001_light-slider').val(), '#00001_light_appearance');
    updateImage($('#00001_latent-slider').val(), '#00001_latent_shading');
    updateImage($('#00001_latent-slider').val(), '#00001_latent_appearance');
        updateImage($('#00002_view-slider').val(), '#00002_view_shading');
    updateImage($('#00002_view-slider').val(), '#00002_view_appearance');
    updateImage($('#00002_light-slider').val(), '#00002_light_shading');
    updateImage($('#00002_light-slider').val(), '#00002_light_appearance');
    updateImage($('#00002_latent-slider').val(), '#00002_latent_shading');
    updateImage($('#00002_latent-slider').val(), '#00002_latent_appearance');
        updateImage($('#00003_view-slider').val(), '#00003_view_shading');
    updateImage($('#00003_view-slider').val(), '#00003_view_appearance');
    updateImage($('#00003_light-slider').val(), '#00003_light_shading');
    updateImage($('#00003_light-slider').val(), '#00003_light_appearance');
    updateImage($('#00003_latent-slider').val(), '#00003_latent_shading');
    updateImage($('#00003_latent-slider').val(), '#00003_latent_appearance');
        updateImage($('#00004_view-slider').val(), '#00004_view_shading');
    updateImage($('#00004_view-slider').val(), '#00004_view_appearance');
    updateImage($('#00004_light-slider').val(), '#00004_light_shading');
    updateImage($('#00004_light-slider').val(), '#00004_light_appearance');
    updateImage($('#00004_latent-slider').val(), '#00004_latent_shading');
    updateImage($('#00004_latent-slider').val(), '#00004_latent_appearance');
        updateImage($('#00005_view-slider').val(), '#00005_view_shading');
    updateImage($('#00005_view-slider').val(), '#00005_view_appearance');
    updateImage($('#00005_light-slider').val(), '#00005_light_shading');
    updateImage($('#00005_light-slider').val(), '#00005_light_appearance');
    updateImage($('#00005_latent-slider').val(), '#00005_latent_shading');
    updateImage($('#00005_latent-slider').val(), '#00005_latent_appearance');
        updateImage($('#00006_view-slider').val(), '#00006_view_shading');
    updateImage($('#00006_view-slider').val(), '#00006_view_appearance');
    updateImage($('#00006_light-slider').val(), '#00006_light_shading');
    updateImage($('#00006_light-slider').val(), '#00006_light_appearance');
    updateImage($('#00006_latent-slider').val(), '#00006_latent_shading');
    updateImage($('#00006_latent-slider').val(), '#00006_latent_appearance');
        updateImage($('#00007_view-slider').val(), '#00007_view_shading');
    updateImage($('#00007_view-slider').val(), '#00007_view_appearance');
    updateImage($('#00007_light-slider').val(), '#00007_light_shading');
    updateImage($('#00007_light-slider').val(), '#00007_light_appearance');
    updateImage($('#00007_latent-slider').val(), '#00007_latent_shading');
    updateImage($('#00007_latent-slider').val(), '#00007_latent_appearance');
        updateImage($('#00008_view-slider').val(), '#00008_view_shading');
    updateImage($('#00008_view-slider').val(), '#00008_view_appearance');
    updateImage($('#00008_light-slider').val(), '#00008_light_shading');
    updateImage($('#00008_light-slider').val(), '#00008_light_appearance');
    updateImage($('#00008_latent-slider').val(), '#00008_latent_shading');
    updateImage($('#00008_latent-slider').val(), '#00008_latent_appearance');
        updateImage($('#00009_view-slider').val(), '#00009_view_shading');
    updateImage($('#00009_view-slider').val(), '#00009_view_appearance');
    updateImage($('#00009_light-slider').val(), '#00009_light_shading');
    updateImage($('#00009_light-slider').val(), '#00009_light_appearance');
    updateImage($('#00009_latent-slider').val(), '#00009_latent_shading');
    updateImage($('#00009_latent-slider').val(), '#00009_latent_appearance');
        updateImage($('#00010_view-slider').val(), '#00010_view_shading');
    updateImage($('#00010_view-slider').val(), '#00010_view_appearance');
    updateImage($('#00010_light-slider').val(), '#00010_light_shading');
    updateImage($('#00010_light-slider').val(), '#00010_light_appearance');
    updateImage($('#00010_latent-slider').val(), '#00010_latent_shading');
    updateImage($('#00010_latent-slider').val(), '#00010_latent_appearance');
    // Reset gifs once everything is loaded to synchronize playback.
    $('.preload').attr('src', function(i, a){
        $(this).attr('src','').removeClass('preload').attr('src', a);
    });
});

Number.prototype.clamp = function(min, max) {
    return Math.min(Math.max(this, min), max);
};


function updateImage(value, tag) {
    //$(tag).height(Math.round($(tag).height()))
    width = $(tag)[0].getBoundingClientRect().width
    naturalwidth= $(tag)[0].naturalWidth;
    num_images = naturalwidth/1024.0;
    // console.log(width);
    // console.log(naturalwidth);
    console.log(value);
    let left = value * width / num_images;
    console.log(left);
    $(tag).css('left', -left + 'px');
}