var activeProject = 1;
var totalProjects = 14; //how many projects? you need to update the css too!
var dur = 700; //how long do the transitions take?
var trans = Fx.Transitions.Quad.easeIn //common transition type
var infoWidth = 500; //width of the info panels
var workWidth = 1280; //width of the artwork

window.addEvent('domready', function()
{
	$('links').addEvent('click', function(){ this.blur(); changeProject('prev');})
	$('rechts').addEvent('click', function(){ this.blur(); changeProject('next');})
})

function changeProject(direction)
{
	switch(direction)
	{
		case 'next':
			if(activeProject == 1)
			{
				$('info'+totalProjects).setStyle('left', infoWidth);				
				$('work'+totalProjects).setStyle('left', workWidth);
			}
			
			if(activeProject < totalProjects)
			{
				var infoOld = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });
				var workOld = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });	
				activeProject++;
				$('info'+activeProject).setStyle('left', infoWidth);
				$('work'+activeProject).setStyle('left', workWidth);				
				var infoNew = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });
				var workNew = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });
			
				infoNew.start(0);			
				infoOld.start(-infoWidth);
				workNew.start(0);
				workOld.start(-workWidth);

			}
			else
			{
				$('info1').setStyle('left', infoWidth);
				$('work1').setStyle('left', workWidth);
				
				var infoOld = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });				
				var workOld = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });				
				activeProject = 1;					
				var infoNew = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });
				var workNew = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });
				
				infoNew.start(0);					
				infoOld.start(-infoWidth);
				workNew.start(0);		
				workOld.start(-workWidth);				

			}	
		break;
		case 'prev':
			if(activeProject > 1)
			{
				var infoOld = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });
				var workOld = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });	
				activeProject--;
				$('info'+activeProject).setStyle('left', -infoWidth);
				$('work'+activeProject).setStyle('left', -workWidth);								
				var infoNew = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });
				var workNew = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });
		
				infoNew.start(0);			
				infoOld.start(infoWidth);
				workNew.start(0);
				workOld.start(workWidth);

			}
			else
			{
				$('info'+totalProjects).setStyle('left', -infoWidth);
				$('work'+totalProjects).setStyle('left', -workWidth);
				
				var infoOld = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });				
				var workOld = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });				
				activeProject = totalProjects;				
				var infoNew = new Fx.Style('info'+activeProject, 'left', { duration: dur, transition: trans });
				var workNew = new Fx.Style('work'+activeProject, 'left', { duration: dur, transition: trans });

				infoNew.start(0);
				infoOld.start(infoWidth);
				workOld.start(workWidth);								
				workNew.start(0);
			}		
		break;
	}
	return false;
}