// Cloned by Enhanced on 1 Aug 2018 from World "How to : infinite scrolling background" by SinfulSalad 
// Please leave this clone trail here.
 

// ==== Starter World ===============================================================================================
// (c) Ancient Brain Ltd. All rights reserved.
// This code is only for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// This code may not be copied, re-published or used on any other website.
// To include a run of this code on another website, see the "Embed code" links provided on the Ancient Brain site.
// ==================================================================================================================



// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================
//THE PROGRAM LOOKS VERY LONG FOR SOMETHING SO SIMPLE, BUT IT'S ACTUALLY JUST
//A LOT OF COMMENTS.



AB.clockTick       = 20;            // many frames per second, with small moves, looks best  
AB.screenshotStep  = 1500;   
AB.maxSteps        = 100000;     
const SKYCOLOR 	= "#000000";				// this usage will be of color as a string, not as a number 



//THE ALGORITHM WORKS WITH 3 DISTINCTS ARRAY :
//BACKGROUND_IMG, BACKGROUND_SPEED, AND backgroundPos.

//BACKGROUND_IMG CONTAINS THE DIFFERENT LAYERS OF YOUR BACKGROUND
//THE FIRST IMG WILL BE THE FURTHER AWAY FROM THE CAMERA, AND THE LAST WILL
//BE THE CLOSEST
const BACKGROUND_IMG = ['/uploads/sinfulsalad/neoncity.jpg', 
                        '/uploads/sinfulsalad/citycropped.png', 
                        '/uploads/sinfulsalad/neonground.png'];

//BACKGROUND_SPEED CONTAINS THE MOVEMENT SPEED OF EACH LAYER
const BACKGROUND_SPEED = [1, 2, 4];

//backgroundPos WILL CONTAIN THE HORIZONTAL POSITION OF EACH LAYER
//IT WILL BE INITIALISED IN THE newRun() FUNCTION, AND WILL BE MODIFIED AT
//EACH STEP OF THE PROGRAM
var backgroundPos = [];

//THE INDEXES OF THESE 3 ARRAY ARE LINKED :
//BACKGROUND_IMG[0] will move at the speed of BACKGROUND_SPEED[0], and its
//position will be contained in backgroundPos[0];
//This means that when you add an image, you must not forget to add its
//corresponding speed
//The program works with any number of layers.

  
// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================


function World() 
{ 
    
    //will contain the context of the canvas
    //(we'll just initialise it in the newRun() function, and never touch it again)
    var ctx;

    
    
    //the images you put on the BACKGROUND_IMG array can't be directly displayed
    //by the program. initIMG() is here to make them usable.
    function initIMG()
    {
        var img;
        for (var i = 0; i<BACKGROUND_IMG.length ; i++)
        {
            img = new Image();
            img.src = BACKGROUND_IMG[i];
            BACKGROUND_IMG[i] = img;
            
            backgroundPos.push(0);
        }
    }
    
    
    //this function calculates the next position a layer, and draws it
    //index : the index where your image is stored in BACKGROUND_IMG
    //top : the vertical position of the top of the layer on the canvas
    //height : the vertical size of the layer
    function drawLayer(index, top, height)
    {
        //The function draws 2 versions of the image : one that takes up the whole
        //horizontal space of the screen, and one outside of the screen, on the right.
        //At each step, both images strafe a little bit to the left, so that the
        //second image slowly replaces the first one. And when the first one is completely
        //out of the screen, the position of both images resets
        

        //the position is incremented with AB.clockTick, so that when someone changes
        //AB.clockTick (to make the program smoother, or easier to run for
        //their computer), it doesn't change the speed of the animation
        backgroundPos[index] -= BACKGROUND_SPEED[index]*AB.clockTick/30;
            if (backgroundPos[index] < -threeworld.canvas.width)
                backgroundPos[index] = 0;
                
        ctx.drawImage( BACKGROUND_IMG[index], backgroundPos[index], top, threeworld.canvas.width, height);
        ctx.drawImage( BACKGROUND_IMG[index], threeworld.canvas.width+backgroundPos[index], top, threeworld.canvas.width, height);
    }
    
    //calls drawLayer with the appropriate arguments
    //YOU HAVE TO CHANGE THIS FUNCTION YOURSLEF IF YOU WANT IT TO DO EXACTLY
    //WHAT YOU WANT. You can change the arguments of each function so everything
    //looks good with your images.
    function drawBackground()
    {
        //there should be as many drawLayer() call as you have images
        //in BACKGROUND_IMG
        drawLayer(0, 0, 400);
        drawLayer(1, threeworld.canvas.height-500, 300);
        drawLayer(2, threeworld.canvas.height-230, 230);

    }

    
    this.newRun = function() 
    {
        //world init
        threeworld.init (  SKYCOLOR  ); 
        ctx = threeworld.getContext ( "2d" );
    
        //change the images to make them usable
        initIMG();
    };
    
    
    this.nextStep = function()
    {
        //draw the background
        drawBackground();
    };

}