
var Gallery = new Class({
	
	initialize: function(){
		
		// gather DOM nodes into variables
		var images = $$("#images li");
		var controls = $("controls");
		
		// empty the controls container
		controls.setHTML("");
		
		// create some elements for cloning
		tempLi = new Element("LI");
		tempA = new Element("A");
		tempThumb = new Element("IMG");
			
		// create a clickable control for each image item
		var img, li, a, thumb, thumbsrc;
		// swap the next two lines for left aligned controls
		for (i=0; i<images.length; i++) {
			
			// set vars
			img = images[i];
			li = tempLi.clone();
			a = tempA.clone();
			thumb = tempThumb.clone();
			thumbsrc = "";
			
			// set the class of the current control link
			if (img.className && img.className == "current") {
				a.className = "current";
			}
			
			// setup the link
			a.title = "Click to display image " + i;
			
			// setup the thumbnail image
			thumbsrc = img.getElementsByTagName("IMG")[0].src;
			
			var part2 = thumbsrc.slice(thumbsrc.lastIndexOf("."));
			var part1 = thumbsrc.replace(part2, "");
			
			thumbsrc = part1 + "_thumb" + part2;
			
			thumb.src = thumbsrc;
			
			// assemble the control;
			a.appendChild(thumb);
			li.appendChild(a);
			
			// insert the control into the controls div
			controls.appendChild(li);
			
			// set a click event on the new control
			li.addEvent("click", this.update.bind(li));
			
		}
		
		return true;
	},
	
	
	// the handler for click controls
	update: function(){
		
		// set some vars
		var i;
		var controls = this.parentNode.childNodes;
		var images = $$("#images li");
		
		// loop through the items in the list and update css class names
		for (i=0; i<controls.length; i++) {
			if (controls[i] != this) {
				images[i].className = "";
				controls[i].firstChild.className = "";
			} else {
				images[i].className = "current";
				controls[i].firstChild.className = "current";
			}
		}
		
		return true;
	}
	
});

myGallery = {};

// initialize the gallery when the page is ready
Window.onDomReady(function(){
	myGallery = new Gallery();
});



