function muestra(id) {
    $(id).show();
 }
 function oculta(id) {
    $(id).hide();
}
//#############################################################
MainImagesBehavior = Behavior.create({
    onmouseover: function(e){
        elementos = $$('.main_images_behavior');
        elementos.each(function(item) {
                if (item.id != e.target.id) {
                    if (item.getStyle("width") != "120px") {
                        new Effect.Morph(item.id, {
                          style: 'width: 120px;', 
                          duration: 0.2 
                        });
                    }
                }
                else {
                    new Effect.Morph(item.id, {
                      style: 'width: 240px;', 
                      duration: 0.2 
                    });
                }
            });
    },
    onmouseout: function(e){
            // Obtenemos la posicion del raton
            var posx = 0;
	        var posy = 0;
	        if (e.pageX || e.pageY) 	{
		        posx = e.pageX;
		        posy = e.pageY;
	        }
	        else if (e.clientX || e.clientY) 	{
		        posx = e.clientX + document.body.scrollLeft
			        + document.documentElement.scrollLeft;
		        posy = e.clientY + document.body.scrollTop
			        + document.documentElement.scrollTop;
	        }
	        // Obtenemos la posicion de la capa
	        destino = $('main_images');
          	var offsets = destino.positionedOffset();
            var top     = offsets[1];
            var left    = offsets[0];
            var width   = destino.clientWidth;
            var height  = destino.clientHeight;
            
            if ((posx < left) || (posx > left+width) || (posy < top) || (posy > top+height)) {
                elementos = $$('.main_images_behavior');
                elementos.each(function(item) {
                            if (item.getStyle("width") != "136px") {
                                new Effect.Morph(item.id, {
                                  style: 'width: 136px;', 
                                  duration: 0.2 
                                });
                            }
                    });
            }
    }
});


ContainerBehavior = Behavior.create({
     
});
//###############################################################
// Comportamientos
//###############################################################

Event.addBehavior({
  '.main_images_behavior': MainImagesBehavior(),
  '.container_behavior': ContainerBehavior()
});

