(function($) {

    $.extend($.fn, {
        
        slideGallery : function() {
            
            var defaults = {
                speed: 800,
                width: 977
            }
            
            var show = new Gallery($(this), defaults);
            $.data($(this)[0], 'show', show);
            
        },
        nextSlide : function() {
            
            var show = $.data($(this)[0], 'show');
            show.nextSlide();
        },
        prevSlide : function() {
            
            var show = $.data($(this)[0], 'show');
            show.prevSlide();
        }
    });
    
    var Gallery = function(el, defaults) {
        
        this.el = el;
        this.options = defaults;
        this.images = this.el.children();
        this.current = 1;
        this.total = this.images.length;
        this.wrap      = $('<div class="wrap">');
        this.container = $('<div class="container">');
        this.overlay = $('<div class="overlay">');
        this.control = $('<div class="control">');
        this.meta = $('<div class="text">');
        this.crumb = $('<a href="#" class="crumb"></a>');
        this.init();
        this.selectors = {
            imageMeta : 'div.image-meta'
        }
        this.updateMeta();
        
    }
    Gallery.prototype = {

        init : function() {
            
            var scope = this;
            this.container.append(this.wrap);
            this.el.wrapInner(this.container);
            this.wrap = this.el.children('.container').children('.wrap');
            this.wrap.append(
                this.images.eq(0).clone()
            ).prepend(
                this.images.eq(this.total - 1).clone()
            ).css({
                width: (this.total + 2) * this.options.width,
                left: this.current * this.options.width * -1
            });
            this.el.append(this.overlay.css("opacity",0.85));
            this.overlay.append(this.meta, this.control);
            var i = this.total + 1;
            while(i--) {
                this.control.append(this.crumb.clone());
            }
            this.crumbs = this.control.find(".crumb");
            this.crumbs.eq(0).hide();
            this.control.click(function(e){
                e.preventDefault();
                scope.current = scope.crumbs.index($(e.target));
                scope.move();         
            })
        },
        nextSlide : function() {
            if (this.current == this.total) {
                var scope = this;
                this.current = 1;
                this.move(((scope.total+1) * scope.options.width * -1), function() {
                    scope.wrap.css('left',scope.options.width * -1);
                });
            } else {
                this.current ++;
                this.move();
            }
        },
        prevSlide : function() {
            if (this.current == 1) {
                var scope = this;
                this.current = this.total;
                this.move(0, function() {
                    scope.wrap.css('left',scope.total * scope.options.width * -1);
                });
            } else {
                this.current --;
                this.move();
            }
        },
        move : function(offset, callback) {

            var scope = this;
            var offset   = offset === undefined ? (this.current - 1) * (this.options.width * -1) - this.options.width : offset;
            var callback = callback || new Function();
            
            this.wrap.animate({
                left : offset
            }, this.options.speed, 'swing', callback);
            
            this.updateMeta();
        },
        updateMeta : function() {
            
            var scope = this;
            scope.meta.html(
                scope.images.eq(scope.current-1).find(scope.selectors.imageMeta).html()
            );
            
            scope.crumbs.css("background","#888")
            scope.crumbs.eq(scope.current).css("background","#fff");
        }
    }
})(jQuery);