/** jquery.misBanners.js **/
jQuery.fn.miBanner = function( opciones ) {
  var configuracion = {
    tEspera : 12000,
    tTransicion : 1000
  }
  
  jQuery.extend(configuracion,opciones);
  
  this.each( function() {
    
    var e = $(this);
    
    var numElementos = 0;
    var ancho = e.width();
    var bolas = '';
    var ancho_bolas = 0;
    var elementoActual = 0;
    var irElemento = 0;
    var slidingAuto = true;
    
    function desplaza( num ) {
      var cont;
      var el;
      var tiempo;
      var j;

      if((typeof num) == 'undefined') {
        num = elementoActual+1;
        if(num==numElementos) num = 0;
      }

      el = e.find('.elemento-'+num).index();
      e.find('.wrapper-elementos').animate({'left': (el==0?'':'-')+(ancho*el)}, configuracion.tTransicion, function(){
        for(j=0; j<el; j++) {
          e.find('.wrapper-elemento:last-child').after( e.find('.wrapper-elemento:first-child') );
        }        
        e.find('.wrapper-elementos').css({'left': '0'});
        elementoActual = num;
        e.find('.misBanners-bolas .actual').removeClass('actual');
        e.find('.misBanners-bola').eq(elementoActual).addClass('actual');
      });
    }
    
    function desplazaAuto() {
      e.fadeTo(configuracion.tEspera, 1, function() {
        if(slidingAuto) {
          desplaza();
          desplazaAuto();
        }
      });
    }
    
    e.addClass('misBanners');
    numElementos = e.children('div.elemento').size();
    e.children('div.elemento').wrap('<div class="wrapper-elemento" />');
    e.find('.wrapper-elemento').each( function() { $(this).addClass('elemento-'+$(this).index()); });
    
    e.wrapInner('<div class="wrapper-elementos" />');
    
    e.find('.wrapper-elementos').width(ancho * numElementos);
    e.find('.wrapper-elemento').width(ancho);
    
    bolas = '<div class="misBanners-bolas">';
    for(i=0; i<numElementos; i++) {
      bolas += '<a class="misBanners-bola'+(i==0?' actual':'')+'" onclick="" />';
    }
    bolas += '</div>';
    e.append(bolas);
    ancho_bolas = e.find('.misBanners-bolas').width();
    e.find('.misBanners-bolas').css({'left': (ancho-ancho_bolas)/2});
    
    e.find('a.misBanners-bola').click( function() {
      var actual = $(this).index();
      
      slidingAuto = false;
      desplaza(actual);
    });
    
    desplazaAuto();
    
    
  });

  return this;
}