//Variables needed for headlines rotator
var headline = -1;
var maxHeadline = 1;
var headlineTimeout = 0;

//Function to start the rotator
$(document).ready(
    function  startHeadlineRotator(){
        maxHeadline = $(".headlinesList > li").length -1;   //Get max headline id
        rotateHeadlines();                                  //Auto rotate the headlines
    }
);

//Functions to rotate the headlines
function rotateHeadlines() {
    showNextHeadline();                                                 //Show the next headline
    headlineTimeout = setTimeout('rotateHeadlines();',5000);            //Rotate the headline again in 3000 mili-seconds
}

function showNextHeadline() {
    if (headline < maxHeadline) {headline++;}                           //If we are not at the last headline make the current headline the next headline
    else {headline = 0;}                                                //Otherwise make the current headline the first headline
    switchHeadline(headline);                                           //Switch the visible headline to match our new current headline
    clearTimeout(headlineTimeout);                                      //Clear the timeout for the parent timer
}

function switchHeadline(headline) {
    var prevHeadline;
    if (headline == 0) {prevHeadline = maxHeadline;}                     //If we are on the first headline then the previous headline was the last headline
    else {prevHeadline = headline - 1;}                                 //Otherwise the previous headline is the previous headline
    $(".headlinesList > li:eq(" + String(prevHeadline) + ")").fadeOut(1200);                                    //Fade out the old headline text
    $(".headlinesList > li:eq(" + String(prevHeadline) + ")").css({'paddingLeft' : '10'});                     //Add the padding back in
    setTimeout('slideNewHeadline(' + headline + ')',0);   
}

function slideNewHeadline(headline) {  
    $(".headlinesList > li:eq(" + String(headline) + ")").animate({opacity: 'toggle', paddingLeft: '0'}, 1700);     //Fade the headline in and remove the left padding
}