var Coverflow = new Class({
    Implements:[Options, Events],
    
    options:{
        'cnt'        : 'coverflow',
        'wheel'       : true,
        'key'        : true,
        'margin'     : 0
    },
    
    loadedImgs : 0,
    
    initialize: function(options){
        this.setOptions(options);
        this.wrapper     = document.id(this.options.cnt);
        this.elements     = this.wrapper.getElements('a.item');
        this.active     = 0;
        this.last_active = 0;  
        if(Browser.Engine.trident ){ this.options.wheel = false;} // kein scrollen im IE
    },
    
    load: function(){
        this.elements.each(function(item, index){ 
            if(item.hasClass("active")){ 
                this.active = index; 
                this.last_active = index;
            }
            
            item.addEvent('click', function(e){                
                
                if( this.active != index ) {
                    e.stop();
                    this.setActive(index);
                }
            }.bind(this)); 
            
        }.bind(this));
        this.loadImgs();        
                
        this.elements.each(function(item, index){ 
            fx = new Fx.Morph(item, {duration: 200, link: 'chain', transition: Fx.Transitions.Sine.easeOut}); 
            item.store('fx', fx);
            
            fx2 = new Fx.Morph(item.getElement('img'), {duration: 200, link: 'chain', transition: Fx.Transitions.Sine.easeOut}); 
            item.getElement('img').store('fx', fx2);
        });
    },
    
    allLoaded: function(){
        
        if(this.loadedImgs == this.elements.length){
            this.preremder();
        }
    },
    
    loadImgs: function(){
        
        this.elements.setStyle('opacity', "0");
        $('loader').setStyle('display', '');
        (function(){ 
            this.elements.each(function(item){             
                item.store('width_zoomed', (item.getElement('img').getSize().x));
                item.store('width', item.getElement('img').getSize().x * 0.6);
                item.store('zoomed', false);
                this.loadedImgs++;
                this.allLoaded();
            }.bind(this));
        }.bind(this)).delay(2000);
    },
    
    preremder: function(){
       
        
        this.wrapper_width = this.wrapper.getSize().x;
                
        
        
        this.elements[this.active].setStyle('height', "180px");
        this.elements[this.active].store('zoomed', true);
        
        this.elements.each(function(item, index){
            
            if(index != this.active){
                item.setStyle("height", "108px");                
            }
            
            if(Browser.Engine.trident){
                if(index != this.active){
                    item.getElement('img').setStyle("height", "108px");
                    item.getElement('img').setStyle("width", (item.retrieve("width").toInt()) + "px");
                }
            }else{
                item.getElement('img').setStyle("height", "100%");
                item.getElement('img').setStyle("width", "");  
            }
            
            
            var side = "right";
            var distance = this.active - index;
            if(distance < 0){            
                distance = distance * -1;
                side = "left";
            }
            item.setStyle('z-index', this.elements.length - distance);
            if(distance == 0){
                left = this.wrapper_width / 2 - item.retrieve('width_zoomed') / 2;
            }else{
                if(side == 'left'){
                    //console.log( this.elements[this.active].retrieve('width_zoomed')  );
                    left = (this.wrapper_width / 2 - this.elements[this.active].retrieve('width_zoomed') / 2);
                    for(var i=this.active+1; i <= index; i++){
                        //console.log(this.elements[i].retrieve('width'));
                        left -= this.elements[i].retrieve('width') + this.options.margin;
                    }                    
                }else{
                    left = (this.wrapper_width / 2 + this.elements[this.active].retrieve('width_zoomed') / 2) + this.options.margin; 
                    for(var i=index+1; i < this.active; i++){
                        left += this.elements[i].retrieve('width') + this.options.margin;
                    }
                }
            }
            item.setStyle('left', left);
            item.setStyle('top', ((this.wrapper.getStyle('height').toInt() / 2) - (item.getStyle('height').toInt() / 2)) );
            
            $('loader').setStyle('display', 'none');
            var fxO = new Fx.Morph(item, {duration: 200, link: 'chain', transition: Fx.Transitions.Sine.easeOut}); 
            fxO.start({
                'opacity': [0, 1]
            });
            
        }.bind(this));
        
        if(this.options.wheel){
            this.wrapper.addEvent('mousewheel', function(e){
                e.stop();
                if(e.wheel>0)
                    this.next();
                else
                    this.prev();
            }.bind(this));
        }
        
        if(this.options.key){
            window.addEvent('keydown', function(event){
                if(event.key == 'right') this.next();
                if(event.key == 'left') this.prev();
            }.bind(this));
        }
        
        
        this.fireEvent('change', this.elements[this.active] );
    },
    
    render: function(){
                
        this.elements.each(function(item, index){
            var side = "right";
            var distance = this.active - index;
            if(distance < 0){            
                distance = distance * -1;
                side = "left";
            }
            
            if(distance == 0){
                left = this.wrapper_width / 2 - item.retrieve('width_zoomed') / 2;
            }else{
                if(side == 'left'){
                    left = (this.wrapper_width / 2 - this.elements[this.active].retrieve('width_zoomed') / 2);
                    for(var i=this.active+1; i <= index; i++){
                        left -= this.elements[i].retrieve('width') + this.options.margin;
                    }                    
                }else{
                    left = (this.wrapper_width / 2 + this.elements[this.active].retrieve('width_zoomed') / 2) + this.options.margin; 
                    for(var i=index+1; i < this.active; i++){
                        left += this.elements[i].retrieve('width') + this.options.margin;
                    }
                }
            }
            
            
            var zindex = this.elements.length - distance;
           
            fx = item.retrieve('fx');
            fx2 = item.getElement('img').retrieve('fx');
            if(index == this.active){                
                fx.start({
                    'height':     [108, 180],
                    'top':         [36, 0],
                    'left':     left,
                    'z-index':     zindex
                });
                
                if(Browser.Engine.trident ){
                    fx2.start({
                        'height':     [108,180],
                        'width':    [item.retrieve("width").toInt(), item.retrieve("width").toInt() / 0.6]
                    });
                }
                
            }else if(index == this.last_active){
                fx.start({
                    'height': [180, 108],
                    'top': [0, 36],
                    'left': left,
                    'z-index': zindex
                });
                
                if(Browser.Engine.trident ){
                    fx2.start({
                        'height':     [180,108],
                        'width':    [item.retrieve("width").toInt()/0.6, item.retrieve("width").toInt()]
                    });
                }
                
                //item.getElement('img').setStyle("height", "108px");
                //item.getElement('img').setStyle("width", (item.retrieve("width").toInt() ) + "px");
                
            }else{
                fx.start({
                    'left': left,
                    'z-index': zindex
                });
            }
            
        }.bind(this));
        
        this.fireEvent('change', this.elements[this.active] );
    },
        
    prev: function(){
        this.last_active = this.active;
        if(this.active < this.elements.length-1){
            this.active++;            
            this.render();
        }
    },
    
    next: function(){
        this.last_active = this.active;
        if(this.active > 0){
            this.active--;
            this.render();
        }        
    },
    
    setActive: function(index){
        this.last_active = this.active;
        if(index < this.elements.length && index > -1){
            this.active = index;            
            this.render();
        }
    }
    
    
});
// COVERFLOW LADEN
window.addEvent('domready', function(){
    var c = new Coverflow({margin: -16});
    
    $('prev').addEvent('click', function(e){
        e.stop();
        c.prev();
    });
    
    $('next').addEvent('click', function(e){
        e.stop();
        c.next();
    });
        
    c.addEvent('change', function(item){
        $('caption').innerHTML = item.getElement('img').alt;
        Cufon.replace('#caption');
    });
    c.load(); 
});