function initDjir(){

	$$('#projectList h2').each(function(header){
			var d = new DJIR(header, {fontAlias: 'InterstateBoldCondensed', fontSize: 17, bgColor: 'F6FCFD', fontColor: '123749'});
		});
		// $$('.portfolio #subNav h2').each(function(header){
		// 	var d = new DJIR(header, {fontAlias: 'InterstateLight', fontSize: 20, fontColor: '123749'});
		// });
		$$('h2').each(function(header){
			var d = new DJIR(header, {fontAlias: 'InterstateBoldCondensed',fontSize: '16'})
		});
	$$('h3').each(function(header){
		if(header.hasClassName('grey')){
			var d = new DJIR(header, {fontAlias: 'InterstateBoldCondensed', fontColor: '9f9f9f'});
		}else{
			var d = new DJIR(header, {fontAlias: 'InterstateBoldCondensed'});
		}
	});
}


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


var Portfolio = Class.create({
	
	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(el, jsonURL) {
		
		this.el = el;
		this.jsonURL = jsonURL;
		this.getJSONdata();
		
		// observe the links
		$$('.category li a').invoke('observe', 'click', this.onProjectLinkClick.bind(this))
		// prev and next button
		$('next').observe('click', this.onNextButtonClick.bind(this));
		$('prev').observe('click', this.onPrevButtonClick.bind(this));
		
		// get an array of all items to loop through
		this.items = $$('.category li a');
		
		// find the active item
		this.currentItem = this.lookUpCurrentItem($$('.category li a.active')[0]);

	},
	
	
	///////////////////////////////////////////////////////////
	// getJSONProjectList
	///////////////////////////////////////////////////////////
	
	getJSONdata:function(){
		
		$$('#projectHeader h2')[0].update('<img src="/static/img/ajax-loader2.gif" alt="loading" class="ajaxLoader" />');
		
		// new Ajax request for the project list
		new Ajax.Request(this.jsonURL, {
			// if success
			onSuccess: function(transport) {
				this.jsonObject = transport.responseText.evalJSON()
				// make it happen
				this.renderDetails();
			}.bind(this)
		});
	},
	
	
	
	///////////////////////////////////////////////////////////
	// renderDetail
	///////////////////////////////////////////////////////////
	
	renderDetails:function(){	

		var project = this.jsonObject.project;
		
		// update the content
		var	e = '<h1>'+ project.title +'</h1>';
			e+= project.content;
			if(project.url){
				e+= '<p id="projectUrl"><a href="'+ project.url +'">Bekijk dit project online</a></p>';
			}

		this.el.down('#projectContent').update(e)
		
		
		
		//update the visual for the project
		var f = '';
		var id = 0;
		project.images.each(function(e){
			f += '<li class="section" id="id_'+ id +'"><img src="'+ e.url +'" alt="'+ e.name +'"></li>';
			
			++id;
		})
		var loaderIMG = "<img id='ajaxLoader' src='/static/img/ajaxloader.gif' />";
		this.el.down('#visualImages').update(loaderIMG)
		this.el.down('#visualImages').update(f);

		
		var fc = '';
		var id = 0;
		project.images.each(function(e){
			fc += '<li><a href="#id_'+ id +'" title="'+ e.name +'"></a></li>';
			++id;
		})
		this.el.down('#slideControls').update(fc);
		
		// update the navigation
		var g = project.title;
		this.el.down('#subNav h2').update(g);
		
		// update the users who worked on this project
		var h = '';
		
		project.users.each(function(e){
			h += '<a href="'+ e.url +'" title="Over '+ e.full_name +'"><img src="'+ e.avatar.url +'" alt="'+ e.full_name +'"></a>';
		})
		this.el.down('#projectUserUpdate').update(h);
		
		// update the image screens for this project
		// var j = '';
		// project.images.each(function(e){
		// 	j += '<div class="projectImg"><img src="'+ e.url +'" alt="'+ e.name +'"></div>'
		// })
		// this.el.down('#projectImages').update(j);
		
		//update the breadcrumb with the title
		var k = '&nbsp;/&nbsp;&nbsp;'+ project.title +'';
		$('breadLast').update(k);
		
		$$('.ajaxLoader').invoke('remove');
		$('slideControlsContainer').setStyle({'display': 'block'})
		my_glider = new Glider('my-glider', {duration:0.5, initialSection:'id_0'});

		
		// (Re-) render DJIR:
	initDjir();
	},
	
	
	
	///////////////////////////////////////////////////////////
	// onProjectLinkClick
	///////////////////////////////////////////////////////////
	
	onProjectLinkClick:function(evt){
		var el = Event.element(evt);
		
		// find the link
		if(el.nodeName != 'A'){
			el = el.up('a');
		}

		// set current item - el, index(nr), jsonURL
		this.setCurrentItem(el, this.lookUpCurrentItem(el), el.readAttribute('rel'));

		//el.update('<img src="/static/img/ajax-loader2.gif" alt="" class="ajaxLoader" /> ' +el.innerHTML);
		
		Event.stop(evt);
	},
	
	
	///////////////////////////////////////////////////////////
	// set the current item
	///////////////////////////////////////////////////////////
	
	setCurrentItem:function(el, index, jsonURL){
		
		// load the new jsonURL in
		this.jsonURL = jsonURL;
		this.getJSONdata();
		
		// set the current item to index
		this.currentItem = index;
		
		// remove the active classname
		$$('.category .active').invoke('removeClassName', 'active');
		
		// add classname to new current element
		el.addClassName('active');
	},
	
	
	///////////////////////////////////////////////////////////
	// onPrevButtonClick
	///////////////////////////////////////////////////////////	
	
	onPrevButtonClick:function(evt){
		var el = Event.element(evt);
		
		// find the previous index
		var prev = (this.currentItem == 0) ? this.items.length-1 : --this.currentItem;
		
		// set current item - el, index(nr), jsonURL
		this.setCurrentItem(this.items[prev], prev, this.items[prev].readAttribute('rel'))
		
		Event.stop(evt);
	},


	///////////////////////////////////////////////////////////
	// onNextButtonClick
	///////////////////////////////////////////////////////////
	
	onNextButtonClick:function(evt){
		var el = Event.element(evt);
		
		// find the previous index
		var next = (this.currentItem == this.items.length-1) ? 0 : ++this.currentItem;
		
		// set current item - el, index(nr), jsonURL
		this.setCurrentItem(this.items[next], next, this.items[next].readAttribute('rel'))
		
		Event.stop(evt);
	},
	
	
	///////////////////////////////////////////////////////////
	// lookUpCurrentItem
	///////////////////////////////////////////////////////////
		
	lookUpCurrentItem:function(el){
		return this.items.indexOf(el);
	}
	
});

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */

