/*############### FEATURED ORIGINAL SLIDER  ######################*/
function addPortfolioNavItem(id,imgSrc,title) {
	 
	    // If the new navigation menu has NOT been created yet:
	    if(!$('#featured_nav').get(0)) { // Test whether nav-menu already exists
	        $('<ul id="featured_nav" class="clearfix"/>')
	            .insertAfter('#portfolio-wrapper'); // If it does not exist then create it and insert before #portfolio-wrapper (an element which will be created later)
	    }
	    // creates a new list item and appends it to #featured_nav
	    return $('<li><a href="#' + id + '" title="' + title + '"><img width="61" height="39" src="' + imgSrc + '" alt="' + title + '" /></a></li>').appendTo('#featured_nav');
	 
}	
$(function(){ // Function initiates when DOM is ready
	
    // Apply styles to #portfolio and wrap it in #portfolio-wrapper
    $('#portfolio')
        .css({
            height: '392px', // 392 is the height of each portfolio image  (360px) + any padding/margin/borders  ( 12(2x6px padding on the img)+2(2x1px border)+18(18px bottom padding on the ul#portfolio) ) 
            width: ($(this).width() * $('#portfolio li').size()) + 'px', // i.e. 960x10 = 9600
            position: 'relative'
        })
        .wrap('<div id="portfolio-wrapper" style="width:960px;overflow:hidden;position:relative;"></div>'); // Wrap in new DIV element (required for scroll to work properly)
	
	$('#portfolio li')
        // Looping through each list-item:
        .each(function(){
 
            var newNavItem = addPortfolioNavItem( $(this).attr('id') , $('img:eq(0)',this).attr('src') , $('h2',this).text() );
			
            newNavItem.children('a:eq(0)').click(function(){
                // When portfolio nav-item is clicked:
                $('img',this).css({opacity:0.5}).parents('li').addClass('active_slide').siblings().removeClass('active_slide'); // Dim to .8 opacity (to show the user they've been there)
                var id = $(this).attr('href').split('#')[1]; // FIX: IE returns actual HREF instead of href attribute
                var difference = $('#portfolio').offset().left-$('#portfolio li#' + id).offset().left; // leftOffset of ul#portfolio minus leftOffset of selected portfolio piece
                $('#portfolio').animate({left: difference}, 700); // Animate to the value of different over 700 milliseconds
                return false; // prevent default action of links
            });
		
        })
		
        .css({
            width: '960px', // Specify width as 960 (minus any padding/margin/borders on either side)
            margin: 0, 
            float: 'left'
		});
		
});
 
/*############### FEATURED CODA SLIDER - IMAGE AND TEXT  (Automatic & Manual scroll) ######################*/
$(function(){ 

	// redefine Cycle's updateActivePagerLink function 
	$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
	    $(pager).find('li').removeClass('active_slide') 
	        .filter('li:eq('+currSlideIndex+')').addClass('active_slide'); 
	}; 
	         
	$('#featured_slider').after('<ul id="featured_nav" class="clearfix">').cycle({ 
		fx:			'scrollLeft',
		speed:  200,
		timeout: 	5000, 
		pager:  	'#featured_nav',
		pagerEvent: 'mouseover', 
		pause: true,	
		pauseOnPagerHover: true, 
	    fastOnEvent: true, 	
	    pagerAnchorBuilder: function(idx, slide) { 
			var src = $('img',slide).attr('src');
			var href = $('.viewArticle',slide).attr('href');
			var newarticle = '';
			if($('.newarticle',slide).length > 0) newarticle = '<span class="newarticle">NEW	</span>';
			return '<li><a href="' + href + '">' + newarticle + '<img src="' + src + '" width="61" height="39" /></a></li>'; 
		 //	var src = $('img',slide).attr('src'); 
	       // return '<li><a href="#"><img src="' + src + '" width="61" height="39" /></a></li>'; 

	    } 
	}); 
});