// This file transforms the browse feature output into a format usable by nivo slider.
// It then instantiates the nivo slider accordingly.

// See the nivo slider documentation for additional parameters. There are additional
// transition effects available and things like timings can be configured.

// http://nivo.dev7studios.com/#usage

// Configuration is done at the bottom of the file.

// Usage:
// The mst file should have the following markup somewhere:
// <div id="headline-content">
//    <div>
//        [template:core.relations(headline_carousel)]
//    </div>
// </div>
// <div id="headline-slider"></div>

// The script specifically looks for the "#headline-content" element and scrapes out browse feature data from it.
// It re-draws it all inside of the headline-slider element. If you wish to move the element around on the page, move the headline-slider element.

// The mst file will need to include the various CSS and Javascript files.
// They should be included after the "#headline-content" element.
// Required scripts and css:
// 	jquery.nivo.slider.js (or jquery.nivo.slider.pack.js)
//	nivo-slider.css
//  nivo_carousel.js

// TODO: Replace this with css when finished testing.
jQuery('#headline-content').hide();
jQuery('#headline-content .headline_carousel table').each(function(index){
    // Offset the index by 1.
    var index = index + 1;

    // Set up other useful variables (with data scraped from the regular browse-feature output).
    var title = jQuery(this).find('.related-title').text();
    var summary = jQuery(this).find('.related-summary').html();
    var img = jQuery(this).find('.related-image img').attr('src');
    var $link = jQuery(this).find('.related-link').clone();

    // Generate the image element. Set it's title to the id of the caption as per nivo-slider usage instructions.
    // Wrap the image element in a link tag (to the featured page).
    var imgEl = jQuery(this).find('.related-image img').clone().wrap('<a href="'+$link.attr('href')+'"</a>').attr('title','#caption-'+index);

    // Generate the caption element.
    var $caption = jQuery('<div id="caption-'+index+'"><h2>'+title+'</h2><div id="summary">'+summary+'</div></div>').hide();
    jQuery('#headline-slider').after($caption);

    // Append read more link only if there are more than 240 characters in the summary.
    if(summary.length > 0)
    {
        $caption.append($link);
    }

    jQuery('#headline-slider').append(imgEl);
});

if(jQuery('#headline-content .headline_carousel table').size() > 0 )
{
    jQuery('#headline-slider-wrapper').css('display','block');
}
else
{
    jQuery('#headline-slider-wrapper').css('display','none');
}

jQuery('#headline-slider').nivoSlider({
    slices:4,//Performance, we only use the fade transition by default.
    manualAdvance:false,
    pauseTime:5000,
    effect:'fade',
    afterLoad:function(){
        // Centers control buttons horizontally wrt to headline-slider element.
        //var newLeft = jQuery('#headline-slider').outerWidth() / 2 - jQuery('.nivo-controlNav').outerWidth() / 2;
        //jQuery('.nivo-controlNav').css('left',newLeft+'px');
    }
});