/**
 * => Mootools 1.2
 * 	=> Core
 * @classDescription
 * Classe permettant de faire défiler un bloc de texte ou d'images
 * @author manuelanquetil <at> gmail.com
 */
var Mooquee = new Class({

	Implements: [Options],

	options: {
		height: 40,
		width: 550,
		scrollWidth: 'auto',
		steps: 1,
		speed: 70,
		direction: 'bottom',
		pauseOnOver: true,
		pauseOnContainerOver: true,
		changeDirOnOver: false,
		resetPos: true
	},

    initialize: function(element, options) {
		this.setOptions(options);
		this.run = false;
		this.timer = null;
		this.marquee = null;
		this.container = element;
		/**
		 * Pour économiser du CPU sur FF <= 3 et IE <= 8, on utilise plutôt la balise <marquee>, cependant cette balise est dépréciée W3C !
		 * Les navigateurs économes en CPU n'utiliseront pas cette balise, à savoir :
		 * WebKit (eg. Chrome, Safari, Konqueror)
		 * Opera
		 */
		this.useMarqueeTag = !(Browser.Engine.webkit || Browser.Engine.presto);
		this.init();
		this.start();
	},

	coord: {
		top: 0,
		left: 0
	},

	init: function() {
		this.container.setStyles({
			'width' : this.options.width,
			'height' : this.options.height
		});

		if(this.useMarqueeTag) {
			this.marquee = new Element('marquee').set('html', this.container.get('html'));
			this.marquee.setProperty('scrollamount', this.options.steps);
			this.marquee.setProperty('scrolldelay', this.options.speed);
		} else {
			this.marquee = new Element('div', {
				'class': 'mooquee-text',
				'id': 'mooquee-text'
			}).set('html', this.container.get('html'));
			if(this.options.scrollWidth.toInt() > 0) {
				this.marquee.setStyle('width', this.options.scrollWidth + 'px');
			}
		}
		this.container.empty();

		this.marquee.inject(this.container);

		if (!this.resetPos()) {
			return;
		}

		if(this.options.changeDirOnOver) {
			this.container.addEvent('mouseleave', function(e) {
				var event = new Event(e);
				if(this.options.direction == 'right' || this.options.direction == 'left') {
					var axis = this.container.getPosition().x + (this.container.getSize().x / 2);
					if(event.page.x > axis) {
						this.setDirection('right');
					} else {
						this.setDirection('left');
					}
				} else {
					var axis = this.container.getPosition().y + (this.container.getSize().y / 2);
					if(event.page.y > axis) {
						this.setDirection('bottom');
					} else {
						this.setDirection('top');
					}
				}
			}.bind(this));
		}
	},

	addMouseEvents : function() {
		if (this.options.pauseOnOver) {
			if (!this.options.pauseOnContainerOver) {
				this.marquee.addEvents({
					'mouseenter': function(me){
						this.stop();
					}.bind(this),
					'mouseleave': function(me){
						this.start();
					}.bind(this)
				});
			} else {
				this.container.addEvents({
					'mouseenter': function(me){
						this.stop();
					}.bind(this),
					'mouseleave': function(me){
						this.start();
					}.bind(this)
				});
			}
		}
	},

	resetPos: function() {
		if(this.useMarqueeTag) {
			return true;
		}
		switch(this.options.direction) {
			case 'top':
			case 'up':
				this.coord.top = this.options.resetPos ? -this.options.height : this.coord.top;
				this.marquee.setStyle('top', this.coord.top);
			break;
			case 'bottom':
			case 'down':
				this.coord.top = this.options.resetPos ? this.options.height : this.coord.top;
				this.marquee.setStyle('top', this.coord.top);
			break;
			case 'left':
				this.coord.left = this.options.resetPos ? -this.options.width : this.coord.left;
				this.marquee.setStyle('left', this.coord.left);
			break;
			case 'right':
				this.coord.left = this.options.resetPos ? this.options.width : this.coord.left;
				this.marquee.setStyle('left', this.coord.left);
			break;
			default:
				alert('direction config error: ' + this.options.direction);
				return false;
		}

		return true;
	},

	//
	// Public fonctions
	//

	start: function() {
		if (!this.run) {
			this.addMouseEvents();
			if(this.useMarqueeTag) {
				this.marquee.start();
			} else {
				switch (this.options.direction) {
					case 'top':
					case 'up':
						this.timer = this.moveTop.periodical(this.options.speed, this);
						break;
					case 'bottom':
					case 'down':
						this.timer = this.moveBottom.periodical(this.options.speed, this);
						break;
					case 'left':
						this.timer = this.moveLeft.periodical(this.options.speed, this);
						break;
					case 'right':
						this.timer = this.moveRight.periodical(this.options.speed, this);
						break;
				}
			}
			this.run = true;
		}
	},

	stop: function() {
		if(this.run) {
			if (this.useMarqueeTag) {
				this.marquee.stop();
			} else {
				$clear(this.timer);
			}
			this.marquee.removeEvents();
			this.run = false;
		}
	},

	setDirection: function(dir){
		this.options.direction = dir;
		if(this.useMarqueeTag) {
			if(dir == 'top') {
				dir = 'up';
			} else if(dir == 'bottom') {
				dir = 'down';
			}
			this.marquee.setProperty('direction', dir);
		} else {
			this.stop();
			if(!this.options.changeDirOnOver) {
				this.resetPos();
			}
			this.start();
		}
	},

	//
	//loop with delay if we don't use marquee tag...
	//

	moveTop: function() {
		this.coord.top -= this.options.steps;
		this.marquee.style.top = this.coord.top + 'px';
		if (this.coord.top < -this.options.height) {
			this.coord.top = this.options.height;
		}
	},

	moveBottom: function() {
		this.coord.top += this.options.steps;
		this.marquee.style.top = this.coord.top + 'px';
		if (this.coord.top > this.options.height) {
			this.coord.top = -this.options.height;
		}
	},

	moveLeft: function() {
		this.coord.left -= this.options.steps;
		this.marquee.style.left = this.coord.left + 'px';
		if(this.coord.left < -this.options.scrollWidth) {
			this.coord.left = this.options.width;
		}
	},

	moveRight: function() {
		this.coord.left += this.options.steps;
		this.marquee.style.left = this.coord.left + 'px';
		if(this.coord.left > this.options.width) {
			this.coord.left = -this.options.scrollWidth;
		}
	}

});