$(document).ready(function() {

    $.fn.jRoll = function (options,diference) {
    
        var options = $.extend({
        
            
            boxes : $(this).find('li:has(img)').size(),
            boxesWitdh : $(this).find('li:has(img)').width() + diference,
            containerSupport : 5,
            containerSize : $(this).find('li:has(img)').size() * $(this).find('li:has(img)').width() + 150,
            prev : ".rollprev",
            next : ".rollnext",
            track: $(this).find('ul')
       
        
        },options);

        
        //Verifying if the page want the plugin
        if ( options.boxes <= options.containerSupport ) return false; 
        
        
        // Variable resposable of alocate the slide index
        var boxIndex = 1
        var trackLeft = 0
        
        // Fixing the ul width;
        $(options.track).width(options.containerSize);
        
        // Function resposable of move the roll to the next step.
        function gotoNext() {
        
            if ( ( boxIndex + options.containerSupport ) <= options.boxes  ) {
                
                trackLeft -=  options.boxesWitdh;
                
                // Decreasing the left anchor of the roll
                $(options.track).animate({ left :  trackLeft  }, 500);
                // Increasing the index
                boxIndex++;
            
            }
        
        }
        
        // Function resposable of move the roll to the previously step.
        function gotoPrev() {
            
            if ( boxIndex - 1 > 0 ) {
              
                trackLeft +=  options.boxesWitdh;
                // Decreasing the left anchor of the roll
                $(options.track).animate({ left : trackLeft }, 500);
                // Increasing the index
                boxIndex--;
            
            }
            
        }

        // Prev Button Click Event
        $(options.prev).click(function() {
            
            gotoPrev();
       
        });
        
        // Next Button click Event
        $(options.next).click(function() {
        
            gotoNext();
        
        });
    
    }
    
    $('#roll').jRoll({},12);
    $('#productslide').jRoll({ 
    
        containerSupport : 1 ,
        prev : ".arrowleft",
        next : ".arrowright"
    
    },0);
    
});