/* ©2011 Didier Berck */

var ServicesRolls = Class.create({
						  
	initialize: function() {
		var c = 0;
		$$('#services li').each(function(elt) {
			elt.writeAttribute('id', 'l' + c);
			Event.observe(elt, 'mouseover', this.onRollOver.bindAsMouseEnter(this));
			Event.observe(elt, 'mouseout', this.onRollOut.bindAsMouseLeave(this));
			c++;
		}, this);
	},
	
	onRollOver: function(evt) {
		var elt = Event.findElement(evt, 'li');
		if(!elt.hasClassName('over')) {
			elt.addClassName('over');
			this.clearQueue('qR' + elt.readAttribute('id'));
			if(!elt.down('img.over')) {
				elt.insert({
					top: '<a href="' + elt.down('a').readAttribute('href') + '"><img src="images/mask.png" class="over" alt="" /></a>'
				});
			}
			elt.down('img.over').setOpacity(0);
			new Effect.Appear(elt.down('img.over'), {
				duration: 0.4,
				from: elt.down('img.over').getOpacity(),
				queue: {
					position: 'end',
					scope: 'qR' + elt.readAttribute('id')
				}
			});
		}
	},
	
	onRollOut: function(evt) {
		var elt = Event.findElement(evt, 'li');
		elt.removeClassName('over');
		this.clearQueue('qR' + elt.readAttribute('id'));
		new Effect.Fade(elt.down('img.over'), {
			duration: 0.4,
			from: elt.down('img.over').getOpacity(),
			queue: { 
				position: 'end', 
				scope: 'qR' + elt.readAttribute('id')
			},
			afterFinish: function(eff) {
				eff.element.up().remove();
			}
		});
		
	},
	
	clearQueue: function(queueName) {
		var queue = Effect.Queues.get(queueName);
		queue.each(function(effect) {
			effect.cancel();
		});
	}
});
Event.observe(window, 'load', function(evt) {
	var servicesRolls = new ServicesRolls();
});