// <![CDATA

	/**		
	 * Dynamix Portfolio, version 0.3 beta (Dynamix-0.3.0 b)
	 * (c) 2008 Amorphik / Marc Hottinger
	 *
	 * http://www.amorphik.com/
	 *
	 * This script may not be used, modified, copied, etc. without the
	 * autorisation of amorphik.
	 *
	 *
	 * This script is meant to be further used with a Content Management System (CMS) in the next release.
	 * 		
	 * --------------------------------------------
	 *
	 * The number of projects is related to the number of divs in the html page that is linked to this script.
	 * There must be a .src pointing to the image inside the preloading part and a css selector reference in the css file linked to the html page.
	 * To add a project:
	 * 1. add the div containing the thumbnail to the html page; pseudocode: (year+"p"+projectnumber)
	 * 2. add a reference to this div in the css file
	 * 3. add the preloading selector to the image of the thumbnail previously uploaded to the right directory
	 * 4. add the number of projects right below
	 * 5. start again from 1. to add more projects
	 */
	
	// --------------------------------------------
	// main fields
	// --------------------------------------------
	// compatiblity check
	var compatible;
	var animationsEnabled = true;
	var fadesEnabled = true;
	
	// number of projects for each year/space (projects that will be displayed)
	var numProjects = new Array();
	numProjects[0]		=  2; //2004
	numProjects[1]		=  6; //2005
	numProjects[2]		= 10; //2006
	numProjects[3]		=  6; //2007
	numProjects[4]		=  5; //2008
	numProjects[5]		=  0; //2009
	numProjects[6]		=  0; //2010
	numProjects[7]		=  0; //2011
	numProjects[8]		=  0; //2012
	
	// number of projects for some selected projects, which appear in space 0
  	var numPremiumProjects = 12; //selection of projects
	
	// number of projects for every space
	var totalNumProjects = numProjects[0]+numProjects[1]+numProjects[2]+numProjects[3]+numProjects[4]+numProjects[5]+numProjects[6]+numProjects[7]+numProjects[8];
  	
	// range of years taken into account
  	var yearsStart				= 2004;
  	var yearsEnd          		= 2012;
  	var numYears				= yearsEnd-yearsStart;
	
	// navigation variables
	var numLinks = new Array();
	numLinks['sceneNavigation'] = 6;
	numLinks['backStageNavigation'] = 4;

	
	// variables for the global postioning of the elements in the site
	var spaceDisplayed			= new Array();
	var contentOffset			= 120;	// contentOffset is determining a space reserved to the navigation
	var thumbsOffset			= 330;	// will determine the starting point in px of the thumbnails in each space (based on the spaceTop value)
	var markPremium				= contentOffset;				
     		
  	
  	// --------------------------------------------
	// script.aculo.us engine detection
	// --------------------------------------------
    // engine detection
 	var Engine = {
	
   		detect: function() {
        	var UA = navigator.userAgent;
        	this.isKHTML  = /Konqueror|Safari|KHTML/.test(UA);
        	this.isGecko  = (/Gecko/.test(UA) && !this.isKHTML);
        	this.isOpera  = /Opera/.test(UA);
        	this.isMSIE   = (/MSIE/.test(UA) && !this.isOpera);
        	this.isMSIE7  = this.isMSIE && !(/MSIE 6\./.test(UA) && !this.isOpera);
			
    	}
		
    }
	Engine.detect();
		
		
		// --------------------------------------------
		// compatibility definitions
		// --------------------------------------------
		// engine compatibility is defined here: this affects the effects triggered globally
		if (Engine.isGecko) {
			compatible = false;
		} else if (Engine.isMSIE && !Engine.isMSIE7) {
			compatible = true;
     	} else {
			compatible = true;
    	}
      	      	
      	// --------------------------------------------
		// window onload main init part
		// --------------------------------------------
		Event.observe(window, 'load', function() {
		
			initSite();
			
		});
		
		function initSite() {
		
			compatibilityManager();
			setSceneLayout();
			setBackStageLayout();
			initProjectsLoader();
			dhtmlHistory.initialize();
			dhtmlHistory.addListener(dxListener);
			if(debugDisplay) new Effect.Appear('debug');
			
		}
		
		function compatibilityManager() {
		
			if (compatible) {
			
				debug('browser compatible');
				
			} else if (!compatible) {
			
				debug('browser not compatible');
				
			}
			
		}
		
		
		window.dhtmlHistory.create({
			toJSON: function(o) {
                return Object.toJSON(o);
			}
			, fromJSON: function(s) {
                return s.evalJSON();
			}
		});

		var dxListener = function(newLocation, historyData) {
        //do something;
		}
		
		
		// --------------------------------------------
		// spaces content positionning inside the scene
		// --------------------------------------------
      	// loops defining the position for every thumbnail DIV's in each scene' spaces
      	function setSceneLayout() {
		
			// debug the number of projects
      		debug("total of projects: "+totalNumProjects);
			// positioning of the selection Marker
			$('selectionMarker').setStyle({ top: markPremium+'px',left:'450px', width:'100%', heigth:'55px' });
			$('selectionMarker_img').setStyle({ display:'block', width:'300px', height:'55px' });
			$('selectionMarker_map').setStyle({ display:'block', top:'0px',left:'0px', width:'700px', heigth:'550px' });

			// loop defining the position of the selected projects
     		for(var j = 1; j <= numPremiumProjects; j++) {
			
				$('p'+j).setStyle({ top: thumbsOffset+'px',left:'100px', width:'225px', heigth:'135px' });
				$('p'+j+'_img').setStyle({ display:'block', width:'225px', height:'135px' });
				
			}
			
			// loop defining the position of the normal projects (twins of some selected projects)
			for(var k = yearsStart; k <= yearsEnd; k++) {
			
				// variable defining the top of each space in px
				var spaceTop = (k-yearsStart+1)*screen.height; 
				// variable defining the starting original point of the DIV's in each space
				var pos = spaceTop+thumbsOffset;
				// variable defining the position of the title (mark) of each space
				var mark = spaceTop+contentOffset; 
				// debug the spaceTop positions
				debug(k+" @ "+spaceTop);
				
				// positioning of the spaces Markers
				$('m'+k).setStyle({ top: mark+'px',left:'450px', width:'100%', heigth:'55px' });
				$('m'+k+'_img').setStyle({ display:'block', width:'150px', height:'50px' });
				$('m'+k+'_map').setStyle({ top:'0px',left:'0px', width:'700px', heigth:'550px' });
				// if there are projects in a particular year, then this loop will position the projects DIV's
				if(numProjects != 0) {
				
					for(var l = 1; l <= numProjects[k-2004]; l++) {						
						$('p'+l+'_'+k).setStyle({ top: pos+'px',left:'100px', width:'225px', heigth:'135px' });
						$('p'+l+'_'+k+'_img').setStyle({ display:'block', width:'225px', height:'135px' });
					}
					
				} else {
				
					debug("year "+k+" contains no projects");
					
				}
				
			}
			
			displayProjects(0);
     	}
		
		// --------------------------------------------
		// spaces content positionning inside the backStage
		// --------------------------------------------
		function setBackStageLayout() {
			
			
			$('backStage').setStyle({ left: screen.width+'px' });
			$('backStageNavigation').setStyle({ left: screen.width+50+'px' });
			
			for(var i = 1; i <= numLinks['backStageNavigation']; i++) {
				$('page'+i).setStyle({ top: screen.height*(parseInt(i)-1)+'px', left: '0px', width: screen.width+'px', height: screen.height+'px' });
				if(verboseMode == 'high') debug('page'+i+' @ '+$('page'+i).style.top+', width: '+$('page'+i).style.width+', height: '+$('page'+i).style.height);
			}
		
		}
      	
		// --------------------------------------------
		// scene to backStage switch
		// --------------------------------------------
		function switchBackStageScene(targetSpace) {
		
			var shown = (targetSpace == 0) ? true : false;
			var backStageTop = $('backStage').getStyle('top');
			var sceneTop = $('scene').getStyle('top');
			var backStageParam = backStageTop.split('px');
			var sceneParam = sceneTop.split('px');
			var backStagePosY = backStageParam[0];
			var scenePosY = sceneParam[0];
			
			if(verboseMode != 'high') debug('shown: '+shown+', scenePosY: '+scenePosY+', backStagePosY: '+backStagePosY);
			
			if(!shown) new Effect.Fade('more', { delay: 0, duration: 0.3 });
			if(shown) new Effect.Appear('more', { delay: 0, duration: 0.3 });
							
			new Effect.Parallel([
					new Effect.Move('backStage', { sync: true, x:-(targetSpace*screen.width)+screen.width, y: backStagePosY, mode: 'absolute' }), 
					new Effect.Move('scene', { sync: true, x:-(targetSpace*screen.width)-400, y: scenePosY, mode: 'absolute' }),
					new Effect.Move('backStageNavigation', { sync: true, x:-(targetSpace*screen.width)+screen.width, y: 0, mode: 'absolute' }),
					new Effect.Move('sceneNavigation', { sync: true, x:-(targetSpace*screen.width), y: 0, mode: 'absolute' })
				], { 
					duration: 0.8,
					delay: 0
				}
			);
			debug('backStage @ '+$('backStage').style.left);
			
		}
		
		// --------------------------------------------
		// spaces navigation for the scene
		// --------------------------------------------
		function moveScene(targetSpace) {
			var targetHead = 'sceneNavigation';
			new Effect.Move('scene',{ x:-400, y:-(targetSpace*screen.height), delay:0,  duration:0.8, mode: 'absolute', afterFinish: function() { moveSceneHead(targetSpace, targetHead); if (!spaceDisplayed[targetSpace]) displayProjects(targetSpace); } } );
			//debug($('scene').style.top);
			
		}
		
		// --------------------------------------------
		// spaces navigation for the backStage
		// --------------------------------------------
		function moveBackStage(targetSpace) {
			var targetHead = 'backStageNavigation';
			new Effect.Move('backStage',{ x:0, y:-(targetSpace*screen.height), delay:0,  duration:0.8, mode: 'absolute', afterFinish: function() { moveBackStageHead(targetSpace, targetHead); } } );
			//debug($('backStage').style.top);
			
		}
		
		
		// String targetHead, int numLinks[targetHead]
		// array targetHead [array linkOnHold, array linkDisplayed]
		
		// --------------------------------------------
		// links status
		// --------------------------------------------
		
		var sceneLinkOnHold = new Array();
		var sceneLinkDisplayed = new Array();
		var sceneInit = false;
		
		function moveSceneHead(targetSpace, targetHead) {
			
			if (!sceneInit) {
				var initBar = $$('#'+targetHead+' > #sceneSwitch0 > #sceneBar0');
				new Effect.Move(initBar[0], { x: 0, y: -3, delay: 0, duration: 0.2 });
				sceneInit = true;
			}
			for(i = 0; i < numLinks[targetHead]; i++) {
				var bar = $$('#'+targetHead+' > #sceneSwitch'+i+' > #sceneBar'+i);
				sceneLinkOnHold[i] = (targetSpace == i) ? true : false;
				if(verboseMode == 'high') debug('space to display'+i+': '+sceneLinkOnHold[i]);
				
				if(sceneLinkOnHold[i] && !sceneLinkDisplayed[i]) {
					sceneLinkDisplayed[i] = true;
					new Effect.Move(bar[0], { x: 0, y: 3, delay: 0, duration: 0.2 });
				} else if(!sceneLinkOnHold[i] && sceneLinkDisplayed[i]) {
					sceneLinkDisplayed[i] = false;
					new Effect.Move(bar[0], { x: 0, y: -3, delay: 0, duration: 0.2 });
				}
				
			}
			
		}
		
		var backStageLinkOnHold = new Array();
		var backStageLinkDisplayed = new Array();
		var backStageInit = false;
		
		function moveBackStageHead(targetSpace, targetHead) {
			
			if (!backStageInit) {
				var initBar = $$('#'+targetHead+' > #backStageSwitch0 > #backStageBar0');
				new Effect.Move(initBar[0], { x: 0, y: -3, delay: 0, duration: 0.2 });
				backStageInit = true;
			}
			for(i = 0; i < numLinks[targetHead]; i++) {
				var bar = $$('#'+targetHead+' > #backStageSwitch'+i+' > #backStageBar'+i);
				backStageLinkOnHold[i] = (targetSpace == i) ? true : false;
				if(verboseMode == 'high') debug('space to display'+i+': '+backStageLinkOnHold[i]);
				
				if(backStageLinkOnHold[i] && !backStageLinkDisplayed[i]) {
					backStageLinkDisplayed[i] = true;
					new Effect.Move(bar[0], { x: 0, y: 3, delay: 0, duration: 0.2 });
				} else if(!backStageLinkOnHold[i] && backStageLinkDisplayed[i]) {
					backStageLinkDisplayed[i] = false;
					new Effect.Move(bar[0], { x: 0, y: -3, delay: 0, duration: 0.2 });
				}
				
			}
			
		}
		
		// --------------------------------------------
		// projects info displaying
		// --------------------------------------------
		var info = new Array();
		//info['pnone_none'] = '';
		info['p5_2005'] = '<p>: photographs | woodrocks | two 5Mp color photographs</p>';
		info['p8_2006'] = '<p>: photographs | \"Around Me\" | seven 24x36 B/W photographs</p>';
		info['p6_2005'] = '<p>: photographs | Mirador | five 6Mp color photographs</p>';
		info['p2_2005'] = '<p>: photographs | paléo | seven 24x36 </p>';
		info['p1_2005'] = '<p>: photographs | maisons infinies | four 5Mp color photographs</p>';
		info['p4_2005'] = '<p>: motion graphics | swiss expo | a 30" motion graphics video</p>';
		info['p6_2007'] = '<p>: video | supercopter | two 1\' HD video</p>';
		info['p7_2007'] = '<p>: interactive | Mare Stellaris | interactive installation</p>';
		
		function projectInfo(pNum,pYear) {
		
			$('projectInfo').update(info['p'+pNum+'_'+pYear]);

		}
		
		/*
		var shown = false;
		var onEffect = false;
		var lastID = null;
		
		function projectInfo(pNum,pYear) {
			debug('attempt to update div content');

			var dur = 0.3;
			var del = 0;
			var curID = pNum+''+pYear;
			if(!shown) {
				//alert(curID);
				if(!onEffect) {
					onEffect = true;
					shown = true;
					$('projectInfo').update(info['p'+pNum+'_'+pYear]);
					$('projectInfo').innerHTML;
					new Effect.Appear('projectInfo', { duration: dur, delay: del, afterFinish: function() { onEffect = false; lastID = curID; } });
				}
			} else if (shown) {
				if (!onEffect) {
					onEffect = true
					//shown = false;
					new Effect.Fade('projectInfo', { duration: dur, delay: del , afterFinish: function() { $('projectInfo').update(info['p'+pNum+'_'+pYear]); $('projectInfo').innerHTML; } });
					
					new Effect.Appear('projectInfo', { duration: 3, delay: 4, afterFinish: function() { onEffect = false; } });
				}
			}
		}
		*/
		
		// --------------------------------------------
		// spaces content animations
		// --------------------------------------------
      	// function that expands the thumbnails for the selected projects
		function displayProjects(myspace) {
		
			var d = 2; //sets the default delay
			var D = .5; //sets the default duration of the effects
			var xO = 300; //offsetX sets the ending point on the X axis
			var yO = 0; //offsetY sets the ending point on the Y axis
			
			spaceDisplayed[myspace] = true;
			
			// selection of projects
			if (myspace == 0) {
			
				new Effect.Move('p1' ,{ x:xO+120, y:yO- 45 +65, delay:d+.6,  duration:D});
				new Effect.Move('p2' ,{ x:xO+185, y:yO+ 30 +65, delay:d+.55, duration:D});
				new Effect.Move('p3' ,{ x:xO+230, y:yO+130 +65, delay:d+.5,  duration:D});
				new Effect.Move('p4' ,{ x:xO+210, y:yO-120 +65, delay:d+.5,  duration:D});
				new Effect.Move('p5' ,{ x:xO+350, y:yO+ 30 +65, delay:d+.2,  duration:D});
				new Effect.Move('p6' ,{ x:xO+310, y:yO-195 +65, delay:d+.4,  duration:D});
				new Effect.Move('p7' ,{ x:xO+330, y:yO- 70 +65, delay:d+.3,  duration:D});
				new Effect.Move('p8' ,{ x:xO+185, y:yO-250 +65, delay:d+.4,  duration:D});
				new Effect.Move('p9' ,{ x:xO+460, y:yO- 50 +65, delay:d+.1,  duration:D});
				new Effect.Move('p10',{ x:xO+430, y:yO-170 +65, delay:d+.2,  duration:D});
				new Effect.Move('p11',{ x:xO+ 50, y:yO-180 +65, delay:d+.4,  duration:D});
				new Effect.Move('p12',{ x:xO+ 90, y:yO+ 80 +65, delay:d+.6,  duration:D});
				if(verboseMode == 'low') debug('expand space 0');
				
			}
			// 2004 
			if (myspace == 1) {
			
				new Effect.Move('p1_2004' ,{ x:xO+120, y:yO- 95, delay:0+.6,  duration:D});
				new Effect.Move('p2_2004' ,{ x:xO+185, y:yO- 20, delay:0+.55, duration:D});
				if(verboseMode == 'low') debug('expand space 1');
				
			}
			// 2005
			if (myspace == 2) {
			
				new Effect.Move('p1_2005' ,{ x:xO+240, y:yO- 140, delay:0+.5,  duration:D});
				new Effect.Move('p2_2005' ,{ x:xO+310, y:yO- 80, delay:0+.4, duration:D});
				new Effect.Move('p3_2005' ,{ x:xO+140, y:yO- 50, delay:0+.45,  duration:D});
				new Effect.Move('p4_2005' ,{ x:xO+380, y:yO+ 10, delay:0+.4, duration:D});
				new Effect.Move('p5_2005' ,{ x:xO+220, y:yO+ 50, delay:0+.55,  duration:D});
				new Effect.Move('p6_2005' ,{ x:xO+110, y:yO- 140, delay:0+.55,  duration:D});
				if(verboseMode == 'low') debug('expand space 2');

			}
			// 2006
			if (myspace == 3) {
			
				new Effect.Move('p1_2006' ,{ x:xO+160, y:yO- 90, delay:0+.6,  duration:D});
				new Effect.Move('p2_2006' ,{ x:xO+230, y:yO- 30, delay:0+.55, duration:D});
				new Effect.Move('p3_2006' ,{ x:xO+100, y:yO+ 10, delay:0+.4,  duration:D});
				new Effect.Move('p4_2006' ,{ x:xO+300, y:yO+ 60, delay:0+.3, duration:D});
				new Effect.Move('p5_2006' ,{ x:xO+140, y:yO+ 110, delay:0+.6,  duration:D});
				new Effect.Move('p6_2006' ,{ x:xO+170, y:yO- 200, delay:0+.55, duration:D});
				//new Effect.Move('p7_2006' ,{ x:xO+290, y:yO+ 140, delay:0+.4,  duration:D});
				new Effect.Move('p8_2006' ,{ x:xO+310, y:yO- 150, delay:0+.3, duration:D});
				new Effect.Move('p9_2006' ,{ x:xO+350, y:yO- 70, delay:0+.3,  duration:D});
				new Effect.Move('p10_2006' ,{ x:xO+410, y:yO- 20, delay:0+.2, duration:D});
				if(verboseMode == 'low') debug('expand space 3');
				
			}
			// 2007
			if (myspace == 4) {
			
				new Effect.Move('p1_2007',{ x:xO+180, y:yO-150, delay:0+.6,  duration:D});
				new Effect.Move('p2_2007',{ x:xO+135, y:yO-60, delay:0+.4,  duration:D});
				new Effect.Move('p3_2007',{ x:xO+260, y:yO-100, delay:0+.5,  duration:D});
				new Effect.Move('p4_2007',{ x:xO+170, y:yO+30, delay:0+.3,  duration:D});
				new Effect.Move('p5_2007',{ x:xO+320, y:yO-20, delay:0+.25,  duration:D});
				//new Effect.Move('p6_2007',{ x:xO+310, y:yO+80, delay:0+.25,  duration:D});
				if(verboseMode == 'low') debug('expand space 4');
				
			}
			// 2008
			if (myspace == 5) {
			
				new Effect.Move('p1_2008',{ x:xO+110, y:yO-90, delay:0+.6,  duration:D});
				new Effect.Move('p2_2008',{ x:xO+300, y:yO+0, delay:0+.4,  duration:D});
				new Effect.Move('p3_2008',{ x:xO+160, y:yO+0, delay:0+.5,  duration:D});
				new Effect.Move('p4_2008',{ x:xO+230, y:yO-85, delay:0+.3,  duration:D});
				new Effect.Move('p5_2008',{ x:xO+290, y:yO-150, delay:0+.5,  duration:D});
				if(verboseMode == 'low') debug('expand space 5');
				
			}
			// 2009
			if (myspace == 6) {
			
				if(verboseMode == 'low') debug('expand space 6');
				
			}
			// 2010
			if (myspace == 7) {
			
				if(verboseMode == 'low') debug('expand space 7');
				
			}
			// 2011
			if (myspace == 8) {
			
				if(verboseMode == 'low') debug('expand space 8');
				
			}
			// 2012
			if (myspace == 9) {
			
				if(verboseMode == 'low') debug('expand space 9');
				
			}
		}
		
		// --------------------------------------------
		// debug console
		// --------------------------------------------
		// debug display //
		function debug(txt) {
		
			if(debugDisplay) {
				new Draggable('debug');
				new Insertion.Top('debug', "<p>oxmox:~ ox$ "+txt+"</p><br />");
				
			}
			
		}

// ]]>