/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */

Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
	initialize: function(wrapper, options){

	    this.scrolling  = false;
	    this.wrapper    = $(wrapper);
	    this.scroller   = this.wrapper.down('.scroller');
	    this.sections   = this.wrapper.getElementsBySelector('li.section');
	    this.options    = Object.extend({ duration: 1.0, frequency: 3 }, options || {});

	    this.sections.each( function(section, index) {
	      section._index = index;
	    });    

	    this.events = {
	      click: this.click.bind(this)
	    };

	    this.addObservers();
		if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration });  // initialSection should be the id of the section you want to show up on load
		if(this.options.autoGlide) this.start();
		if ($$('.controls a')[0]){
			$$('.controls a')[0].addClassName('active');
		}
		
	  },
	
  addObservers: function() {
	
	var lis = this.wrapper.down('.controls').childElements();
	var as = lis.invoke('down', 'a');

	as.invoke('observe', 'click', this.events.click);
  },	

  click: function(event) {
	$$('.controls a').invoke('removeClassName', 'active');
	this.stop();
	
    var element = Event.element(event);
	if(element.nodeName != 'A'){
		element = element.up('a');
	}
	element.addClassName('active')
    if (this.scrolling) this.scrolling.cancel();

    this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });   

    Event.stop(event);

  },

	moveTo: function(element, container, options){

		this.current = $(element);

		Position.prepare();
	    var containerOffset = Position.cumulativeOffset(container);
	 	elementOffset = Position.cumulativeOffset($(element));
		
		this.scrolling 	= new Effect.SmoothScroll(container, {
			duration:options.duration, 
			x:(elementOffset[0]-containerOffset[0]), 
			y:(elementOffset[1]-containerOffset[1])
		});
		
		return false;
		
	},
		
	next: function(){
		if (this.current) {
			var currentIndex = this.current._index;
			var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;      
		}else{
	 		var nextIndex = 1;
		}
		
		log(this.sections[nextIndex])

		this.moveTo(this.sections[nextIndex], this.scroller, {
			duration: this.options.duration
		});
	},

	previous: function(){
		if (this.current) {
			var currentIndex = this.current._index;
			var prevIndex = (currentIndex == 0) ? this.sections.length - 1 : 
			currentIndex - 1;
		}else{
			var prevIndex = this.sections.length - 1;
		}

		this.moveTo(this.sections[prevIndex], this.scroller, { 
			duration: this.options.duration
		});
	},

	stop: function()
	{
		clearTimeout(this.timer);
	},
	
	start: function()
	{
		this.periodicallyUpdate();
	},
		
	periodicallyUpdate: function()
	{ 
		if (this.timer != null) {
			clearTimeout(this.timer);
			this.next();
		}
		this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
	}

});

Effect.SmoothScroll = Class.create();

Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {

	initialize: function(element) {
		this.element = $(element);
		var options = Object.extend({
			x:0,
			y:0,
			mode: 'absolute'
		} , arguments[1] || {}  );
		this.start(options);
	},

	setup: function() {
		if (this.options.continuous && !this.element._ext ) {
			this.element.cleanWhitespace();
			this.element._ext=true;
			this.element.appendChild(this.element.firstChild);
		}
		
		this.originalLeft = this.element.scrollLeft;
		this.originalTop = this.element.scrollTop;

		if(this.options.mode == 'absolute') {
			this.options.x -= this.originalLeft;
			this.options.y -= this.originalTop;
		} 
	},

	update: function(position){
		this.element.scrollLeft = this.options.x * position + this.originalLeft;
		this.element.scrollTop  = this.options.y * position + this.originalTop;
	}
});