function MakeDragPane(id) {
    var dragImage = $('#' + id),
        imageWidth =  dragImage.innerWidth(),
        parentWidth = dragImage.parent().innerWidth(),
        btnPrev = dragImage.parent().parent().find('.prev'),
        btnNext = dragImage.parent().parent().find('.next'),
        scrollInterval = 400,
        dragged,
        offsetX;

    dragImage.mousedown(function(e) {
        imageWidth =  dragImage.innerWidth();
        if (e.button == 2) { return; }
        dragged = this;
        offsetX = e.screenX - this.offsetLeft;
        return false;
     });
     
    $(document).mousemove(function(e){
        var leftMove = e.screenX - offsetX;
        if (!dragged) { return; }

        if( leftMove <= 0 && (leftMove + imageWidth - parentWidth) >= 0 ){
            dragImage.css('left', (leftMove) + "px");          
        }
    });
         
    $(document).mouseup(function(e){
        if (!dragged) { return; }
        dragged = null;
    });

    btnPrev.click(function(){

        var imageOffset = parseFloat(dragImage.css('left').slice(0, -2));
        var difference = imageOffset + parseFloat(parentWidth);
        var totalScroll = imageWidth - parentWidth;

        if( imageOffset + scrollInterval < 0){
            dragImage.animate({
                left: '+=' + scrollInterval,
                easing: 'swing'
            }, 200);
        } else {
            dragImage.animate({
                left: 0,
                easing: 'swing'
            }, 200);
        }

        return false; 
    });

    btnNext.click(function(){
        imageWidth =  dragImage.innerWidth();
        var imageOffset = parseFloat(dragImage.css('left').slice(0, -2));
        var difference = imageOffset + parseFloat(imageWidth - (scrollInterval * 2));
        // var difference = imageOffset + parseFloat(parentWidth);
        var totalScroll = imageWidth - parentWidth;
        
        if( difference  > 0 && (difference - scrollInterval) > 0){
            dragImage.animate({
                left: '-=' + scrollInterval,
                easing: 'swing'
            }, 200);
        } else {
            dragImage.animate({
                left: "-" + totalScroll,
                easing: 'swing'
            }, 200);
        }

        return false; 
    });
}