$(document).ready(function () {
    $('.slider').genGallery();
});

(function () {

    $.fn.genGallery = function () {

        var speed = 400;
        var self = $(this);
        var box = self.find('.box');
        var boxwidth = box.width();
        var leftmost = 0;
        var leftleast = 0 - boxwidth;
        var links = self.find(".links a");
        var total = box.size();
        var delay = 5000;
        var ani = 0;
        init();

        function init() {
            box.each(function () {
                var l = $(this).width() * (self.find('.box').index($(this)) - 1);
                leftmost = l;
                $(this).css('left', l);
            });

            self.hover(

            function () {
                clearInterval(ani);
            }, function () {
                ani = setInterval(autoani, delay);
            });

            /* links.hover(

            function () {
                if ($(this).attr('class') == 'left') {
                    $(this).css('border-right', '15px solid #f90');
                }
                if ($(this).attr('class') == 'right') {
                    $(this).css('border-left', '15px solid #f90');
                }
            }, function () {
                if ($(this).attr('class') == 'left') {
                    $(this).css('border-right', '15px solid #fff');
                }
                if ($(this).attr('class') == 'right') {
                    $(this).css('border-left', '15px solid #fff');
                }
            }); */

            //links.click(clickact);
            attachevent(links);
            ani = setInterval(autoani, delay);

        }

        function attachevent(obj) { //obj.click(clickact); 
            obj.bind('click', clickact);
        }

        function dettachevent(obj) { //obj.click(function(){ s});
            obj.unbind('click', clickact);
        }

        function autoani() {
            box.each(function () {
                var obj = $(this);
                var thisobj = null;
                var thisleft = null;
                thisleft = parseInt($(this).css('left')) - boxwidth;
                if (parseInt($(this).css('left')) == 0 - boxwidth) {
                    thisobj = $(this)
                };
                animate(obj, thisleft, thisobj, leftmost);
            })
        }

        function clickact(e) {
            e.preventDefault();
            dettachevent(links); // to avoid multiple clicks at a time
            var clas = $(this).attr('class');
            box.each(function () {

                var obj = $(this);
                var thisobj = null;
                var thisleft = null;
                var newpos = 0;

                if (clas == 'right') {
                    thisleft = parseInt($(this).css('left')) - boxwidth;
                    if (parseInt($(this).css('left')) == 0 - boxwidth) {
                        thisobj = $(this)
                    };
                    newpos = leftmost;
                } else if (clas == 'left') {
                    thisleft = parseInt($(this).css('left')) + boxwidth;
                    if (parseInt($(this).css('left')) == leftmost) {
                        thisobj = $(this)
                    };
                    newpos = leftleast;
                }

                animate(obj, thisleft, thisobj, newpos);

            })
        }

        function animate(obj, thisleft, thisobj, newpos) {
            obj.stop().animate({
                'left': thisleft
            }, speed, function () {
                if (thisobj) {
                    thisobj.css('left', newpos);
                    attachevent(links);
                }
                // to avoid multiple clicks at a time
            });
        }

    }
})(jQuery);