jQuery( document ).ready( function(){
        jQuery( '#flip' ).jcoverflip({
          current: 5,
          beforeCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 150 - 110*offset + 20*offset )+'px', bottom: '0px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20) + 'px' }, {} )
            ];
          },
          afterCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 70 + 90*offset )+'px', bottom: '0px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20) + 'px' }, {} )
            ];
          },
          currentCss: function( el, container ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 55 )+'px', bottom: '0px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: '95px' }, { } )
            ];
          },
          change: function(event, ui){
            jQuery('#scrollbar').slider('value', ui.to*25);
          }
        });
        
        
        jQuery('#scrollbar').slider({
          value: 50,
          stop: function(event, ui) {
            if(event.originalEvent) {
              var newVal = Math.round(ui.value/25);
              jQuery( '#flip' ).jcoverflip( 'current', newVal );
              jQuery('#scrollbar').slider('value', newVal*25);
            }
          }
        });
      });