var slideShow = new Class({

    options: $H({
        linkPrefix: '' 
    }),

    initialize: function(obj)
    {
        this.options.extend(obj || {});
        this.jsonObject = obj.jsonObject;
        this.info = {
            titles: [],
            categories: [],
            levels: [],
            name: [],
            links: []
        };        
        obj.jsonObject.each(function(el){
            this.info.titles.push(el.title);
            this.info.categories.push(el.category);
            this.info.levels.push(el.level);
            this.info.name.push(el.file);
            this.info.links.push(this.options.get('linkPrefix')+el.link);
        },this);
        this.target = $(obj.targetID);
        this.imageFolder = obj.folder;
        this.duration = obj.duration || 1500;
        this.delay = obj.delay || 5000;

        this.imageCount = this.jsonObject.length-1;        
        this.previousImage = -1;
        this.currentImage = -1;

        this.tips = new Tips();
        
        this.images = this.getImages();
        this.buildBox();
    },
    getImages: function()
    {
        var a = new Array();
        for(var i = 0; i < this.jsonObject.length; i++)
        {
            a.push(this.jsonObject[i]['file']+'.jpg');
        }
        return a;
    },
    loadImages: function()
    {
        var f = this.imageFolder;
        var cnt = 0;
        var images = new Array();
        
        this.images.each(function(img){
            images[cnt] = new Image();
            images[cnt].src = f+img;
            cnt++;            
        });
        return images;
    },
    buildBox: function()
    {
        var images = this.loadImages();
        this.anchor = new Element('a', { 'href': this.info.links[0] }).inject(this.target);
        
        for(var i = 0; i < images.length; i++)
        {
            var img = new Element('img', {
                'src': images[i].src,
                'id': 'tip'+i
            }).set('opacity',0).addClass('tooltip').inject(this.anchor);
            
            this.attachTip(img,i);
        }
        this.anchor.addEvents({
            'mouseover': this.pause.bind(this),
            'mouseleave': this.initFade.bind(this)
        });
        this.imageElements = this.anchor.getElements('img');
        this.initFade();
        this.slide();
    },
    setLink: function(i)
    {
        this.anchor.setProperty('href', this.info.links[i]);
    },
    initFade: function()
    {
        this.timedFade = this.slide.periodical(this.delay, this);
    },
    slide: function()
    {
        this.currentImage = this.currentImage < this.imageCount ? this.currentImage+1 : 0;
        this.previousImage = this.currentImage > 0 ? this.currentImage-1 : this.imageCount;
        this.fadeImages(this);
    },
    fadeImages: function()
    {
        this.fx = new Fx.Tween(this.imageElements[this.currentImage], {
            'duration': this.duration
        });
        
        this.setLink(this.currentImage);
        
        if(this.previousImage == this.imageCount)
        {
            var out = new Fx.Tween(this.imageElements[this.previousImage], {
                'duration': this.duration
            }).start('opacity', 0);
        }
        
        this.fx.start('opacity', 1).chain(function() {
            this.imageElements[this.previousImage].set('opacity', 0);
        }.bind(this));
    
    },
    pause: function()
    {
        $clear(this.timedFade);
    },
    attachTip: function(el,i)
    {
        this.tips.attach(el);
        this.tips.addEvent(
            'onShow', function(tip){ tip.fade(0.75) }
        );
       
        $('tip'+i).store('tip:title', this.info.titles[i]); 
        $('tip'+i).store('tip:text', 'Kategorie: '+this.info.categories[i]+'<br/>Schwierigkeitsgrad: '+this.info.levels[i]);        
    }    
});