MountGallery = function() {
	this.images = new Array();
	this.loadingImagePath = 'css/loading.gif';
	
	this.init = function() {
	if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName("a");
		var e = this;

		for (var i=0; i<anchors.length; i++) {
			var anchor = anchors[i];
			var relAttribute = String(anchor.getAttribute('rel'));

			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('mountgallery'))) {
				anchor.onclick = function () {
					e.changeImg(this.getAttribute('href'));
					return false;
				}
				
				this.images.push(anchor.getAttribute('href'));
			}	
		}

		this.createElements();
		this.changeImg(this.images[0]);
	}
	
	this.createElements = function() {
		/* Code generated by this function
		
		<div id="photoContainer">
			<div id="frame">
				<img src="400.jpg" alt="" id="photo" />
				<div id="navigation">
					<a href="/" id="prev"></a>
					<a href="/" id="next"></a>
				</div>
				
				<div id="loading"><img src="" alt="Loading" /></div>
			</div>
		</div>
		*/
		var e = this;
		
		var objPhotoContainer = document.createElement("div");
		objPhotoContainer.setAttribute('id','photoContainer');
		document.getElementById('gallery').insertBefore(objPhotoContainer, document.getElementById('thumbs'));
			
		var objFrame = document.createElement("div");
		objFrame.setAttribute('id','frame');
		objPhotoContainer.appendChild(objFrame);
			
		var objImage = document.createElement("img");
		objImage.setAttribute('id','photo');
		objFrame.appendChild(objImage);
		
		var loadingContainer = document.createElement("div");
		loadingContainer.setAttribute('id','loadingContainer');
		objFrame.appendChild(loadingContainer);
			
		var imgPreloader = new Image();
		imgPreloader.onload = function() {
			var imageLaoding = document.createElement("img");
			imageLaoding.setAttribute('id','imageLaoding');
			imageLaoding.setAttribute('alt','Laoding, please wait');
			imageLaoding.setAttribute('src', e.loadingImagePath);
			loadingContainer.appendChild(imageLaoding);
			
			// clear onLoad, as IE will flip out w/animated gifs
			imgPreloader.onload=function(){};	
			return false;
		}
		imgPreloader.src = e.loadingImagePath;
			
		var objNavigation = document.createElement("div");
		objNavigation.setAttribute('id','navigation');
		objFrame.appendChild(objNavigation);
			
		var objPrevLink = document.createElement("a");
		objPrevLink.setAttribute('id','prev');
		objPrevLink.setAttribute('href','/');
		objNavigation.appendChild(objPrevLink);
			
		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','next');
		objNextLink.setAttribute('href','/');
		objNavigation.appendChild(objNextLink);		
	}
	
	this.changeImg = function(link) {
		var index = 0;
		while (this.images[index] != link) {
			index++;
		}
		
		this.show(index);
	}
	
	this.updateNavigation = function(index) {
		var e = this;
		
		if (index > 0) {
			var prev = document.getElementById('prev');
			prev.style.display = 'block';
			prev.onclick = function() {
				e.changeImg(e.images[index - 1]); 
				return false;
			}
		}
		
		if (index < (e.images.length - 1)) {
			var next = document.getElementById('next');
			next.style.display = 'block';
			next.onclick = function() {
				e.changeImg(e.images[index + 1]); 
				return false;
			}
		}
	}
	
	this.show = function(index) {
		var e = this;
		var image = document.getElementById('photo');
		var loading = document.getElementById('loadingContainer');
		
		document.getElementById('prev').style.display = 'none';
		document.getElementById('next').style.display = 'none';
		
		image.style.display = 'none';
		loading.style.display = 'block';
		document.getElementById('photoContainer').style.display = 'block';
		
		imgPreload = new Image();
		imgPreload.onload = function() {
			image.src = e.images[index];
			e.resizeFrame(imgPreload.width, imgPreload.height);

			loading.style.display = 'none';
			image.style.display = 'block';	
			
			// update navigation link
			e.updateNavigation(index);
			
			// clear onLoad, as IE will flip out w/animated gifs
			imgPreload.onload=function(){};	
			return false;
		}
		imgPreload.src = e.images[index];
	}
	
	this.resizeFrame = function(width, height)
	{
		var objFrame = document.getElementById('frame');
		objFrame.style.height = height +'px';
		objFrame.style.width = width +'px';
	}
	
	// testing
	this.test = 'test string';
	this.testMet = function() {alert('in test Method')}
}

// initialize gallery
start = function() {
	
	var gallery = new MountGallery();
	gallery.init(this);
	
}

function loadEvent()
{
	var onload = window.onload;
	if (typeof window.onload != 'function')
	{
    	window.onload = start;
	} 
	else 
	{
		window.onload = function() {
			onload();
			start();
			
		}
	}
}

loadEvent();