// @date 02.07.2007
// @version 0.4.3
/* @todo:
	- add options
		autotime
		holdtime
		stop/play/next/prev/play backwords
		effect
	- destroy
	- 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
	02.07.2007 - added loading checks 
 */

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:	'vertical',
			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.call(this, 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;
	},
	createImage: function(source, attributes)
	{
		attributes = attributes || {};
		
		var image = new Image();
			image.src = source;
		
		if (Prototype.Browser.IE)
		{
			image.onload = attributes.onload;
			delete attributes.onload;
			for(var i in attributes)
			{
				image.setAttribute(i, attributes[i]);
			}
		
			return image;
		}
				
		var element = document.createElement('img');
			element.setAttribute('src', source);
			element = $(element);
			
		if (attributes.onload)
		{
			element.eventLoad = function(func, e)
			{
				this.stopObserving('load', element.eventLoad);
				func.call(this, e);
			}.bind(element, attributes.onload);
			
			element.observe('load', element.eventLoad);
			
			delete attributes.onload;
		}
		if (image.width && image.height) element.eventLoad();
		
		for(var i in attributes)
		{
			element.setAttribute(i, attributes[i]);
		}
		
		return element;
	}
}
Event.onReady(function()
{
	new CD3.Gallery('mainfoto', '#thumbs a', {
		afterShow: function(a)
		{
			var html = a.down('span').innerHTML;
			if (html)
				$('pictxt').show().innerHTML = html;
			else
				$('pictxt').hide();
		},
		setImage: function(element, src)
		{
			this.element = this.createImage(src,
			{
				id: element.id,
				style: 'display: none;',
				onload: function ()
				{
					new Effect.Appear(this);
				}
			});
			
			element.parentNode.replaceChild(this.element, element);
		}
	});
});