/*
 * Bidit.Gallery - Encapsulates a gallery which consists of a main photo
 *                 and several thumbnails. When the user mouseovers a thumbnail,
 *                 the main photo is replaced by the photo linked to by that
 *                 thumbnail. The gallery element needs to have one <img> element
 *                 with a class name of "photo" which is the main photo. Thumbnails
 *                 are expected to be <a> elements wrapping an <img> element. The <img>
 *                 is the actual thumbnail photo, while the <a> links to the larger version
 *                 of the thumbnail, which will be used to replace the main photo. The <a> 
 *                 element needs to have a class name of "thumbnail".
 * 
 * Example HTML:   <p class="gallery">
 *                   <img src="main.png" class="photo" />
 *                   <a href="1.png" class="thumbnail"><img src="1_thumb.png" /></a>
 *                   <a href="2.png" class="thumbnail"><img src="2_thumb.png" /></a>
 *                   <a href="3.png" class="thumbnail"><img src="3_thumb.png" /></a>
 *                 </p>
 *
 * Example JS:     var gallery = new Bidit.Gallery($$('.gallery').first());
 */
Bidit.Gallery = Class.create({

  initialize: function(el){
    this.element = el;
    var photo = this.getPhoto();
    if (photo) {
      this.thumbnails = this.findThumbnails();
      this.originalPhotoUrl = this.getPhoto().readAttribute('src');
      this.setPhotoIndex(0);
      this.insertToolbar();
    }
  },

  getPhoto: function(){
    return this.element.down('.photo');
  },

  //Set the main photo. Takes a URL string or a Thumbnail object
  setPhoto: function(url){
    if (typeof url != "string") url = url.getPhotoUrl();
    this.getPhoto().writeAttribute('src', url);
  },
  
  setPhotoIndex: function(index){
    if (index < 0) index = this.thumbnails.length;
    if (index > this.thumbnails.length) index = 0;
    if (index == 0) this.resetPhoto();
    else this.setPhoto(this.thumbnails[index-1]);
    this._photoIndex = index;
  },
  
  prevPhoto: function(){
    this.setPhotoIndex(this._photoIndex - 1);
  },
  
  nextPhoto: function(){
    this.setPhotoIndex(this._photoIndex + 1);
  },

  //Reset the main photo to the original URL
  resetPhoto: function(){
    this.setPhoto(this.originalPhotoUrl);
  },

  //Find and instantiate all thumbnail elements as Thumbnail objects
  findThumbnails: function(){
    var gallery = this;
    return this.element.select('.thumbnail').map(function(el){
      return new Bidit.Gallery.Thumbnail(el, gallery);
    });
  },

  insertToolbar: function(){
    var gallery = this,
        toolbar = new Element('p', {'class':'toolbar'});
        prev = new Element('a', {'class':'prev', href:'#'}).update('« Forrige');
        next = new Element('a', {'class':'next', href:'#'}).update('Neste »');

    prev.observe('click', function(e){
      e.stop();
      gallery.prevPhoto();
    });

    next.observe('click', function(e){
      e.stop();
      gallery.nextPhoto();
    });

    toolbar.insert(prev);
    toolbar.insert(next);

    this.toolbar = toolbar;
    this.element.insert(toolbar);
  }

});

//Encapsulates a thumbnail element
Bidit.Gallery.Thumbnail = Class.create({

  initialize: function(el, g){
    this.element = el;
    this.gallery = g;
    this.preload();
  },

  //Returns the URL of the larger version of the thumbnail which is
  //linked to in the <a> element
  getPhotoUrl: function(){
    return this.element.readAttribute('href');
  },

  preload: function(){
    var img = new Image();
    img.src = this.getPhotoUrl();
  }

});



//Locate and instantiate all .gallery elements in the document
Bidit.Gallery.locate = function(){
  return $$('.gallery').map(function(el){
    return new Bidit.Gallery(el);
  });
};


//Locate all galleries when document is ready
Bidit.b.listen('ready', function(){
  Bidit.galleries = Bidit.Gallery.locate();
});