var Carousel = Class.create();
Carousel.prototype = {


	// ******************************************************************************
	// Constants
	// ******************************************************************************
	Version : '0.8',


	// ******************************************************************************
	// vars
	// ******************************************************************************

	carousel : {}, // carousel element
	
	progress : {}, // progress element

	activeElementIndex : 0,
	nextElementIndex : null,

	elementCount : null,
	elementWidth : null,
	progressWidth : null,
	progressPercent : 0,
	indexLinks : [],

	activeSlide : false,
	enterStatusIsActive : false,

	
	
	options : {
	
		carousel : {}, // carousel element eg div

	    resizeSpeed : 8,
	    autostartDelay : 14,
	    slideDelay : 14,
	
	
	    // selectors
		selectors : {
	    	carousel : '#carousel',

			indexLinks : '.carousel-index a',
			container : '.carousel-container',
			items : '.carousel-container li',
			content : '.carousel-content',
			
			progress : '.carousel-progress',

			dummy : '#dummy'
		},


		dummy : '#dummy'
	},

	
	

	//
	//  Initialize the accordions
	//
	initialize: function(options) {

		Object.extend(this.options, options);

		if(this.options.carousel){
			this.start();
		} else {
			document.observe('dom:loaded', this.start.bind(this));
		}

	},


	start : function(){


		if(this.options.carousel){
			this.carousel = this.options.carousel;
		} else {
			this.carousel = $$(this.options.selectors.carousel).first();
		}
		

	    Event.observe(this.carousel, 'mouseenter', this.controllsMouseEnter.bindAsEventListener(this), true);
	    Event.observe(this.carousel, 'mouseleave', this.controllsMouseLeave.bindAsEventListener(this), true);


	    this.items = this.carousel.select(this.options.selectors.items);
	    this.indexLinks = this.carousel.select(this.options.selectors.indexLinks);

		
		//console.info('this.container', this.container);
	    
	    this.elementCount = this.items.size();
	    this.elementWidth = this.items.first().getWidth();

	    this.items.each(function(elm, key){
	    	
	    	//console.info('this.items.each', elm, key);
	    	
	    	if(key > 0){
	    		elm.setStyle({
	    			left: this.elementWidth + 'px',
	    			display : 'block'
	    			});
	    	}

	    	var content = elm.select(this.options.selectors.content).first();
	    	var contentLink = content.select('a').first();
    	
	    	if(contentLink) {
	    		content.setStyle({
	    			cursor : 'pointer'
	    			});
	    		
	    		Event.observe(content, 'mouseover', function(ev){
	    			content.addClassName('carousel-contentHover');
	    		}, false);
	    		Event.observe(content, 'mouseout', function(ev){
	    			content.removeClassName('carousel-contentHover');
	    		}, false);
	    		Event.observe(content, 'click', function(ev){
	    			ev.stop();
	    			if(contentLink.target){
	    				window.open(contentLink.href);
	    			} else {
	    				window.location.href = contentLink.href;
	    			}
	    		}, false);
	    	}
	    	
	    	
	    }.bind(this));


  		this.indexLinks.each(function(elm, k){
  			Event.observe(elm, 'click', this.indexLinkClick.bindAsEventListener(this, k), false);
  			Event.observe(elm, 'mouseover', this.indexLinkHover.bindAsEventListener(this), false);
  		}.bind(this));

  		
	    this.progress = this.carousel.select(this.options.selectors.progress).first();

	    this.progress.setStyle({'display' : 'block'});
	    this.progressWidth = this.progress.getWidth();
	    
	    this.progress.setStyle({'width' : '0px'});
	    this.slideTimer_start(this.options.autostartDelay);

	},

	
	
	
	controllsMouseEnter : function(ev) {
	    ev.stop();
	    //console.info('controllsOver');

	    this.enterStatusIsActive = true;
	    this.slideTimer_pause();
	},
	controllsMouseLeave : function(ev) {
	    ev.stop();
	    //console.info('controllsOut');
	    
		if(this.enterStatusIsActive == true){
	    	this.slideTimer_resume();
		}
	    
	    this.enterStatusIsActive = false;
	    

	},
	
	
	
	
	slideTimer : function(){
		this.timer = false;
		
		this.progressPercent+= 2;
		//console.info('percent', this.progressPercent);
		
		progressWidth = Math.round(this.progressWidth / 1000 * this.progressPercent);
		this.progress.setStyle({width : progressWidth + 'px'});

		if(this.progressPercent >= 1000) {
			this.slideTimer_end();
		} else {
			this.slideTimer_start();
		}
	},

	slideTimer_start : function(){
	    //console.info('timer start called', time);
		
		//window.clearTimeout(this.timer);
		this.timer = window.setTimeout(this.slideTimer.bind(this), this.options.slideDelay );

	},
	slideTimer_end : function(){
	    //console.info('timer end called');
	    this.progress.setStyle({'width' : '0px'});
	    this.progressPercent = 0;
	    this.slideRight();
	},

	slideTimer_pause : function(){
	    //console.info('timer pause called');
	    window.clearTimeout(this.timer);
	},
	slideTimer_resume : function(){
//	    console.info('timer resume called');

		if(this.activeSlide == false){
			this.slideTimer_start();
		}
		
	},

	slideTimer_reset : function(){
	    //console.info('timer reset called');
		window.clearTimeout(this.timer);
	    this.progress.setStyle({'width' : '0px'});
	    this.progressPercent = 0;
	},

	indexLinkHover : function(ev) {
		this.enterStatusIsActive = true;
		this.slideTimer_pause();
	},

	indexLinkClick : function(ev, k) {
		ev.stop();

		if(this.activeSlide == true) return;
		if(this.activeElementIndex == k) return;
		

		this.activeSlide = true;
		this.nextElementIndex = k;

		this.slideTimer_reset();
		this.removeActiveIndex();
		this.slide();

	},
	// ************************************


	slideRight : function() {

		if(this.activeSlide == true) return;
		this.activeSlide = true;
		
		this.removeActiveIndex();
		

		if(this.activeElementIndex >= this.elementCount-1){

			this.nextElementIndex = 0;
			
		} else {
			this.nextElementIndex = this.activeElementIndex+1;
		}
		
		this.slide();

	},


	slide : function() {

		this.items[this.nextElementIndex].setStyle({left : this.elementWidth + 'px'});
		
		activeElementNewPos = -this.elementWidth;
		nextElementNewPos = 0;


		new Effect.Parallel(
   			[
				new Effect.Morph(this.items[this.activeElementIndex], {style : 'left : ' + activeElementNewPos + 'px', sync: true}),
				new Effect.Morph(this.items[this.nextElementIndex], {style : 'left : ' + nextElementNewPos + 'px', sync: true})
			], {duration: 1.0, afterFinish: function() {
				this.afterSlide();
				//console.info('morph left ready');
			}.bind(this)}
		);


	},

	afterSlide : function(){

		this.activeElementIndex = this.nextElementIndex;
		
		this.setActiveIndex();
		
	    this.activeSlide = false;

		if(this.enterStatusIsActive == false){
			this.slideTimer_start(this.options.slideDelay);
		}

	},

	setActiveIndex : function(){
		this.indexLinks[this.activeElementIndex].addClassName('active');
	},

	removeActiveIndex : function(){
		this.indexLinks.each(function(elm){elm.removeClassName('active')});
	},


	dummy : function(){
	}
}