/*
File: MoFalling.js

Abstract: Defines JavaScript functionality for the WithCSSExtensions sample.
          Creates all the MOs but do not animate them. Determines which
          spin animation should be applied to each Mo.
		  
Version: 1.0

Feb 19, 09 - modified fromLeaves.js
Feb 21 - Extended


*/


/* Define the number of MOs to be used in the animation */
const NUMBER_OF_MOS = 24;

/* 
    Called when the "Falling MOs" page is completely loaded.
*/
function init()
{
    /* Get a reference to the element that will contain the MOs */
    var container = document.getElementById('MoContainer');
    /* Fill the empty container with new leaves */
    for (var i = 1; i < NUMBER_OF_MOS; i++) 
    {
        container.appendChild(createAMo(i));
    }
}


/*
    Receives the lowest and highest values of a range and
    returns a random integer that falls within that range.
*/
function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}


/*
   Receives the lowest and highest values of a range and
   returns a random float that falls within that range.
*/
function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}


/*
    Receives a number and returns its CSS pixel value.
*/
function pixelValue(value)
{
    return value + 'px';
}


/*
    Returns a duration value for the falling animation.
*/

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


/*
    Uses an img element to create each Mo. "MoFalling.css" implements two spin 
    animations for the leaves: clockwiseSpin and counterclockwiseSpin. This
    function determines which of these spin animations should be applied to each Mo.
    
*/
function createAMo(i)
{
    /* Start by creating a wrapper div, and an empty img element */
    var MoDiv = document.createElement('div');
    var image = document.createElement('img');
    
    /* Randomly choose a Mo image and assign it to the newly created element */
/*    image.src = 'littleMo/Mo' + randomInteger(1, MAX_MOS ) + '.png'; */
     image.src = 'littleMo/Mo' + i + '.png';
   
    /* Position the Mo at a random location within the screen */
    MoDiv.style.top = pixelValue(randomInteger(-150, -50));
    MoDiv.style.left = pixelValue(randomInteger(0, 500));
    
    /* Randomly choose a spin animation */
    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpin';
    
    /* Set the -webkit-animation-name property with these values */
    MoDiv.style.webkitAnimationName = 'fade, drop';
    image.style.webkitAnimationName = spinAnimationName;
    
    /* Figure out a random duration for the fade and drop animations */
    var fadeAndDropDuration = durationValue(randomFloat(5, 11));
    
    /* Figure out another random duration for the spin animation */
    var spinDuration = durationValue(randomFloat(4, 8));
    /* Set the -webkit-animation-duration property with these values */
    MoDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
    image.style.webkitAnimationDuration = spinDuration;

    /* Add the created image to the div */
    MoDiv.appendChild(image);

    /* Return this div so it can be added to the document */
    return MoDiv;
}

function changeAMo()
{
   /* Randomly choose a Mo image and assign it to the newly created element */
    image.src = 'littleMo/Mo' + randomInteger(1, 24) + '.png';

}



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