var Gallery = new Class({	
	initialize: function(element, options) {
		this.element = element;
		this.options = options;

		this.slides = this.element.getElements(".gallery_info").map(function(item) {
			var obj = {};
			obj.image = item.getElement(".gallery_fullsize").innerHTML;
			
			preload(obj.image);
			
			obj._loaded = false;
			obj.thumbnail = item.getElement(".gallery_thumbnail").getElement("img").src;
			obj.caption = item.getElement(".gallery_caption").innerHTML;
			return obj;
		});
				
		this.setupImageArea();
		this.setupThumbnails();
		this.show(0);
		this.currentSlide = this.slides[0];
		
		document.addEvent('imgloaded', this.handleImageLoaded.bind(this));		
	},
	
	handleImageLoaded: function(url) {
		var slide = this.getSlideForURL(url);
		if(slide) {			
			slide.thumbnailImage.setOpacity(1);
			slide._loaded = true;
		}

		if (this.currentSlide.image == slide.image) {
			var index = this.slides.indexOf(slide);
			this.show(index);
		}
	},
	
	getSlideForURL: function(url) {
		return this.slides.filter(function(item, index) {
			return item['image'] == url;
		})[0];
	},
	
	setupImageArea: function() {
		this.area = new Element("div").injectInside(this.element).addClass("area");
		this.imgWrapper = new Element("div").addClass("image-wrapper").injectInside(this.area);
		this.img = new Element("img").addClass("image").injectInside(this.imgWrapper);
		this.caption = new Element("div").addClass("caption").injectInside(this.area);
	},
	
	show: function(index) {
		var slide = this.slides[index];
		var width = this.img.getParent().getCoordinates()['width'];
		var height = this.img.getParent().getCoordinates()['height'];
		
		if (slide._loaded == false) {
			this.img.setProperty('src', '/ajax-loader.gif');
			this.currentSlide = slide;
			this.img.setStyle('position', 'absolute');
			this.img.setStyle('top', (height - this.img.getCoordinates()['height'])/2);
			this.img.setStyle('left', (width - this.img.getCoordinates()['width'])/2);
		} else if (slide._loaded == true) {
			this.img.setProperty('src', slide.image);
			this.caption.innerHTML = slide.caption;

			this.thumbnails.forEach(function(nail) { nail.removeClass('active'); });
			this.thumbnails[index].addClass('active');
			this.currentSlide = slide;
			this.img.setStyle('position', 'absolute');
			this.img.setStyle('top', (height - this.img.getCoordinates()['height'])/2);
			this.img.setStyle('left', (width - this.img.getCoordinates()['width'])/2 + 10);		
		}
	},
	
	setupThumbnails: function() {
		this.selector = new Element("div").injectInside(this.element).addClass("selector");
		
		var table = new Element("table").injectInside(this.selector);
		var tr = new Element("tr").injectInside(new Element("tbody").injectInside(table));
		var td1 = new Element("td").injectInside(tr);
		var td2 = new Element("td").injectInside(tr);
		var td3 = new Element("td").injectInside(tr);
		
		var selectorLeft = new Element("a").setProperties({href: '#'}).addClass("selector-left").injectInside(td1);
		var selectorWrapper = new Element("div").addClass("selector-wrapper").injectInside(td2);		
		var selectorRight = new Element("a").setProperties({href: '#'}).addClass("selector-right").injectInside(td3);
		
		selectorLeft.addEvent("click", function(){this.move("left"); return false;}.bind(this));
		selectorRight.addEvent("click", function(){this.move("right"); return false;}.bind(this));

		var thumbnailWrapper = new Element("div").injectInside(selectorWrapper).addClass("thumbnail-wrapper");
		this.thumbnailWrapper = thumbnailWrapper;		
		
		this.slides.forEach(function(slide, index) {
			var slideSelector = new Element("div").addClass("thumbnail").injectInside(thumbnailWrapper);
			slideSelector["slide"] = slide;
			var thumbnailImage = new Element("img").setProperties({src: slide.thumbnail}).injectInside(slideSelector);
			thumbnailImage.setOpacity(0.5);
			
			slide['thumbnailImage'] = thumbnailImage;
			slideSelector.addEvent("click", this.handleSlideSelectorClick.bind(this, index));
		}.bind(this));
		
		this.thumbnails = this.thumbnailWrapper.getElements('.thumbnail');
	},
	
	move: function(dir) {
		var wrapper = this.selector.getElement('.selector-wrapper');
		var thumbnails = this.thumbnails;
		var width = wrapper.getCoordinates()['width'];
		var currentOffsets = thumbnails.map(function(thumbnail) {			
			return [thumbnail.getLeft() - wrapper.getLeft(), thumbnail.getCoordinates()['width']];
		});
		if(!this.offsets) {
			this.offsets = thumbnails.map(function(thumbnail) {			
				return [thumbnail.getLeft() - wrapper.getLeft(), thumbnail.getCoordinates()['width']];
			});
		}
		
		var showThumb = 0;
		var offset = 0;
		
		if(dir == 'right') {	
			showThumb = thumbnails.length - 1;
			
			for(var t = 0; t < currentOffsets.length; t++) {
				if(currentOffsets[t][0] + currentOffsets[t][1] > width) {
					showThumb = t;
					break;
				}
			}
			
			offset = -this.offsets[showThumb][0] + width - this.offsets[showThumb][1];
		}
		
		if(dir == 'left') {			
			for(var t = currentOffsets.length-1; t >= 0; t--) {				
				if(currentOffsets[t][0] < 0) {
					showThumb = t;
					break;
				}
			}
			
			offset = -this.offsets[showThumb][0];
		}
		
		var cleft = parseInt(this.thumbnailWrapper.getStyle('left'), 10);
		if(!cleft || cleft == NaN) cleft = 0;
		
		var fx = new Fx.Styles(this.thumbnailWrapper, {duration: 100});
		fx.start({'left': [cleft, offset]});
	},
	
	handleSlideSelectorClick: function(index) {
		this.show(index);
	}
});

var galleries = [];

window.addEvent('domready', function() {	
	$$('.gallery').forEach(function(gallery) {
		galleries.push(new Gallery(gallery));
	});
});