$(function() {




		$('.lightbox').lightbox({
			fitToScreen: true
		});
		
		$.superbox();
	   
		    
		
		
		$(".lightbox-satodome").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/satodome1.png', title: "The interior of an immersive dome in which a 3D model of Montreal's 'Quartier des Spectacles' was integrated using Audioscape. <br/> &nbsp;" },
			        {url: 'http://www.jin-motion.com/images/satodome2.png', title: "The interior of an immersive dome in which a 3D model of Montreal's 'Quartier des Spectacles' was integrated using Audioscape.<br/> &nbsp;" },
			        {url: 'http://www.jin-motion.com/images/satodome3.jpg', title: 'Another image from the interior of a dome that demonstrates the integration of red/green stereoscopy, leaving the audience with the feeling of being inside a "virtual cube".  Other elements of this rendering include:<br/> <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- 3D sound mapping to 3D objects <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Sensors and clickable spaces<br/>&nbsp; ' },
			        {url: 'http://www.jin-motion.com/images/satodome4.jpg', title: 'Another image from the interior of a dome that demonstrates the integration of red/green stereoscopy, leaving the audience with the feeling of being inside a "virtual cube".  Other elements of this rendering include:<br/> <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- 3D sound mapping to 3D objects <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Sensors and clickable spaces<br/>&nbsp; '  }
		        ),
		        loopImages: true,
		        imageClickClose: false,
		        disableNavbarLinks: false
		    });
		
		
		$(".lightbox-cyclo").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/cycloSurround1.png', title: "Setup of large cylindrical projection screen and surround 8.1 sound for immersive performances at SAT Montreal. <br/> &nbsp;" },
			        {url: 'http://www.jin-motion.com/images/cycloSurround3.jpg', title: 'Setup of large cylindrical projection screen and surround 8.1 sound for immersive performances at SAT Montreal. <br/> &nbsp;' }
		        ),
		        loopImages: true,
		        imageClickClose: false,
		        disableNavbarLinks: false
		    });		
		    
		    
		    $(".lightbox-propulseArt").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/abjoy.png', title: "<h2>Abjoy Residency </h2>Sandrine Pitarque & Xavier Boyaud<br/> <br/> Simulation of distributed theater performance between 'Paris room' and 'Montreal room' with Propulseart software tools over Gigabit Local network. <br/> &nbsp;" },
			        {url: 'http://www.jin-motion.com/images/motifsUrbain.jpg', title: "<h2>Motifs Urbain Residency</h2> <br/> Stop motion movies over network &nbsp;" },
			        {url: 'http://www.jin-motion.com/images/pingPong.jpg', title: "<h2>Ping Pong Feedback</h2> <br/> A/V feedback over network<br/><br/>" }
		        ),
		        loopImages: true,
		        imageClickClose: false,
		        disableNavbarLinks: false
		    });
		    
		    
		$(".lightbox-nSlam").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/nslam.jpg', title: "Screenshot of Nslam, developed by Zach Zettel" }
		        ),
		        loopImages: true,
		        imageClickClose: false,
		        disableNavbarLinks: false
		    });		
		    
		
		$(".lightbox-pixelTango").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/pixelTango.png', title: "Screenshot of PixelTango" }
		        ),
		        loopImages: true,
		        imageClickClose: true,
		        disableNavbarLinks: false
		    });	
		
		
		$(".lightbox-VRhand").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/VRhand.png', title: "<h2>Virtual Reality Manipulation</h2>Experiment in manipulating 3D hand model with Virtual Reality glove <br/>&nbsp;" }
		        ),
		        loopImages: true,
		        imageClickClose: true,
		        disableNavbarLinks: false
		    });	
		    
		    
		$(".lightbox-roboHockey").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			    {url: 'http://www.jin-motion.com/images/JinHockey2.JPG', title: "Demonstration of HapticMaster setup and 3D hockey interface" },
			    {url: 'http://www.jin-motion.com/images/JinHockey3.JPG', title: "Demonstration of HapticMaster setup and 3D hockey interface" },
			    {url: 'http://www.jin-motion.com/images/JinHockey4.JPG', title: "Demonstration of HapticMaster setup and 3D hockey interface" },
			        {url: 'http://www.jin-motion.com/images/JinHockey.png', title: "Screenshot of software prototype version" }
		        ),
		        loopImages: true,
		        imageClickClose: true,
		        disableNavbarLinks: false
		    });	
		    
		  
		$(".lightbox-goldenCalf").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/goldenCalf1.png', title: 'Installation setup.  On the right side is the interactive 3D viewer. ' },
				{url: 'http://www.jin-motion.com/images/goldenCalf2.jpg', title: 'Closeup of the interactive 3D viewer.' }
		        ),
		        loopImages: true,
		        imageClickClose: true,
		        disableNavbarLinks: false
		    });	
		    
		    
		$(".lightbox-motionFX").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/image_react2.jpg'}
		        ),
		        loopImages: true,
		        imageClickClose: true,
		        disableNavbarLinks: false
		    });	


		$(".lightbox-biodome").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/biodome1.jpg'},
				{url: 'http://www.jin-motion.com/images/biodome2.jpg'},
				{url: 'http://www.jin-motion.com/images/biodome3.jpg'}
		        ),
		        loopImages: true,
		        imageClickClose: true,
		        disableNavbarLinks: false
		    });	
		    
		    
		    $(".lightbox-share").lightbox({
			    fitToScreen: true,
			    jsonData: new Array(
			        {url: 'http://www.jin-motion.com/images/Share1.jpg', title: 'Share event at Place des Arts, Montreal<br/>&nbsp;'},
				{url: 'http://www.jin-motion.com/images/Share2.jpg', title: 'Share event at Videographe<br/>&nbsp;'}
		        ),
		        loopImages: true,
		        imageClickClose: true,
		        disableNavbarLinks: false
		    });

	
		$.fn.getX = function() {
		return this.position().left + (this.width() / 2)		
		}
	
		$.fn.getY = function() {
		return this.position().top + (this.height() / 2)
		}



		$('.dot1').show();
		$('.dot2').show();
		$('.dot3').show();
		$('.dot4').show();
		$('.dot5').show();


		
		$('a.dot1').css({
			'position':'absolute',
			'left': $('img.dot1').getX() +23,
			'top': $('img.dot1').getY() - 10,
			'display':'inline'
			});

		$('a.dot2').css({
			'position':'absolute',
			'left': $('img.dot2').getX() +23,
			'top': $('img.dot2').getY() - 10,
			'display':'inline'
			});




		$('a.dot3').css({
			'position':'absolute',
			'left': $('img.dot3').getX() +23,
			'top': $('img.dot3').getY() - 10,
			'display':'inline'
			});
				
		$('a.dot4').css({
			'position':'absolute',
			'left': $('img.dot4').getX() +23,
			'top': $('img.dot4').getY() - 10,
			'display':'inline'
			});
		
		$('a.dot5').css({
			'position':'absolute',
			'left': $('img.dot5').getX() +23,
			'top': $('img.dot5').getY() - 10,
			'display':'inline'
			});
			


		
		
		onDot = 1;
		dot1T = $('.dot1').getY() - ($('.dot').height() / 2);
		dot1L = $('.dot1').getX() - ($('.dot').width() / 2);
		dot2T = $('.dot2').getY() - ($('.dot').height() / 2);
		dot2L = $('.dot2').getX() - ($('.dot').width() / 2);		
		dot3T = $('.dot3').getY() - ($('.dot').height() / 2);
		dot3L = $('.dot3').getX() - ($('.dot').width() / 2);
		dot4T = $('.dot4').getY() - ($('.dot').height() / 2);
		dot4L = $('.dot4').getX() - ($('.dot').width() / 2);
		dot5T = $('.dot5').getY() - ($('.dot').height() / 2);
		dot5L = $('.dot5').getX() - ($('.dot').width() / 2);

		$('img.dot1').css({
			'left': $('.dot1').getX() - ($('.dot').width() / 5),
			'top': $('.dot1').getY() - ($('.dot').height() / 5)
			});

		$('img.dot2').css({
			'left': $('.dot2').getX() - ($('.dot').width() / 5),
			'top': $('.dot2').getY() - ($('.dot').height() / 5)
			});

		$('img.dot3').css({
			'left': $('.dot3').getX() - ($('.dot').width() / 5),
			'top': $('.dot3').getY() - ($('.dot').height() / 5)
			});

		$('img.dot4').css({
			'left': $('.dot4').getX() - ($('.dot').width() / 5),
			'top': $('.dot4').getY() - ($('.dot').height() / 5)
			});

		$('img.dot5').css({
			'left': $('.dot5').getX() - ($('.dot').width() / 5),
			'top': $('.dot5').getY() - ($('.dot').height() / 5)
			});

		$('img.dot').css({
			'position':'absolute',
			'left': dot1L,
			'top': dot1T,
			'display':'inline'
			});
		
		$('#buttonImmersive').css("cursor", "pointer").bind('click', function () {
			hideFullText();
			$('#dot').animate(
				{
					left: dot2aL,
					top: dot2aT
				},
				400, 'linear', showInnerLines
			);
			$('div.pane').scrollTo($('#id2a'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			onDot = 21;
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
		});
		
		
		$('#buttonMultimedia').css("cursor", "pointer").bind('click', function () {
			hideFullText();
			$('#dot').animate(
				{
					left: dot2bL,
					top: dot2bT
				},
				400, 'linear', showInnerLines
			);	
			$('div.pane').scrollTo($('#id2b'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			onDot = 22;
			n2to2a.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
		});
		
		
		$('#buttonVR').css("cursor", "pointer").bind('click', function () {
			hideFullText();
			$('#dot').animate(
				{
					left: dot2cL,
					top: dot2cT
				},
				400, 'linear', showInnerLines
			);	
			$('div.pane').scrollTo($('#id2c'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			onDot = 23;
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2d.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
		});
		
		
		$('#buttonInteractive').css("cursor", "pointer").bind('click', function () {
			hideFullText();
			$('#dot').animate(
				{
					left: dot2dL,
					top: dot2dT
				},
				400, 'linear', showInnerLines
			);	
			$('div.pane').scrollTo($('#id2d'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			onDot = 24;
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
		});
		
		$('#buttonNetwork').css("cursor", "pointer").bind('click', function () {
			hideFullText();
			$('#dot').animate(
				{
					left: dot2eL,
					top: dot2eT
				},
				400, 'linear', showInnerLines
			);	
			$('div.pane').scrollTo($('#id2e'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			onDot = 25;
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "0");
		});
		
		
		function fade2(){
			n2to2a.animate({opacity: 0}, 300);
			n2to2b.animate({opacity: 0}, 300);
			n2to2c.animate({opacity: 0}, 300);
			n2to2d.animate({opacity: 0}, 300);
			n2to2e.animate({opacity: 0}, 300);
			
			if(typeof n2aTob != "undefined") {
				n2aTob.hide();
				n2bToc.hide();
				n2cTod.hide();
				n2dToe.hide();
			}
				
			
			
			$('.dot2DotA').fadeOut(500);
			$('.dot2DotB').fadeOut(500);		
			$('.dot2DotC').fadeOut(500);		
			$('.dot2DotD').fadeOut(500);		
			$('.dot2DotE').fadeOut(500);	

			$('a.dot2').fadeIn(500);
		}	
	
		

		function showInnerLines(){
			n2aTob = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2aL+offLeft, dot2aT+offTop).lineTo(dot2bL+offLeft, dot2bT+offTop);	
			n2bToc = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2bL+offLeft, dot2bT+offTop).lineTo(dot2cL+offLeft, dot2cT+offTop);	
			n2cTod = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2cL+offLeft, dot2cT+offTop).lineTo(dot2dL+offLeft, dot2dT+offTop);	
			n2dToe = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2dL+offLeft, dot2dT+offTop).lineTo(dot2eL+offLeft, dot2eT+offTop);	
		}
		
		function hideInnerLines(){
			n2aTob.hide();
			n2bToc.hide();
			n2cTod.hide();
			n2dToe.hide();
		}
	
					
		function hideFullText(){
			$('.fulltext').animate({opacity:0}, 100);
			//$('.menuItem').css("fontSize","250%");
		}
		
		function showFullText(){
			$('.fulltext').animate({opacity:1}, 1400);
			//$('.menuItem').animate({ "fontSize":"125%" }, 500);
			//$('.menuItem').css("fontSize","150%");
		}
			
			
		
		
		$('.dot1').css("cursor", "pointer").bind('click', function () {	
			hideFullText();	
			if ((onDot==21)|| (onDot==22)|| (onDot==23)|| (onDot==24)|| (onDot==25)){
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					200, 'linear', fade2
				);	
				$('div.pane').scrollTo($('#id2'), 500, {easing:'linear'});
				onDot=2;
			}			
			
			switch(onDot)
			{
			case 2:
				$('#dot').animate(
					{
						left:dot1L,
						top:dot1T
					},
					500, 'linear', fade2
				);
				$('div.pane').scrollTo($('#id1'), 500, {easing:'linear', onAfter: function(){showFullText();}});
				onDot = 1;
				break;	
			case 3:
				$('#dot').animate(
				{
					left:dot2L,
					top:dot2T
				},
				250,'linear'
				).animate(
					{
						left:dot1L,
						top:dot1T
					},
				250, 'linear'
				);
				$('div.pane').scrollTo($('#id1'), 500, {easing:'linear', onAfter: function(){showFullText();}});
				onDot = 1;
				break;
			case 4:
				$('#dot').animate(
				{
					left:dot3L,
					top:dot3T
				},
				170,'linear')
				.animate(
				{
					left:dot2L,
					top:dot2T
				},
				170,'linear'
				).animate(
					{
						left:dot1L,
						top:dot1T
					},
				170, 'linear'
				);
				$('div.pane').scrollTo($('#id1'), 610, {easing:'linear', onAfter: function(){showFullText();}});
				onDot = 1;
				break;
			case 5:
				$('#dot').animate(
				{
					left:dot4L,
					top:dot4T
				},
				130,'linear').				
				animate(
				{
					left:dot3L,
					top:dot3T
				},
				130,'linear')
				.animate(
				{
					left:dot2L,
					top:dot2T
				},
				130,'linear'
				).animate(
					{
						left:dot1L,
						top:dot1T
					},
				130, 'linear'
				);
				$('div.pane').scrollTo($('#id1'), 500,{easing:'linear', onAfter: function(){showFullText();}});
				onDot = 1;
				break;
			}
		});		
	
		$('.dot2DotA').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			switch(onDot)
			{
				case 2:				
				$('#dot').animate(
					{
						left: dot2aL,
						top: dot2aT
					},
					400, 'linear', showInnerLines
				);	
				break;
			
				case 22:
				$('#dot').animate(
					{
						left: dot2aL,
						top: dot2aT
					},
					400, 'linear'
				);	
				break;
				
				case 23:
				$('#dot').animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					200, 'linear'
				)
				.animate(
					{
						left: dot2aL,
						top: dot2aT
					},
					200, 'linear'
				);
				break;
				
				case 24:
				$('#dot').animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					100, 'linear'
				)
				
				.animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					100, 'linear'
				)
				.animate(
					{
						left: dot2aL,
						top: dot2aT
					},
					100, 'linear'
				);
				break;
				
				case 25:
				$('#dot')	.animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					75, 'linear'
				)				
				.animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					75, 'linear'
				)				
				.animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					75, 'linear'
				)
				.animate(
					{
						left: dot2aL,
						top: dot2aT
					},
					75, 'linear'
				);
				break;
				
			}

			$('div.pane').scrollTo($('#id2a'), 500,{easing:'linear', onAfter: function(){showFullText();}});
			n2to2a.attr("opacity", "1");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "0");
			n2to2e.attr("opacity", "0");

			onDot=21;
		});		
		
		$('.dot2DotB').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			switch(onDot)
			{
				case 2:
				$('#dot').animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					500, 'linear', showInnerLines
				);	
				break;
				
				case 21:
				$('#dot').animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					400, 'linear'
				);	
				break;
				
				case 23:
				$('#dot').animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					400, 'linear'
				);	
				break;
				
				case 24:
				$('#dot').animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					200, 'linear')				
					.animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					200, 'linear'
				);	
				break;
				
				case 25:
				$('#dot')	.animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					100, 'linear')					
					.animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					100, 'linear')				
					.animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					100, 'linear'
				);	
				break;
				
				
			}
			$('div.pane').scrollTo($('#id2b'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "1");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
			onDot=22;
		});
		
		$('.dot2DotC').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			switch(onDot)
			{
				case 2:				
				$('#dot').animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					400, 'linear', showInnerLines
				);	
				break;
				
				case 21:				
				$('#dot').animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					200, 'linear')							
					.animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					200, 'linear'
				);	
				break;
				
				case 22:				
				$('#dot').animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					200, 'linear'
				);	
				break;
				
				case 24:				
				$('#dot').animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					200, 'linear'
				);	
				break;
				
				case 25:				
				$('#dot').animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					200, 'linear')
					.animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					200, 'linear'
				);	
				break;
				
			}
			$('div.pane').scrollTo($('#id2c'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "1");
			n2to2d.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
			onDot=23;
		});
		
		$('.dot2DotD').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			switch(onDot)
			{
				case 2:	
				$('#dot').animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					400, 'linear', showInnerLines
				);	
				break;
				
				case 21:
				$('#dot').animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					100, 'linear')							
					.animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					100, 'linear')
					.animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					100, 'linear'
				);	
				break;
				
				case 22:
				$('#dot').animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					200, 'linear')
					.animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					200, 'linear'
				);	
				break;
				
				case 23:
				$('#dot').animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					200, 'linear'
				);	
				break;
				
				case 25:
				$('#dot').animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					200, 'linear'
				);	
				break;
			}	
				
			$('div.pane').scrollTo($('#id2d'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "1");
			n2to2e.attr("opacity", "0");
			onDot=24;
		});
		
		$('.dot2DotE').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			switch(onDot)
			{
				case 2:	
				$('#dot').animate(
					{
						left: dot2eL,
						top: dot2eT
					},
					400, 'linear', showInnerLines
				);	
				break;
				
				case 21:
				$('#dot').animate(
					{
						left: dot2bL,
						top: dot2bT
					},
					100, 'linear')							
					.animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					100, 'linear')
					.animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					100, 'linear')
					.animate(
					{
						left: dot2eL,
						top: dot2eT
					},
					100, 'linear'
				);	
				break;
				
				case 22:
				$('#dot').animate(
					{
						left: dot2cL,
						top: dot2cT
					},
					100, 'linear')
					.animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					100, 'linear')
					.animate(
					{
						left: dot2eL,
						top: dot2eT
					},
					100, 'linear'
				);	
				break;
				
				case 23:
				$('#dot').animate(
					{
						left: dot2dL,
						top: dot2dT
					},
					200, 'linear')
					.animate(
					{
						left: dot2eL,
						top: dot2eT
					},
					200, 'linear'
				);	
				break;
				
				case 24:
				$('#dot').animate(
					{
						left: dot2eL,
						top: dot2eT
					},
					200, 'linear'
				);	
				break;
			}
			$('div.pane').scrollTo($('#id2e'), 500, {easing:'linear', onAfter: function(){showFullText();}});
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "0");
			n2to2e.attr("opacity", "1");
			onDot=25;
		});
		
		
		$('.dot2').css("cursor", "pointer").bind('click', function () {		
			hideFullText();	
			if ((onDot==21)|| (onDot==22)|| (onDot==23)|| (onDot==24)|| (onDot==25)){
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					200, 'linear'
				);	
				$('div.pane').scrollTo($('#id2'), 500,{onAfter: function(){showFullText();}});
				hideInnerLines();
				n2to2a.attr("opacity", "1");
				n2to2b.attr("opacity", "1");
				n2to2c.attr("opacity", "1");
				n2to2d.attr("opacity", "1");
				n2to2e.attr("opacity", "1");
				onDot=2;
			}	
			switch(onDot)
			{
			case 1:
	
				
			//$('.fulltext').animate({opacity:0}, 100);
			$('#dot').animate(
				{
					left: dot2L,
					top: dot2T
				},
				500, 'linear', dot2SubNode
			);
			$('div.pane').scrollTo($('#id2'), 500, {onAfter: function(){showFullText();}});
			
			//$('div.pane').scrollTo($('#id2'), 500, {onAfter: function(){$('.fulltext').animate({opacity:1}, 1000); }});
				
			
			onDot = 2;
			break;
			
			case 3:
			$('#dot').animate(
				{
					left: dot2L,
					top: dot2T
				},
				500, 'linear', dot2SubNode
			);
			$('div.pane').scrollTo($('#id2'), 500, {onAfter: function(){showFullText();}});
			onDot = 2;
			break;
			
			case 4:
				$('#dot').animate(
				{
					left:dot3L,
					top:dot3T
				},
				250,'linear').
				animate(
				{
					left: dot2L,
					top: dot2T
				},
				250, 'linear', dot2SubNode
			);
			$('div.pane').scrollTo($('#id2'), 500, {onAfter: function(){showFullText();}});
			onDot = 2;	
			break;
			
			case 5:
				$('#dot').animate(
				{
					left:dot4L,
					top:dot4T
				},
				170,'linear').			
				animate(
				{
					left:dot3L,
					top:dot3T
				},
				170,'linear').
				animate(
				{
					left: dot2L,
					top: dot2T
				},
				170, 'linear', dot2SubNode
			);
			$('div.pane').scrollTo($('#id2'), 530, {onAfter: function(){showFullText();}});
			onDot = 2;	
			break;
			
			}
		});
		
		function dot2SubNode(){
			$('.dot2DotA').fadeIn('slow');
			$('.dot2DotB').fadeIn('slow');
			$('.dot2DotC').fadeIn('slow');
			$('.dot2DotD').fadeIn('slow');
			$('.dot2DotE').fadeIn('slow');	
			
			//dot2L = $('.dot2').getX() - ($('.dot').width() / 2);		
			dot2aT = $('.dot2DotA').getY() - ($('.dot').height() / 2);
			dot2aL = $('.dot2DotA').getX() - ($('.dot').width() / 2);
			dot2bT = $('.dot2DotB').getY() - ($('.dot').height() / 2);
			dot2bL = $('.dot2DotB').getX() - ($('.dot').width() / 2);
			dot2cT = $('.dot2DotC').getY() - ($('.dot').height() / 2);
			dot2cL = $('.dot2DotC').getX() - ($('.dot').width() / 2);
			dot2dT = $('.dot2DotD').getY() - ($('.dot').height() / 2);
			dot2dL = $('.dot2DotD').getX() - ($('.dot').width() / 2);
			dot2eT = $('.dot2DotE').getY() - ($('.dot').height() / 2);
			dot2eL = $('.dot2DotE').getX() - ($('.dot').width() / 2);	
			
			n2to2a = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2L+offLeft, dot2T+offTop).lineTo(dot2aL+offLeft, dot2aT+offTop);
			n2to2b = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2L+offLeft, dot2T+offTop).lineTo(dot2bL+offLeft, dot2bT+offTop);
			n2to2c = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2L+offLeft, dot2T+offTop).lineTo(dot2cL+offLeft, dot2cT+offTop);
			n2to2d = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2L+offLeft, dot2T+offTop).lineTo(dot2dL+offLeft, dot2dT+offTop);
			n2to2e = paper.path({stroke: "green", "stroke-width":5}).moveTo(dot2L+offLeft, dot2T+offTop).lineTo(dot2eL+offLeft, dot2eT+offTop);
			
			
			$('a.dot2DotA').css({
				'position':'absolute',
				'left': $('img.dot2DotA').getX() +23,
				'top': $('img.dot2DotA').getY() - 10
			});

			$('a.dot2DotB').css({
				'position':'absolute',
				'left': $('img.dot2DotB').getX() +23,
				'top': $('img.dot2DotB').getY() - 10
			});
			
			$('a.dot2DotC').css({
				'position':'absolute',
				'left': $('img.dot2DotC').getX() +23,
				'top': $('img.dot2DotC').getY() - 10
			});

			$('a.dot2DotD').css({
				'position':'absolute',
				'left': $('img.dot2DotD').getX() +23,
				'top': $('img.dot2DotD').getY() - 18
			});


			$('a.dot2DotE').css({
				'position':'absolute',
				'left': $('img.dot2DotE').getX() +23,
				'top': $('img.dot2DotE').getY() - 10
			});
			
			$('a.dot2').fadeOut(500);
		}
		
	
		$('.dot3').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			if ((onDot==21)|| (onDot==22)|| (onDot==23)|| (onDot==24)|| (onDot==25)){
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					200, 'linear', fade2
				);	
				$('div.pane').scrollTo($('#id2'), 500, {easing:'linear'});
				onDot=2;
			}	
			switch(onDot)
			{
				case 1:			
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					250,'linear')
					.animate(
					{
						left:dot3L,
						top:dot3T
					},
					250, 'linear'
					);
				$('div.pane').scrollTo($('#id3'), 500, {onAfter: function(){showFullText();}});
				onDot = 3;
				break;
				
				case 2:	
				$('#dot').animate(
					{
						left:dot3L,
						top:dot3T
					},
					500, 'linear', fade2
				);
				$('div.pane').scrollTo($('#id3'), 500, {onAfter: function(){showFullText();}});
				onDot = 3;
				break;
				
				case 4:	
				$('#dot').animate(
					{
						left:dot3L,
						top:dot3T
					},
					500, 'linear'
				);
				$('div.pane').scrollTo($('#id3'), 500, {onAfter: function(){showFullText();}});
				onDot = 3;
				break;
				case 5:	
				$('#dot').animate(
					{
						left:dot4L,
						top:dot4T
					},
					250, 'linear'
				).
				animate(
					{
						left:dot3L,
						top:dot3T
					},
					250, 'linear'
				);
				$('div.pane').scrollTo($('#id3'), 500, {onAfter: function(){showFullText();}});
				onDot = 3;
				break;
			}	
			
		});
		
		$('.dot4').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			if ((onDot==21)|| (onDot==22)|| (onDot==23)|| (onDot==24)|| (onDot==25)){
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					200, 'linear', fade2
				);	
				$('div.pane').scrollTo($('#id2'), 500, {easing:'linear'});
				onDot=2;
			}	
			switch(onDot)
			{
				case 1:			
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					170,'linear')
					.animate(
					{
						left:dot3L,
						top:dot3T
					},
					170, 'linear')
					.animate(
					{
						left:dot4L,
						top:dot4T
					},
					170, 'linear'
					);
				$('div.pane').scrollTo($('#id4'), 530, {onAfter: function(){showFullText();}});
				onDot = 4;
				break;
				
				case 2:	
				$('#dot').animate(
					{
						left:dot3L,
						top:dot3T
					},
					250, 'linear').
					animate(
					{
						left:dot4L,
						top:dot4T
					},
					250, 'linear', fade2
				);
				$('div.pane').scrollTo($('#id4'), 500, {onAfter: function(){showFullText();}});
				onDot = 4;
				break;
				
				case 3:
				$('#dot').animate(
					{
						left:dot4L,
						top:dot4T
					}, 500, 'linear');
				$('div.pane').scrollTo($('#id4'), 500,{ onAfter: function(){showFullText();}});
				onDot = 4;
				break;	
				
				case 5:
				$('#dot').animate(
					{
						left:dot4L,
						top:dot4T
					}, 500, 'linear');
				$('div.pane').scrollTo($('#id4'), 500, {onAfter: function(){showFullText();}});
				onDot = 4;
				break;					
			}	
			
		});
		
		$('#contactLink').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			$('#dot').animate(
				{
					left:dot4L,
					top:dot4T
				}, 250, 'linear').
				animate(
				{
					left:dot5L,
					top:dot5T
				}, 250, 'linear');
			$('div.pane').scrollTo($('#id5'), 500, {onAfter: function(){showFullText();}});
			onDot = 5;		
		});
		
		
		$('.dot5').css("cursor", "pointer").bind('click', function () {
			hideFullText();	
			if ((onDot==21)|| (onDot==22)|| (onDot==23)|| (onDot==24)|| (onDot==25)){
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					200, 'linear', fade2
				);	
				$('div.pane').scrollTo($('#id2'), 500, {easing:'linear'});
				onDot=2;
			}	
			switch(onDot)
			{
				case 1:			
				$('#dot').animate(
					{
						left:dot2L,
						top:dot2T
					},
					130,'linear')
					.animate(
					{
						left:dot3L,
						top:dot3T
					},
					130, 'linear')
					.animate(
					{
						left:dot4L,
						top:dot4T
					},
					130, 'linear'
					)
					.animate(
					{
						left:dot5L,
						top:dot5T
					},
					130, 'linear'
					);
				$('div.pane').scrollTo($('#id5'), 620, {onAfter: function(){showFullText();}});
				onDot = 5;
				break;
				
				case 2:	
				$('#dot').animate(
					{
						left:dot3L,
						top:dot3T
					},
					170, 'linear').
					animate(
					{
						left:dot4L,
						top:dot4T
					},
					170, 'linear').
					animate(
					{
						left:dot5L,
						top:dot5T
					},
					170, 'linear', fade2
				);
				$('div.pane').scrollTo($('#id5'), 530, {onAfter: function(){showFullText();}});
				onDot = 5;
				break;
				
				case 3:
				$('#dot').animate(
					{
						left:dot4L,
						top:dot4T
					}, 250, 'linear').
					animate(
					{
						left:dot5L,
						top:dot5T
					}, 250, 'linear');
				$('div.pane').scrollTo($('#id5'), 500, {onAfter: function(){showFullText();}});
				onDot = 5;
				break;	

				case 4:
				$('#dot').	animate(
					{
						left:dot5L,
						top:dot5T
					}, 500, 'linear');
				$('div.pane').scrollTo($('#id5'), 500, {onAfter: function(){showFullText();}});
				onDot = 5;
				break;	
			}	
			
		});		
		
		
		var offTop = 30;
		var offLeft = 30;
		var paper = Raphael("tree");

		
		var c = paper.path({stroke: "green", "stroke-width":7}).moveTo(dot1L+offLeft, dot1T+offTop).lineTo(dot2L+offLeft, dot2T+offTop);
		var c = paper.path({stroke: "green", "stroke-width":7}).moveTo(dot2L+offLeft, dot2T+offTop).lineTo(dot3L+offLeft, dot3T+offTop);
		var c = paper.path({stroke: "green", "stroke-width":7}).moveTo(dot3L+offLeft, dot3T+offTop).lineTo(dot4L+offLeft, dot4T+offTop);
		var c = paper.path({stroke: "green", "stroke-width":7}).moveTo(dot4L+offLeft, dot4T+offTop).lineTo(dot5L+offLeft, dot5T+offTop);
	
		var f = paper.path({stroke:"green", "stroke-width": 2}).moveTo(326, 203).lineTo(326,622).lineTo(953,622).lineTo(953,237).lineTo(700,237).lineTo(677,203).lineTo(326, 203);
                var f = paper.path({stroke:"green", "stroke-width": 2}).moveTo(13, 27).lineTo(787,27).moveTo(13,47).lineTo(787,47);

		
		
		$('#dreamMirror').css("cursor", "pointer").bind('click', function () {
			
			if ((onDot==2)||  (onDot==21)|| (onDot==22)|| (onDot==23)|| (onDot==24)|| (onDot==25))
			{
				if(onDot==2) showInnerLines();
				
				onDot = 24;
				$(".fulltext").animate({opacity:0}, 100);
				$("#dot").animate(
				{
					left: dot2dL,
					top: dot2dT
				},
				400, "linear"
			);
			$("div.pane").scrollTo($("#id2d"), 500, {easing:"linear", onAfter: function(){$(".fulltext").animate({opacity:1}, 1400);}});
			onDot = 24;
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2d.attr("opacity", "1");
			n2to2e.attr("opacity", "0");				
				
				
				
				
			} else {
				dot2SubNode();
			
			$(".fulltext").animate({opacity:0}, 100);
			$("#dot").animate(
				{
					left: dot2dL,
					top: dot2dT
				},
				400, "linear", showInnerLines
			);
			$("div.pane").scrollTo($("#id2d"), 500, {easing:"linear", onAfter: function(){$(".fulltext").animate({opacity:1}, 1400);}});
			onDot = 24;
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
			
			}
		});
			
		
			if (project=="DreamMirror")
			{
			dot2SubNode();
			$(".fulltext").animate({opacity:0}, 100);
			$("#dot").animate(
				{
					left: dot2dL,
					top: dot2dT
				},
				0, "linear", showInnerLines
			);
			$("div.pane").scrollTo($("#id2d"), 0, {easing:"linear", onAfter: function(){$(".fulltext").animate({opacity:1}, 1400);}});
			onDot = 24;
			n2to2a.attr("opacity", "0");
			n2to2b.attr("opacity", "0");
			n2to2c.attr("opacity", "0");
			n2to2e.attr("opacity", "0");
			}
	

});