// Meant for inline inclusion after
// the tab-feature content to minimize flash of unstyled content.
/*
 * Markup expected by coda slider javascript.
 *  
 *  
 *  
   <div class="coda-slider-wrapper">
   	<div id="coda-nav-left-5" class="coda-nav-left"><a href="#" title="Slide left">&#171;</a></div>
       <div id="coda-nav-5" class="coda-nav">
       	<ul>
           	<li class="tab1"><a href="#1">Panel 1</a></li>
               <li class="tab2"><a href="#2">Panel 2</a></li>
               <li class="tab3"><a href="#3">Panel 3</a></li>
               <li class="tab4"><a href="#4">Panel 4</a></li>
           </ul>
       </div>
       <div id="coda-nav-right-5" class="coda-nav-right"><a href="#" title="Slide right">&#187;</a></div>
       <div class="coda-slider preload" id="coda-slider-5">
       	<div class="panel">
           	<div class="panel-wrapper">
               	<h2 class="title">Panel 1</h2>
                   <p>Lorem ipsum dolor sit amet...</p>
            	</div>
           </div>
           <div class="panel">
             	<div class="panel-wrapper">
                   <h2 class="title">Panel 2</h2>
                   <p>Proin nec turpis eget dolor dictum lacinia...</p>
               </div>
           </div>
           <div class="panel">
           	<div class="panel-wrapper">
               	<h2 class="title">Panel 3</h2>
                   <p>Cras luctus fringilla odio vel hendrerit....</p>
               </div>
           </div>
           <div class="panel">
           	<div class="panel-wrapper">
               	<h2 class="title">Panel 4</h2>
                   <p>Nulla ultricies ornare erat...</p>
               </div>
           </div>
       </div><!-- .coda-slider -->
   </div><!-- .coda-slider-wrapper -->
 */
(function(){

	var $tabFeature = jQuery('#headline-content');
	
	// Quit if we don't have any content.
	if(!$tabFeature.find('.headline_carousel table').length)
	{
		return;
	}
	var $tabs = jQuery('<div id="coda-nav-left-1" class="coda-nav-left"><a href="#" title="Slide left">&#171;</a></div>\
			<div id="coda-nav-1" class="coda-nav"><ul></ul></div>\
			<div id="coda-nav-right-1" class="coda-nav-right"><a href="#" title="Slide right">&#187;</a></div>');
			
	var $contents = jQuery('<div id="coda-slider-1" class="coda-slider"></div>');

	$tabWrapper = jQuery('<div class="coda-slider-wrapper"></div>');
	$contents.appendTo($tabWrapper);
	$tabs.appendTo($tabWrapper);
	
	$tabWrapper.appendTo($tabFeature);
	

	jQuery('#headline-content .headline_carousel table').each(function(index){
	    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();
	    
	    var href = $link.find('a').attr('href');
	    
	    // Tab construction
		var $content = jQuery('\
				<a href="'+href+'" class="panel" style="background:url('+img+')">\
	    			<div class="panel-wrapper">\
	    				<div class="headline_carousel-text">\
		    				<h2 class="title">' + title +'</h2>\
		    				<p>' + summary + '</p>\
	    				</div>\
	    			</div>\
				</a>');

	    
	    
		var tab = '<li class="tab'+index+'"><a href="#'+index+'"><span class="imgwrapper"><img src="'+img+'" height="70" /></span><span class="title">' + title +'</span><p>' + summary + '</p><span class="current_icon"></span></a></li>';
		
	    var $tab = jQuery(tab);
	    
	    if(summary.length > 240)
	    {
	        $content.find('.headline_carousel-text').append($link);
	    } 
	    
	    $content.hide();
	    
	    $tab.appendTo($tabs.find(' > ul'));
	    $content.appendTo($contents);
	    
	    // Bind events.
	    
	    /*
	    $tab.click(function(){
	        // Tabs and Contents function in a lock step manner.
	        // I.E. The nth tab in the tabs area corresponds to the nth content in the contents area.
	        $tabs.find('>div').not($tab).removeClass('active');
	        $tab.addClass('active');
	        
	        var $activeContent = $contents.find('>div').eq($tab.index());
	        $contents.find('>div').not($activeContent).hide();
	        $activeContent.show();
	    });
	    */
	    $tab.hover(function(){
	        jQuery(this).addClass('hover');
	    },function(){
	        jQuery(this).removeClass('hover');
	    });
	});

	// Activate the first item
	$tabs.find('>div').eq(0).trigger('click');
	
	jQuery(document).ready(function(){
		jQuery('#coda-slider-1').codaSlider({
			dynamicArrows: false,
			dynamicTabs: false,
			autoSlide: true,
			autoSlideInterval: 5000,
			autoSlideStopWhenClicked: true
		});
	});

})();