﻿
var transitionBanner = function() {
    var effectsArray = new Array();
    var containerCount;
    var t;
    var randomNo;
    var noOfContainers
    // Define how many elements are in the container
    noOfContainers = $(".effect").length;
    // Random number is currently 0
    randomNo = 0;
    // Hide all the elements in the container to start with
    $(".effect").hide();
    // Define all of the effects
    effectsArray[0] = "drop";
    effectsArray[1] = "blind";
    effectsArray[2] = "fold";
    effectsArray[3] = "puff";
    effectsArray[4] = "clip";
    effectsArray[5] = "fade";
    // Set the current container count to 0
    containerCount = 0;

    this.startBanner = function() {
        // Start the transitions 
        updateBox();
    };

    function runEffect(obj) {
        // Gernerate the random number
        randomNo = randomFromTo(0, effectsArray.length - 1);
        // Find the current element and apply an effect to it, then issue a call back
        $(".effect").eq(containerCount).effect(effectsArray[randomNo], null, 500, function() {
            // Hide the element after half a second
            $(".effect").eq(containerCount).hide();
            // increment the count, this will be used
            containerCount++;
            // Call the function to fade in the next item
            updateBox();
        });
    };

    function randomFromTo(from, to) {
        // Generate a random number between 0 and the length of the array
        // This will then be used to pick a container
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    function updateBox() {
        // If the count is equal to the total containers we have reached the end, so 
        // set the count to 0 to start again
        if (containerCount == noOfContainers) {
            containerCount = 0;
        }
        // Fade in the next item
        $(".effect").eq(containerCount).fadeIn(1000);
        // Call the timeout again to fade out the shown item
        t = setTimeout(runEffect, 5000); // 5000 = 5 seconds
    }
};
