/*
 * Mootools Class for element Cross-fading.
 * 
 */
var Carousel = new Class({
	
	Implements: [Options],  
	 
	options: {
		elementTag: 'div.carousel-item',
		captionTag: '#carousel-caption',
		btn_prev: '#prev a',
		btn_next: '#next a',
		buttonTag: 'a',
		duration: 750,
		interval: 5000,
		pauseInterval: 10000
	},
	
	initialize: function(container, nav, options){
		this.setOptions(options);	
		
		if ($type(container) == 'element')
			this.container = container;
		else
			this.container = $(String(container));
			
		if (!this.container) 
			return false;
			
		if ($type(nav) == 'element')
			this.nav = nav;
		else
			this.nav = $(String(nav));
			
			
		this.caption = $(document).getElement(this.options.captionTag);

		this.messages = this.container.getElements(this.options.elementTag);
		this.number_of_messages = this.messages.length;
		
		if (this.number_of_messages < 2) {			
			return false;
		}
		
		this.initMessages();
		this.initButtons();
		
		this.current_message = 0;			
		this.startLoop();
	},
	
	initMessages: function() {
		
		this.positions = new Array();
		this.hashes = new Array();
		this.captions = new Array();	
			
		this.messages.each(function(message, index) {
			
			this.hashes[message.id] = index;	
			this.positions[index] = message.getPosition(this.container);
			this.captions[index] = message.getElement('img').alt;
					
			
		}, this);
		
		this.scroller = new Fx.Scroll(this.container, {
			transition: Fx.Transitions.Expo.easeInOut,
			duration: this.options.duration,
			link: 'cancel',
			onStart: function() {
				this.startRotation();
				this.midRotation.delay(this.options.duration / 2, this);
			}.bind(this),
			onComplete: this.completeRotation.bind(this),
			onFailure: function() { alert('cant scroll')}
		});
			
	},
	
	initButtons: function() {
		this.btn_prev = $(document).getElement(this.options.btn_prev);
		this.btn_next = $(document).getElement(this.options.btn_next);
		
		this.btn_prev.addEvent('click', function(event) {
			event.preventDefault();
			this.skipToMessage('prev');
		}.bind(this));
		this.btn_next.addEvent('click', function(event) {
			event.preventDefault();
			this.skipToMessage('next');
		}.bind(this));
			
		this.btn_prev.setStyle("opacity",0.3);
	},
	
	highlightButton: function() {
		if (this.current_message > 0) {
			if (this.btn_prev.getStyle("opacity") <= 0.5) {
				this.btn_prev.fade("in");
			}
		} else {
			if (this.btn_prev.getStyle("opacity") == 1) {
				this.btn_prev.fade(0.3);
			}
		}
		if (this.current_message < this.number_of_messages - 1) {
			if (this.btn_next.getStyle("opacity") <= 0.5) {
				this.btn_next.fade("in");
			}		
		} else {
			if (this.btn_next.getStyle("opacity") == 1) {
				this.btn_next.fade(0.3);
			}
		}
	},	
	
	startRotation: function() {
		this.highlightButton();
	},	
	midRotation: function() {
		this.caption.set('html', this.captions[this.current_message]);
	},	
	completeRotation: function() {
		//this.caption.set('html', this.captions[this.current_message]);
	},	
	
	startLoop: function () {
		if (this.timer) $clear(this.timer);
		this.scroller.set(this.positions[this.current_message].x, this.positions[this.current_message].y);
		this.timer = this.rotateMessage.periodical(this.options.interval, this);
	},
	
	pauseLoop: function() {
		if (this.timer) $clear(this.timer);
		this.timer = this.startLoop.delay(this.options.pauseInterval, this);
	},
	
	rotateMessage: function() {
		
		if (this.current_message < this.number_of_messages - 1) 
			this.current_message++;
		else
			this.current_message = 0;
		//alert(this.positions[this.current_message].x);
		this.scroller.start(this.positions[this.current_message].x, this.positions[this.current_message].y);
	},
	
	skipToMessage: function(direction) {
		
		if (direction == 'prev') {
			if (this.current_message > 0) {
				this.current_message--;
			} else {
				return;
			}
		}		
		if (direction == 'next') {
			if (this.current_message < this.number_of_messages - 1) {
				this.current_message++;
			} else {
				return;
			}
		}
		this.pauseLoop();
		this.scroller.start(this.positions[this.current_message].x, this.positions[this.current_message].y);		
	}	
});


window.addEvent('domready', function() {
	new Carousel('carousel-outer', 'feature-nav');
});