$(document).ready(function(){
        /*
        // on event callback for sencond cycle block
        var callbackOnPagerEvent = function(zeroBasedSlideIndex, slideElement) {
            $('#feature-items-list2').cycle({
                startingSlide:zeroBasedSlideIndex
            });
        }
        
        var callbackOnBefore = function(curr,next,opts){
            var zeroBasedSlideIndex = opts.nextSlide;
            $('#feature-items-list2').cycle({ 
                fx:    		'fade', 
                startingSlide:zeroBasedSlideIndex
            });
        }*/

	/* Initiate feature items cycling on homepage */
	$('#feature-items-list').before('<ul id="feature-nav">').cycle({ 
    	fx:    'fade', 
    	speed:  1000,
        timeout : 8000,
        manualTrump:   true,
    	pager:  '#feature-nav',
    	cssAfter:	{
    					zIndex: 7,
    					position: 'absolute'
    				}/*,
        before: callbackOnBefore,
        onPagerEvent: callbackOnPagerEvent*/

 	}).css("zIndex", "7");
 	
 	//$('#feature-items-list2').cycle({timeout:8000});
 	
 	/* Replace the cycle pager's default markup with our required markup */
 	$('#feature-nav a').html('<span>&#9679;</span>').each(function(index){
 		$(this).wrap('<li>');
 	});
 	
 	/* Then add this class to invoke active state on first load */
 	$('#feature-nav li:first').addClass('activeSlide');
	
});