///////////////////////////////////////////////////////////
// DJIR: init Django Image Replacement
///////////////////////////////////////////////////////////
function initDjir(){
	$$('.articleContent h2').each(function(header){
			var d = new DJIR(header, {fontAlias: 'InterstateLight', fontSize: 20, fontColor: 'ffdf52', bgColor: '082F3B'});
		});
		$$('#currentNavItem').each(function(header){
			var d = new DJIR(header, {fontAlias: 'InterstateLight', fontSize: 20, fontColor: '123749'});
		});
		$$('h3.grey').each(function(header){
			var d = new DJIR(header, {fontAlias: 'InterstateBoldCondensed', fontColor: '9f9f9f'});
		});
		$$('.articleColumns h3.title').each(function(header){
			var d = new DJIR(header, {fontAlias: 'InterstateBoldCondensed', fontSize: 14, fontColor: '373737'});
		});
	

}

///////////////////////////////////////////////////////////
// Class Portfolio
///////////////////////////////////////////////////////////

var Profiel = Class.create({
	
	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(htmlURL, lastfmURL, flickrURL, twitterURL) {
		this.htmlURL 	= htmlURL;
		this.lastfmURL 	= lastfmURL;
		this.flickrURL 	= flickrURL;
		this.twitterURL = twitterURL;
		
		// do the magic
		this.getHTMLsnippet();
	},
	
	
	
	///////////////////////////////////////////////////////////
	// get the snippets of flickr, lastfm, twitter
	///////////////////////////////////////////////////////////
	
	getSnippets:function(){
		
		// if flick
		if(this.flickrURL){
			$('flickrBlock').style.display = 'block';
			$('flickr').style.display = 'block';
			this.getFlickrJSON();
		}else{
			$('flickrBlock').hide();
		}
		// if lastfm
		if(this.lastfmURL){
			$('lastfmBlock').style.display = 'block';
			$('lastfm').style.display = 'block';
			this.getLastfmHTML();
		}
		else{
			$('lastfmBlock').hide();
		}
		// if twitter
		if(this.twitterURL){
			$('twitterBlock').style.display = 'block';
			$('twitter').style.display = 'block';
			this.getTwitterJSON();
		}
		else{
			$('twitterBlock').hide();
		}
		// remove the hr's when none of them are available
		if(!this.flickrURL && !this.lastfmURL && !this.twitterURL)
			$$('#mainBlock hr').invoke('hide')
	},
	
	
	
	///////////////////////////////////////////////////////////
	// misc functions
	///////////////////////////////////////////////////////////
		
	setLoadingMessage:function(el, msg){
		$(el).update('<p class="loader"><img src="/static/img/ajax-loader2.gif" alt="loading" class="ajaxLoader" /> ' + msg +'</p>')
	},
	
	setLoadingFailedMessage:function(el, msg){
		$(el).update('<p class="fail"><img src="/static/img/ajax-retry.gif" alt="loading" class="ajaxLoader" /> ' + msg +'</p>')
	},
	
	findRelAndSplit:function(el){
		// split the rel and get the url's out of them
		var relArray = el.readAttribute('rel').split(',');
		
		// find the url's
		this.htmlURL = relArray[0];
		this.lastfmURL = relArray[1];
		this.flickrURL = relArray[2];
		this.twitterURL = relArray[3];
	},
	
	
	///////////////////////////////////////////////////////////
	// get html snippet
	///////////////////////////////////////////////////////////
	
	getHTMLsnippet:function(){

		// new Ajax request for the project list
		new Ajax.Request(this.htmlURL, {
			// if success
			onSuccess: function(transport) {
				this.htmlObject = transport.responseText;
				// make it happen
				this.renderPage();
			}.bind(this)
		});
	},
	
	
	//////////////////////////////////////////////////////////
	// renderPage
	///////////////////////////////////////////////////////////

	renderPage:function(){
		$('content').update(this.htmlObject);

		// observe the navigation
		$$('#profileNav li a').invoke('observe', 'click', this.onNavLinkClick.bind(this));
		
		// prev and next button
		$$('#next','#prev').invoke('observe', 'click', this.onNeighbourButtonClick.bind(this));
		
		// Update the Breadcrumb
		if($('breadLast')){
			var lastcrumb = $('breadLast');
			var activePerson = $$('#profileNav li.active .profileName')[0].innerHTML;
			lastcrumb.update("&nbsp;/&nbsp;&nbsp;"+activePerson);
		}
		
		// Initialize DJIR.
		initDjir();
		
		// html is loaded, now load lastfm, flickr etc
		this.getSnippets();
		
	},
	
	
	///////////////////////////////////////////////////////////
	// render lastFM
	///////////////////////////////////////////////////////////	
	
	getLastfmHTML:function(){
		
		// say 'loading'
		this.setLoadingMessage($('lastfm'), 'bezig met laden...')
		
		new Ajax.Request(this.lastfmURL, {
			
			///////////////////////////////////////////////////////////	
			// success
			///////////////////////////////////////////////////////////	
			onSuccess: function(transport) {
			
				this.lastfmObject = transport.responseText;
				this.renderLastFM();

			}.bind(this),
			
			///////////////////////////////////////////////////////////	
			// fail
			///////////////////////////////////////////////////////////	
			onFailure: function(){	
				this.setLoadingFailedMessage($('lastfm'), 'Oops, iets is misgegaan. <a href="#" onclick="Profielen.getLastfmHTML(); return false;" title="get last.fm">Opnieuw</a>?')
			}.bind(this)
		});
	},
	
	renderLastFM:function(){
		$('lastfm').update(this.lastfmObject);
	},
	
	
	
	///////////////////////////////////////////////////////////
	// render flickr
	///////////////////////////////////////////////////////////	

	getFlickrJSON:function(){
		
		// say 'loading'
		this.setLoadingMessage($('flickr'), 'bezig met laden...')
		
		new Ajax.Request(this.flickrURL, {
			
			///////////////////////////////////////////////////////////	
			// if success
			///////////////////////////////////////////////////////////	
			onSuccess: function(transport) {
				this.flickrObject = transport.responseText;
				
				// actual rendering takes place in jsonFlickrApi()
				
			}.bind(this),

			///////////////////////////////////////////////////////////	
			// fail
			///////////////////////////////////////////////////////////	
			onFailure: function(){	
				this.setLoadingFailedMessage($('flickr'), 'Oops, iets is misgegaan. <a href="#" onclick="Profielen.getFlickrJSON(); return false;" title="get Flickr">Opnieuw</a>?')
			}.bind(this)
		});
	},
	
	
	
	///////////////////////////////////////////////////////////
	// render twitter
	///////////////////////////////////////////////////////////	
	
	getTwitterJSON:function(){
		
		this.setLoadingMessage($('twitter'), 'bezig met laden...')
		
		new Ajax.Request(this.twitterURL, {
			
			///////////////////////////////////////////////////////////	
			// if success
			///////////////////////////////////////////////////////////	
			onSuccess: function(transport) {
				this.twitterObject = transport.responseText.evalJSON(	);
				// make it happen
				this.renderTwitter();
			}.bind(this),

			///////////////////////////////////////////////////////////	
			// fail
			///////////////////////////////////////////////////////////	
			onFailure: function(){	
				this.setLoadingFailedMessage($('twitter'), 'Oops, iets is misgegaan. <a href="#" onclick="Profielen.getTwitterJSON(); return false;" title="get Twitter">Opnieuw</a>?')
			}.bind(this)
		});
	},
	
	renderTwitter:function(){	
		var tweets = '';
		this.twitterObject.each(function(e){
			tweets += '<p>'+ e.text +' <a href="http://twitter.com/'+e.user.screen_name+'/statuses/'+ e.id +'" title="View tweet">'+ this.relative_time(e.created_at) +'</a></p>';
		}.bind(this))
		
		$('twitter').update(tweets);
	},
	
	
	///////////////////////////////////////////////////////////
	// nice time-formatting function
	///////////////////////////////////////////////////////////

	relative_time:function(time_value) {
		var values = time_value.split(" ");
		time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
		var parsed_date = Date.parse(time_value);
		var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
		var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
		delta = delta + (relative_to.getTimezoneOffset() * 60);

		if (delta < 60) {
			return 'minder dan een minuut geleden';
		} else if(delta < 120) {
			return 'ongeveer een minuut geleden';
		} else if(delta < (60*60)) {
			return (parseInt(delta / 60)).toString() + ' minuten geleden';
		} else if(delta < (120*60)) {
			return 'ongeveer een uur geleden';
		} else if(delta < (24*60*60)) {
			return 'ongeveer ' + (parseInt(delta / 3600)).toString() + ' uur geleden';
		} else if(delta < (48*60*60)) {
			return '1 dag geleden';
		} else {
			return (parseInt(delta / 86400)).toString() + ' dagen geleden';
		}
	},
	
	
	
	
	//////////////////////////////////////////////////////////
	// initNavLinks
	///////////////////////////////////////////////////////////

	onNavLinkClick:function(event){
		
		// stop the event
		Event.stop(event);
		
		// find the link
		var targetLink = Event.element(event).tagName.toLowerCase() == "a" ? Event.element(event) : Event.element(event).up('a');
		
		this.findRelAndSplit(targetLink);
		
		// first load the html
		this.getHTMLsnippet();
		
		// say 'loading' in the menu
		targetLink.down('.profileName').update('<img src="/static/img/ajax-loader2.gif" alt="loading" class="ajaxLoader" /> ' +targetLink.down('.profileName').innerHTML);
	},
	
	
	///////////////////////////////////////////////////////////
	// onPrevButtonClick
	///////////////////////////////////////////////////////////	
	
	onNeighbourButtonClick:function(event){
		
		Event.stop(event);
		
		var el = Event.element(event);
		
		this.findRelAndSplit(el);
		
		this.setLoadingMessage($('currentNavItem'), '')
		
		// load the html
		this.getHTMLsnippet();
			
	}
	
	
});


///////////////////////////////////////////////////////////
// jsonFlickrApi
///////////////////////////////////////////////////////////

function jsonFlickrApi(rsp){

	// something broke
	if (rsp.stat != "ok"){	return;	}

	var flickr = '';
	
	rsp.photos.photo.each(function(photo){
		
		var id = photo.id;
		var owner = photo.owner;
		var server = photo.server;
		var secret = photo.secret;
		var farm = photo.farm;

		flickr += '<a href="http://www.flickr.com/photos/'+owner+'/'+id+'" title="Go to Flickr page"><img src="http://farm'+farm+'.static.flickr.com/'+server+'/'+id+'_'+secret+'_s.jpg" alt="" class="flickr_badge_image" /></a>';
	})
	
	$('flickr').update(flickr);
}