var ThumbnailGallery = new Class ({
	Implements: [Options, Events],
	
	options: {
		
		// Set Up Stuff
		mainImageContainerSelector: "#product-image",
		thumbnailImagesContainerSelector: "ul.thumbnails",
		
		// Options
		preloadImages: true,
		
		// Callback Functions
		thumbnailClick: function(target) {}
		
	},
	
	initialize: function(element, options){
		this.setOptions(options);
		
		if (!$(element)) return false;
		
		this.element = $(element);

		// Do these elements exist?
		if (!this.element.getElement(this.options.mainImageContainerSelector)) return false;
		if (!this.element.getElement(this.options.thumbnailImagesContainerSelector)) return false;
		if (!this.element.getElement(this.options.thumbnailImagesContainerSelector).getElements("a")) return false;
		
		// GO!
		this._dom();
		
		// return the passed element
		return this.element;
		
	},
	
	_dom: function() {
		
		var self = this;
		
		//self.element = $(element);
		self.element.mainImageContainer = self.element.getElement(self.options.mainImageContainerSelector);
		self.element.thumbnailImagesContainer = self.element.getElement(self.options.thumbnailImagesContainerSelector);
		self.element.thumbnailImages = self.element.thumbnailImagesContainer.getElements("a");
		
		if (self.options.preloadImages == true) {
			self.element.imagesCache = [];
		}
		
		self.element.thumbnailImages.setActiveItem = function(index) {
			
			var array = self.element.thumbnailImages;
			var currentItem = array.activeItemIndex;
			var newItem = index;
			
			if (newItem > array.length) newItem = array.length - 1;
			if (newItem < 0) newItem = 0;
			
			if (newItem != currentItem) {
				
				array[currentItem].getParent("li").removeClass("active");
				array[newItem].getParent("li").addClass("active");
			
				array.activeItemIndex = newItem;
				
			}
			
		};
		
		self.element.thumbnailImages.activeItemIndex = 0;
		self.element.thumbnailImages.each(function(thumbnail, index) {
			
			thumbnail.index = index;
			
			if (index == 0) {
				thumbnail.getParent("li").addClass("active");
			}
			
			var largeImage = null;
			
			// preload the images
			if (self.options.preloadImages == true && typeOf(self.element.imagesCache) == "array") {
				largeImage = new Element("img", {
					src: thumbnail.get("href"),
					alt: thumbnail.get("alt"),
					title: thumbnail.get("title")
				});
			
				self.element.imagesCache.push(largeImage);
			}
			
			// Add the click events to the thumnail images
			thumbnail.addEvent("click", function(evt) {
				
				evt.stop();
				
				// build the image here if we're not preloading them.
				if (self.options.preloadImages == false) {
					
					largeImage = new Element("img", {
						src: thumbnail.get("href"),
						alt: thumbnail.get("alt"),
						title: thumbnail.get("title")
					});
					
				}
				
				// replace the main image
				largeImage.replaces(self.element.mainImageContainer.getElement("img"));

				self.element.thumbnailImages.setActiveItem(index);
				
				// callback function
				self.options.thumbnailClick(evt.target);
				
			});
			
		});
		
	}
	
});

