/**
 * @author Jan Cinert <jan.cinert@gmail.com>
 * @require mootools.js, multibox.js
 */

var ImageGallery = new Class({

	Implements: [Events, Options],
	
	options: {
	  
	},

	initialize: function(element, images, options){
		this.setOptions(options);
		
		this.element = $(element);
		this.images = images;
		this.build();
	},
	
	build: function() {
	  var el = new Element( 'div', { 'class': 'photo-main' } );
	  this.mainImage = new Element( 'img', { id: 'main-image', 'class': 'main-image' } );
	  this.element.grab( el.grab( this.mainImage ) );
	  
	  this.element.addClass( 'display_mode_0' );
	  
	  var thumbs = new Element( 'div', { id: 'thumbs' } );
	  var hiddenDiv = new Element( 'div', { 'style': 'display: none' } );
	  this.images.each( function( item, key ) {
	    var img = new Element( 'img', { src: item.thumbSrc, title: item.title, alt: item.title } );
	    img.addEvent( 'click', this.onThumbClick.bindWithEvent( this, [key] ) );
	    thumbs.grab( img );
	    
	    var a = new Element( 'a', { 'class': 'mb', href: item.fullSrc, title: item.title } );
	    hiddenDiv.grab( a );
	  }, this);
	  
	  hiddenDiv.inject( this.element );
	  
	  el = new Element( 'div', { 'id': 'thumb_container' } );
	  thumbs.inject( el );
	  var cont = new Element( 'div', { 'id': 'gallery_container' } );
	  el.inject( cont );
	  cont.inject( this.element );
	  
	  if( this.images.length > 0 ) {
  	  this.carousel = new SlideItMoo({
  	      itemsVisible:5, // the number of thumbnails that are visible
  				currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
  				thumbsContainer: 'thumbs',
  				elementScrolled: 'thumb_container',
  				overallContainer: 'gallery_container'});
  
  		this.carousel.addEvent( 'change', this.buttonStateHandler.bind( this ) );
  		
  		this.mainImage.addEvent( 'click', this.onMainImageClick.bindWithEvent( this ) );
  	  this.changeMainImage();
  	  
  	  this.multibox = new MultiBox('mb', {useOverlay: true});
	  }

	},
	
	onThumbClick: function( ev, idx ) {
	  ev.stop();
	  
	  this.changeMainImage( idx );
	},
	
	onMainImageClick: function( ev ) {
	  ev.stop();
	  
	  this.multibox.open( this.multibox.content[this.currentImage] );
	},
	
	buttonStateHandler: function() {
	  try {
		  if( this.carousel.options.currentElement == 0 ) {
		    this.carousel.bkwd.addClass( 'disabled' );
		  }
		  else {
		    this.carousel.bkwd.removeClass( 'disabled' );
		  }
		  if( this.carousel.options.currentElement + this.carousel.options.itemsVisible == this.carousel.images.length ) {
		    this.carousel.fwd.addClass( 'disabled' );
		  }
		  else {
		    this.carousel.fwd.removeClass( 'disabled' );
		  }
		} catch(e) {}
	},
	
	changeMainImage: function( idx ) {
	  idx = $pick( idx, 0 );
	  if( idx >= this.images.length ) return;
	
	  this.mainImage.set( 'src', this.images[idx].src );
	  this.mainImage.set( 'title', this.images[idx].title );
	  this.mainImage.set( 'alt', this.images[idx].title );
	  this.currentImage = idx;
	}
});