Wd = {};
Wd.Interactive = {};

Wd.Interactive.Spot = Options.extend
({
	options:
	{
		onMouseEnter : Class.empty,
		onMouseLeave : Class.empty
	},

	initialize: function(el, options)
	{
		this.setOptions(options);

		this.element = $(el);
		
		this.element.setStyles
		({
		
			'left': options.x,
			'top': options.y,
			'width': options.w,
			'padding-top': options.h
		 
		});
		
		this.fx = new Fx.Style(this.element, 'opacity', { wait: false, duration: 250 });
		
		this.element.addEvent
		(
		 	'mouseenter', function()
			{
				this.fx.start(.5);
			}.bind(this)
		);

		this.element.addEvent
		(
		 	'mouseleave', function()
			{
				this.fx.start(1);
			}.bind(this)
		);

		this.element.onmouseover = this.options.onMouseEnter;
		this.element.onmouseout = this.options.onMouseLeave;
	}	
});

Wd.Interactive.Info = Fx.Style.extend
({
 	options:
	{
		wait: false,
		duration: 250
	},
	
	initialize: function(options)
	{
		this.element = new Element('div', { 'class': 'info' });

		this.parent(this.element, 'opacity', options);
		
		this.set(0);
	},
	
	show: function(ev)
	{
		ev = new Event(ev);
		
		var p_c = this.element.parentNode.getCoordinates();
		var r_x = ev.page.x - p_c.left;

		this.element.innerHTML = ev.target.innerHTML;

		delete ev;
		
		if ((r_x < p_c.width / 2))
		{
			//
			// mouse pointer is on the left part
			//
			
			this.element.addClass('right');

			this.element.setStyle('left', '100%');
			this.element.setStyle('margin-left', -this.element.getCoordinates().width);
		}
		else
		{
			this.element.removeClass('right');

			this.element.setStyle('left', 0);
			this.element.setStyle('margin-left', 0);
		}
		
		this.start(0.9);
	},
	
	hide: function()
	{
		this.start(0);
	}
});

/*
Wd.Interactive.Core = new Class
({
	initialize: function()
	{
	},
	
	addSpot: function(spot)
	{
	}
});
*/

Wd.Interactive.Remote = new Class
({
 
	initialize: function(el)
	{
		this.element = $(el);
		
		//
		//
		//
		
		var parent = this.element.getParent();
		var parent_c = parent.getCoordinates();
		
		this.spots = new Element
		(
		 	'div',
			{
				'styles':
				{
					'position': 'relative',
					'width': parent_c.width,
					'height': parent_c.height
				}
			}
		);

		this.fx = new Fx.Style(this.spots, 'opacity', { wait: false });

		this.fx.set(0);

		this.element.addEvent
		(
			'mouseenter', function()
			{
			
				this.fx.start(0.4);
			
			}.bind(this)
		);

		this.element.addEvent
		(
			'mouseleave', function()
			{
			
				this.fx.start(0);
			
			}.bind(this)
		);

		//
		//
		//
		
		this.req = new Json.Remote
		(
		 	'/interactive/',
		 	{
				onComplete: this.update.bind(this)
			}
		);
		
		//
		//
		//
		
		this.info = new Wd.Interactive.Info();
		
		this.image = new Element('img');
		this.image_fx = new Fx.Style(this.image, 'opacity', { wait: false });
		this.image_fx.set(0);

		this.element.appendChild(this.image);
		this.element.appendChild(this.spots);
		this.element.appendChild(this.info.element);
	},
	
	setActive: function(url)
	{
		this.image_fx.start(0).chain
		(
			function()
			{
				this.req.send
				(
					{
						'url': url
					}
				);
			}.bind(this)
		);
	},

	update: function(interactive)
	{
		this.image_fx.start(0).chain
		(
			function()
			{
				new Asset.image
				(
					interactive.image,
					{
						onload: function()
						{
							this.image.src = interactive.image;
							
							//
							// create spots
							//
					
							this.spots.empty();
					
							interactive.entries.entry.each
							(
								function(entry)
								{
									options = entry.coordinates;
									options.onMouseEnter = this.info.show.bind(this.info);
									options.onMouseLeave = this.info.hide.bind(this.info);
					
									el = new Element
									(
										'div', { 'class': 'spot' }
									);
									
									el.innerHTML = entry.contents;
					
									var spot = new Wd.Interactive.Spot(el, options);
									
									this.spots.appendChild(spot.element);
								},
								
								this
							);
				
							this.image_fx.start(1);
						}.bind(this)
					}
				);
			}.bind(this)
		)
	}
});

window.addEvent
(
 	'domready', function()
	{
		var interactive = new Wd.Interactive.Remote('interactive-contents');
		
		var links = $$('#interactive-index a');
		
		if (links.length)
		{
			links.each
			(
				function(el)
				{
					el.addEvent
					(
						'click', function(ev)
						{
							var ev = new Event(ev);
							
							ev.stop();
							
							interactive.setActive(this.href);
						}
					);
				}
			);
			
			//
			// active on first link
			//

			interactive.setActive(links[0].href);
		}
	}
);