/*
 * Mootools Class for element Cross-fading.
 * 
 */
var Carousel = new Class({
	
	Implements: [Options],  
	 
	options: {
		loop: true,
		elementTag: 'div',
		buttonTag: 'a',
		animType: 'fade', /* fade or scroll */
		duration: 450,
		interval: 5000,
		pauseInterval: 13000,
		fixIE: false
	},
	
	initialize: function(container, options){
		
		this.setOptions(options);	
		
		if ($type(container) == 'element')
			this.container = container;
		else
			this.container = $(document).getElement(container);
	
		if (!this.container) 
			return false;
		
		this.messages = this.container.getElements(this.options.elementTag);
		this.number_of_messages = this.messages.length;
		
		if (this.number_of_messages < 2) {			
			return false;
		}		
		
		this.controls = new Array();
		
		this.initMessages();
		
		if (location.hash.indexOf('#') == 0) {
			start_hash = location.hash.substr(1);
		} else {
			start_hash = location.hash;
		}
		
		this.current_message = null;
		
		if (this.hashes[start_hash])
			this.showMessage(this.hashes[start_hash]);			
		else
			this.showMessage(0);
			
		this.updateControls();
				
		this.startLoop();
	},
	
	addControl: function(control) {		
		control.setButtonListener(this.selectMessage.bind(this));
		this.controls.push(control);	
		this.updateControl(control);	
	},	
		
	updateControls: function() {
		this.controls.each(function(control, index) {			
			this.updateControl(control);
		}, this);	
	},
	
	updateControl: function(control) {
		control.setIndex(this.current_message);
	},
	
	updateControlsStart: function() {
		this.controls.each(function(control, index) {			
			this.updateControlStart(control);
		}, this);	
	},
	
	updateControlStart: function(control) {
		control.setIndexStart(this.current_message);
	},
	
	
	initMessages: function() {
		
		this.positions = new Array();
		this.hashes = new Array();
			
		this.messages.each(function(message, index) {
			
			this.hashes[message.id] = index;	
			
			/*
			 * Scroll Type Init
			 */
			if (this.options.animType == 'scroll') {
				this.positions[index] = message.getPosition(this.container)
			}
			
			/* 
			 * Fader Init
			 */
			if (this.options.animType == 'fade') {
				
				// set to abs positioning
				message.setStyle('position', 'absolute');
				message.setStyle('opacity', '0');
				message.setStyle('display', 'none');
				
				// save the clone
				if (!Browser.Engine.trident) {
					this.options.fixIE = false;
				}				
				if (this.options.fixIE) {
					var clone = message.clone();
					clone.setStyle('display', 'none');
					this.clones[index] = clone;
					clone.inject(this.container);
				}
							
				// set effects
				message.store('fadeIn', new Fx.Tween(message, {
					duration: this.options.duration,
					wait: false,
					onStart: function(){
						this.updateControls.delay(this.options.duration / 2, this);
					}.bind(this),
					onComplete: this.fadedIn.bindWithEvent(this, message)
				}));			
				message.store('fadeOut', new Fx.Tween(message, {
					duration: this.options.duration,
					wait: false,
					onComplete: this.fadedOut.bindWithEvent(this, message)
				}));
			}
			
		}, this);
		
		if (this.options.animType == 'scroll') {
			this.scroller = new Fx.Scroll(this.container, {
				transition: Fx.Transitions.Expo.easeInOut,
				duration: this.options.duration,
				link: 'cancel',
				onStart: function(){
					this.updateControls.delay(this.options.duration / 2, this);
				}.bind(this)
			});
		}
	},
	
	fadedIn: function(event, message) {
		if (this.options.fixIE) {
			this.messages[this.previous_message].setStyle('display', 'none');
			this.clones[this.previous_message].setStyle('display', 'block');
		}
	},
	fadedOut: function(event, message) {
		message.setStyle('display', 'none');
	},
	
	startLoop: function () {
		if (this.timer) $clear(this.timer);
		if (!this.options.loop) return;
		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() {
	
		var next_message;
		if (this.current_message < this.number_of_messages - 1) 
			next_message = this.current_message + 1;
		else
			next_message = 0;
		this.animateMessage(next_message);
	},
	
	// show the image without animating
	showMessage: function(index) {
		
		if (this.options.animType == 'scroll') {
			this.scroller.set(this.positions[index].x, this.positions[index].y);
		}
		
		if (this.options.animType == 'fade') {			
			if (this.current_message != null) {
				this.messages[this.current_message].setStyle('opacity', 0);
				this.messages[this.current_message].setStyle('display', 'none');
				if (this.options.fixIE) {
					this.clones[this.current_message].setStyle('display', 'none');
				}
			}
			this.messages[index].setStyle('opacity', 1);		
			this.messages[index].setStyle('display', 'block');		
		}
		
		this.current_message = index;
	},
	
	selectMessage: function(index) {
		this.pauseLoop();
		this.animateMessage(index);
	},
	
	animateMessage: function(index) {
		
		if (this.current_message == index) return;
		
		if (this.options.animType == 'scroll') {
			this.scroller.start(this.positions[index].x, this.positions[index].y);
		}
		
		if (this.options.animType == 'fade') {		
			
			if (this.current_message != null) {
				if (this.options.fixIE) {
					this.clones[this.current_message].setStyle('display', 'none');
					this.messages[this.current_message].setStyle('display', 'block');
				}
				this.messages[this.current_message].retrieve('fadeOut').start('opacity', 1, 0);
			}
			if (this.messages[index].getStyle('opacity') == 0) {		
				this.messages[index].setStyle('display', 'block');
				this.messages[index].retrieve('fadeIn').start('opacity', 0, 1);
			}			
		}
		
		this.current_message = index;
		this.updateControlsStart();
		
	}	
});

var CarouselControl = new Class({
	
	Implements: [Options],  
	 
	options: {
		
	},
	
	initialize: function(buttons, options){
		
		this.setOptions(options);
		
		if ($type(buttons) == 'array') 
			this.buttons = buttons;
		else 
			this.buttons = $(document).getElements(buttons);
		
		this.initButtons();
	},
	
	initButtons: function() {
		this.buttons.each(function(button, index) {
			button.addEvent('click', this.callButtonListener.bindWithEvent(this, index));			
		}, this);		
	},
	
	setButtonListener: function(listener) {
		this.buttonListener = listener;
	},
	
	callButtonListener: function(event, index) {
		event.preventDefault();
		if (this.buttonListener) {
			this.buttonListener(index);
		}
	},
	
	setIndex: function(index) {
		this.buttons.each(function(button, index) {
			button.removeClass('active');
		}, this);	
		this.buttons[index].addClass('active');
	},
	setIndexStart: function(index) {}
	
});

CarouselControl.Animated = new Class({
	Extends: CarouselControl,
	
	options: {
		duration: 500
	},
	
	initialize: function(container, buttons, options){
		
		// initialize the parent
		this.parent(buttons, options);
		
		// add the container
		if ($type(container) == 'element')
			this.container = container;
		else
			this.container = $(document).getElement(container);
			
			
		// get the positions of the buttons in the container
		this.positions = new Array();
		
		this.buttons.each(function(button, index) {
			var position = button.getPosition(this.container);
			this.positions[index] = position;		
		}, this);		
		
		// get the current background-position on the container
		var x,y;
		if (Browser.Engine.trident){
			x = this.container.getStyle('background-position-x');
			y = this.container.getStyle('background-position-y');
		} else {
			var xy = this.container.getStyle('background-position');
			var space = xy.indexOf(' ');
			x = xy.substr(0, space);
			y =  xy.substr(space + 1);
		
		}
		this.offset_x = parseInt(x);
		this.offset_y = parseInt(y);
			
		// set effects
		this.animate = new Fx.Tween(this.container, {
			transition: Fx.Transitions.Expo.easeInOut,
			duration: this.options.duration,
			wait: false
		});	
		this.animate_x = new Fx.Tween(this.container, {
			transition: Fx.Transitions.Expo.easeInOut,
			duration: this.options.duration,
			wait: false
		});
		this.animate_y = new Fx.Tween(this.container, {
			transition: Fx.Transitions.Expo.easeInOut,
			duration: this.options.duration,
			wait: false
		});
				
	},
	
	setIndexStart: function(index) {
		var new_x = this.offset_x + this.positions[index].x + "px";
		var new_y = this.offset_y + this.positions[index].y + "px";
		
		if (Browser.Engine.trident) {
			this.animate_x.start('background-position-x', new_x);
			this.animate_y.start('background-position-y', new_y);
		} else {
			this.animate.start('background-position', new_x + " " + new_y);
		}
	}
	
	
	
});