var TractusGallery = new Class ({
	Implements: [Options],
	
	options: {
		eTarget: "gallery",
		imgBasePath: "images/gallery",
		animationStyle: {
			duration: 500,
			transition: Fx.Transitions.Expo.easeInOut
		}
	},
	
	initialize: function(options){

		this.setOptions(options);
		
		// Set up
		this.create_dom();
		
		// load images and build sliders
		this.load_images();
		
	},
	
	create_dom: function() {
		
		var self = this;
		
		this.gallery = $("gallery");
		
		// Gallery Counter
		this.gallery_counter = new Element("p", { id: "gallery-counter", text: "/" });
		this.gallery_current_image = new Element("span", { id: "gallery-current-image", text: "01" }).inject(this.gallery_counter, "top");
		this.gallery_total_images = new Element("span", { id: "gallery-total-images", text: "00" } ).inject(this.gallery_counter);
		
		// Caption Box
		this.caption_box = new Element("p", { id: "caption-box", text: "Image Caption Goes Here "});
		
		// Gallery Navigation
		this.gallery_navigation = new Element("ul", { id: "gallery-navigation" });
		this.gallery.getElements("h2").each(function (item, index) {

			
			var nav_item = new Element("li", {
				
				id: "gallery-" + item.get("text").toLowerCase(),
				html: "<a href=\"#\">"+ item.get("text") + "</a>",
				events: {
					click: function(evt) {
						evt.stop();
						
						self.gallery_navigation.activeItem.removeClass("active");
						self.gallery_navigation.activeItem.slider.slideOut();
						
						if (self.gallery_thumbs_slider) {
							
							self.gallery_thumbs_slider.cancel();
							self.gallery_thumbs_slider.start("top", -(this.nIndex * this.eThumbs.getSize().y));
							
						}
						
						if (self.gallery_image_holder && self.image_dimensions) {
							
							self.gallery_image_holder.slider.cancel();
							self.gallery_image_holder.slider.start("top", -(this.nIndex * self.image_dimensions.y));
							
						}
						
						// change the count/total settings.
						self.gallery_current_image.set("text", "01");
						self.gallery_total_images.set("text", (this.eThumbs.nTotal > 9 ? this.eThumbs.nTotal : "0" + this.eThumbs.nTotal) );
						
						// change the caption to the first item's text
						self.caption_box.set("text", this.eThumbs.getFirst().getElement("img").get("alt"));
						
						// reset slider positions.
						this.image_slider.setStyle("left", 0); // reset current slider position
						
						this.activeItem.removeClass("active"); // remove old active item
						this.activeItem = this.eThumbs.getElement("a"); // reset current active item.
						this.activeItem.addClass("active"); // set new active item
						
						// reset the previous active item's sliders.
						self.gallery_navigation.activeItem = this;
						
						// hide or show pagination
						if (this.eThumbs.nTotal > 15) {
							
							self.gallery_pagination_next.fade("in");
							
						} else {
							
							self.gallery_pagination_next.fade("out");
							self.gallery_pagination_previous.fade("out");
							
						}
						
						this.addClass("active");
						this.slider.slideIn();
						self.gallery_navigation.activeItem = this;
						
					},
					
					mouseover: function(evt) {
						
						evt.stop();
						if (this.slider && !this.hasClass("active")) {
							this.slider.cancel().slideIn();
						}
						
					},
					
					mouseout: function(evt) {
						
						evt.stop();
						if (this.slider && !this.hasClass("active")) {
							this.slider.cancel().slideOut();
						}
					}
				}
				
			}).inject(self.gallery_navigation);
			
			var nav_descriptor = nav_item.getElement("a");
			nav_item.nIndex = index;
			nav_item.eThumbs = item.getNext(); // sibling UL element.
			nav_item.eThumbs.nIndex = index;
			nav_item.eThumbs.nTotal = nav_item.eThumbs.getElements("a").length;
			
			nav_item.slider = new Fx.Slide(nav_descriptor, { mode: "horizontal", transition: Fx.Transitions.Expo.EaseInOut, duration: 200 });
			
			// Set the default nav active item.
			if (index == 0) {
				nav_item.addClass("active");
				self.gallery_navigation.activeItem = nav_item;
				self.gallery_total_images.set("text", (nav_item.eThumbs.nTotal > 9 ? nav_item.eThumbs.nTotal : "0" + nav_item.eThumbs.nTotal) );	
				self.caption_box.set("text", nav_item.eThumbs.getFirst().getElement("img").get("alt"));
			} else {
				nav_item.slider.hide();
			}
			
		});
		
		// Gallery Menu Bar
		this.gallery_menu_bar = new Element("div", { id: "gallery-menu-bar" });
		this.gallery_counter.inject(this.gallery_menu_bar);
		
		// Gallery Thumbnails
		this.gallery_thumbs = new Element("div", { id: "gallery-thumbs" }).inject(this.gallery_menu_bar);
		this.gallery_thumbs_slider = new Fx.Tween(this.gallery_thumbs, this.options.animationStyle);

		this.galleries_thumbs = $$("ul.thumbnails").each(function(item, index) {
			item.inject(self.gallery_thumbs);
		});
		
		
		this.gallery_pagination_next = new Element("div", {
			id: "gallery-pagination-next",
			text: "+",
			events: {
				
				click: function(evt) {
					
					evt.stop();
					
					if (self.gallery_navigation && self.gallery_navigation.activeItem) { 
						
						var thumbs = self.gallery_navigation.activeItem.eThumbs;
						var distance = (thumbs.currentPage + 1 < thumbs.pages) ? thumbs.getSize().x : thumbs.getScrollWidth() - thumbs.getSize().x;
						
						thumbs.scroller.cancel().start(distance, 0);
						
						// we're at the last item, fade out the plus control
						if (thumbs.currentPage + 1 == thumbs.pages) {
							self.gallery_pagination_next.fade("out");
						}
						
						// we're leaving the first page, turn on the minus control
						if (thumbs.currentPage == 1) {
							self.gallery_pagination_previous.fade("in");
						}
						
						if (thumbs.currentPage < thumbs.pages) {
							thumbs.currentPage ++;
						}
						
					}
					
				}
				
			}
		});
		
		this.gallery_pagination_previous = new Element("div", {
			id: "gallery-pagination-previous",
			text: "-",
			events: {
				
				click: function(evt) {
					
					evt.stop();

					if (self.gallery_navigation && self.gallery_navigation.activeItem) {
						
						var thumbs = self.gallery_navigation.activeItem.eThumbs;
						var distance = (thumbs.currentPage - 1 > 1) ? thumbs.getScrollLeft() - thumbs.getSize().x : 0;
						
						thumbs.scroller.cancel();
						thumbs.scroller.start(distance, 0);
						self.gallery_pagination_previous.fade("in");
						
						// we're at the first item, fade out the minus control
						if (thumbs.currentPage - 1 == 1) {
							self.gallery_pagination_previous.fade("out");
						}
						
						// we're leaving the last page, turb on the minus control
						if (thumbs.currentPage == thumbs.pages) {
							self.gallery_pagination_next.fade("in");
						}
						
						if (thumbs.currentPage > 0) {
							thumbs.currentPage --;
						}
						
					}
					
				}
				
			}
		});
		
		// rewrite the Gallery DOM object.
		this.gallery.empty();
		this.gallery_navigation.inject(this.gallery);
		this.gallery_menu_bar.inject(this.gallery);
		this.gallery_image_holder = new Element("div", { id: "gallery-image-holder" }).inject(this.gallery);
		
		this.gallery_pagination_next.inject("main");
		this.gallery_pagination_previous.inject("main");
		
		this.caption_box.inject(this.gallery);
		
	},
	
	load_images: function() {
		
		// Multiple sliders, one for each nav item.
		// multiple thumbnail listings, one for each nav item.
		
		var self = this;
		
		this.loaded_images = new Hash();
		this.image_dimensions = new Hash({ x: this.gallery.getSize().x, y: this.gallery.getSize().y });
		this.gallery_image_holder.slider = new Fx.Tween(this.gallery_image_holder, this.options.animationStyle);
		
		this.gallery_navigation.getElements("li").each(function(item, index) {
			
			// Gallery Image Slider
			item.image_slider = new Element("div", { "class" : "gallery-image-slider " + item.get("text") }).inject(self.gallery_image_holder);
			item.image_slider.slider = new Fx.Tween(item.image_slider, self.options.animationStyle);
			
			// Pagination?
			self.gallery_pagination_next.setStyle("opacity", 0);
			self.gallery_pagination_previous.setStyle("opacity", 0);
			
			if (item.eThumbs.nTotal > 15 && index == 0) {
				
				if (index == 0) {
					self.gallery_pagination_next.fade("in");
				}
				
				item.eThumbs.scroller = new Fx.Scroll(item.eThumbs, self.options.animationStyle);
				item.eThumbs.pages = Math.ceil(item.eThumbs.nTotal/15);
				item.eThumbs.currentPage = 1;
				
			}
			
			item.eThumbs.getElements("a").each(function(image, index) {
				
				image.nIndex = index;
				
				if (index == 0) {
					item.activeItem = image;
					image.addClass("active");
				}
				
				image.addEvent("click", function(evt) {
					
					evt.stop();
					
					// Change the active item
					if (item.activeItem) { item.activeItem.removeClass("active"); }
					image.addClass("active");
					item.activeItem = image;
					
					// Change the caption text.
					self.caption_box.set("text", image.getElement("img").get("alt"));
					
					var gallery_sliders = $$(".gallery-image-slider");
					if (gallery_sliders.length > 0 && self.image_dimensions) {
						
						gallery_sliders[item.eThumbs.nIndex].slider.cancel();
						gallery_sliders[item.eThumbs.nIndex].slider.start("left", -(index * (self.image_dimensions.x + 5)));
						
					}					
					
					self.gallery_current_image.set("text", (index + 1 > 9 ? index + 1 : "0" + (index + 1)) );
					
				});
				
				var loaded_image = new Asset.image(image.get("href"), { alt: image.getElement("img").get("alt") });
				
				item.image_slider.setStyle("width", item.image_slider.getSize().x + self.image_dimensions.x);
				loaded_image.inject(item.image_slider);
				loaded_image.set("width", self.image_dimensions.x);
				loaded_image.set("height", self.image_dimensions.y);
				
			});
			
		});
			
	}

});


