//
// preload some images
//

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

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

Wd.Galeries.Web = {};

Wd.Galeries.Web.Item = new Class
({
 	id: null,
 	title: null,
	image: null,
	href: null,
	description: null,
	position: 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 'A':
					{
						child.className = 'main';
						child.title = 'cliquer ici pour visiter le site';
						child.target = '_blank';
						
						this.href = child;
					}
					break;
					
					case 'SMALL':
					{
						this.date = child.innerHTML;
					}
					break;
					
					case 'BIG':
					{
						this.type = child.innerHTML;
					}
					break;
					
					default:
					{
						this.description = child;
					}
				}
				
			},
			
			this
		);
		
//		console.info('description: %a', this.description);
		
	}
});

Wd.Galeries.Web.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.Web.Preview = Options.extend
({
 	entry: null,
 
	options:
	{
		onMouseEnter: Class.empty,
		onMouseLeave: Class.empty
	},
 
	initialize: function(options)
	{
		this.setOptions(options);
		
		var cl = (options.position == 'active') ? 'active' : options.position + ' ' + options.speed;
		
		this.element = new Element
		(
			'span',
			
			{
				'class': cl,
				'title': 'Cliquer pour obtenir plus d\'informations'
			}
		);
		
		this.transition = new Fx.Style(this.element, 'opacity', { wait: false, duration: 100 });
				
		this.element.onclick = this.show.bind(this);

		this.shadow = new Element
		(
			'div', { 'class': 'shadow ' + cl }
		);

		this.shadow.onmouseover = function()
		{
			this.transition.start(0.8);
			this.options.onMouseEnter(this);
		}.bind(this);

		this.shadow.onmouseout = function()
		{
			this.transition.start(1);
			this.options.onMouseLeave(this);
		}.bind(this);

		this.shadow.appendChild(this.element);
	},
	
	setItem: function(itm)
	{
		this.entry = itm;
		this.element.setStyle('background-image', 'url(galeries/web/' + itm.id + '-preview.jpg)');
	},
	
	show: function()
	{
		var container = new Element
		(
		 	'div',
			{
				'id': 'web-info'/*,
				'title': 'cliquer ici pour fermer',
				'events':
				{
					'click': this.hide.bind(this)
				}*/
			}
		);

		var image = new Element('img');
		image.src = 'galeries/web/' + this.entry.id + '.jpg';

//		var title = new Element('h1');
		var title = new Element
		(
			'h1',
			{
				'title': 'cliquer ici pour fermer',
				'events':
				{
					'click': this.hide.bind(this)
				}
			}
		);
		title.innerHTML = this.entry.title;
						
		container.appendChild(image);
		container.appendChild(title);
		container.appendChild(this.entry.description);

		if (this.entry.href)
		{
			container.appendChild(this.entry.href);
		}
		
		this.black = new Wd.Blacktouch(container, { appear: { duration: 200 }, disappear: null });
		this.black.appear();
	},
	
	hide: function()
	{
		if (!this.black)
		{
			return;
		}
		
		this.black.disappear();
	}
});

Wd.Galeries.Web.Galery = new Class
({
 	items: [],
	count: 0,
	position: 0,
 
 	initialize: function(el, list)
	{
		this.element = $(el);
		
		var i = 0;
		
		list.each
		(
		 	function(li)
			{
				var itm = new Wd.Galeries.Web.Item(li);
				
				itm.position = i++;
				
				this.items.push(itm);
			},
			
			this
		);
		
		this.count = this.items.length;
		
		//
		// clean the element
		//
		
		this.element.empty();

		//
		// use wheel to easy items browsing
		//

		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)
		});

