if (!Wd.Galeries)
{
	Wd.Galeries = {};
}

Wd.Galeries.Icon = Options.extend
({
 	name: null,
	element: null,
	
	options:
	{
		index: 0,
		onClick: Class.empty
	},

	initialize: function(name, options)
	{
		this.setOptions(options);
		
		this.name = name;
		this.element = $('icon-' + name);
		
		this.fx = new Fx.Style
		(
			this.element, 'opacity',
			{
				duration: 250, wait: false
			}
		);
		
		this.fx.set(0.01);
		
		this.element.onmouseover = this.mouseEnter.bind(this);
		this.element.onmouseout = this.mouseLeave.bind(this);
		
		this.element.onclick = function()
		{
			this.options.onClick(this);
			
			return false;
		}.bind(this);
	},
	
	mouseEnter: function()
	{
		if (this.element.hasClass('active'))
		{
			return;
		}
		
		this.fx.start(1);
	},

	mouseLeave: function()
	{
		if (this.element.hasClass('active'))
		{
			return;
		}
		
		this.fx.start(0.01);
	},

	activate: function()
	{
		this.element.addClass('active');
		this.fx.start(1);
	},

	desactivate: function()
	{
		this.element.removeClass('active');
		this.fx.start(0.01);
	}
});

Wd.Galeries.Hub = new Class
({
	names: [],
	icons: [],
 
	initialize: function(el)
	{
		this.element = $(el);
		
		//
		// search galeries
		//

		this.element.getChildren().each
		(
			function(child)
			{
				if (child.tagName != 'DIV')
				{
					child.remove();
			
					return;
				}
				
				this.names.push(child.id);
			},
			
			this
		);
		
		if (!this.names.length)
		{
			return;
		}
		
		//
		// create icons
		//
		
		this.names.each
		(
			function(name)
			{
				this.icons.push
				(
					new Wd.Galeries.Icon
					(
						name,
						{
							onClick: this.setGalery.bind(this)
						}
					)
				);
			},
			
			this
		);
		
		//
		// transition
		//
		
		this.transition = new Fx.Style
		(
			this.names[0], 'margin-top',
	
			{		
				duration: 800,
				transition: Fx.Transitions.Elastic.easeOut,
				wait: false
			}
		);
		
		//
		// show ourselves
		//
		
		this.element.setStyle('visibility', 'visible');
		
		//
		// auto init
		//
		
		this.setGalery(this.icons[0]);
	},
	
	setGalery: function(icon)
	{
		var position = this.icons.indexOf(icon);
		
		this.transition.start(-position * 400);
		
		this.icons.each
		(
			function(ic)
			{
				if (ic == icon)
				{
					ic.activate();
				}
				else
				{
					ic.desactivate();
				}
			}
		);
	}
});

window.addEvent('domready', function()
{
	var hub = new Wd.Galeries.Hub('galeries');
});