// @date 21.06.2007
// @revision 4.2
/* @todo:
	- class selected
	- add options
		autotime
		holdtime
		stop/play/next/prev/play backwords
		effect
	- destroy
	- better slider
	- add some history with #pic-001
	- starcraft2 art gallery effect
	@log
	21.06.2007 - show/hide arrows on scrolling
	22.06.2007 - add timeout on showImage 
	27.06.2007 - added moveprev and showImage options
 */

if (!CD3) var CD3 = {};

CD3.Gallery = Class.create();
CD3.Gallery.prototype = 
{
	initialize: function(image, thumbsrule, options)
	{
		this.element	= $(image);
		this.thumbs		= $$(thumbsrule);
		this.options	= Object.extend(
		{
			timer:			0,
			attribute:		'imgsrc',
			arrows:			null,
			scroll_by:		0,
			scroll_type:	'horizontal',
			container:		null,
			moveprev:		'moreprev',
			afterShow:		function() {},
			setImage:		function(element, src) { element.src = src; }
		}, options || {})
		
		// add on click events
		this.thumbs.each(function(i, k)
		{
			i.observe('click', this.showImage.bind(this, i, k));
		}.bind(this));
		
		this.current 	= 0;
		
		// have timer	
		if (this.options.timer)
		{
			this._gotoNext	= this.gotoNext.bind(this, 1);
			this.setTimer();
		}
		
		// have scroller
		if (this.options.arrows)
		{
			this.container	= $(this.options.container);
			
			if (this.options.scroll_type == 'vertical')
				this.scroll = ['top', 'offsetHeight'];
			else
				this.scroll = ['left', 'offsetWidth']
			
			$$(this.options.arrows).each(function(a)
			{	
				this['btn' + (a.hasClassName( this.options.moveprev ) ? 'Prev' : 'Next')] = a;
				a.observe('click', function(button)
				{
					var by	 = this.options.scroll_by;
					var dir  = button.hasClassName( this.options.moveprev ) ? 1 : -1;
						dir *= by;
								
					var side = this.container;
					var prop = parseInt(side.style[this.scroll[0]]) || 0;
					
					if (dir > 0 && (prop > -1 || !prop))						return;
					if (dir < 0 && (side[this.scroll[1]] + dir + prop < 10))	return;
					
					this.btnPrev.style.visibility = !(prop+dir) ? 'hidden' : 'visible';
					this.btnNext.style.visibility = !(side[this.scroll[1]] + dir*2 + prop > 10) ? 'hidden' : 'visible';
										
					if (this.options.scroll_type == 'vertical')
						Effect.MoveBy(side, dir, 0, {duration: 0.5, queue: {scope: 'gallery', limit:1}})
					else
						Effect.MoveBy(side, 0, dir, {duration: 0.5, queue: {scope: 'gallery', limit:1}})
						
				}.bind(this, a));
			}.bind(this));
		}
	},
	setTimer: function(time)
	{
		time = time || this.options.timer
		
		if (time)
		{
						 window.clearTimeout(this.timer);
			this.timer = window.setTimeout(this._gotoNext, time);
		}
	},
	showImage: function(a, num, auto)
	{
		this.current = num;
		
		var src	= a.getAttribute(this.options.attribute);	
	
		new Effect.Fade(this.element,
		{
			duration: .1,
			afterFinish: function(ef)
			{
				this.options.setImage(ef.element, src);
				setTimeout(function() { new Effect.Appear(ef.element) }, 50);
			}.bind(this)
		});
		
		if (this.options.timer)
			this.setTimer(auto ? this.options.timer : this.options.timer * 2);
		
		this.options.afterShow.call(this, a, num, auto);
	},
	gotoNext: function(to)
	{
		to = this.current + ( to ? to : 1 );
		
		if (!this.thumbs[to])
		{
			to = 0;
		}
	
		this.showImage(this.thumbs[to], to, 'auto');
	},
	setImage: function(element, src)
	{
		element.src = src;
	}
}