/* Define the number of leaves to be used in the animation */
const STARTS = 2;
var currentStar = 1;
/* 
    Called when the "Falling Leaves" page is completely loaded.
*/
function init()
{
    /* Get a reference to the element that will contain the leaves */
    var container = document.getElementById('main');
    /* Fill the empty container with new leaves */
    for (var i = 0; i < STARTS; i++) 
    {
        container.appendChild(createALeaf());
    }
}

function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}


function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}

function pixelValue(value)
{
    return value + 'px';
}


function durationValue(value)
{
    return value + 's';
}


function createALeaf()
{

    var leafDiv = document.createElement('div');
    var image = document.createElement('img');
   
	if (currentStar == 1) { 
		image.src = '2.png'
		currentStar = 2;
	} else {
		image.src = '1.png';
		currentStar = 1;
	}

    leafDiv.style.top = "-100px";

    /* Position the leaf at a random location along the screen */
    leafDiv.style.left = pixelValue(randomInteger(30, 700));
    
    /* Randomly choose a spin animation */
    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
    
    /* Set the -webkit-animation-name property with these values */
    leafDiv.style.webkitAnimationName = 'flikker, drop';
    image.style.webkitAnimationName = spinAnimationName; 
    
    /* Figure out a random duration for the fade and drop animations */
    var fadeAndDropDuration = durationValue(randomFloat(10, 30));
    
    /* Figure out another random duration for the spin animation */
    var spinDuration = durationValue(randomFloat(4, 8));
    /* Set the -webkit-animation-duration property with these values */
    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

    var leafDelay = durationValue(randomFloat(2, 7));
    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;

    image.style.webkitAnimationDuration = spinDuration;

    // add the <img> to the <div>
    leafDiv.appendChild(image);

    /* Return this img element so it can be added to the document */
    return leafDiv;
}


/* Calls the init function when the "Falling Leaves" page is full loaded */
window.addEventListener('load', init, false);// JavaScript Document