/** 
 * ImageScroller
 *	
 * Scrolls images
 *
 * @usage :		
 *				
 * @author : 	Studio Partikule, 2009
 */

var Scroller = new Class({
	
	Implements: Array(Options, Events),

	options: {
		mode: 'horizontal',
		id: '',
		width:0,
		height:0,
		speed:4000
	},

	initialize: function(element, options)
	{
		this.idp = false;
		this.setOptions(options);
		this.element = $(element);
		this.n = 0;
		this.dir = 1;
				
		this.current = 0;
		this.curPos = 0;
		this.childs = this.element.getElements(this.options.childs);
		
		if (this.childs.length > 0) {
			this.n = this.childs.length -1;;
			this.build();
		}


	},

	build:function()
	{
		var n = this.childs.length;

		// Card size
		this.size = {x:this.options.width, y:this.options.height};
		
		this.element.setStyles({
			'height': this.size.y,
			'width': this.size.x
		});
	
		this.childs.setStyles({
			'height': this.size.y,
			'width': this.size.x			
		});
			
		// Create one div in the element, containing the childs
		this.scroller = new Element('div').setStyles({
			'height': (this.options.mode == 'horizontal') ? this.size.y : n * this.size.y,
			'width': (this.options.mode == 'horizontal') ? n * this.size.x : this.size.x
		}).inject(this.element);
		
		this.childs.inject(this.scroller);
		
		this.mover = new Fx.Move(this.scroller, {
			relativeTo: this.element,
			duration: 500,
			transition: Fx.Transitions.Quad.easeInOut,
			link: 'chain',
			position: 'upperLeft',
			edge: 'upperLeft'
		});

		// Set the buttons links
		if (this.options.buttons) this.setButtonsEvents();
		
		// Stop periodical
		this.element.addEvent('mouseenter', function(e){
			$clear(this.idp);
		}.bind(this));
		this.element.addEvent('mouseleave', function(e){
			this.idp = this.showNextPeriodical.periodical(this.options.speed, this);
		}.bind(this));

		this.show(0);

		if (this.n > 0)
		{
			this.idp = this.showNextPeriodical.periodical(this.options.speed, this);
		}
	},

	setButtonsEvents: function()
	{
		var next = $(this.options.buttons.next);
		var prec = $(this.options.buttons.prec);
		
		next.addEvent('click', function(e) {
			e.stop();
			this.next(1);
		}.bind(this));

		prec.addEvent('click', function(e) {
			e.stop();
			this.next(-1);
		}.bind(this));
		
		prec.addEvent('mouseenter', function(e){
			$clear(this.idp);
		}.bind(this));
		prec.addEvent('mouseleave', function(e){
			this.idp = this.showNextPeriodical.periodical(this.options.speed, this);
		}.bind(this));
		
		next.addEvent('mouseenter', function(e){
			$clear(this.idp);
		}.bind(this));
		next.addEvent('mouseleave', function(e){
			this.idp = this.showNextPeriodical.periodical(this.options.speed, this);
		}.bind(this));
	},
	
	show: function(n)
	{
		if (n<this.current) {this.dir = -1};
		if (n>this.current) {this.dir = 1};
		this.current = n;
		this.mover.start({
			offset: {x:n * this.size.x *(-1), y:0}
		});
	},

	next: function(dir)
	{
		var i = this.getNext(dir);
		
		if (i > this.n) {
			return;
		};
		if (i < 0) {
			return;
		}
		this.show(i);
	},

	showNextPeriodical: function(n)
	{
		i = this.current + this.dir;
		if (i > this.n) {
			i = i-2;
			this.dir = -1;
		};
		if (i < 0) {
			i = this.dir = 1;
		}
		this.show(i);
	},

	moveTo: function(n, dir)
	{
		this.current = n;
		
		if (this.comment)
		{
			var title = this.objPictures[n].getProperty('title');
			title = (title != null) ? title.replace('|', '<br/>') : '';
			var content = new Element('p', {'html' : title});
			this.comment.fade('hide');
			this.comment.empty();
			content.inject(this.comment);
			this.comment.fade('in');			
		}
		
		if (dir != 0)
		{
			var oldPos = this.curPos;
			this.curPos += (dir * this.size.x) * - 1;
	
			this.mover.start({
				offset: {x:this.curPos,y:0}
			});
		}
	},
	
	getNext: function(dir)
	{
		var n = this.current + dir;
		if (n > (this.n)) return this.n;
		else if (n < 0)	return 0;
		else return n;
	}
});