document.addEvent("domready", function() {	
	
	if ($("gallery")) {
		var site = new TractusGallery();
	}
	
	// form placeholders
	// if ($("contact-form")) {
	// 	
	// 	// palceholders.
	// 	var inputs = $$(".form-row input, .form-row textarea");
	// 	
	// 	inputs.each(function(input, index) {
	// 		
	// 
	// 		input.set("value", input.get("title"));
	// 		input.oValue = input.get("title");
	// 		input.addEvents({
	// 			focus : function(evt) {
	// 
	// 				if (input.get("value") == input.oValue) {
	// 					input.set("value", "");
	// 				}
	// 
	// 			},
	// 			
	// 			blur: function(evt) {
	// 
	// 				if (input.get("value") == "") {
	// 					input.set("value", input.oValue);
	// 				}
	// 
	// 			}
	// 		});
	// 		
	// 	});
	// 	
	// 	
	// 	if (Browser.Engine.trident) {
	// 		
	// 		alert("trident");
	// 		var contact_form = document.forms[0];
	// 		contact_form.onSubmit = function(evt) {
	// 			
	// 			evt.preventDefault();
	// 			
	// 		};
	// 		
	// 	} else {
	// 		
	// 		$("contact-form").getElement("form").addEvent("submit", function(evt){
	// 
	// 			evt.stop();
	// 
	// 			inputs.each(function(input, index) {
	// 
	// 				if (input.get("value") == input.oValue) {
	// 
	// 					input.set("value", "");
	// 
	// 				}
	// 
	// 			});
	// 
	// 			// $("contact-form")getElement("form").submit();
	// 
	// 		});
	// 		
	// 	}
	// 	
	// }
	
	if ($$(".profile").length > 0) {
		
		var profiles = $$(".profile");
		profiles.each(function(profile, index) {
			
			profile.addClass("on");
			profile.bio_slider = new Fx.Slide(profile.getElement(".profile-bio"), { duration: 300, transition: Fx.Transitions.Expo.easeInOut });
			profile.bio_slider.hide();
			
			var profile_button = new Element("a", {
				"href": "#",
				"html": "Read the <span title=\"Biography\">Bio</span>",
				events: {
					"click": function(evt) {
						evt.stop();
						profile.bio_slider.toggle();
						
						this.set("html", this.get("text") == "Read the Bio" ? "Hide the <span title=\"Biography\">Bio</span>" : "Read the <span title=\"Biography\">Bio</span>");
						
					}
				}
			}).injectInside(profile.getElement(".profile-info"));
			
			profile.getElement(".profile-image").addEvent("click", function() {
				
				profile.bio_slider.toggle();
				profile_button.set("html", profile_button.get("text") == "Read the Bio" ? "Hide the <span title=\"Biography\">Bio</span>" : "Read the <span title=\"Biography\">Bio</span>");
				
			});
			
		});
		
	}
	
});