//Global variables
var maxWidth = 0;           //Max Width of the TapeTicker
var animationTimeOut = 0;   //Time of Animation
var counter = 0;            //Counter to select the right image from the array
var tickerSpeed = 1;        //Speed of the TapeTicker
var paddingLeftRight = 30;  //Padding value for Left or Right
var engineSpeed = 40;       //Engine speed (Time the function is called(interval))
var ulMultiplier = 2.5;     //Multiplier of the ul

//Do when done loading
jQuery(window).load(function()
{
    Initialize();
    Start();
});

//Initialize 
function Initialize()
{
    //Set speed of logoticker from Sitecore
    var tempSpeed = parseInt(jQuery(".sponsors").attr("speed"));
    if (tempSpeed != 0)
    {
        tickerSpeed = tempSpeed;
    }

    var liWidth = 0;                                //Li Width
    var ulHeight = jQuery(".sponsors").height();    //Height of ul
    var ulWidth = jQuery(".sponsors").width();      //Width of ul
    var AllLi = jQuery(".sponsors").children();     //All Li's
    var images = AllLi.children().children();       //Images

    //Calculate total width of all li elements (count the images)
    images.each(function()
    {
        liWidth += (jQuery(this).width() + (paddingLeftRight * 2));
    });

    //Calculate multiplier
    var multiplier = 1;
    if (liWidth < (ulWidth * ulMultiplier))
    {
        var diffWidth = ((ulWidth * ulMultiplier) - liWidth);
        multiplier = Math.ceil(diffWidth / liWidth);
    }

    //Copy the li elements with multiplier
    var liCounter = 0;
    var multiplierImages = (multiplier * AllLi.length);
    for (var i = 0; i < multiplierImages; i++)
    {      
        //Get element
        var elem = jQuery(AllLi[liCounter]);

        //Clone element
        elem.clone().appendTo(".sponsors");
        
        //Reset counter if last items has been passed
        if (AllLi.length == liCounter)
        {
            liCounter = 0;
        }
        else
        {
            //Higher counter
            liCounter++;
        }       
    }

    //Loop through all images(after copy) and calculate new width
    jQuery(".sponsors li a img").each(function()
    {
        maxWidth += (jQuery(this).width() + (paddingLeftRight * 2));
    });

    //Set New width of ul
    jQuery(".sponsors").width(maxWidth);
    
    //Set Position of All Li Elements
    var leftPosition = 0;
    jQuery(".sponsors").children().each(function()
    {
        //Set position
        jQuery(this).css("left", (leftPosition + "px"));

        //Calculate left position for next element
        leftPosition += (jQuery(this).children().children().width()) + (paddingLeftRight * 2);

        //Get image
        var image = jQuery(this).children().children();

        //Get height and calculate padding top and bottom
        var tempHeight = image.height();
        var paddingTopBottom = ((ulHeight - tempHeight) / 2);

        //Set padding values
        image.css("padding-top", paddingTopBottom + "px");
        image.css("padding-right", paddingLeftRight + "px");
        image.css("padding-bottom", paddingTopBottom + "px");
        image.css("padding-left", paddingLeftRight + "px");

        //Prepare grayscale
        grayscale.prepare(image);

        //Make Image gray
        grayscale(image);

        //Set hover functions. MousEnter = Color, MouseLeave = Gray
        image.hover(
        function()
        {
            grayscale.reset(this);
        },
        function()
        {
            grayscale(this);
        });
    });

    //Wrap 2 divs around ul
    jQuery(".sponsors").wrap("<div class=\"simply-scroll-clip\"></div>").wrap("<div class=\"simply-scroll simply-scroll-container\"></div>");

    //Bind Hover
    BindStartStopHover();
}

//Bind the hover function for start and stop
function BindStartStopHover()
{
    jQuery(".sponsors").children().hover(function()
    {
        Stop();
    },
    function()
    {
        Start();
    });
}

//Function to start the logoTicker
function StartLogoTicker()
{
    //Get all li elements
    var allLiElements = jQuery(".sponsors").children();

    //Reset counter if all li elements have been passed
    if (counter >= allLiElements.length)
    {
        counter = 0;
    }

    //Loop through all li elements
    allLiElements.each(function(index)
    {
        //Get left position
        var left = parseInt(jQuery(this).css("left").replace("px", ""));

        //Move left
        jQuery(this).css("left", (left - tickerSpeed) + "px");

        //If index is same as counter
        if (index == counter)
        {
            //Calculate variables
            var current = jQuery(allLiElements[counter]);
            var currentLeft = parseInt(current.css("left").replace("px", ""));
            var currentImage = current.children().children();
            var currentRight = (currentLeft + currentImage.width() + (paddingLeftRight * 2));

            //If image is not visible anymore then set it at the end(=after last li)
            if (currentRight < 0)
            {
                //Position new left position (= maxwidth minus the picture(padding included))
                var newLeftPosition = (maxWidth - (currentImage.width() + (paddingLeftRight * 2)));

                //set new position on element
                current.css("left", newLeftPosition + "px");

                //higher the counter
                counter++;
            }
        }
    });
}

//Start the LogoTicker
function Start()
{
    animationTimeOut = setInterval(StartLogoTicker, engineSpeed);
}

//Stop the LogoTicker
function Stop()
{
    clearInterval(animationTimeOut);
}