var OCLinks = Class.create();
OCLinks.prototype =
{
	initialize : function ()
	{
		var container = document.getElementsByClassName('links-list')[0];
		var links = $A(container.getElementsByTagName('li'));
		this.links = new Array();
		links.each(function (link)
			{
				this.links.push(new OCLink(link, this));
			}.bind(this));
		this.desc = document.createElement('div');
		this.desc.setAttribute('id', 'links-list-description');
		this.desc.style.display = 'none';
		$('wrapper').appendChild(this.desc);
	},
	
	showDescription : function (elem)
	{
		Position.clone(elem, this.desc);
		this.desc.className = elem.className;
		this.desc.innerHTML = elem.innerHTML;
		this.desc.style.display = 'block';
	},
	
	hideDescription : function ()
	{
		this.desc.style.display = 'none';
	}	
};

var OCLink = Class.create();
OCLink.prototype = 
{
	initialize : function (elem, links)
	{
		this.links = links;
		this.elem = elem;
		var tn_div = document.getElementsByClassName('thumbnail', this.elem)[0];
		var tn_as = tn_div.getElementsByTagName('a');
		if (tn_as.length)
		{
			tn_a = tn_as[0];
			Event.observe(tn_a, 'mouseover', this.showDescription.bindAsEventListener(this));
			Event.observe(tn_a, 'mouseout', this.hideDescription.bindAsEventListener(this));
		}
		var title = this.elem.getElementsByTagName('h3')[0];
		var title_a = title.getElementsByTagName('a')[0];
		Event.observe(title_a, 'mouseover', this.showDescription.bindAsEventListener(this));
		Event.observe(title_a, 'mouseout', this.hideDescription.bindAsEventListener(this));
		this.desc = document.getElementsByClassName('description', this.elem)[0];
	},
	
	showDescription : function (e)
	{
		Event.stop(e);
		this.links.showDescription(this.desc);
	},
	
	hideDescription : function (e)
	{
		Event.stop(e);
		this.links.hideDescription();
	}
};