// <![CDATA[

var Clownoscope = Class.create({
	initialize: function()
	{
		this.portrait = $('portrait');
		this.name     = $('hopiname');
		this.clowns   = $$('div#content ul li a');
		
		this.clowns.each(function(clown, i){
			clown.observe('mouseover', this.showPortrait.bindAsEventListener(this, clown));
		}.bind(this));
	},
	
	showPortrait: function(event, clown)
	{
		event.stop();
		clown.blur();

		if(!clown.hasClassName('selected'))
		{
			var id = clown.id;
			var title = clown.title;
			
			var r = id.substring(id.indexOf('_r')+2, id.indexOf('_c'));
			var c = id.substring(id.indexOf('_c')+2);
			var n = title.split(', ');
	
			this.clowns.each(function(clown){
				clown.removeClassName('selected');
			});
			clown.addClassName('selected');
	
			this.portrait.hide();
			this.portrait.src = '/images/hopiclowns/' + r + '/' + c + '.jpg';
			new Effect.Appear(this.portrait, {duration: 0.6});
	
			this.name.update(n[0] + '<em>"' + n[1] + '"</em>');
		}
	}
});

document.observe("dom:loaded", function(){
	new Clownoscope();
});

// ]]>