$.fn.scrollGallery = function(opts){
    //параметры по умолчанию
    var defaults = {
        wrapper: $("#scroller-wrapper"),
        arrowLeft:  $("#scroller-wrapper").find('.arrow-left'),
        arrowRight: $("#scroller-wrapper").find('.arrow-right'),
        gradLeft: $("#scroller-wrapper").find('.grad-left'),
        gradRight: $("#scroller-wrapper").find('.grad-right'),
        elementWidth: 190
    }
    var params = $.extend(opts, defaults);
    params.scroller = $(this);


//Определяем размеры галереи только после загрузки картинок
    $(window).load(function(){
  var marginRight = parseInt(params.scroller.find('li:first').css('marginRight'));
  var outerWidth = params.scroller.find('li:first').outerWidth() +
       parseInt(params.scroller.find('li:first').css('marginLeft')) +
       marginRight;
        galleryWidth = params.scroller.find('li').length * outerWidth - marginRight;
        visibleWidth = params.wrapper.width();
        setMargin(0);
    });

    var galleryWidth;
    var visibleWidth;
    var timer;


    //Проверка на touch-устройство
    var isTouch = function isTouchDevice() {
        try {
            document.createEvent("TouchEvent");
            return true;
        } catch (e) {
            return false;
        }
    }

    var getRealMargin = function(){
        return parseInt(params.scroller.css('marginLeft'));
    }

    var getMargin = function(margin){
            if (margin == undefined) {
                margin = getRealMargin();
            }
            margin = parseInt(margin);
            if (margin < visibleWidth - galleryWidth) {
                margin = visibleWidth - galleryWidth;
            }
            if (margin >= 0) {
                margin = 0;
            }

        return margin;
    }

    var setMargin = function(m, animate){
        if (animate == undefined) {
            animated = false;
        }
        m = (typeof m == 'string') ? getMargin() + parseInt(m) : m;
        m = getMargin(m);
        if (animate && !animated) {
            params.scroller.animate({marginLeft: m+"px"},500,function(){animated = false; complete(m);});
        }
        else {
            params.scroller.css('marginLeft',m+'px');
            complete(getMargin());
        }
    }

    var complete = function(m){
        //console.log(galleryWidth));

        //после изменения положения
        if (m < 0) params.gradLeft.fadeIn();
        else {params.gradLeft.fadeOut(); clearInterval(timer);}
        if (m > visibleWidth - galleryWidth) params.gradRight.fadeIn();
        else {params.gradRight.fadeOut(); clearInterval(timer);}
    }
    //при клике по стрелкам остаемся на текущей странице
    params.arrowLeft.click(function(){return false;});
    params.arrowRight.click(function(){return false;});

    if (isTouch()) {
        //отдельная обработка для тач устройств
        params.arrowLeft.show();
        params.arrowRight.show();
        var animated = false;
        var startX = 0;
        var prevY = 0;
        var prevX = 0;
        var diff = 0;
        var moved = 0;


        //т.к. в стрелку можно и не попасть, обрабатываем клик по градиенту
        params.gradLeft.bind('touchstart',function(e){
            timer = setInterval(function(){
                setMargin("+"+15);
                e.preventDefault();
                e.stopPropagation();
            },1);
            return false;
        }).bind('touchend',function(){
            clearInterval(timer);
        });

        params.gradRight.bind('touchstart',function(e){
            timer = setInterval(function(){
                setMargin("-"+15);
                e.preventDefault();
                e.stopPropagation();
            },1);
            return false;
        }).bind('touchend',function(){
            clearInterval(timer);
        });


        //окончание движения пальцем
        var touchend = function(e){
            if (moved) {
                moved = false;
                count = 0;
                var rm = getRealMargin();
                //делаем резиновые края, просто возвращаем в нормалье положение
                if (rm > 0) {setMargin(0,true);}
                else if (rm < visibleWidth - galleryWidth) {
                    setMargin(visibleWidth - galleryWidth,true);
                }
                else {
                    //делаем движение по инерции
                    timer = setInterval(function(){
                        setMargin(""+diff);
                        diff = diff*0.9;
                        if (count >= 60 || Math.abs(diff)<1) {
                            clearInterval(timer);
                        }
                        count++;
                    },10);
                }
            }
            //не обрабатываем не нужные нам события
            $(document).unbind('touchend',touchend);
            $(document).unbind('touchmove',touchmove);
        }


        var touchmove = function(e){
            var x = e.originalEvent.touches[0].clientX;
            var y = e.originalEvent.touches[0].clientY;
            if (moved && Math.abs(prevY - y)<20) {
                diff = (x - prevX)/2;
                prevX = x;
                prevY = e.originalEvent.touches[0].clientY;
                var left = (x - startX)/2+startLeft;
                params.scroller.css('marginLeft',left);
                //setMargin(left);
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        }

        params.scroller.bind('touchstart',function(e){
            if (e.originalEvent.touches.length == 1) {
                clearInterval(timer);
                moved = true;
                startX = e.originalEvent.touches[0].clientX;
                prevY = e.originalEvent.touches[0].clientY;
                startLeft = getMargin();
                $(document).bind('touchend',touchend);
                $(document).bind('touchmove',touchmove);
            }

        });
    }
    else {
        //При наведении показываем стрелки
        params.wrapper.hover(
            function(){
                params.arrowLeft.fadeIn();
                params.arrowRight.fadeIn();
            }, function(){
                params.arrowLeft.fadeOut();
                params.arrowRight.fadeOut();
            }
        );

        //двигаем в одну сторону
        params.arrowLeft.mousedown(function(){
            timer = setInterval(function(){
                setMargin("+"+5);
            },1);
            return false;
        }).mouseup(function(){
            clearInterval(timer);
        });

        //двигаем в другую
        params.arrowRight.mousedown(function(){
            timer = setInterval(function(){
                setMargin("-"+5);
            },1);
            return false;
        }).mouseup(function(){
            clearInterval(timer);
        });


    }
}


$(function(){
    $("#scroller").scrollGallery();
});