var RokStoriesImage = [];
var RokStories = new Class({
    version: 0.1,
    options: {
        startElement: 0,
        startWidth: 570,
        startHeight: 278,
        thumbsOpacity: 0.3,
        autorun: true,
        delay: 3000,
        mousetype: 'click'
    },
    initialize: function(element, options) {
        this.setOptions(options);
        this.element = $$(element)[0] || null;
        if (!this.element) return;
        this.timer = null;
        this.current = this.options.startElement;
        this.fullParent = this.element.getElements('.image-full')[0];
        this.full = RokStoriesImage;
        this.small = this.element.getElements('.image-small img');
        this.descs = this.element.getElements('.desc-container .description');
        this.images = RokStoriesImage;
        this.fullFx = [];
        (this.images.length).times(function(i) {
            this.fullFx.push(null)
        }.bind(this));
        this.smallFx = [];
        this.descsFx = [];
        if (this.full.length != this.small.length && this.full.length != this.descs.length) return;
        this.length = this.full.length;
        this.smallParent = this.small[0].getParent();
        this.descsParent = this.descs[0].getParent();
        this.fullParent.addClass('rokstories-spinner');
        this.descsParent.addClass('rokstories-spinner');
        this.small.setStyle('opacity', this.options.thumbsOpacity);
        this.descsParentFx = new Fx.Styles(this.descsParent, {
            wait: false,
            duration: 400
        }).set({
            height: 0
        });
        this.fullParentFx = new Fx.Styles(this.fullParent, {
            wait: false,
            duration: 400
        }).set({
            height: 0
        });
        this.fullParentFx.set({
            'width': this.options.startWidth
        }).start({
            height: this.options.startHeight
        });
        this.setSizes()
    },
    addThumbsEvents: function() {
        var self = this;
        this.small.each(function(small, i) {
            self.smallFx.push(new Fx.Styles(small, {
                wait: false,
                duration: 400
            }).set({
                'opacity': self.options.thumbsOpacity
            }));
            small.addEvents({
                'click': function() {
                    $clear(self.timer);
                    self.fullParent.addClass('rokstories-spinner');
                    self.fullFx.each(function(fx) {
                        if (fx) fx.start({
                            'opacity': 0
                        })
                    });
                    self.load(i)
                },
                'mouseenter': function() {
                    if (self.options.mousetype == 'mouseenter') small.fireEvent('click');
                    if (i != self.current) self.smallFx[i].start({
                        'opacity': 1
                    })
                },
                'mouseleave': function() {
                    if (i != self.current) self.smallFx[i].start({
                        'opacity': self.options.thumbsOpacity
                    })
                }
            })
        })
    },
    load: function(index) {
        var self = this;
        if ($type(this.full[index]) != 'string') {
            self.transition(index, this.full[index])
        } else {
            new Asset.image(this.full[index], {
                onload: function() {
                    $clear(self.timer);
                    self.full[index] = this.inject(self.fullParent);
                    self.fullFx[index] = new Fx.Styles(self.full[index], {
                        wait: false,
                        duration: 400
                    }).set({
                        'opacity': 0
                    });
                    if (window.webkit) self.setDescSizes();
                    self.load(index)
                }
            })
        }
    },
    transition: function(index, image) {
        var self = this;
        this.fullParentFx.stop().set({
            'width': image.width
        }).start({
            height: image.height
        });
        self.fullParent.removeClass('rokstories-spinner');
        self.descsFx.each(function(fx) {
            fx.start({
                'opacity': 0
            })
        });
        self.smallFx.each(function(fx) {
            fx.start({
                'opacity': self.options.thumbsOpacity
            })
        });
        self.fullFx[index].stop().start({
            'opacity': 1
        });
        self.descsFx[index].stop().start({
            'opacity': 1
        });
        self.smallFx[index].stop().start({
            'opacity': 1
        });
        self.current = index;
        if (self.options.autorun && !self.pause) self.timer = self.next.periodical(self.options.delay, self)
    },
    setSizes: function() {
        var self = this;
        this.setDescSizes();
        this.addThumbsEvents();
        if (this.options.autorun) {
            this.element.addEvents({
                'mouseenter': function() {
                    $clear(self.timer);
                    self.pause = true
                },
                'mouseleave': function() {
                    $clear(self.timer);
                    self.pause = false;
                    self.timer = self.next.periodical(self.options.delay, self)
                }
            })
        };
        this.next(this.current)
    },
    setDescSizes: function() {
        var size = {
            width: 0,
            height: 0
        };
        this.smallParent.setStyle('width', this.fullParent.getStyle('width'));
        this.descs.each(function(desc) {
            if (this.descsFx.length < this.length) this.descsFx.push(new Fx.Styles(desc, {
                wait: false,
                duration: 400
            }).set({
                'opacity': 0
            }));
            var descSize = desc.getSize().size;
            if (descSize.x > size.width) size.width = descSize.x;
            if (descSize.y > size.height) size.height = descSize.y
        },
        this);
        this.descsParentFx.stop().set('width', size.width).start({
            height: size.height
        });
        this.descsParent.removeClass('rokstories-spinner')
    },
    next: function(force) {
        var current = (force != null) ? force: this.current + 1;
        if (current > this.length - 1) current = 0;
        this.small[current].fireEvent('click')
    }
});
RokStories.implement(new Options);