$(document).ready(function(){
    var animateTime = 1,
        offsetStep = 5;
    
    scrollWrapper = $('#wrap');
    scrollContent = $('#content');
    
    //event handling for buttons "left", "right"
    $('.bttR, .bttL')
        .mousedown(function() {
            scrollContent.data('loop', true).loopingAnimation($(this), $(this).is('.bttR') );
        })
        .bind("mouseup mouseout", function(){
            scrollContent.data('loop', false).stop();
        });
    
    scrollWrapper
        .mousedown(function(event) {
            $(this)
                .data('down', true)
                .data('x', event.clientX)
                .data('scrollLeft', this.scrollLeft);
            return false;
        })
        .mouseup(function (event) {
            $(this).data('down', false);
        })
        .mousemove(function (event) {
            if ($(this).data('down') == true) {
                this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
            }
        })
        .mousewheel(function (event, delta) {
            this.scrollLeft -= (delta * 30);
            event.preventDefault();
        })
        .css({
            'overflow' : 'hidden',
            'cursor' : '-moz-grab'
        });
    
    
    $.fn.loopingAnimation = function(el, dir){
        if(this.data('loop')){
            var sign = (dir) ? '-=' : '+=';
            this.animate({ marginLeft: sign + offsetStep + 'px' }, animateTime, function(){ $(this).loopingAnimation(el,dir) });
                                                                                              }
        return false;
    };
})