var myDuration = 500;           // effect duration
var myMinWidth = 95;            // block min width  
var myMaxWidth = 350;           // block max width
var myDefaultBgP = -75;         // initial background left position
var myDefaultLi = $random(0,5);
var myFx = true;                // clicked or not clicked 


var Alumni= {       
        
        
        start: function(){
        	Alumni.expandAlumni();
                Alumni.expand (myDefaultLi);	
        },
	
        expandAlumni: function(){	        	        
                var myLIs = $$('#persons li');	
        	var fx = new Fx.Elements(myLIs, {wait: false, duration: myDuration, transition: Fx.Transitions.quadIn});		
        	
        	myLIs.each(function(myLI, i){
        		myLI.addEvent('mouseover', function(e){
                                if(myFx){        		
                			e = new Event(e).stop();
                                        var obj = {};     
                                        var w = myLI.getStyle( 'width' ).toInt();                
                                        if ( w != myMaxWidth ){
                                                obj[i] = {
                                                	'width': [myLI.getStyle('width').toInt(), myMaxWidth],
                                                	'background-position' : [ myDefaultBgP, 0]
                                                };
                                        }
                                        myLIs.each(function(other, j){
                                        	if (other != myLI){
                                        		var w = other.getStyle('width').toInt();
                                        		if (w != myMinWidth) {
                                                                obj[j] = {'width': [w, myMinWidth],
                                                                        'background-position' : [0, myDefaultBgP]};
                                                        }
                                        	}
                                        });
                                        fx.start(obj);
                                	}
                                });
                        myLI.addEvent('click', function(e){
                                        myFx = !myFx;
                                        myLI.mouseover;
                                })
        	});
        	
        	var persons = $('persons');
        	persons.addEvent('mouseout', function(e){
			e = new Event(e);
			var rel = e.relatedTarget;
			if (!rel) return;
			if ( rel.nodeName != 'LI' && rel.nodeName != 'UL') {			             
                                Alumni.expand(myDefaultLi);
			};
        	});
        },
        
        expand : function ( id ){
                var myLIs = $$('#persons li');
                var fx = new Fx.Elements(myLIs, {wait: false, duration: myDuration, transition: Fx.Transitions.quadIn});
                var obj = {};                
                var w = myLIs[id].getStyle( 'width' ).toInt();
                
                if ( w != myMaxWidth ){
                        obj[id] = {
                        	'width': [myLIs[id].getStyle('width').toInt(), myMaxWidth],
                        	'background-position' : [ myDefaultBgP, 0]
                        };
                }
                myLIs.each(function(other, j){
                	if (other != myLIs[id]){
                		var w = other.getStyle('width').toInt();
                		if (w != myMinWidth) {
                                        obj[j] = {'width': [w, myMinWidth],
                                                'background-position' : [0, myDefaultBgP]};
                                }
                	}
                });
                fx.start(obj);
                myFx = true;
        }
};

window.addEvent('load', Alumni.start);