var ShowCase = Class.create(
{
	initialize: function(container)
	{
		if (!$(container))
		{
			return false;
		}
		
		this.container = $(container);
		
		this.addEventListeners();
		this.start();
	},
	
	addEventListeners: function()
	{
		document.observe('lb:DrawComplete', this.paginate.bind(this));
		document.observe('keypress', this.keyPressed.bind(this));
	},
	
	start: function()
	{
		var tooltipText;
		
		this.container.getElementsBySelector('.item').each(function(element)
		{
			var tooltipText = false;
			
			element.getElementsBySelector('p.tooltip').each(function(child)
			{
				tooltipText = child.innerHTML;
				child.hide();
			}.bind(this));

			if (tooltipText)
			{
				var offsetX = 0 - (element.getWidth() / 2);
				
				if (element.getElementsBySelector('img')[0])
				{
					element.getElementsBySelector('img')[0]
					.addTooltip(tooltipText, 
					{
						className: 'showcaseTooltip', 
						hook: 'element',
						hookPosition: 'left',
						hookDirection: 'left',
						offsetX: offsetX,
						offsetY: -12,
						opacity: 1
					});
				}
			}
		}.bind(this));
	},
	
	paginate: function(linkId)
	{
		var images = $$('.showcaseImages .image');
		var imageCounter = images.length;
		
		if (linkId < 0)
		{
			linkId = imageCounter-1;
		}
		
		this.linkId = (!linkId || typeof linkId == 'object' || linkId >= imageCounter) ? 0 : linkId;
		
		var i=0;
		
		images.each(function(container)
		{
			if (i != this.linkId)
			{
				container.hide();
			}
			else
			{
				container.show();
			}
			
			i++;
		}.bind(this));
		
		$$('.showcasePagination .paginate').each(function(link)
		{
			if (link.id == 'left' || link.id == 'right')
			{
				link.stopObserving();
				
				if (link.id == 'left')
				{
					link.observe('click', this.paginate.bind(this, this.linkId-1));
				}
				else
				{
					link.observe('click', this.paginate.bind(this, this.linkId+1));
				}
			}
			else
			{
				if (link.id == this.linkId)
				{
					link.addClassName('paginateOn');
				}
				else
				{
					link.removeClassName('paginateOn');
				}
				
				link.stopObserving();
				link.observe('click', this.paginate.bind(this, link.id));
			}
		}.bind(this));
	},
	
	keyPressed: function(event)
	{
		if (event.keyCode == Event.KEY_LEFT)
		{
			this.paginate(this.linkId-1);
		}
		else if (event.keyCode == Event.KEY_RIGHT)
		{
			this.paginate(this.linkId+1);
		}
	}
});

document.observe('dom:loaded', function()
{
	var showcase = new ShowCase('showcase');
});