/* LibJS Ilunabar // slideShow 4.1.0 */

ilunabar.slideShow = function (params) {
  // ANIMACION: slideShow
  if (!params) {throw('slideShow: faltan parametros');}

  // Elemento nodo, debe tener una posicion relative, absolute o fixed y width y height
  if (!params.nodo) {throw('slideShow: falta nodo de insercción');}
  var nodo = $(params.nodo);

  // dimensiones para la animación
  if (!params.dimensiones) {throw('slideShow: faltan dimensiones para la animación');}
  var _d = $(params.dimensiones);

  // imagenes a mostrar al mismo tiempo
  var numImg = params.numImg || 3;

  // Array de imagenes y sus datos
  if (!params.imagenes || params.imagenes.length < (numImg + 1)) {throw('slideShow: faltan imágenes');}
  var imgFiles = params.imagenes;

  // tipo de transición para la animación: spring, sinoidal, linear, full
  var transicion = params.transicion || 'spring';

  // Tiempo en segundos entre imagenes
  var tiempo = params.tiempoCambio * 1000 || 5000;

  // Duración del fade
  var animAuto   = params.tiempoAnimAuto || 2;
  var animManual = params.tiempoAnimManual || 0.2;

  // Raiz de la web, para encontrar imagenes del slide
  var raizhtm = params.raizHtm || '/';

  // Se muestran los botomes al ponerse sobre el slide o sobre cada uno de los botones
  var showAllButtoms = params.showAllButtoms || false;

  // Control de inicio del slide, por omisión el slide esta en play
  var playAuto     = params.play || false;
  var playManual   = false;

  // Control de saturación de la animación
  var colaSaturada = 0;

  // Botones internos
  if (!params.controls || !params.controls.play || !params.controls.pause || !params.controls.forward || !params.controls.backward) {throw('slideShow: faltan opciones de controles');}
  var controlsPlay     = (params.controls.play.a)? params.controls.play : false;
  var controlsPause    = (params.controls.pause.a)? params.controls.pause : false;
  var controlsForward  = (params.controls.forward.a)? params.controls.forward : false;
  var controlsBackward = (params.controls.backward.a)? params.controls.backward : false;

  // Botones externos
  if (!params.externalControls || !params.externalControls.play || !params.externalControls.forward || !params.externalControls.backward) {throw('slideShow: faltan opciones de controles externos');}
  var eControlsPlay     = (params.externalControls.play.a)? $(params.externalControls.play.id) : false;
  var eControlsForward  = (params.externalControls.forward.a)? $(params.externalControls.forward.id) : false;
  var eControlsBackward = (params.externalControls.backward.a)? $(params.externalControls.backward.id) : false;

  var show       = numImg; // Posicion en el array de la imagen a mostrar
  var _ancho     = (_d.imgW * numImg) + (_d.imgM * (numImg - 1)); // Ancho del nodo
  var _alto      = _d.imgH; // Alto del nodo
  var fondoVacio = raizhtm+'lib-js/ilunabar/img/slide/fondo-vacio';
  var _left, _top;

  // Creamos un contenedor para el slide
  nodo.setStyle({width: _ancho+'px', height: _alto+'px', position: 'relative'});
  if (params.background) {nodo.setStyle({background: params.background});}
  var contenedor = new Element('div');
  contenedor.setStyle({width: _ancho+'px', height: _alto+'px', position: 'absolute', clip: 'rect(0px, '+_ancho+'px, '+_alto+'px, 0px)'});
  nodo.insert({bottom: contenedor});

  // Creamos las capas a mostrar
  var capas = [];
  var clase, url, title, text, posicion, top, left;

  for (var i = 0, j = 1; i < imgFiles.length; i++, j++) {
    posicion = (i < numImg)? (numImg - i - 1) * _d.imgW : -_d.imgW - _d.imgM;
    if (j < numImg) {posicion += _d.imgM * (numImg - j);}

    capas[i] = new Element('div').setStyle({position: 'absolute', left: posicion+'px', top: 0, width: _d.imgW+'px', height: _d.imgH+'px'});

    if (imgFiles[i].url.length > 0) {
      top   = imgFiles[i].top   || 0;
      left  = imgFiles[i].left  || 0;
      clase = imgFiles[i].clase || '';
      url   = imgFiles[i].url   || '';
      title = imgFiles[i].title || '';
      text  = imgFiles[i].text  || '';

      capas[i].insert({bottom: new Element('a', {href: url, 'class': clase, title: title}).update(new Element('img', {src: imgFiles[i].file, alt: imgFiles[i].alt}))});

      if (imgFiles[i].text.length > 0) {
        capas[i].insert({bottom: new Element('span').setStyle({position: 'absolute', left: left+'px', top: top+'px'}).update(new Element('a', {href: url, 'class': clase, title: title}).update(text))});
      }
    } else {
      capas[i].insert({bottom: new Element('img', {src: imgFiles[i].file, alt: imgFiles[i].alt})});
    }

    contenedor.insert({bottom: capas[i]});
  }

  // Slide a la izquierda
  function slideL(tiempo, x) {
    capas[show].setStyle({left: -(x+_d.imgM)+'px'});
    var efectos = [];
    for (var i = 0, j = show; i <= numImg; i++, j--) {
      if (j < 0) {j = capas.length - 1;}
      var margen = _d.imgM * i;
      efectos.push(new Effect.Move(capas[j], {x: (x * i) + margen, y: 0, mode: 'absolute', sync: true}));
    }
    new Effect.Parallel(efectos, {duration: tiempo, transition: Effect.Transitions[transicion], queue: 'end', afterFinish: function () {colaSaturada = 0;}});
    show++;
    if (show >= capas.length) {show = 0;}
  }

  // Slide a la derecha
  function slideR(tiempo, x) {
    var _r = show - numImg - 1;
    if (_r < 0) {_r = capas.length + _r;}
    capas[_r].setStyle({left: (x * numImg)+(_d.imgM * numImg)+'px'});

    show--;
    if (show < 0) {show = capas.length - 1;}

    var efectos = [];
    for (var i = 0, j = show; i <= numImg; i++, j--) {
      if (j < 0) {j = capas.length - 1;}
      var margen = _d.imgM * (i - 1);
      efectos.push(new Effect.Move(capas[j], {x: ((x * i) - x) + margen, y: 0, mode: 'absolute', sync: true}));
    }
    new Effect.Parallel(efectos, {duration: tiempo, transition: Effect.Transitions[transicion], queue: 'end', afterFinish: function () {colaSaturada = 0;}});
  }

  if (controlsPlay || controlsPause) {
    // Ponemos la capa al final para controlar los botones play/pause
    _ancho = controlsPlay.w || controlsPause.w; // Ancho de la zona
    _alto  = controlsPlay.h || controlsPause.h; // Alto de la zona
    _left  = (nodo.getWidth() - _ancho) / 2;
    _top   = (nodo.getHeight() - _alto) / 2;
    var zonaPlay = new Element('div');
    zonaPlay.setStyle({position: 'absolute', left: _left+'px', top: _top+'px', width: _ancho+'px', height: _alto+'px', background: 'url('+fondoVacio+') repeat'});
    contenedor.insert({bottom: zonaPlay});

    // Aparece play si empezamos en pause
    if (!playAuto) {
      if (controlsPlay) {zonaPlay.setStyle({cursor: 'pointer', background: 'url('+controlsPlay.url+') no-repeat center'});}
    }

    // Hacemos play o pause
    function playPause() {
      if (playAuto) {
        playAuto   = false;
        playManual = false;
        if (controlsPlay) {zonaPlay.setStyle({cursor: 'pointer', background: 'url('+controlsPlay.url+') no-repeat center'});}
      } else {
        playAuto   = true;
        playManual = false;
        if (controlsPause) {zonaPlay.setStyle({cursor: 'pointer', background: 'url('+controlsPause.url+') no-repeat center'});}
      }
    }

    zonaPlay.observe('click', function () {playPause();});
    if (eControlsPlay) {
      eControlsPlay.observe('click', function () {
        playPause();
        if (playAuto) {zonaPlay.setStyle({background: 'url('+fondoVacio+') repeat'});}
      });
    }

    // Aparecen play o pause
    var botonPlayPause = (showAllButtoms)? $(nodo) : zonaPlay;

    botonPlayPause.observe('mouseover', function () {
      if (playAuto) {
        if (controlsPause) {zonaPlay.setStyle({cursor: 'pointer', background: 'url('+controlsPause.url+') no-repeat center'});}
      } else {
        if (controlsPlay) {zonaPlay.setStyle({cursor: 'pointer', background: 'url('+controlsPlay.url+') no-repeat center'});}
      }
    });

    // Desaparecen play y pause
    botonPlayPause.observe('mouseout', function () {
      if (playManual || playAuto) {
        zonaPlay.setStyle({background: 'url('+fondoVacio+') repeat'});
      }
    });
  }

  if (controlsBackward) {
    // Ponemos la capa final para controlar el boton backward
    _ancho = controlsBackward.w; // Ancho de la zona
    _alto  = controlsBackward.h; // Alto de la zona
    _left  = controlsBackward.p;
    _top   = (nodo.getHeight() - _alto) / 2;
    var zonaBackward = new Element('div');
    zonaBackward.setStyle({position: 'absolute', left: _left+'px', top: _top+'px', width: _ancho+'px', height: _alto+'px', background: 'url('+fondoVacio+') repeat'});
    contenedor.insert({bottom: zonaBackward});

    // Aparece
    var botonBackward = (showAllButtoms)? $(nodo) : zonaBackward;

    if (controlsBackward.v) {
      zonaBackward.setStyle({cursor: 'pointer', background: 'url('+controlsBackward.url+') no-repeat center'});
    } else {
      botonBackward.observe('mouseover', function () {
        zonaBackward.setStyle({cursor: 'pointer', background: 'url('+controlsBackward.url+') no-repeat center'});
      });
    }

    // Desaparece
    if (!controlsBackward.v) {
      botonBackward.observe('mouseout', function () {
        zonaBackward.setStyle({background: 'url('+fondoVacio+') repeat'});
      });
    }

    // Función del boton y cambio manual
    function backward() {
      if (!colaSaturada) {
        colaSaturada = 1;
        playAuto     = false;
        playManual   = true;
        if (zonaPlay) {zonaPlay.setStyle({background: 'url('+fondoVacio+') repeat'});}
        slideR(animManual, _d.imgW);
      }
    }

    zonaBackward.observe('click', function () {backward();});
    if (eControlsBackward) {eControlsBackward.observe('click', function () {backward();});}
  }

  if (controlsForward) {
    // Ponemos la capa final para controlar el boton forward
    _ancho = controlsForward.w; // Ancho de la zona
    _alto  = controlsForward.h; // Alto de la zona
    _left  = nodo.getWidth() - _ancho - controlsForward.p;
    _top   = (nodo.getHeight() - _alto) / 2;
    var zonaForward = new Element('div');
    zonaForward.setStyle({position: 'absolute', left: _left+'px', top: _top+'px', width: _ancho+'px', height: _alto+'px', background: 'url('+fondoVacio+') repeat'});
    contenedor.insert({bottom: zonaForward});

    // Aparece
    var botonForward = (showAllButtoms)? $(nodo) : zonaForward;

    if (controlsForward.v) {
      zonaForward.setStyle({cursor: 'pointer', background: 'url('+controlsForward.url+') no-repeat center'});
    } else {
      botonForward.observe('mouseover', function () {
        zonaForward.setStyle({cursor: 'pointer', background: 'url('+controlsForward.url+') no-repeat center'});
      });
    }

    // Desaparece
    if (!controlsForward.v) {
      botonForward.observe('mouseout', function () {
        zonaForward.setStyle({background: 'url('+fondoVacio+') repeat'});
      });
    }

    // Función del boton y cambio manual
    function forward() {
      if (!colaSaturada) {
        colaSaturada = 1;
        playAuto    = false;
        playManual  = true;
        if (zonaPlay) {zonaPlay.setStyle({background: 'url('+fondoVacio+') repeat'});}
        slideL(animManual, _d.imgW);
      }
    }

    zonaForward.observe('click', function () {forward();});
    if (eControlsForward) {eControlsForward.observe('click', function () {forward();});}
  }

  // Slide
  var animacionEnCurso = setInterval(function () {
    if (playAuto) {
      slideL(animAuto, _d.imgW);
    }
  }, tiempo);
};