$(function()
        {

 $('div.showarea').fadeOut(0);
    $('div.showarea:first').fadeIn(500);
    
    $('a.leftarrow, a.rightarrow').click( function (ev) {
        //prevent browser jumping to top
        ev.preventDefault();

        //get current visible item
        var $visibleItem = $('div.showarea:visible');
        
        //get total item count
        var total =  $('div.showarea').length;

        //get index of current visible item
        var index = $visibleItem.prevAll().length;
          
        //if we click next increment current index, else decrease index
        $(this).attr('href') === '#carouselNext' ? index++ : index--;

        //if we are now past the beginning or end show the last or first item
        if (index === -1){
           index = total-1;
        }
        if (index === total){
           index = 0
        }
        
        //hide current show item
        $visibleItem.hide();

        //fade in the relevant item
        $('div.showarea:eq(' + index + ')').fadeIn(500);
    
    });

        });