var ImageChanger = Class.create();

ImageChanger.prototype = {
	
	// initialize()
	// Constructor runs on completion of the DOM loading. Calls updateImageList and then
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		
		this.updateImageList();

	},


	//
	// updateImageList()
	// Loops through anchor tags looking for 'lightbox' references and applies onclick
	// events to appropriate links. You can rerun after dynamically adding images w/ajax.
	//
	updateImageList: function() {
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('change-image'))){
				anchor.onclick = function () {myImageChanger.start(this); return false;}
			}
		}
	},
	
	
	//
	//	start()
	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
	//
	start: function(imageLink) {
		var bigimageID = "bigimage";
		var imageLayer = document.getElementById(bigimageID);
		if (!imageLayer) { return; }
		
		var image = imageLayer.getElementsByTagName("img");
		image[0].style.visibility = "hidden";
		
		var newImage = new Image();
		newImage.onload=function(){
			image[0].src = imageLink;
			image[0].style.visibility = "visible";
			
			newImage.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}
		newImage.src = imageLink;
		
		
	},

	//
	//	changeImage()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changeImage: function(imageNum) {	
	},

	//
	//	resizeImageContainer()
	//
	resizeImageContainer: function( imgWidth, imgHeight) {
	},
	
	//
	//	showImage()
	//	Display image and begin preloading neighbors.
	//
	showImage: function(){
	},

	//
	//	updateDetails()
	//	Display caption, image number, and bottom nav.
	//
	updateDetails: function() {
	},

	//
	//	updateNav()
	//	Display appropriate previous and next hover navigation.
	//
	updateNav: function() {
	},

	//
	//	enableKeyboardNav()
	//
	enableKeyboardNav: function() {
	},

	//
	//	disableKeyboardNav()
	//
	disableKeyboardNav: function() {
	},

	//
	//	keyboardAction()
	//
	keyboardAction: function(e) {

	},

	//
	//	preloadNeighborImages()
	//	Preload previous and next images.
	//
	preloadNeighborImages: function(){
	},

	//
	//	end()
	//
	end: function() {
	}
}


function initImageChanger() { myImageChanger = new ImageChanger(); }
Event.observe(window, 'load', initImageChanger, false);