/* ************************************************************************************* *\
 * 
 * Copyright (c) Oct 2011 Bruno Torrinha - http://www.torrinha.com
 * 
 * Original version from iCarousel (c) 2007 Fabio Zendhi Nagao - http://zend.lojcomm.com.br
 * 
\* ************************************************************************************* */

//-- Implement (
//-- TIPS -- http://mootools.net/forge/p/facetip
//-- TIPS -- http://mootools.net/forge/p/floatingtips
//-- 
var zCarousel = new Class({

	Implements: [Options, Events, Chain],

	isMouseOver: false, 

	options: {
		animation: {	// Animation options ...
			type: "fade:scroll",		// scroll, fade
			amount: 0,					// amount of slides to show and scroll
			direction: "left",			// if type = scroll, set: top || left
			transition: Fx.Transitions.Cubic.easeInOut, 	//'cubic:in:out',
			duration: 500,
			rotate: {
				type: "auto",		// auto || manual
				interval: 5000,		// if type = auto, set the interval (ms)
				onMouseOver: "stop"	// if type = auto, set the onmouseover behavior: stop || proceed
			}
		},

		state: "stopped",			// Slideshow state: "stopped, playing"

		item: {
			klass: "item",
			size: 100
		},

		bSelector: false,			// false || thumbs || img
		buttons: {
			previous: "previous",
			next: "next",
			play: "play",
			stop: "stop"
		},

		tbKlass: Class.empty		// thumb active photo control, just working with scrool effect
	/*	onPlay: Class.empty,
		onStop: Class.empty,
		onPrevious: Class.empty,
		onNext: Class.empty,
		onGoTo: Class.empty	*/
	},

	initialize: function(container, options) {
		this.setOptions(options);
		var O = this.options;
		this.container = $(container);
		this.aItems = $$('.'+ this.options.item.klass);

		if (O.tbKlass != "undefined") {
			this.imgThumbs = $$('#thumbs a');
			this.imgThumbs[0].addClass(O.tbKlass);
		}

		var b = O.buttons;

		if(b.previous != "undefined" && $(b.previous)){
			$(b.previous).addEvent("click", function(event) {
				event.stop();
				this._previous();
				this.fireEvent("clickPrevious", this, 20);
			}.bind(this));
		}
		if(b.next != "undefined" && $(b.next)){
			$(b.next).addEvent("click", function(event) {
				event.stop();
				this._next();
				this.fireEvent("clickNext", this, 20);
			}.bind(this));
		}
		if(b.play != "undefined" && $(b.play)){
			$(b.play).addEvent("click", function(event) {
				event.stop();
				this._play();
				this.fireEvent("clickPlay", this, 20);
			}.bind(this));
		}
		if(b.stop != "undefined" && $(b.stop)){
			$(b.stop).addEvent("click", function(event) {
				event.stop();
				this._stop();
				this.fireEvent("clickStop", this, 20);
			}.bind(this));
		}

		var ani = O.animation;

		this.fx = new Fx.Tween(this.container, {duration: ani.duration, transition: ani.transition, link: 'cancel'});

		switch(O.animation.type) {
			case "fade":
				this.aItems.each(function(item) {
//					item.set('tween', {duration: ani.duration, transition: ani.transition, wait: false}).fade(0);
					item.setStyles({
						'left': 0,
						'top': 0,
						'position': 'none'
					});
				}.bind(this));
				this.height = this.container.getSize().y;
				this.atScreen = 0;
				this._animate(this.atScreen);
				break;

			default:
				(2).times(function() {
					this.aItems.each(function(item) {
						item.clone().inject(this.container);
					}.bind(this));
				}.bind(this));
				this.aItems = $$('.'+ O.item.klass);

				this.atScreen = this.aItems.length / 3;
				this.container.setStyle(ani.direction, - this.atScreen * ani.amount);
				break;
		}

		$('photoDiv').addEvents({								//==================	New code here		=========================
			"mouseenter": function() {
				this.isMouseOver = true;
				if(this.state === "playing"){ if(O.animation.rotate.type === "auto"){ clearInterval(this.timer); } }
			}.bind(this),
			"mouseleave": function() {
				this.isMouseOver = false;
				if(this.state === "playing"){ if(O.animation.rotate.type === "auto") this.timer = this._autoRotate.periodical(O.animation.rotate.interval, this); }
			}.bind(this)
		})														//==================	End code 			=========================

		if(O.animation.rotate.type === "auto") {
			this.timer = this._autoRotate.periodical(O.animation.rotate.interval, this);
			this.state = "playing";
		}
		this.fireEvent("start", this, 20);
	},


	goTo: function(n) {

		if(this.options.tbKlass != "undefined") {				//==================	New code here		=========================
			this.imgThumbs[this.atScreen - this.imgThumbs.length].removeClass(this.options.tbKlass);
			this.imgThumbs[n].addClass(this.options.tbKlass);
		}														//==================	End code 			=========================

		switch(this.options.animation.type) {
			case "fade":
				var lastIndex = this.atScreen;
				this.atScreen = (n % (this.aItems.length / 3)).abs();
				this._animate(this.atScreen, lastIndex);
				break;

			default:
				this.atScreen = (n % (this.aItems.length / 3)).abs();
				this.atScreen += this.aItems.length / 3;
				this._animate(this.atScreen);
				break;
		}

		this.fireEvent("goTo", this, 20);
	},

	_play: function() {
		this.timer = this._autoRotate.periodical(this.options.animation.rotate.interval, this);
		this.state = "playing";
		this.fireEvent("play", this, 20);
	},

	_stop: function() {
		clearInterval(this.timer);
		this.state = "stopped";
		this.fireEvent("stop", this, 20);
	},

	_previous: function() {
		this.atScreen -= 1;
		var ani = this.options.animation;
		switch( ani.type ) {
			case "fade":
				var lastIndex = this.atScreen;
				if(this.atScreen < 0) this.atScreen = (this.aItems.length - 1);
				this._animate(this.atScreen, lastIndex);
				break;

			default:
				if(this.atScreen < this.aItems.length / 3) {
					this.container.setStyle( ani.direction, - ani.amount * this.aItems.length * 2 / 3);
					this.atScreen = this.aItems.length * 2 / 3 - 1;
				}
				this._animate(this.atScreen);
				break;
		}

		this.fireEvent("previous", this, 20);
	},

	_next: function() {
		this.atScreen += 1;
		var ani = this.options.animation;
		switch( ani.type ) {
			case "fade":
				var lastIndex = this.atScreen;
				if(this.atScreen >= this.aItems.length) this.atScreen = 0;
				this._animate(this.atScreen, lastIndex);
				break;

			default:
				if(this.atScreen > this.aItems.length * 2 / 3) {
					this.container.setStyle( ani.direction, - ani.amount * this.aItems.length / 3);
					this.atScreen = this.aItems.length / 3 + 1;
				}
				this._animate(this.atScreen);
				break;
		}
		this.fireEvent("next", this, 20);
	},

	_autoRotate: function() {
		if(this.state === "stopped"){
			clearInterval(this.timer);
		} else {
			if(this.options.animation.rotate.onMouseOver === "stop" && !this.isMouseOver) this._next();
		}
	},

	_animate: function(a, b) {
		var ani = this.options.animation;
		switch( ani.type ) {
			case "fade":
				var that = this;
				if(b != null) {
					this.aItems[b].fade(0);
					this.aItems[a].fade(1);
				} else {
					this.aItems[a].fade('out');
				}
				break;

			case "scroll":
				var that = this;
				if( ani.direction === "top") {
					that.fx.start("top", - a * ani.amount);
				} else {
					that.fx.start("left", - a * ani.amount);
				}
				break;

			case "fade:scroll":
				var that = this;
				if(ani.direction === "top") {
					that.fx.start("opacity", 0.55).chain(function() {
						that.fx.start("top", - a * ani.amount ).chain(function() {
							that.fx.start("opacity", 1);
						});
					});
				} else {
					that.fx.start("opacity", 0.55).chain(function() {
						that.fx.start("left", - a * ani.amount ).chain(function() {
							that.fx.start("opacity", 1);
						});
					});
				}
				break;
		}
	}
});