$(document).ready(function(){
    
    /* gallery */
    /* This code is executed after the DOM has been completely loaded */

         var totWidth=0;
         var positions = new Array();
         
         // The number of seconds that the slider will auto-advance in:

         var changeEvery = 6;
         var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
         

         $('#gallery #slides .slide').each(function(i){

              /* Traverse through all the slides and store their accumulative widths in totWidth */

              positions[i]= totWidth;
              totWidth += $(this).width();

              /* The positions array contains each slide's commulutative offset from the left part of the container */

              if(!$(this).width())
              {
                   return false;
              }

         });
        if (totWidth > 0)
             $('#gallery #slides').width(totWidth);

         /* Change the cotnainer div's width to the exact width of all the slides combined */
        
        $('#gallery #menu ul li a').hover(function(e, keepScroll){
            
            $('#gallery li.menuItem').removeClass('act').addClass('inact');
            $(this).closest('li.menuItem').removeClass('inact').addClass('act');
            
            $(this).trigger('click',[false]);
            /* change current to rollover */
            target = $('img', this)
            src = target.attr('src').replace('/banner_thumb', '/rollover');
            target.attr('src', src);
            target.attr('width',156);
            target.attr('height', 112);

        }, function(e, keepScroll){
           $(this).closest('li.menuItem').removeClass('act').addClass('inact');
           $(this).trigger('click',[true]);
           
           itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
           /* change all image to inactive */
           $('img', '#gallery li.menuItem').each(function(i){
               target = $(this)
               src = $(this).attr('src').replace('/rollover', '/banner_thumb');;
               $(this).attr('src', src);
               $(this).attr('width', 115);
               $(this).attr('height', 82);
           });
        });
           
         $('#gallery #menu ul li a').click(function(e,keepScroll){

                   /* On a thumbnail click */
                   
                   var pos = $(this).parent().prevAll('.menuItem').length;

                   $('#gallery #slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
                   /* Start the sliding animation */

                   //e.preventDefault();
                   /* Prevent the default action of the link */


                   // Stopping the auto-advance if an icon has been clicked:
                   if(!keepScroll) clearInterval(itvl);
         });

         $('#gallery #menu ul li.menuItem').addClass('inact');
         /* On page load, mark the first thumbnail as active */



         /*****
          *
          *     Enabling auto-advance.
          *
          ****/

         var current=1;
         var dir="fwd"
         function autoAdvance()
         {
              if(current==-1) return false;
              
              if (current == 0) dir='fwd';
              if (current >= $('#gallery #menu ul li a').length - 1) dir='pwd';
              
              $('#gallery #menu ul li a').eq(current).trigger('click',[true]);     // [true] will be passed as the keepScroll parameter of the click function on line 28
              
              if (dir=="fwd" )  current++;
              else current--;
              
         }

         /* End of customizations */
    
    /* */
    // strilli
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
    //Vertical Sliding
    $('.boxgrid').hover(function(){
        target = $('img', this);
        src = target.attr('src').replace('/inactive_image', '/active_image');
        target.attr('src', src);
    }, function() {
        target = $('img', this);
        src = target.attr('src').replace('/active_image', '/inactive_image');
        target.attr('src', src);
    });
    $('.boxgrid .boxcaption').hover(function(){
        $(this).addClass('strillo-up');
        $('span.slash', this).addClass('testoorange');
        $(this).stop().animate({'margin-top':'-69px'},{queue:false,duration:300});
    }, function() {
        $(this).removeClass('strillo-up');
        $('span.slash', this).removeClass('testoorange');
        $(this).stop().animate({'margin-top':'-29px'},{queue:false,duration:300});
    });
});