// change right box (with description) immediately or with delay?
var changeImmediately = false;
$(function() {
   var $container = $('#headerLeft')
        .cycle({
            fx:     'fade',
            speed:   1000,
            timeout: 7000,
            pager:  '.sliderMainSelector',
            // callback fn that creates a thumbnail to use as pager anchor
            pagerAnchorBuilder: function(idx, slide) {
                if(idx == 3)
                {
                    return '<a class="sliderDot sliderDotLast" href="#"></a>';
                }
                else
                {
                    return '<a class="sliderDot" href="#"></a>';
                }
            },
            before:function(curr,next,opts, fwd)
            {
                var delayOut;
                var delayIn;
                
                if(changeImmediately)
                {
                    delayOut = 0;
                    delayIn = 0;
                }
                else
                {
                    delayOut = 100;
                    delayIn = 900;
                }
                
                $('#sliderMainSlide' + $(curr).index()).fadeOut(delayOut, function()
                {
                    $('#sliderMainSlide' + $(next).index()).fadeIn(delayIn, function()
                    {
                        changeImmediately = false;
 
                    });
                });

            },
            onPagerEvent: function(zeroBasedSlideIndex, slideElement)
            {
                changeImmediately = true;
            }
        });
});