var cxdNews;
window.addEvent('domready',function(){   
	cxdNews = new zxCXDNews();   
});

var zxCXDNews = new Class({

    options : {
    	wrapper: 'thumbsWrapper',
    	scroller: 'thumbsScroller',    	
        thumbs:'.featured',
        descr :'.featuredFull',
        
        hoverCls: 'selected',
        
        //time to go to the next block
        goToNextTime:4000,        
        
        fxScrollOpt:{        
			wait: false,
			duration: 500,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
        },
        
        blank:null 
    },
     
    scroller:null,
    wrapper:null,
    
    thumbs:[],
    imgs:[],    
    
    nextThm :null,
    currThm :null,
        
    
    fxScrollF:null,   
    fxScrollB:null,   
    showNextTimer:null, 

    setOptions:function(options){
        this.options = Object.extend(this.options, options || {} );
    },
    
    initialize:function(options){
        this.setOptions(options);
        
        this.wrapper  = $( this.options.wrapper );
        this.scroller = $( this.options.scroller );
        this.thumbs   = $$( this.options.thumbs );
        this.imgs     = $$( this.options.descr );
        
        if ( !this.scroller ||  this.thumbs.length > this.imgs.length || this.thumbs.length == 0 ) return null;

		this.currThm = this.thumbs[1];
		
		this.bindScroller();
		       
        this.start();
		this.bindThumbsClicks();        
    },
    
    bindScroller:function(){
    	var width = 0;
    	$each( this.thumbs, function( elm ){
    		width += elm.getSize().size.x;
    	});
    	this.scroller.setStyle('width', width+'px');
    	
    	this.options.fxScrollOpt.onComplete = this.fxThmbScrolledF.bind(this);
    	this.fxScrollF = new Fx.Scroll( this.wrapper , this.options.fxScrollOpt ); 
   
    	this.options.fxScrollOpt.onComplete = this.fxThmbScrolledB.bind(this);
    	this.fxScrollB = new Fx.Scroll( this.wrapper , this.options.fxScrollOpt );    	 	
    },
    
    fxThmbScrolledF:function(){    	
    	var thmb;
    	if ( thmb = this.currThm.getPrevious() ){    		
    		thmb.injectInside( thmb.getParent() );
    		this.wrapper.scrollTo(0,0);
    		
    		this.currThm = this.nextThm;				
    	}   	
    },
    
    fxThmbScrolledB:function(){  
		this.currThm = this.nextThm;
    },
    
    bindThumbsClicks:function(){
    	this.thumbs.each( function( thmb, index ) {
    		thmb.setProperty('rel',index);
    		thmb.$img = this.imgs[index];
    		
    		thmb.addEvent('click',function(ev){
    			this.stop();			
    			if ( thmb == this.currThm.getPrevious() ){
    				this.showPrev();
    			}else if ( thmb == this.currThm.getNext() ){
    				this.showNext();
    			}     			    				
    		}.bind(this));
    	}.bind(this));
    },
        
    start:function(){
    	this.showNextTimer = this.showNext.periodical( this.options.goToNextTime,this);
    	//this.showNextTimer = this.showPrev.periodical( this.options.goToNextTime,this);
    },    
    
    stop:function(){
   		$clear( this.showNextTimer );
    },
    
    showPrev:function(){
    	this.nextThm = this.currThm.getPrevious();
    	
    	if ( thmb = this.currThm.getParent().getLast() ){
    		thmb.injectTop( thmb.getParent() );
    		this.wrapper.scrollTo( thmb.getSize().size.x ,0);
    	}	
    	
    	this.currThm.removeClass( this.options.hoverCls );    	
		this.nextThm.addClass( this.options.hoverCls );
		    	
    	if ( !this.currThm.$img.$fx ) {
    		this.currThm.$img.$fx = this.currThm.$img.effects({duration: 500, transition: Fx.Transitions.Sine.easeInOut}); 
    	}
    	if ( !this.nextThm.$img.$fx ) {
    		this.nextThm.$img.$fx = this.nextThm.$img.effects({duration: 500, transition: Fx.Transitions.Sine.easeInOut}); 
    	}
    	 
    	this.currThm.$img.setStyle('z-index',1);
    		this.currThm.$img.$fx.start({'opacity':[1,0]});
    		
    	this.nextThm.$img.setStyle('z-index',2);
    		this.nextThm.$img.$fx.start({'opacity':[0,1]});  
    		
   		this.fxScrollB.toElement( this.nextThm.getPrevious() ); 	
    },
      
    showNext:function(){    	 
    	this.nextThm = this.currThm.getNext();
   		
    	this.currThm.removeClass( this.options.hoverCls );    	
		this.nextThm.addClass( this.options.hoverCls );
		    	
    	if ( !this.currThm.$img.$fx ) {
    		this.currThm.$img.$fx = this.currThm.$img.effects({duration: 500, transition: Fx.Transitions.Sine.easeInOut}); 
    	}
    	if ( !this.nextThm.$img.$fx ) {
    		this.nextThm.$img.$fx = this.nextThm.$img.effects({duration: 500, transition: Fx.Transitions.Sine.easeInOut}); 
    	}
    	 
    	this.currThm.$img.setStyle('z-index',1);
    		this.currThm.$img.$fx.start({'opacity':[1,0]});
    		
    	this.nextThm.$img.setStyle('z-index',2);
    		this.nextThm.$img.$fx.start({'opacity':[0,1]});  
    		
   		this.fxScrollF.toElement( this.currThm );  	
    }
});