if (!Wd)
{
	var Wd = {};
}

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

Wd.Galeries.Visuals = {};

function GaleryShow(url, w, h)
{
	b = 3;
	ml = -(w/2+b);
	mt = -(h/2+b);
	
	// IE bug : funny things happen when the image's dimensions
	// are not defined.
	
	var img = new Element
	(
	 	'img',
		
		{
			'src': url,
			
			'styles':
			{
				'position': "absolute",
				'left': 0,
				'right': 0,
				'width': w,
				'height': h
			}
		}
	);
	
	//
	// border top
	//

	var brd_t = new Element('div');

	brd_t.id = "slideshow-top";

	//
	// border bottom
	//

	var brd_b = new Element('div');

	brd_b.id = "slideshow-bottom";

	//
	// container
	//
	
	var container = new Element
	(
	 	'div',

		{
			'title': 'cliquer ici pour fermer',
			
			'styles':
			{
				'position': "absolute",
				'left': "50%",
				'top': "50%",
				'width': w,
				'height': h,
				'margin-left': ml,
				'margin-top': mt,
				'cursor': "pointer",
				'border': b + "px solid white",
				'background': "url(galeries/visuals/elements/slideshow-loading.gif) white no-repeat center"
			}
		}
	);

	container.appendChild(brd_t);
	container.appendChild(brd_b);
	container.appendChild(img);
	
	//
	// delayed apparition of the container
	//
	// IE6 stupid bug : the elements overflowing the container (here :
	// the top and bottom images) are not displayed when they are faded...
	//
	
	//
	// create then show the Blacktouch object
	//
	
	var bt = new Wd.Blacktouch(container, { appear: { duration: 250 }, disappear: null });

	container.addEvent('click', function() { bt.disappear() });

	bt.appear();
}

Wd.Galeries.Visuals.Preview = Options.extend
({
	entry: null,
	
	options:
	{
		onMouseEnter: Class.empty,
		onMouseLeave: Class.empty
	},

	initialize: function(options)
	{
		this.setOptions(options);
		
		this.element = new Element
		(
		 	'img', { 'title': 'Cliquer pour agrandir' }
		);
		
		this.element.onclick = this.show.bind(this);
		this.fx = new Fx.Style(this.element, 'opacity', { wait: false, duration: 250 });
		
		this.element.onmouseover = function()
		{
			this.fx.start(0.6);
			this.options.onMouseEnter(this);
		}.bind(this);

		this.element.onmouseout = function()
		{
			this.fx.start(1);
			this.options.onMouseLeave(this);
		}.bind(this);
	},
	
	setEntry: function(entry)
	{
		this.entry = entry;
		this.element.src = 'galeries/visuals/' + this.entry.id + '-preview.jpg';
	},
	
	show: function()
	{
		var url = 'galeries/visuals/' + this.entry.id + '.jpg';

		GaleryShow(url, this.entry.width, this.entry.height);
	}	
});

Wd.Galeries.Visuals.Comment = new Class
({
	initialize: function()
	{
		this.element = new Element
		(
		 	'div', { 'class': 'comment' }
		);
		
	},

	update: function(entry)
	{
		this.element.innerHTML =
		
			"<h1>" + entry.title +  "</h1>" +
			"<small>" + entry.date + "</small>" +
			"&nbsp;&bull; <big>" + entry.type + "</big>";
	}
});

Wd.Galeries.Visuals.Item = new Class
({
 	id: null,
 	title: null,
	image: null,
	date: null,
	type: null,
	width: 0,
	height: 0,
 
	initialize: function(li)
	{
		children = li.getChildren();
		
		if (!children)
		{
			return;
		}
		
		children.each
		(
		 	function(child)
			{
				child.remove();
				
				switch (child.tagName)
				{
					case 'H2':
					{
						this.title = child.innerHTML;
					}
					break;
					
					case 'IMG':
					{
						this.image = child;
						this.id = child.alt;
					}
					break;
					
					case 'SMALL':
					{
						this.date = child.innerHTML;
					}
					break;
					
					case 'BIG':
					{
						this.type = child.innerHTML;
					}
					break;
					
					case 'VAR':
					{
						var dimensions = child.innerHTML.split('x');
						
						this.width = dimensions[0].toInt();
						this.height = dimensions[1].toInt();
					}
					break;
				}
				
			},
			
			this
		);
	}
});

