var FOXStories=new Class({
    version:1.0,
    options:{
        startElement:0,
        startWidth:410,
        startHeight:200,
        thumbsOpacity:0.3,
        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=FOXStoriesImage['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=FOXStoriesImage['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.Morph(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.Morph(this.descsParent,{
        wait:false,
        duration:400
    }).set({
        height:0
    });
    this.fullParentFx=new Fx.Morph(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.Morph(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.Tween(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.Tween(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=FOXStoriesLinks['rokstories-'+self.options.id][index]
                        })
                    };

                self.fullFx[index]=new Fx.Morph(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.cancel().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].cancel().start({
        'opacity':1
    });
    if(self.layout=='layout2'&&self.labelsFx.length)self.labelsFx[index].cancel().start({
        'opacity':1
    });
    self.descsFx[index].cancel().start({
        'opacity':1
    });
    self.smallFx[index].cancel().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.Morph(desc,{
            wait:false,
            duration:400
        }).set({
            'opacity':0
        }));
        var descSize=desc.getSize();
        if(descSize.x>size.width)size.width=descSize.x;
        if(descSize.y>size.height)size.height=descSize.y
            },this);
    this.descsParentFx.cancel().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')
    }
});
FOXStories.implement(new Options);