// REQUIRES URI, Element.getDimensions from Mootools More.
ThumbnailGallery.Extra = new Class ({
	Implements: [Options, Events],
	Extends: ThumbnailGallery,
	
	options: {
		
		stylesheet: "/javascripts/libs/classes/ThumbnailGallery.css",
		
		showPreviousNextButtons: false,
		makeThumbnailsSlider: true,
		
		sliderTransition: Fx.Transitions.Expo.easeOut,
		sliderDuration: 500,
		sliderUnit: 1,
		sliderUnitWidth: "auto",
		sliderFrameUnits: 3,
		sliderLoop: false,
		
		buttonClick: function(target) {},
		sliderAnimationComplete: function() {}
		
	},
	
	initialize: function(element, options){
		
		this.setOptions(options);
		
		this.css = new Element("link", { rel: "stylesheet", href: this.options.stylesheet, type: "text/css" }).inject(document.getElement("head"));

		// Initialize the Parent Class Stuff;
		if (this.parent(element, this.options)) {
		
			// must require more images than allotted.
			if (this.element.thumbnailImages.length > this.options.sliderFrameUnits) {
				this._buildThumbnailsSlider();
				this._buildPreviousNextButtons();
			}
		
			return this.element;
		}
	
		return false;
		
	},
	
	_buildThumbnailsSlider: function() {
		
		var self = this;
		
		// Determine the width of a single unit.
		var unitWidth = null;
		var singleUnit = null;
		if (self.options.sliderUnitWidth == "auto") {
			singleUnit = self.element.thumbnailImages[0].getParent("li");
			unitWidth = singleUnit.getSize().x + singleUnit.getStyle("margin-left").toInt() + singleUnit.getStyle("margin-right").toInt();
		} else {
			unitWidth = self.options.sliderUnitWidth;
		}
		
		// Set the width for the thumnails container.
		self.element.thumbnailImagesContainer.setStyle("width", (unitWidth * self.element.thumbnailImages.length));
		
		// Build the slider Element.
		self.element.thumbnailSlider = new Element("div",{
			id: self.element.get('id') + "-slider"
		}).wraps(self.element.thumbnailImagesContainer);
		
		self.element.thumbnailSlider.morph = new Fx.Morph(self.element.thumbnailImagesContainer, {
			transition: self.options.sliderTransition,
			duration: self.options.sliderDuration,
			onComplete: function() {
				
				self.options.sliderAnimationComplete();
				
			}
		});
		
		// create some methods and properties.
		self.element.thumbnailSlider.activeItemIndex = 0;
		self.element.thumbnailSlider.slideToIndex = function(index) {
			
			// Hide the next button
			if ((index + self.options.sliderFrameUnits) >= self.element.thumbnailImages.length) {
				if (self.element.thumbnailSlider.nextButton.showing == true) {
					self.element.thumbnailSlider.nextButton.fade("out");
					self.element.thumbnailSlider.nextButton.showing = false;
				}
				
			} else {
				
				if (self.element.thumbnailSlider.nextButton.showing == false) {
					self.element.thumbnailSlider.nextButton.fade("in");
					self.element.thumbnailSlider.nextButton.showing = true;
				}
				
			}
			
			// Hide the previous button
			if (index == 0) {
				
				if (self.element.thumbnailSlider.previousButton.showing == true) {
					self.element.thumbnailSlider.previousButton.fade("out");
					self.element.thumbnailSlider.previousButton.showing = false;
				}
				
			} else {
				
				if (self.element.thumbnailSlider.previousButton.showing == false) {
					self.element.thumbnailSlider.previousButton.fade("in");
					self.element.thumbnailSlider.previousButton.showing = true;
				}
				
			}
			
			if (index < self.element.thumbnailImages.length && index > -1) {
			
				var frame = self.options.sliderFrameUnits;
				var current = self.element.thumbnailSlider.activeItemIndex;
				var total = self.element.thumbnailImages.length;
				
				var new_index = index;
				if ((new_index + frame) > total) {
					new_index = (total - frame); // right side alignment
				}
				
				var new_position = -(unitWidth * new_index);
				
				self.element.thumbnailSlider.morph.cancel().start({
					"left" : new_position
				});
			
				self.element.thumbnailSlider.activeItemIndex = index;
				
				return index;
				
			}
			
			return false;
		};
		
		self.element.thumbnailSlider.slideToNext = function() {
			
			var frame = self.options.sliderFrameUnits;
			var current = self.element.thumbnailSlider.activeItemIndex;
			var next = current + 1;
			var total = self.element.thumbnailImages.length;
			
			// if (next == self.element.thumbnailImages.length) {
			// 	if (self.options.sliderLoop == true) {
			// 		next = 0;
			// 	} else {
			// 		next = current;
			// 	}
			// }
			
			// Right side alignment. The above might be useless now... Also might break the loop.
			if ((next + frame) > total) { 
				if (self.options.sliderLoop == true) {
					next = 0;
				} else {
					next = current;
				}
			}
			
			self.element.thumbnailSlider.slideToIndex(next);
			
		};
		
		self.element.thumbnailSlider.slideToPrevious = function() {
			
			var frame = self.options.sliderFrameUnits;
			var current = self.element.thumbnailSlider.activeItemIndex;
			var previous = current - 1;
			var total = self.element.thumbnailImages.length;
			
			if (previous < 0) {
				if (self.options.sliderLoop == true) {
					 previous = self.element.thumbnailImages.length - 1;
				} else {
					previous = current;
				}
			}
			
			self.element.thumbnailSlider.slideToIndex(previous);
			
		};
		
	},
	
	_buildPreviousNextButtons: function() {
		
		var self = this;
		
		self.element.thumbnailSlider.previousButton = new Element("a", {
			href: "#previous",
			text: "Previous",
			title: "Scroll to the Previous Image",
			id: self.element.thumbnailSlider.get("id") + "-previous-button",
			events: {
				click: function(evt) {
					
					evt.stop();
					
					self.element.thumbnailSlider.slideToPrevious();
					
					// Callback function
					self.options.buttonClick(evt.target);
					
				}
			}
		}).inject(self.element.thumbnailSlider, "before");
		
		
		self.element.thumbnailSlider.nextButton = new Element("a", {
			href: "#next",
			text: "Next",
			title: "Scroll to the Next Image",
			id: self.element.thumbnailSlider.get("id") + "-next-button",
			events: {
				click: function(evt) {
					
					evt.stop();
					
					self.element.thumbnailSlider.slideToNext();
					
					// Callback function
					self.options.buttonClick(evt.target);
					
				}
			}
		}).inject(self.element.thumbnailSlider, "after");
		
		
		// Hide or show the buttons.
		if ((self.element.thumbnailImages.activeItemIndex + self.options.sliderFrameUnits) == self.element.thumbnailImages.length) {
			
			self.element.thumbnailSlider.nextButton.showing = false;
			self.element.thumbnailSlider.nextButton.fade("hide");
			
		} else {
			self.element.thumbnailSlider.nextButton.showing = true;
		}
		
		if (self.element.thumbnailImages.activeItemIndex == 0) {
			
			self.element.thumbnailSlider.previousButton.showing = false;
			self.element.thumbnailSlider.previousButton.fade("hide");
			
		} else {
			self.element.thumbnailSlider.previousButton.showing = true;
		}
		
	}

});