// 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 $contents = jQuery('<div id="coda-slider-1" class="coda-slider"></div>');

    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>');

    jQuery('#blah_id');
    jQuery('.blah .red');

    $tabWrapper = jQuery('<div class="coda-slider-wrapper"></div>');


    $contents.appendTo($tabWrapper);
    $tabs.appendTo($tabWrapper);
    $tabWrapper.appendTo($tabFeature);

    var $headlineDescriptions = jQuery('<div id="headline-descriptions"></div>');

console.log($headlineDescriptions);
    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+') center center">\
                    <div class="panel-wrapper">\
                    </div>\
                </a>');

        // This is custom to youthwrite. We have the information dropped inside a
        // special #coda-descriptions area.
        var $info = jQuery('<div class="headline_carousel-info">\
                <div class="headline_carousel-text">\
                <a href="'+href+'">\
                    <h2 class="title">' + title +'</h2>\
                    <p>' + summary + '</p>\
                </a>\
                <div class="related-link">'+ $link.html() +'</div>\
                </div>\
            </div>');

        $content.addClass('clickable');

        var tab = '<li class="tab'+index+'"><a href="#'+index+'"><span class="imgwrapper"><img src="'+img+'" height="67" /></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'));

        $info.appendTo($headlineDescriptions);

        $info.hide();

        $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');
        });

        $tab.bind('click codaSelect',function(){
            $headlineDescriptions.find('.headline_carousel-info').not($info).hide();
            $info.show();
        });
    });

    // Activate the first item
    $tabs.find('>div').eq(0).trigger('click');
    $headlineDescriptions.find('.headline_carousel-info').eq(0).show();

    jQuery(document).ready(function(){
        jQuery('#coda-slider-1').codaSlider({
            dynamicArrows: false,
            dynamicTabs: false,
            autoSlide: true,
            autoSlideInterval: 7000,
            autoSlideStopWhenClicked: true
        });

        $headlineDescriptions.appendTo($tabFeature);
    });

})();