window.addEvent('domready', function() {
	var m = new Array();
	var fx_info = new Fx.Morph('info', {
		duration: 333,
		transition: Fx.Transitions.Quart.easeOut
	});
	function add_event(id){
		m[id] = new Fx.Morph('model'+id, {duration: 666, transition: 'bounce:out'});
		$('model'+id).addEvents({
			mouseenter: function(){
				m[id].cancel();
				m[id].start({ 'opacity' : 1, 'height': 242, 'width': 88});
			},
			mouseleave: function(){
				m[id].cancel();
				m[id].start({ 'opacity' : 0.5, 'height': 223, 'width': 82});
			},
			click: function(e){
				m[id].cancel();
				this.removeEvents();
				var mid = $$('#animation .active').get('id')[0].substr(5);
				
				$('model'+mid).removeClass('active');
				$('model'+mid).addClass('model');
				$('model'+mid).tween('left', this.getStyle('left'));
				
				add_event(mid);
				m[mid].start({ 'opacity' : 0.5, 'height': 223, 'width': 82});
				this.removeClass('model');
				this.removeClass('modelho');
				this.addClass('active');
				this.tween('left', 190);
				this.setStyle('width', 99);
				this.setStyle('height', 270);
				$$('#animation .modelinfo').setStyle('display', 'none');
				fx_info.start({
					'height': 100
					}).chain(function(){
						this.start({
        						'height': 100
      						});
					}).chain(function(){
						this.start({
        						'height': 289
      						});
      						
						$('minfo'+id).setStyle('display', 'block');
					});
				
			}
		});
	}
	
	$$('#animation .model').each(function(o, x){
		add_event($$('#animation .model')[x].get('id').substr(5));
	});
});