//		console.info('items: %a', this.items);
		
		//
		// create left and right images
		//
		
		var preview_options_title =
		{
			onMouseEnter: function(preview)
			{
				this.comment.update(preview.entry);
			}.bind(this),
			
			onMouseLeave: function(preview)
			{
				this.comment.update(this.items[this.position]);
			}.bind(this)
		};
		
		this.left03 = new Wd.Galeries.Web.Preview
		(
			$extend(preview_options_title, { position: 'left', speed: 'fast' })
		);

		this.right03 = new Wd.Galeries.Web.Preview
		(
			$extend(preview_options_title, { position: 'right', speed: 'fast' })
		);

		this.left02 = new Wd.Galeries.Web.Preview
		(
			$extend(preview_options_title, { position: 'left', speed: 'medium' })
		);
		
		this.right02 = new Wd.Galeries.Web.Preview
		(
			$extend(preview_options_title, { position: 'right', speed: 'medium' })
		);
		
		this.left01 = new Wd.Galeries.Web.Preview
		(
			$extend(preview_options_title, { position: 'left', speed: 'slow' })
		);

		this.right01 = new Wd.Galeries.Web.Preview
		(
			$extend(preview_options_title, { position: 'right', speed: 'slow' })
		);

		//
		// active
		//

		this.active = new Wd.Galeries.Web.Preview
		(
			{ position: 'active' }
		);
		
		//
		// navigation
		//
		
		this.navigation = new Wd.Navigation.Main
		(
			{
				count: this.count,
				onIncrease: this.increase.bind(this),
				onDecrease: this.decrease.bind(this)
			}
		);
		
		this.element.appendChild(this.left03.shadow);
		this.element.appendChild(this.left02.shadow);
		this.element.appendChild(this.left01.shadow);

		this.element.appendChild(this.right03.shadow);
		this.element.appendChild(this.right02.shadow);
		this.element.appendChild(this.right01.shadow);

		this.element.appendChild(this.active.shadow);

		this.element.appendChild(this.navigation.element);

		//
		// shaders
		//
		
		var shader = new Element
		(
			'span', { 'class': 'shader left' }
		);
		
		shader.onmouseover = this.left03.shadow.onmouseover.bind(this.left03);
		shader.onmouseout = this.left03.shadow.onmouseout.bind(this.left03);
		shader.onclick = this.left03.element.onclick.bind(this.left03);
		shader.title = this.left03.element.title;

		this.element.appendChild(shader);

		var shader = new Element
		(
			'span', { 'class': 'shader right' }
		);
		
		shader.onmouseover = this.right03.shadow.onmouseover.bind(this.right03);
		shader.onmouseout = this.right03.shadow.onmouseout.bind(this.right03);
		shader.onclick = this.right03.element.onclick.bind(this.right03);
		shader.title = this.right03.element.title;

		this.element.appendChild(shader);
		
		//
		// comments
		//
		
		this.comment = new Wd.Galeries.Web.Comment();
		this.element.appendChild(this.comment.element);
		
		//
		// init gallery
		//

		this.setPosition(0);
	},

	increase: function()
	{
		return this.setPosition(this.position + 1);
	},
	
	decrease: function()
	{
		return this.setPosition(this.position - 1);
	},

	setPosition: function(position)
	{
		var items = this.items;
		var count = this.items.length;

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

		//
		// previews
		//

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

		i++; this.left03.setItem(items[i % count]);
		i++; this.left02.setItem(items[i % count]);
		i++; this.left01.setItem(items[i % count]);

		i++; this.active.setItem(items[i % count]);

		i++; this.right01.setItem(items[i % count]);
		i++; this.right02.setItem(items[i % count]);
		i++; this.right03.setItem(items[i % count]);
		
		//
		// title and navigation
		//

		this.comment.update(items[position]);
		
		this.navigation.setPosition(position);
		
		this.position = position;
		
		return position;
	}
});

window.addEvent
(
	'domready', function()
	{
		el = document.getElementById('web');
		
		if (!el)
		{
			return;
		}

		new Wd.Galeries.Web.Galery('web', $$('#web li'));
	}
);