// JavaScript Document
window.addEvent('domready', function() {
	var el = $('myElement');

	// ICONOS ANIMADOS PRODUCTOS
	
	//Canalizaciones Over
	$('canalizaciones').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'TUBOS | POZOS | ARQUETAS | SUMIDEROS | CANALES | COLECTORES');
		e.stop();
	});
	// Out
		$('canalizaciones').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
		
	//Cerramientos Over	
		$('cerramientos').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'FACHADA ARQUITECTÓNICA | BLOQUES | LOSA ALVEOLAR | DINTELES');
		e.stop();
	});
	//Cerramientos Out
		$('cerramientos').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
	//Cimentacion Over	
		$('cimentacion').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'PILOTES | LOSAS CIMENTACIÓN | CÁLICES | VIGAS DE CIMENTACIÓN');
		e.stop();
	});		
	//Cimentacion Out
		$('cimentacion').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
	//Cubiertas Over	
		$('cubiertas').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'CUBIERTAS LIGERAS | TEJAS');
		e.stop();
	});		
	//Cubiertas Out
		$('cubiertas').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});		
		
	//Elem lineales Over	
		$('elem_lineales').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'VIGAS | PILARES | CORREAS | PÓRTICOS | CERCHAS');
		e.stop();
	});	
	//Elem lineales Out
		$('elem_lineales').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
	//Forjados Over	
		$('forjados').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'VIGUETA Y BOVEDILLA | LOSA ALVEOLAR | PRELOSA | FORJADOS ESPECIALES');
		e.stop();
	});
	//Forjados Out
		$('forjados').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
	//Mobiliario Over	
		$('mobiliario').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'BANCOS | BALAUSTRADAS | JARDINERAS | PÉRGOLAS | MARQUESINAS');
		e.stop();
	});
	//Mobiliario Out
		$('mobiliario').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
	
	//Pavimentos Over	
		$('pavimentos').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'ADOQUINES | BALDOSAS | BORDILLOS | TERRAZO');
		e.stop();
	});
	//Pavimentos Out
		$('pavimentos').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
	//Viales Over	
		$('viales').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'PUENTES Y PASARELAS | BARRERAS SEGURIDAD | MARCAS | DOVELAS | MUROS');
		e.stop();
	});
	//Viales Out
		$('viales').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});
	//Viviendas Over	
		$('viviendas').addEvent('mouseover', function(e) {
		$('myElement').set('html', 'VIVIENDAS MODULARES | SOLUCIONES INTEGRALES');
		e.stop();
	});
	//Viaviendas Out
		$('viviendas').addEvent('mouseout', function(e) {
		$('myElement').set('html', '');
		e.stop();
	});


	// MooTools is able to handle effects without the use of a wrapper,
	// so you are able to do effects with just one easy line.
	
	// There are different ways to add a fading opacity effect to an element click
	
	// Short version
	/*$('fadeOpacity').addEvent('mouseover', el.fade.bind(el, [1]));
	
	$('fadeOpacity').addEvent('mouseout', el.fade.bind(el, [0]));
	
	//Aparecer
	$('VolverOpacidad').addEvent('click', el.fade.bind(el, [1]));
	*/
	
});