function cargarGaleria() {
  var galerias = document.getElementsByClassName('galeriaImagenes');
  for (var i=0; i < galerias.length;i++) {
    var galeria = galerias[i];
    var ruta = galeria.id;
    var contador = '';
    var o,v;
    for (var j=0; j < galeria.childNodes.length; j++) {
      o = galeria.childNodes[j];
      if (o.tagName == "AREA") {
        v = o.getAttribute('href');
        v = v.substring(1+v.indexOf("#"));
        o.imagen = "images/" + ruta + "/" + v;
        Event.observe(o,'click',cargarImagenGaleria,true);
      }
    }
  }
}

function cargarImagenGaleria(event) {
  var o = Event.element(event);
  var target = $(o.parentNode.id + 'Imagen');
  target.src = o.imagen;
}

Event.observe(window,'load',cargarGaleria,true);

/**
 * galeria.js
 * Cómo funciona:
 *
 * El contenido se desplazará una cantidad de pixels igual al ancho del contenedor.
 * Si el contenido es un área con "filetes" o bordes (padding) de color alrededor
 * hay que asegurarse de que esos bordes son de igual ancho si no se quiere duplicar
 * el espaciado entre dos áreas del contenido que se visualizarán en pasos distintos.
 *
 *  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO "Filete doble"
 *  O**********OO**********OO**********OO**********O
 *  O*        *OO*        *OO*        *OO*        *O
 *  O*        *OO*        *OO*        *OO*        *O
 *  O*        *OO*        *OO*        *OO*        *O
 *  O**********OO**********OO**********OO**********O
 *  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
 *
 *  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO "Filete sencillo"
 *  O**********O**********O**********O**********O
 *  O*        *O*        *O*        *O*        *O
 *  O*        *O*        *O*        *O*        *O
 *  O*        *O*        *O*        *O*        *O
 *  O**********O**********O**********O**********O
 *  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
 *
 * Si se utiliza filete sencillo, el parámetro padding es el valor del filete
 * y si no, es cero. Si el contenedor tiene bordes, especificarlo con un valor true.
 *
 * Para crear un scroll:
 *
 * crearScroll('id_contenedor', 'id_contenido', valor_padding, si_tiene_borde_contenedor_true_false);
 *
 * El contenedor debe tener el CSS siguiente:
 *
 * position:relative; overflow:hidden; width:ANCHOpx; height:ALTOpx; border:1px solid #ccc; background:#efefef;
 *
 * Siendo ANCHO el valor del área visible. El contenedor SOLO sirve para ocultar al visitante el resto del
 * contenido.
 *
 * El contenido debe tener el CSS siguiente:
 *
 * position:absolute; left:0px; top:DA_IGUALpx;
 *
 */
function crearScroll(contenedor, contenido, padding, tieneBordes)
{
  Event.observe(window, 'load', function() { ajustarScroll(contenedor, contenido, padding, tieneBordes); }, true);
}
function ajustarScroll(contenedor, contenido, restarFilete, tieneBordes)
{
  var ajuste = tieneBordes ? 2 : 0;
  
  contenedor = $(contenedor);
  contenido  = $(contenido);
  
  filete = (filete = parseInt(restarFilete)) ? filete : 0;
  
  contenedor.contenido = contenido.id;
  contenedor.paso = parseInt(Element.getDimensions(contenedor).width) - restarFilete - ajuste;
  contenedor.filete = filete;
  contenedor.avanzar = avanzar;
  contenedor.retroceder = retroceder;
  contenedor.reiniciar = reiniciar;
}
function avanzar()
{
  var obj = $(this.contenido);
  var x = parseInt(Element.getStyle(obj, 'left')) - this.paso;
  var w = parseInt(Element.getDimensions(obj).width);
  
  if ((w+x) > this.filete)
  {
    if (Scriptaculous)
    {
      new Effect.MoveBy(obj.id, 0, - this.paso, { duration: 0.3 });
    }
    else
    {
      Element.setStyle(obj, { left: x + 'px' });
    }
  }
  return;
}
function retroceder()
{
  var obj = $(this.contenido);
  var x = parseInt(Element.getStyle(obj, 'left')) + this.paso;
  var w = parseInt(Element.getDimensions(obj).width);
  
  if ((w+x) <= w)
  {
    if (Scriptaculous)
    {
      new Effect.MoveBy(obj.id, 0, this.paso, { duration: 0.3 });
    }
    else
    {
      Element.setStyle(obj, { left: x + 'px' });
    }
  }
  return;
}
function reiniciar()
{
  var obj = $(this.contenido);
  Element.setStyle(obj, { left: '0px' });
  return;
}