var galleryActive = null;
function Gallery(_gallery){
  var _ul     = $('ul',_gallery);
  this._index = 0;
  this._items = new Array();
  var desplazamiento = 148;
  var self   = this;

  this._SelectImg = function(i){
        galleryActive=self;
        if(i!=self._index&&!isNaN(i)){
          _strong.html(i+1);
          if(self.isIE()){
            self._items[self._index].li.css({'fontSize':'10px','paddingTop':'26px'}).removeClass('selected');
            self._items[i].li.css({'fontSize':'15px','paddingTop':'0'}).addClass('selected');
          }else{
            self._items[self._index].li.animate({'fontSize':'10px','paddingTop':'26px'},'normal',function(){
                $(this).removeClass('selected');
            });
            self._items[i].li.animate({'fontSize':'15px','paddingTop':'0'},'slow',function(){
                $(this).addClass('selected');
            });
          }
          _ul.animate({'left':(-i*desplazamiento)+'px'},'slow');self._index=i;}
       }
  this.isIE  = function(){ if($.browser.msie)return true;return false;}
  this.isIE6 = function(){ if(this.isIE()&&parseInt($.browser.version)<7)return true;return false;}
  this.Next  = function(){self._SelectImg(self.ValidIndex((self._index+1)));PopUpActive.PopupClose();this._LaunchPopUp();}
  this.Prev  = function(){self._SelectImg(self.ValidIndex((self._index-1)));PopUpActive.PopupClose();this._LaunchPopUp();}
  this.ValidIndex = function(i){if(i<0)i=0;else if(this._items.length-1<i)i=this._items.length-1;return i;}
  this._LaunchPopUp=function(){
      var src  = self._items[self._index].src;
      var text = self._items[self._index].text;
      var html ='<img src="'+src+'" alt="'+text+'" />';
          html += '<em>'+text+'</em>';
          if(self._index<(self._items.length-1))
            html += '<span class="btn next" onclick="galleryActive.Next()"></span>';
          if(0<self._index)
            html += '<span class="btn prev" onclick="galleryActive.Prev()"></span>';
      var popup = new PopUp(html,'','normal',false,'.close',684);
  }


  var i=0;
  $('li',_ul).each(function(){
    var li   = $(this),
        a    = $('a',li),
        obj  = {'li':li,'src':a.attr('href'),'text':$('img',a).attr('alt')};
    // agrego obj a la lista
    self._items[i] = obj;
    // Cambio el <a> por un <div>
    a.replaceWith('<div><span></span>'+a.html()+'</div');
    li.addClass(i+'_li').append('<em>'+obj.text+'</em>').click(function(){ self._SelectImg( parseInt($(this).attr('class')));}).find('span').click(self._LaunchPopUp);
    // Al li inicial le cambio el tamaño
    if(i==0)li.css({'font-size':'15px','padding':'0'}).addClass('selected');
    i++;
  });



  // Pongo el ul dentro del div screen
  _ul.wrap('<div class="gallery-screen"></div>').width((i+2+4)*desplazamiento);

  // Agrego contador
  _gallery.prepend('<p class="counter">Imagen <strong>1</strong> / '+i+'</p>');

  // Agrego los li de relleno
  _ul.prepend('<li class="relleno"></li>');
  _ul.append('<li class="relleno"></li>');

  // guardo el estrong donde muestro el numero de pagina
  var _strong = $('p.counter strong',_gallery);

}