var RokStories = new Class({
    version: 1.0,
    options: {
        startElement: 0,
        startWidth: 410,
        startHeight: 300,
        thumbsOpacity: 0.7,
        autorun: true,
        delay: 3000,
        mousetype: 'click',
        layout: 'layout1',
        linkedImgs: false,
        showThumbs: false,
        fixedThumb: true,
        thumbLeftOffsets: {
            x: 0,
            y: 0
        },
        thumbRightOffsets: {
            x: 0,
            y: 0
        }
    },
    initialize: function (element, options) {
        this.setOptions(options);
        this.element = $(element) || null;
        this.layout = this.options.layout;
        if (!this.element) return;
        this.timer = null;
        this.current = this.options.startElement;
        this.fullParent = this.element.getElements('.image-full')[0];
        this.full = RokStoriesImage['rokstories-' + this.options.id];
        this.small = this.element.getElements('.image-small img');
        this.descs = this.element.getElements('.desc-container .description');
        if (this.layout == 'layout2') this.labels = this.element.getElements('.labels-title .feature-block-title');
        if (!this.full.length || !this.small.length || !this.descs.length) return;
        this.images = RokStoriesImage['rokstories-' + this.options.id];
        this.fullFx = [];
        if (this.layout == 'layout2') {
            this.labelsFx = [];
            this.arrowLeft = this.element.getElement('.feature-arrow-l');
            this.arrowRight = this.element.getElement('.feature-arrow-r');
            if (this.arrowLeft && this.arrowRight) this.arrowsEvents();
            (this.labels.length).times(function (i) {
                this.labelsFx.push(new Fx.Styles(this.labels[i], {
                    wait: false,
                    duration: 400
                }).set({
                    'opacity': 0
                }))
            }.bind(this))
        } else if (this.layout == 'layout3') {
            this.small.setStyle('display', 'none');
            this.element.getElement('.desc-container').inject(this.fullParent).setStyles({
                'position': 'absolute',
                'z-index': 5
            });
            this.circles = this.element.getElements('.feature-circles-sub');
            if (this.circles.length == this.small.length) this.circlesEvents();
            else throw new Error('Circles don\'t match the number of images')
        }(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
        });
        if (!window.webkit && !window.gecko) this.fullParentFx.set({
            'width': (window.ie) ? '100%' : this.options.startWidth
        });
        this.fullParentFx.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
                        })
                    });
                    if (self.options.layout == 'layout3') self.circleSwitch(i);
                    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
                    })
                }
            })
        })
    },
    circlesEvents: function () {
        this.circles.each(function (circle, i) {
            circle.addEvent('click', function () {
                this.small[i].fireEvent('click');
                this.circleSwitch(i)
            }.bind(this))
        }, this)
    },
    circleSwitch: function (i) {
        this.circles.removeClass('active');
        this.circles[i].addClass('active')
    },
    arrowsEvents: function () {
        var left = this.arrowLeft,
            right = this.arrowRight,
            self = this;
        left.addEvents({
                'mouseenter': function () {
                    left.addClass('arrowleft-hover')
                },
                'mouseleave': function () {
                    left.removeClass('arrowleft-hover').removeClass('arrowleft-down')
                },
                'mousedown': function () {
                    left.addClass('arrowleft-down')
                },
                'mouseup': function () {
                    left.removeClass('arrowleft-down')
                },
                'click': function () {
                    self.previous();
                    if (self.tipsLeft) {
                        self.tipsLeft.hide();
                        self.tipsLeft.fireEvent('onShow')
                    }
                }
            });
        right.addEvents({
                'mouseenter': function () {
                    right.addClass('arrowright-hover')
                },
                'mouseleave': function () {
                    right.removeClass('arrowright-hover').removeClass('arrowright-down')
                },
                'mousedown': function () {
                    right.addClass('arrowright-down')
                },
                'mouseup': function () {
                    right.removeClass('arrowright-down')
                },
                'click': function () {
                    self.next();
                    if (self.tipsRight) {
                        self.tipsRight.hide();
                        self.tipsRight.fireEvent('onShow')
                    }
                }
            });
        if (this.options.showThumbs) {
                this.tipsLeft = new Tips(left, {
                    className: 'rokstories',
                    fixed: self.options.fixedThumb,
                    offsets: self.options.thumbLeftOffsets,
                    initialize: function () {
                        this.rokTip = new Element('div', {
                            'class': 'tip-wrapper'
                        }).inject(this.toolTip);
                        this.fx = new Fx.Style(this.toolTip, 'opacity', {
                            duration: 300,
                            wait: false
                        }).set(0)
                    },
                    onShow: function (tip) {
                        var current = self.current - 1;
                        if (current < 0) current = self.small.length - 1;
                        self.small[current].clone().inject(this.rokTip.empty());
                        this.fx.start(1)
                    },
                    onHide: function (tip) {
                        this.fx.start(0)
                    }
                });
                this.tipsRight = new Tips(right, {
                    className: 'rokstories',
                    fixed: self.options.fixedThumb,
                    offsets: self.options.thumbRightOffsets,
                    initialize: function () {
                        this.rokTip = new Element('div', {
                            'class': 'tip-wrapper'
                        }).inject(this.toolTip);
                        this.fx = new Fx.Style(this.toolTip, 'opacity', {
                            duration: 300,
                            wait: false
                        }).set(0)
                    },
                    onShow: function (tip) {
                        var current = self.current + 1;
                        if (current > self.small.length - 1) current = 0;
                        self.small[current].clone().inject(this.rokTip.empty());
                        this.fx.start(1)
                    },
                    onHide: function (tip) {
                        this.fx.start(0)
                    }
                })
            }
    },
    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);
                    if (self.options.linkedImgs) {
                        this.setStyle('cursor', 'pointer').addEvent('click', function () {
                            window.location = RokStoriesLinks['rokstories-' + self.options.id][index]
                        })
                    };
                    self.fullFx[index] = new Fx.Styles(self.full[index], {
                        wait: false,
                        duration: 400
                    }).set({
                        'opacity': 0
                    });
                    self.setDescSizes.delay(70, self);
                    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
            })
        });
        if (self.layout == 'layout2') self.labelsFx.each(function (fx) {
            fx.start({
                'opacity': 0
            })
        });
        self.fullFx[index].stop().start({
            'opacity': 1
        });
        if (self.layout == 'layout2' && self.labelsFx.length) self.labelsFx[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.options.startWidth == 'auto') ? this.fullParent.getStyle('width') : this.options.startWidth);
        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.current = current;
        this.small[current].fireEvent('click')
    },
    previous: function (force) {
        var current = (force != null) ? force : this.current - 1;
        if (current < 0) current = this.length - 1;
        this.current = current;
        this.small[current].fireEvent('click')
    }
});
RokStories.implement(new Options);