$(document).ready(function() {
  $toggleOn = true;
  
  $("#index_box_navigation li ").click(function() {               
        if ($toggleOn == true) {              
            $("#index_box_navigation li ").removeClass('sel');              
            $(this).addClass('sel');
        }
        $toggleOn = false;
    });
      
  $(".index_box_next").click(function() {
      if ($toggleOn == true) {
        $("#index_box_navigation li ").removeClass('sel');     
        var pos = $(this).attr("class");
        var pos = pos.split(" ");
        var pos = pos[1];        
        var pos = pos.split("_");
        var pos = pos[1];
        $(".ibn_"+pos).addClass('sel');
       }
        $toggleOn = false;
  });
    
  
    $('#index_box').serialScroll({
        target:'#index_box_container',
        next:'.index_box_next',// Selector to the 'next' button (absolute too)
        items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )                   
        axis:'x',// The default is 'y' scroll on both ways
        navigation: '#index_box_navigation li a',
        duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
        force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)                                       
        cycle:true,
        
        onBefore:function( e, elem, $pane, $items, pos ){                        
             //those arguments with a $ are jqueryfied, elem isn't.
            e.preventDefault();
            if( this.blur )
                this.blur();
        },
        
        onAfter:function( elem ){                        
            $toggleOn = true;
            //'this' is the element being scrolled ($pane) not jqueryfied
        }
    });
 });