var docWidth;
var parallaxDiff = 150;
var allowCloudMovement = true;
var bigCloudsCnt = 0;
var cloudSpeed = 1;
var currentLandscapeID = 1;
/*var futureLandscapeID; als er een landschap aan het bewegen is en er wordt een andere ID geselecteerd, wordt (wanneer dat landschap gedaan is met bewegen) er naar deze futureLandsapID gegaan */


/* - - - - - - - - - - - - - - - - - - - - - - - - -
CLOUDS
- - - - - - - - - - - - - - - - - - - - - - - - - -*/
$(document).ready(function() {
    //big_clouds move
    setInterval(function() {
        if (allowCloudMovement) {
            bigCloudsCnt = bigCloudsCnt + cloudSpeed;
            if (bigCloudsCnt >= 640) { bigCloudsCnt = bigCloudsCnt - 640; }
            $(".big_clouds").css("background-position", bigCloudsCnt + "px 0px");
            //alert(allowCloudMovement);
        }
    }, 90);

    //small_clouds move
    setInterval(function() {
        if (allowCloudMovement) {
            $(".small_cloud").each(function(index, domEle) {
                // domEle == this
                var left = parseFloat($(this).css("left").replace("px", ""));
                left = parseFloat(left + 1);

                $(this).css("left", left + "px");
                if (left > ($("body").width()) || left < -65) {
                    $(this).remove();
                    return false;
                }
            });
        }
    }, 50);

    addRandomCloud(2);
    setInterval(function() {
        addRandomCloud(4);
    }, 10000);

    //INIT place of landscapes
    initLandscapes();
});


function addRandomCloud(choices) {
    var randomCloud = Math.floor(Math.random() * choices);
    switch (randomCloud) {
        case 0:
            $(".small_clouds").append("<div class=\"small_cloud cloud1\" ></div>");
            break;
        case 1:
            $(".small_clouds").append("<div class=\"small_cloud cloud2\" ></div>");
            break;
        case 2:
            $(".small_clouds").append("<div class=\"small_cloud cloud3\" ></div>");
            break;
    }
}

//INIT place of landscapes
function initLandscapes() {
    docWidth = $(document).width();
    $("#landscape_holder_layer1 .landscape_item").width(docWidth);
    $("#landscape_holder_layer2 .landscape_item").width(docWidth + parallaxDiff);
    $("#landscape_holder_layer3 .landscape_item").width(docWidth + parallaxDiff * 2);
    $("#landscape_holder_layer4 .landscape_item").width(docWidth + parallaxDiff * 3);
    
}



function changeLandscape(toID) {
    var speed = 4000;
    var currentLeft = parseFloat($("#landscape_holder_layer1").css("left"));
    var gotoLeft = parseFloat(((toID - 1) * docWidth) * -1);

    if (currentLandscapeID != toID && !isNaN(toID)) { 
        if (allowTransitions()) {
            allowCloudMovement = false;
            
            //landscape layers
            $("#landscape_holder_layer1").stop().animate({ "left": gotoLeft + "px" }, parseFloat(speed));
            $("#landscape_holder_layer2").stop().animate({ "left": parseFloat(gotoLeft - (parallaxDiff) * (toID - 1)) + "px" }, parseFloat(speed));
            $("#landscape_holder_layer3").stop().animate({ "left": parseFloat(gotoLeft - (parallaxDiff * 2) * (toID - 1)) + "px" }, parseFloat(speed));
            $("#landscape_holder_layer4").stop().animate({ "left": parseFloat(gotoLeft - (parallaxDiff * 3) * (toID - 1)) + "px" }, parseFloat(speed));

            //CLOUDS
            var bigCloudsBackgroundPos, smallCloudLeft;
            if (toID > currentLandscapeID) { bigCloudsBackgroundPos = '-=' + 640 + 'px'; smallCloudLeft = '-=1000' }
            else { bigCloudsBackgroundPos = '+=640px', smallCloudLeft = '+='+ 500*toID }

            $(".small_cloud").stop().animate({ "left": smallCloudLeft }, speed);
            $(".big_clouds").stop().animate({ "background-position": bigCloudsBackgroundPos }, speed, function() {
                allowCloudMovement = true;
            });
        } else {
            $("#landscape_holder_layer1").css("left", gotoLeft + "px");
            $("#landscape_holder_layer2").css("left", parseFloat(gotoLeft - (parallaxDiff) * (toID - 1)) + "px");
            $("#landscape_holder_layer3").css("left", parseFloat(gotoLeft - (parallaxDiff * 2) * (toID - 1)) + "px");
            $("#landscape_holder_layer4").css("left", parseFloat(gotoLeft - (parallaxDiff * 3) * (toID - 1)) + "px");
        }
    }
    currentLandscapeID = toID;
}