Event.observe(window, 'load', function() {
  var ptd_top = $('diapocont')
  if (ptd_top) {
    new diaporama(ptd_top, $('diapo'), '../img/portada/diapo', 6, 'appear', 5, 2)
  }
})

function diaporama(e, i, base, counter, eff, dur, inter) {
  this.count       = counter + 1
  this.blocked     = 0
  var aSelf = this

  this.diaporama_events = function(count) {
    var ahref = $('l' + count)
    if (ahref) {
      ahref.onmouseover = function() {
        if (aSelf.blocked > 0) ahref.onmouseout()

        if (aSelf.count != count) {
          aSelf.blocked = count;
          aSelf.togle(count, aSelf.count)
        }
      }

      ahref.onmouseout = function() {
        if ((aSelf.count != count) && (aSelf.blocked > 0)) {
          aSelf.togle(aSelf.blocked, aSelf.count)
          aSelf.blocked = 0;
        }
      }

    }
  }

  this.diaporama_interval = function () {
    if (aSelf.blocked == 0) {
      aSelf.togle(aSelf.count, ((aSelf.count == counter)? 1 : aSelf.count + 1))
      aSelf.count = (aSelf.count == counter)? 1 : aSelf.count + 1
    }
  }

  this.togle = function(x1, x2) {
    Effect.toggle('txt' + x1, eff, { duration: 0 })
    Effect.toggle('txt' + x2, eff, { duration: 0 })
    Effect.toggle('img' + x1, eff, { duration: inter })
    Effect.toggle('img' + x2, eff, { duration: inter })
  }

  do {
    this.count --

    // imagenes
    var img = new Element('img', {
      src : base + this.count + '.jpg',
      id  : 'img' + this.count,
      'class': 'faldon'
    }).
    setStyle({
      display  : (this.count == 1)? 'inline' : 'none',
      position : 'absolute'
    })

    e.insert(img)
    img.clonePosition(i)
    i.style.visibility = 'hidden'

    // texto
    var div = $$('.p' + this.count  + ' div')[0]
    div.id = 'txt' + this.count
    div.style.display = (this.count == 1)? 'block' : 'none'

    // parar parar en mouseover
    this.diaporama_events(this.count)
  }
  while (this.count != 1)

  setInterval(function(e) {aSelf.diaporama_interval()}, dur * 1000)
}