var strength1 = 100;
var strength2 = 500;
var strength3 = 900;

window.addEventListener( "scroll", function( event ){
    var left = this.scrollX;

    console.log("left : " + left);
        
    var pageX = left - ($(window).width() / 2);
    var newvalueX = 1* pageX * -1;

    $('#sky').css("background-position", (strength1 / $(window).width() * pageX * -1) - 50 +"px", 0 + "%" );
    $('#background').css("background-position", (strength1 / $(window).width() * pageX * -1) - 50 +"px", 0 + "%" );
    $('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1) - 250 +"px", 0 + "%");
    $('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1) -450 +"px", 0 + "%");
}, false );

var pageAnchors = [ "#middleground_01", "#middleground_02", "#middleground_03", "#middleground_04"];
var currentAnchor = 0;

$(document).ready(function(){
  $('#scrollForward').on('click',function (e) {
    e.preventDefault();

    if ( pageAnchors.length -1 > currentAnchor )
    {
        currentAnchor = currentAnchor + 1;
        var $target = $(pageAnchors[currentAnchor]);
    }

    $('html, body').stop().animate({
        'scrollLeft': $target.offset().left
    }, 3000, 'swing', function () {
        window.location.hash = target;
    });
  });

    $('#scrollBack').on('click',function (e) {
    e.preventDefault();

    if ( 0 < currentAnchor )
    {
        currentAnchor = currentAnchor - 1;
        var $target = $(pageAnchors[currentAnchor]);
    }

    $('html, body').stop().animate({
        'scrollLeft': $target.offset().left
    }, 3000, 'swing', function () {
        window.location.hash = target;
    });
  });
});