Wd.Galeries.Visuals.Galery = new Class
({
 	count: 0,
	position: 0,
	items: [],
 	previews: [],
 
 	initialize: function(el, entries)
	{
		this.element = $(el);
		
		//
		// create entries
		//
		
		entries.each
		(
			function(li)
			{
				this.items.include(new Wd.Galeries.Visuals.Item(li));
			},
		 
			this
		);
		
		this.element.empty();
		
		//
		// add wheel events
		//
		
		this.element.addEvents
		({
			'wheelup': function(e)
			{
				e = new Event(e).stop();
	
				this.decrease();
			}.bind(this),
		 
			'wheeldown': function(e)
			{
				e = new Event(e).stop();
	
				this.increase();
			}.bind(this)
		});

		//
		//
		//
		
		var thumbs = new Element('div');
		
		thumbs.className = 'thumbs';

		//
		// create the preview elements.
		// they are stored in the 'previews' array.
		//
		
		for (var i = 0 ; i < 5 ; i++)
		{
			var preview = new Wd.Galeries.Visuals.Preview
			(
				{
					onMouseEnter: function(preview)
					{
						this.comment.update(preview.entry);
					}.bind(this),
					
					onMouseLeave: function(preview)
					{
						this.comment.update(this.items[this.position]);
					}.bind(this)
				}
			);
			
			thumbs.appendChild(preview.element);
			
			this.previews.include(preview);
		}
		
		//
		// left shader
		//

		var preview = this.previews[0];

		var shader_left = new Element('div');
		
		shader_left.className = "shader-left";
		shader_left.onmouseover = preview.element.onmouseover.bind(preview);
		shader_left.onmouseout = preview.element.onmouseout.bind(preview);
		shader_left.onclick = preview.element.onclick.bind(preview);
		shader_left.title = preview.element.title;

		thumbs.appendChild(shader_left);
		
		//
		// right shader
		//

		var preview = this.previews[4];

		var shader_right = new Element('div');
		
		shader_right.className = "shader-right";
		shader_right.onmouseover = preview.element.onmouseover.bind(preview);
		shader_right.onmouseout = preview.element.onmouseout.bind(preview);
		shader_right.onclick = preview.element.onclick.bind(preview);
		shader_right.title = preview.element.title;
		
		thumbs.appendChild(shader_right);
		
		//
		//
		//
		
		this.element.appendChild(thumbs);
	
		//
		// comment
		//
		
		this.comment = new Wd.Galeries.Visuals.Comment();
		
		this.element.appendChild(this.comment.element);


		//
		//
		//
	
		this.count = this.items.length;
	
		//
		// navigation
		//
			
		this.navigation = new Wd.Navigation.Main
		(
			{
				count: this.count,
				onIncrease: this.increase.bind(this),
				onDecrease: this.decrease.bind(this)
			}
		);
		
		this.element.appendChild(this.navigation.element);
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		/*
		//
		// preload images
		//
		
		for (var i = 0 ; i < galery_images.length ; i++)
		{
			WPreloadImage(formatImg(i + 1, "preview"));
		}
		*/

		//
		// set position to last entry
		//
	
		this.setPosition(0);
	},

	setPosition: function(position)
	{
//		console.info('set position : %d', position);

		var active = 0;
		var items = this.items;
		var count = items.length;

		if (position < 0)
		{
			position = count - (Math.abs(position) % count);
		}
		else
		{
			position = position % count;
		}

//		console.info('safe position : %d', position);

		this.position = position;
		this.navigation.setPosition(position);

		for (var i = 0 ; i < 5 ; i++)
		{
			var p = position + i - 2;

			if (p < 0)
			{
				p = count - (Math.abs(p) % count);
			}
			else
			{
				p = p % count;
			}

//			console.info('position: %d (%d)', p, position);

			if (i == 2)
			{
				this.comment.update(items[p]);
			}

//			console.info('set entry: (%d) %a', p, items[p]);
			
			this.previews[i].setEntry(items[p]);
		}

//		console.info('active: %d', active);
		
		return position;
	},
	
	increase: function()
	{
		return this.setPosition(this.position + 1);
	},
	
	decrease: function()
	{
		return this.setPosition(this.position - 1);
	}
});

window.addEvent
(
	'domready',
	
	function()
	{
		var galery = document.getElementById('visuals');
	
		if (!galery)
		{
			return;
		}

		new Wd.Galeries.Visuals.Galery(galery, $$('#visuals li'))
	}
);