window.addEvent('domready', function() {


	var togglerID;

	// toggler event listener
	$$('.toggler').addEvent('click', function(){
		
		$('contentbox').empty();
		togglerID = this.getProperty('id');
		
		switch(togglerID) {
			case "current":
				$(document.body).setStyle('background-image', 'url(images/bkg.jpg)');
				thumbnailGallery(togglerID);
			break;
			case "berlinwall":
				$(document.body).setStyle('background-image', 'url(images/bkg.jpg)');
				thumbnailGallery(togglerID);
			break;
			case "gardens":
				$(document.body).setStyle('background-image', 'url(images/bkg.jpg)');
				thumbnailGallery(togglerID);
			break;
			case "koi":
				$(document.body).setStyle('background-image', 'url(images/bkg.jpg)');
				thumbnailGallery(togglerID);
			break;
			case "sanfrancisco":
				$(document.body).setStyle('background-image', 'url(images/bkg.jpg)');
				thumbnailGallery(togglerID);
			break;
			case "urban":
				$(document.body).setStyle('background-image', 'url(images/bkg.jpg)');
				thumbnailGallery(togglerID);
			break;
			case "artist":
				$(document.body).setStyle('background-image', 'url(images/statementbkg.jpg)');
				getText("text/mystatement.html");
			break;
			case "bio":
				$(document.body).setStyle('background-image', 'url(images/biobkg.jpg)');
				getText("text/bio.html");
			break;
			case "contact":
				$(document.body).setStyle('background-image', 'url(images/contactbkg.jpg)');
				getText("text/contact.html");
			break;
		}
	});
		
	
	function thumbnailGallery(togglerID) {

		var i = 1;
		var j = 0;
				
		var thumbsHolder = new Element('div', {
			id: 'thumbsHolder',
			'class': 'thumbsholder'
		}).inject($('contentbox'));
		
		// recursive
		function getThumb(togglerID) {
			
			var newThumb = new Asset.image('images/' + togglerID + "/" + togglerID + i + 't.jpg', {
			
				onload: function(){
					
					var thumbLoader = new Element('a', {  /*wrapper to facilitate finger cursor*/
						id: ('thumbLoader' + i),
						'href': '#',
						'class': 'thumb',
						'events': {
						    'click': function(){
						    	var thumbIndex = this.getProperty('id').slice(11);
						    	getBigImage(togglerID, thumbIndex);
						    }
						}						
					}).grab(newThumb).inject(thumbsHolder);
			    	
					i++;
					
					getThumb(togglerID);
				}
			});
		}
		

	
		function getBigImage(togglerID, thumbIndex) {
			
			var additionalViews = new Element('div', {
				'class': 'additionalviews',
			    'text': 'views'
			}); 
		
			var imageLoader = new Element('a', {
				id: 'imageLoader',
				'href': '#',
				'class': 'imageloader',
				'events': {
			        'click': function(){
			        	titleHolder.dispose();
			        	additionalViews.dispose();
						imageLoader.dispose();
						titleHolder.dispose();
						thumbsHolder.setStyle('opacity', 1);
			        }
				}
			});
			
			var titleHolder = new Element('div', {
			    id: 'titleHolder',
			    'class': 'titleHolder'
			});
		
			var bigImage = new Asset.image('images/' + togglerID + "/" + togglerID + thumbIndex + '.jpg', { 		
				id: 'bigImage',
				'class': 'bigImg',
				onload: function(){
					imageLoader.inject($('contentbox'));
					bigImage.inject(imageLoader);
					imageLoader.position({
					    relativeTo: $('thumbsHolder'),
					    position: 'topcenter',
					    edge: 'topcenter',
					    offset: {x: 0, y: 0}
						
					});
					
					getTitle(togglerID, thumbIndex);
					thumbsHolder.setStyle('opacity', 0);
					j = 0;
					getAltImage(togglerID, thumbIndex);
				}
			});			
			
			function getTitle(togglerID, thumbIndex) {	
	
				var req = new Request.HTML({
					evalScripts: true,
				    onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
				        var myElement = responseElements.filter('#' + togglerID + thumbIndex);
				        var myContent = myElement.get('html');
				        titleHolder.set('html', myContent); 
				        titleHolder.inject($('contentbox'));
			            titleHolder.position({
			        		relativeTo: $('imageLoader'),
			        		position: 'bottomcenter',
			        		edge: 'top',
			        		offset: {x: 0, y:10}
			        	});
				    }
				}).get('text/' + togglerID + '.html');
			}
		}
		
		// start the process
		getThumb(togglerID);
			
	} // end function thumbnailGallery()
	
	
	function getText(URL) {
		var textBox = new Element('div', {
		    id: 'textBox',
		    'class': 'textbox'
		}).inject($('contentbox')).load(URL);
	}
		
});