var $j = jQuery.noConflict();


$j(document).ready(function() {
    //Add click event handler to each li so when user selects a thumbnail cylce will pause for 15sec
    //then continues
    $j('.news-feature-with-image-list ul').children().each(function(i) {
        $j(this).click(function() {
            $j('#Image-Holder').cycle(i);
            $j('#Image-Holder').cycle('pause');
            setTimeout('resumeCycle()', 15000);
        });
    });

    //Changes border color by adding a 'highlight' class when user clicks thumbnail
    $j('.news-feature-with-image-list ul li').click(function() {
        $j('.news-feature-with-image-list ul li').removeClass('highlight');
        $j(this).addClass('highlight');
    });
});


//Start image cycling after all images are loaded to dom
$j(window).load(function() {
    startCycle();
});


function startCycle() {
    //Initiates the jquery Cycle plugin
    $j('#Image-Holder').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout: 6000,
        speed: 1000,
        startingSlide: 0,
        after: onAfter
    });
}


//Resumes image cycling after user selects a thumbnail.
function resumeCycle() {
    $j('.news-feature-with-image-list ul li').removeClass('highlight');
    $j('#Image-Holder').cycle('resume');
}


function onAfter() {
    //alert($j(this).attr('id'));
    var aa = $j(this).attr('id').split('_');
    var content = aa[2];
    var prevContent = content - 1;

    if (prevContent == 0) {
        $j('.news-feature-with-image-list ul li').removeClass('highlight');
    }

    //Fades in image caption and name
    $j('.news-feature-with-image-content').fadeOut(1000);
    $j('#Content_' + content).fadeIn(1000);

    //Fades in small red arrow in image thumbnails
    $j('#Image_' + content).addClass('highlight');
    $j('#Image_' + prevContent).removeClass('highlight');
}