var peopleSec;

var ppls = Class.create();
ppls.prototype = {
	initialize : function() {
		
		this.killaction = 0;
		this.positions = {};
	
		$$('.people-content').each( function(el) { el.hide(); } );
		$$('.people-card').each( function(el) { el.hide(); } );
		
		this.pe = new PeriodicalExecuter( this.init.bind(this), 0.5 );
		
	},
	
	init : function()
	{
		$$( '.people-img' ).each( this.bindButtons.bind(this) );
		$$( '.people-card' ).each( this.bindClose.bind(this) );
		this.pe.stop();
	},

	bindClose : function( el )
	{
		Event.observe(el,'click',this.hidecontent.bindAsEventListener(this),true);
	},


	bindButtons : function( el )
	{
		this.positions[el.id] = el.positionedOffset().left;
		Event.observe(el,'mouseover',this.activate.bindAsEventListener(this),true);
		Event.observe(el,'mouseout',this.deactivate.bindAsEventListener(this),true);		
		Event.observe(el,'click',this.showcontent.bindAsEventListener(this),true);
	},
	
	activate : function( ev )
	{
		var element = Event.findElement(ev, 'img');
		ev.stop();
	
		if (!this.killaction) 
		{
			element.style.zIndex = 100;
		}
	},
	
	deactivate : function( ev )
	{
		var element = Event.findElement(ev, 'img');
		ev.stop();
		if (!this.killaction) 
		{
			element.style.zIndex = 0;
		}
	},
	
	showcontent : function( ev )
	{
		var element = Event.findElement(ev, 'img');
		ev.stop();
		if (!this.killaction) 
		{
			var a = element.id.split('-');
			var n = a[a.length-1];
			this.killaction = 1;
			
			$$('.people-content').each( function( el ) { el.hide(); } );
			Effect.Appear('people-content-'+n, {duration: 1.0});
			Effect.Appear('people-card-'+n, {duration: 1.0});
			$$('.people-img').each( function( el ) { new Effect.Move(el, { x: 570, mode: 'absolute' }); } ); 
		}
	},

	resetmargins : function( el )
	{
		new Effect.Move(el, { x: this.positions[el.id], mode: 'absolute' });
	},

	hidecontent : function( ev )
	{
		var element = Event.findElement(ev, 'img');
		ev.stop(); 
		
		var a = element.id.split('-');
		var n = a[a.length-1];
		this.killaction = 0;
		
		$$('.people-content').each( function( el ) { new Effect.Fade(el) } );
		Effect.Fade(element, {duration: 1} );
		$$('.people-img').each( this.resetmargins.bind(this) ); 
	}

}

function loadPeople()
{	
	peopleSec = new ppls();
}

document.observe('dom:loaded', loadPeople, false);