var previousItem;
var interval;
var intervalTime = 10000;
var intervalReadTime = 30000;

$(document).ready(function () {
    headlineStart();

    $('.Headline .Text .Item').hover(function () {
        clearInterval(interval);
        interval = setInterval('retInterval()', intervalReadTime);
        headlineShow($(this));
    });
});

function headlineStart() {
    //Set the opacity of all images to 0
    $('.Headline .Image a').css({ opacity: 0.0 });

    //Get the first image and display it (set it to full opacity)
    $('.Headline .Image a:first').css({ opacity: 1.0 });
    
    //Set the caption background to semi-transparent
    $('.Headline .Image .caption').css({ opacity: 0.7 });

    //Resize the width of the caption according to the image width
    $('.Headline .Image .caption').css({ width: $('.Headline .Image a').find('img').css('width') });

    //Get the caption of the first image from TITLE attribute and display it
    $('.Headline .Image .content').html('<h3>' + $('.Headline .Image #ctl00_body_lnkNewsHomeImage0').attr('title') + '</h3>').css({ opacity: 0.5 }).animate({ opacity: 1.0 }, 400);

    //Set the variable
    previousItem = $('.Headline .Text div:first');

    //Call the headline function to run the slideshow
    interval = setInterval('headlineNext()', intervalTime);
}

function headlineNext() {
    //if no DIVs have the show class, grab the first image
    var current = ($('.Headline .Text div.Show') ? $('.Headline .Text div.Show') : $('.Headline .Text div:first'));

    //Get next div, if it reached the end of the slideshow, rotate it back to the first div
    var next = ((current.next().length) ? ((current.next().hasClass('Back')) ? $('.Headline .Text div:first') : current.next()) : $('.Headline .Text div:first'));

    //Show the selected item
    headlineShow(next);
}

function headlineShow(currentItem) {
    if (currentItem.attr('rel') != previousItem.attr('rel')) {
        $('.Headline .Text .Back').animate({ top: (85 * $(currentItem).attr('rel')) }, { queue: false, duration: 500 });

        //Hides the current image e shows the next
        $('.Headline .Image #ctl00_body_lnkNewsHomeImage' + previousItem.attr('rel')).css({ opacity: 1.0 }).animate({ opacity: 0.0 }, { queue: false, duration: 500 });
        $('.Headline .Image #ctl00_body_lnkNewsHomeImage' + currentItem.attr('rel')).css({ opacity: 0.0 }).animate({ opacity: 1.0 }, { queue: false, duration: 500 });

        //Set the fade in effect for the next image, show class has higher z-index
        currentItem.addClass('Show');

        //Hide the current image
        previousItem.removeClass('Show');
                
        //Set the opacity to 0 and height to 1px
        $('.Headline .Image .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: false, duration: 300 });

        //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
        $('.Headline .Image .caption').animate({ opacity: 0.7 }, 100).animate({ height: '40px' }, 500);

        //Display the content
        $('.Headline .Image .content').html('<h3>' + $('.Headline .Image #ctl00_body_lnkNewsHomeImage' + currentItem.attr('rel')).attr('title') + '</h3>').css({ opacity: 0.0 }).animate({ opacity: 1.0 }, { queue: false, duration: 800 });
                
        previousItem = currentItem;
    }
}

function retInterval() {
    clearInterval(interval);
    interval = setInterval('headlineNext()', intervalTime);
}