var clrz_title = new Class({
	Implements: Options,
	options:{ 
		target:'a div',
		titres:'.work #thumbs li a div',
		liste:'.work #thumbs li',
		attribute:'margin-top',
		posFinX:-(53),
		posDebX:0,
		transitionOVER:'expo:out',
		transitionOUT:'back:in'
		
		
		},
	
	
	
	initialize: function(options){
	this.setOptions(options);
	
	
		this.options.liste = ($$(this.options.liste));
		
		if(!this.options.liste)
			return;
			
		this.options.titres = ($$(this.options.titres));
		
		
		/*this.options.liste.getChildren('a').each(function(el){el.getChildren('div')[0].setStyles({'margin-top':0});});*/
			this.options.titres.setStyle(this.options.attribute,this.options.posDebX);
			
		
		
			
			this.options.liste.addEvents({
	            'mouseenter': this.mouseenter.bind(this), 
	            'mouseleave': this.mouseleave.bind(this)
        	});	
			
		
		/*this.options.liste.each(function(el) {
 
            el.addEvent('mouseenter', this.mouseenter.bind(this));
 
        },this);*/

		
		
			
		
		
	},
	
	mouseenter: function(event){
                       
	var li = $(event.target);
	while(li.get('tag')!='li')
	{
		li = li.getParent('li');
	}
	
		var posFinX = this.options.posFinX;
		
		var fx = li;
		this.options.target.split(' ').each(function(sel){
			fx = fx.getChildren(sel)[0];
			
			});
		

		fx.set('morph', {duration:300,transition: this.options.transitionOVER});
		
		var obj = {};				
		obj[this.options.attribute] =(posFinX);
		
		fx.morph(obj);
		
	},
		
	mouseleave: function(event){
	var li = $(event.target);
	while(li.get('tag')!='li')
	{
		li = li.getParent('li');
	}
		
			var fx = li;
		this.options.target.split(' ').each(function(sel){
			fx = fx.getChildren(sel)[0];
			
			});
		
		fx.set('morph', {duration:500,transition: this.options.transitionOUT});
		
		var obj = {};				
		obj[this.options.attribute] = this.options.posDebX;
		
		fx.morph(obj);
		
	}
});