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

	var currentLoc = '';
	var oldContent = $('peopleContent').get('html');
	
	Element.implement({
		kill: function(){
			this.get('tween').start('opacity',0).chain(function() {
				this.destroy();
			}.bind(this));
			return this;
		}
	});

	


	$$('.imgCellWrapper').addEvent('click', function(){
		loadNoun(this);
	});
	
	
	var loadNoun = function(el){
		resizeTextBox();
	
		if(currentLoc == $(el)) return;
	
		currentLoc = $(el);
		document.location.assign('#-'+$(el).get('id')); //change url and add history item.
		var title = $(el).getElement('span').get('html');
		document.title = 'tellart | '+ title; //Change the title of the page
		
		$$('.imgCellWrapper').removeClass('selected');
		$(el).addClass('selected');		
		getNoun.post({'noun': $(el).get('id')});
		
	}
	
	function resizeTextBox(){
		var storeStartHeight =  $('peopleImages').getHeight();
		//$('sidebar').setStyle('height', $('peopleContent').getHeight() - 20);
		
		var offset = 85;
		
		var footerPos = ($('peopleContent').getHeight() + offset > 600)? $('peopleContent').getHeight() + offset: 600;
		
		$('footer').setStyle('top', footerPos);
		
	}
	
	resizeTextBox();
	


	//Check for changes in the hash(bookmark) every 100ms
	var bookmarkChecker = function(){		
		if(document.location.hash && $(document.location.hash.substring(2))){ //only do this if there is a bookmark set
			el = document.location.hash.substring(2);
			loadNoun(el);
		}else{
			currentLoc = '';
			$$('.imgCellWrapper').removeClass('selected');
			$('peopleContent').set('html', oldContent);
		}
	}.periodical(100);	
	
	
	





	var getNoun = new Request.JSON({
		url: 'includes/php/getNoun.php',
		
		onRequest: function(txt){
			
	
		},	
		
		onSuccess: function(obj){
							
			if(obj.type == 'person'){
				$('peopleContent').empty();
				var wrapper = new Element('div').inject($('peopleContent')).fade('hide');
				var name = new Element('h1', {'html': obj.name}).inject(wrapper);
				var title = new Element('h2', {'html': obj.title}).inject(wrapper);
				var about = new Element('div', {'html': obj.about}).inject(wrapper);
				var about = new Element('a', {'class': 'email', 'href': 'javascript:nospam(%22'+obj.shortName+'%22,%22tellart.com%22);','html': obj.shortName+' (at) tellart (dot) com'}).inject(wrapper);
								
				wrapper.fade('in');
			
			
			}else if(obj.type == 'place'){
				var images = obj.images;
				var slideshowImages = [];
				var currentSlideshowIndex = 0;
				
				$('peopleContent').empty();
				
				var wrapper = new Element('div').inject($('peopleContent')).fade('hide');
					var name = new Element('h1', {'html': obj.name}).inject(wrapper);
					var subName = new Element('h2', {'html': obj.subName}).inject(wrapper);
					var slideshowProgress = new Element('div', {'class': 'slideshowProgress'}).inject(wrapper);
				
					var slideshowWrapper = new Element('div', {'class': 'slideshowWrapper'}).inject(wrapper);
						var slideshowNavWrapper = new Element('div', {'class': 'slideshowNavWrapper'}).inject(slideshowWrapper);
						
						
				// preloading
				var loader = new Asset.images(images, {
					onProgress: function(counter,index) {
						var percent = (counter + 1) * (100 / images.length);
						var intermed = map(percent, 0, 100, 8, 1);
						//var bgPos = (Math.floor(intermed) * -80) -3;
						var bgPos = (Math.floor(intermed) * -40);
						
						slideshowProgress.setStyle('background-Position', bgPos);
						
						
					},
					onComplete: function() {
						var slideshowNavBack = new Element('a', {'class': 'slideshowNavBack', 'html': '<< previous'}).inject(slideshowNavWrapper);
							var slideshowNavinfo = new Element('span', {'class': 'slideshowNavInfo', 'html': '| <strong id="currentImageNum">1</strong> of <strong>'+images.length+'</strong> |'}).inject(slideshowNavWrapper);
							var slideshowNavForward = new Element('a', {'class': 'slideshowNavForward', 'html': 'next >>'}).inject(slideshowNavWrapper);
						var slideshow = new Element('div', {'class': 'slideshow'}).inject(slideshowWrapper);
					
						images.each(function(image, index){
						    //console.log(image);
						    slideshowImages[index] = new Element('img', {'class': 'slideshowImage', 'src': image}).inject(slideshow).fade('hide');
						});
						
						slideshowProgress.kill();
						slideshowImages[currentSlideshowIndex].fade('in');
						
				
						slideshowNavForward.addEvent('click', function(){
							slideshowImages[currentSlideshowIndex].fade('out');
							currentSlideshowIndex = (currentSlideshowIndex != images.length - 1)? currentSlideshowIndex +1: 0;
							
							slideshowImages[currentSlideshowIndex].fade('in');
							$('currentImageNum').set('html', currentSlideshowIndex +1);
						});	
						
								
						slideshowNavBack.addEvent('click', function(){
							slideshowImages[currentSlideshowIndex].fade('out');
							currentSlideshowIndex = (currentSlideshowIndex != 0)? currentSlideshowIndex -1: images.length - 1;
							
							slideshowImages[currentSlideshowIndex].fade('in');
							$('currentImageNum').set('html', currentSlideshowIndex +1);
										
						});
					}
				});
				
				wrapper.fade('in');				
			
			}
			
			
			
			
		}	
	
	});

});


function nospam(user,domain,args) {
	loc = "mailto:" + user + "@" + domain;
	if (args) {
		loc += "?" + args;
	}
	window.location = loc;
}

function map(val, min, max, minOut, maxOut){
	var base = val - min;
	var range = max - min;
	var percent = base / range;
	var rangeOut = maxOut - minOut;

	return (percent * rangeOut) + minOut;
}