$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: true, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){
            criarThumbnailsSlide();
        } // Triggers when slider has loaded
    });
});

function criarThumbnailsSlide(){

    
    //tamanho final do wrapper
    var scrollWidth = $('#slider .nivo-controlNav a').length * $('#slider .nivo-controlNav a:first').outerWidth(true);
    
    //div que tem os thumbs
    var divThumbs = $('#slider .nivo-controlNav');
    //dimensão dessa div
    var thumbsWidth = divThumbs.width();
    //faço o wrap
    divThumbs.wrapInner("<div class='scrollArea'>");
    //acesso à nova div scroller
    var scroller = $('#slider .nivo-controlNav .scrollArea');
    //tamanho final
    scroller.width(scrollWidth);
    
    //When user move mouse over menu
    divThumbs.mousemove(function(e){
      var left = (e.pageX - divThumbs.offset().left) * (scrollWidth-thumbsWidth) / thumbsWidth;
      divThumbs.scrollLeft(left);
    });
    
    $("#slider .nivo-controlNav a").mouseenter(function(){
        $(this).stop().fadeTo("normal", .4);
    }).mouseleave(function(){
        $(this).stop().fadeTo("normal", 1);
    });
    
}