var InlineGallery = Class.create();
InlineGallery.prototype = {
	gallery_id_prefix : 'inline_gallery_',
	//gallery_container_class : 'inline_gallery_container',
	
	thumbnail_class : 'inline_gallery_thumbnail',
	thumbnail_current_class : 'inline_gallery_thumbnail_current',
	thumbnail_link_suffix : '_link',
	
	fullimage_class : 'inline_gallery_current_image',
	fullimage_title_class : 'inline_gallery_current_image_title',
	fullimage_content_class : 'inline_gallery_current_image_content',
	
	fullimage_cache : new Array(),
	thumbnails : new Array(),
	
	// does what it says on the box
	initialize: function(gallery_id) {
		this.gallery_id = gallery_id;
		this.container = $(this.gallery_id_prefix+gallery_id);
		
		// get all the parts of the full image display
		this.fullimage = document.getElementsByClassName(this.fullimage_class, this.container)[0];
		this.fullimage_title = document.getElementsByClassName(this.fullimage_title_class, this.container)[0];
		this.fullimage_content = document.getElementsByClassName(this.fullimage_content_class, this.container)[0];
		
		this.thumbnails =  document.getElementsByClassName(this.thumbnail_class, this.container);
		
		// if we use prototype's .each() here, the 'this' keyword points to the thumbnail instead of the gallery
		// which is just a nuisance
		for (var i = 0; i < this.thumbnails.length; i++) {
			var img = this.thumbnails[i];
			// this assumes we're using the wordpress default thumbnail naming/placing settings
			img.full_url = img.src.replace('.thumbnail', '');
			img.inline_gallery_index = i;
			img.inline_gallery = this;
			
			// this is so we can remove HTML tags from the mouseover
			img.img_title = img.title;
			img.title = img.title.replace(/<(?:.|\s)*?>/g, "");
			
			// if the image has an ID, use it to try find the associated link
			img.link = null;
			if (img.id) {
				var link_id = img.id + this.thumbnail_link_suffix;
				img.link = $(link_id);
			}
			// otherwise, try find an ancestor link
			if (img.link == null) {
				var ancestors = img.ancestors();
				for (var a = 0; a < ancestors.length; a++) {
					ancestor = ancestors[a];
					if (ancestor.tagName == 'A' || ancestor.tagName == 'a') {
						img.link = ancestor;
						// TODO: check this
						break;
					}
				}
			}
			
			// don't bother if the image uses a lightbox
			if (img.hasClassName('lightbox') || img.rel == 'lightbox') {
				return;
			}
			
			// assign the onclick event
			if (img.link != null) {
				img.link.inline_gallery_index = i;
				img.link.inline_gallery = this;
				Event.observe(img.link, 'click', function(event) { 'InlineGallery'+this.inline_gallery.thumbnailClicked(event, this.inline_gallery_index); });
			}
			
			// TODO: prefetch image and data
			//		preload image
			//		get title/content
			//			ajax? in the html somewhere?
		}
	},
	
	// make the magic happen when a thumbnail is clicked
	thumbnailClicked: function(event, index) {
		Event.stop(event);
		var img = this.thumbnails[index];
		
		// TODO: do more thorough checking (ie is array/Image, certain attributes exist)
		if (this.fullimage_cache[index] != undefined) {
			// send this to the large image loader
			this.loadLargeImage(img);
		} else {
			this.prefetchImage(img, true);
		}
		
	},
	
	prefetchImage: function(img, display) {
		var gal = this;

		imageObject = new Image();
		imageObject.onload = function() {
			this.imagepreloaded = true;
			gal.fullimage_cache[img.inline_gallery_index] = this;
							
			if (display) {
				gal.loadLargeImage(img);
			}
			
		}

		imageObject.src = img.full_url;
		
		/*
		var myAjax = new Ajax.Request(
			'flow.php?action=count', 
			{
				method: 'get', 
				parameters: '', 
				onComplete: function(response) {
					recordCount = response.responseText;
				}
		});
		*/
	},
	
	loadLargeImage: function(img) {
		var fullimage = this.fullimage;
		var fullimage_title = this.fullimage_title;
		var fullimage_content = this.fullimage_content;

		new Effect.Opacity(fullimage, {
				duration: 0.5, 
				transition:Effect.Transitions.linear,
				from: 1.0,
				to: 0.01,
				afterFinish:function(effect) {
					fullimage.src = img.full_url;
					new Effect.Appear(fullimage, {duration: 0.5});
				}
		});
		
		new Effect.Opacity(fullimage_title, {
				duration: 0.5, 
				transition:Effect.Transitions.linear,
				from: 1.0,
				to: 0.01,
				afterFinish:function(effect) {
					fullimage_title.innerHTML = img.img_title;
					new Effect.Appear(fullimage_title, {duration: 0.5});
				}
		});
		
		new Effect.Opacity(fullimage_content, {
				duration: 0.5, 
				transition:Effect.Transitions.linear,
				from: 1.0,
				to: 0.01,
				afterFinish:function(effect) {
					fullimage_content.innerHTML = img.alt;
					new Effect.Appear(fullimage_content, {duration: 0.5});
				}
		});
		
	}
	
};