<file_sep>var viewDivision = {x1: 60/75, y1: 0, x2: 60/75, y2: .875}
var topBarBottomLine = {x1: 0, y1: 3/75, x2: viewDivision.x1, y2: 3/75}
var videoRect = {x: 2/75, y: .55/75, w: 56/75, h: 25.04/75}
/*
var view1 = {x: viewDivision.x1 + 1/75, y: 2/75, w: 11.375/75, h: 5.075/75}
var view2 = {x: viewDivision.x1 + 1/75, y: 10.8/75, w: 11.375/75, h: 5.075/75}
var view3 = {x: viewDivision.x1 + 1/75, y: 17.6/75, w: 11.375/75, h: 5.075/75}
var view4 = {x: viewDivision.x1 + 1/75, y: 24.4/75, w: 11.375/75, h: 5.075/75}
var view5 = {x: viewDivision.x1 + 1/75, y: 31.2/75, w: 13/75, h: 5.8/75}
*/

// thumbnails
var view1 = {x: viewDivision.x1 + 1/75, y: .55/75, w: 11.375/75, h: 5.075/75}
var view2 = {x: viewDivision.x1 + 1/75, y: 6.625/75, w: 11.375/75, h: 5.075/75}
var view3 = {x: viewDivision.x1 + 1/75, y: 12.8/75, w: 11.375/75, h: 5.075/75}
var view4 = {x: viewDivision.x1 + 1/75, y: 18.875/75, w: 11.375/75, h: 5.075/75}
var view5 = {x: viewDivision.x1 + 1/75, y: 31.2/75, w: 13/75, h: 5.8/75}

// thumbnail rotation trackers
var piview1 = {x: viewDivision.x1 - 9/75, y: 0/75, w: 11.375/75, h: 5.075/75}
var piview2 = {x: viewDivision.x1 - 9/75, y: 6.075/75, w: 11.375/75, h: 5.075/75}
var piview3 = {x: viewDivision.x1 - 9/75, y: 12.25/75, w: 11.375/75, h: 5.075/75}
var piview4 = {x: viewDivision.x1 - 9/75, y: 18.325/75, w: 11.375/75, h: 5.075/75}

var bottomBarTopLine = {x1: 0, y1: 35.05/75, x2: viewDivision.x1, y2: 35.05/75}
var bottomBarTopLine2 = {x1: 0, y1: videoRect.y + videoRect.h + 6/75, x2: viewDivision.x1, y2: videoRect.y + videoRect.h + 6/75}
var rewindButtonRect = {x: 18/75, y: bottomBarTopLine.y1 - 5/75, w: 6/75, h: 2.5/75}
var pausePlayButtonRect = {x: rewindButtonRect.x + 8/75, y: bottomBarTopLine.y1 - 5/75, w: 6/75, h: 2.5/75}
var fastForwardButtonRect = {x: rewindButtonRect.x + 16/75, y: bottomBarTopLine.y1 - 5/75, w: 6/75, h: 2.5/75}
var timeDot = {x: 2.5/75, y: bottomBarTopLine2.y1, r: .5/75, sAngle: 0, eAngle: 2}

// timeline markers for diff. duration videos
var vid1dur = {x: .425, y: bottomBarTopLine2.y1, w: .25/75, h: 1/75}
var vid2dur = {x: .417, y: bottomBarTopLine2.y1, w: .25/75, h: 1/75}
var vid3dur = {x: .415, y: bottomBarTopLine2.y1, w: .25/75, h: 1/75}

// canvas objects on the map
var locationPoint1 = {x: .5, y: bottomBarTopLine2.y1, w: 2/75, h: 2/75}
var locationPoint2 = {x: .45, y: bottomBarTopLine2.y1, w: 2/75, h: 2/75}
var locationPoint3 = {x: .5, y: bottomBarTopLine2.y1, w: 2/75, h: 2/75}
var locationPoint4 = {x: .54, y: bottomBarTopLine2.y1, w: 2/75, h: 2/75}

// buttons
var timeBarBarDistance = 5/75;
var belowTimeDotLine = {x1: 0, y1: timeDot.y + 1/75, x2: viewDivision.x1, y2: timeDot.y + 1/75}
var aboveBottomBarLine = {x1: 0, y1: videoRect.y + videoRect.h + timeBarBarDistance, x2: bottomBarTopLine.x2, y2: videoRect.y + videoRect.h + timeBarBarDistance}
var bottomBarButtonRect1 = {x: bottomBarTopLine.x2 * 0, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
var bottomBarButtonRect2 = {x: bottomBarTopLine.x2 * 1/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
var bottomBarButtonRect3 = {x: bottomBarTopLine.x2 * 2/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
var bottomBarButtonRect4 = {x: bottomBarTopLine.x2 * 3/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
var bottomBarButtonRect5 = {x: bottomBarTopLine.x2 * 4/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
var bottomBarButtonRect6 = {x: bottomBarTopLine.x2 * 5/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
var bottomBarBottomLine = {x1: 0, y1: bottomBarTopLine.y1 + 2.5/75, x2: bottomBarTopLine.x2, y2: bottomBarTopLine.y1 + 2.5/75}
var leftCoverRect = {x: 0, y: 0, w: viewDivision.w, h: bottomBarBottomLine.y1 - .5};
var bottomBarDivision1 = {x1: bottomBarTopLine.x2 * 1/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 1/6, y2: bottomBarBottomLine.y1}
var bottomBarDivision2 = {x1: bottomBarTopLine.x2 * 2/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 2/6, y2: bottomBarBottomLine.y1}
var bottomBarDivision3 = {x1: bottomBarTopLine.x2 * 3/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 3/6, y2: bottomBarBottomLine.y1}
var bottomBarDivision4 = {x1: bottomBarTopLine.x2 * 4/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 4/6, y2: bottomBarBottomLine.y1}
var bottomBarDivision5 = {x1: bottomBarTopLine.x2 * 5/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 5/6, y2: bottomBarBottomLine.y1}
var playLine1 = {x1: pausePlayButtonRect.x + 2.5/75, y1: pausePlayButtonRect.y + .375/75, x2: pausePlayButtonRect.x + 2.5/75, y2: pausePlayButtonRect.y + 2.125/75}
var playLine2 = {x1: pausePlayButtonRect.x + 2.5/75, y1: pausePlayButtonRect.y + .375/75, x2: pausePlayButtonRect.x + 4/75, y2: pausePlayButtonRect.y + 1.25/75}
var playLine3 = {x1: pausePlayButtonRect.x + 4/75, y1: pausePlayButtonRect.y + 1.25/75, x2: pausePlayButtonRect.x + 2.5/75, y2: pausePlayButtonRect.y + 2.125/75}
var playLine4 = {x1: pausePlayButtonRect.x + 2.125/75, y1: pausePlayButtonRect.y + .375/75, x2: pausePlayButtonRect.x + 2.125/75, y2: pausePlayButtonRect.y + 2.125/75}
var fastForwardLine1 = {x1: fastForwardButtonRect.x + 2.375/75, y1: fastForwardButtonRect.y + .375/75, x2: fastForwardButtonRect.x + 2.375/75, y2: fastForwardButtonRect.y + 2.125/75}
var fastForwardLine2 = {x1: fastForwardButtonRect.x + 2.375/75, y1: fastForwardButtonRect.y + .375/75, x2: fastForwardButtonRect.x + 3.875/75, y2: fastForwardButtonRect.y + 1.25/75}
var fastForwardLine3 = {x1: fastForwardButtonRect.x + 3.875/75, y1: fastForwardButtonRect.y + 1.25/75, x2: fastForwardButtonRect.x + 2.375/75, y2: fastForwardButtonRect.y + 2.125/75}
var rewindLine1 = {x1: rewindButtonRect.x + 3.625/75, y1: rewindButtonRect.y + .375/75, x2: rewindButtonRect.x + 3.625/75, y2: rewindButtonRect.y + 2.125/75}
var rewindLine2 = {x1: rewindButtonRect.x + 3.625/75, y1: rewindButtonRect.y + .375/75, x2: rewindButtonRect.x + 2.125/75, y2: rewindButtonRect.y + 1.25/75}
var rewindLine3 = {x1: rewindButtonRect.x + 2.125/75, y1: rewindButtonRect.y + 1.25/75, x2: rewindButtonRect.x + 3.625/75, y2: rewindButtonRect.y + 2.125/75}
var pauseRect1 = {x: pausePlayButtonRect.x + 2.375/75, y: pausePlayButtonRect.y + .375/75, w: .375/75, h: 1.75/75}
var pauseRect2 = {x: pausePlayButtonRect.x + 3.25/75, y: pausePlayButtonRect.y + .375/75, w: .375/75, h: 1.75/75}
//var logoRect = {x: viewDivision.x1 + 4/75, y: topBarBottomLine.y1 - 2.375/75, w: 7/75, h: 2/75}
var logoRect = {x: 18/75, y: bottomBarTopLine.y1 - 5/75, w: 10.5/75, h: 3/75}
var otherLogoRect = {x: logoRect.x - 1, y: topBarBottomLine.y1 - 2.375/75, w: 7/75, h: 2/75}
var mapHeight = 1 - bottomBarBottomLine.y1
var mapRect = {x: 0, y: bottomBarBottomLine.y1 - .17, w: viewDivision.x1, h: mapHeight}
var timeLineRect = {x: 0, y: aboveBottomBarLine.y1 - 1.5, w: 60/75, h: 1/75}
var rightCoverRect = {x: viewDivision.x1, y: viewDivision.y1, w: 1 - viewDivision.x1, h: 2}
var visibleMapRect = {x: 0, y: bottomBarBottomLine.y1, w: viewDivision.x1, h: 1 - bottomBarBottomLine.y1}
// icons over thumbs
var cameraMarker1 = {x: viewDivision.x1 + 13/75, y: 3.55/75, w: 2/75, h: 2/75}
var cameraMarker2 = {x: viewDivision.x1 + 13/75, y: 9.625/75, w: 2/75, h: 2/75}
var cameraMarker3 = {x: viewDivision.x1 + 13/75, y: 15.8/75, w: 2/75, h: 2/75}
var cameraMarker4 = {x: viewDivision.x1 + 13/75, y: 21.875/75, w: 2/75, h: 2/75}
//click objects on normal video
var directionalMarker1 = {x: 2/75 + .26, y: 4/75 + .14, w: 1.5/75, h: 1.5/75}
var directionalMarker2 = {x: 2/75 + .585, y: 4/75 + .16, w: 1.5/75, h: 1.5/75}
var directionalMarker3 = {x: 2/75 + .005, y: 4/75 + .14, w: 1.5/75, h: 1.5/75}

var noRotateMarker = {x: 2/75 + .65, y: 4/75 - .02, w: 5/75, h: 2.5/75}
// refreshing object sizes
function refreshPieces(){
	bottomBarButtonRect1 = {x: bottomBarTopLine.x2 * 0, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
	bottomBarButtonRect2 = {x: bottomBarTopLine.x2 * 1/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
	bottomBarButtonRect3 = {x: bottomBarTopLine.x2 * 2/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
	bottomBarButtonRect4 = {x: bottomBarTopLine.x2 * 3/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
	bottomBarButtonRect5 = {x: bottomBarTopLine.x2 * 4/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
	bottomBarButtonRect6 = {x: bottomBarTopLine.x2 * 5/6, y: bottomBarTopLine.y1, w: bottomBarTopLine.x2 * 1/6, h: 2.5/75}
	view1 = {x: viewDivision.x1 + 1/75, y: .55/75, w: 11.375/75, h: 5.075/75}
	view2 = {x: viewDivision.x1 + 1/75, y: 6.625/75, w: 11.375/75, h: 5.075/75}
	view3 = {x: viewDivision.x1 + 1/75, y: 12.8/75, w: 11.375/75, h: 5.075/75}
	view4 = {x: viewDivision.x1 + 1/75, y: 18.875/75, w: 11.375/75, h: 5.075/75}
	view5 = {x: viewDivision.x1 + 1/75, y: 31.2/75, w: 13/75, h: 5.8/75}
	view6 = {x: viewDivision.x1 + 1/75, y: 38/75, w: 13/75, h: 5.8/75}
	view7 = {x: viewDivision.x1 + 1/75, y: 44.8/75, w: 13/75, h: 5.8/75}
	view8 = {x: viewDivision.x1 + 1/75, y: 51.6/75, w: 13/75, h: 5.8/75}
	
	piview1 = {x: viewDivision.x1 - 9/75, y: 0/75, w: 11.375/75, h: 5.075/75}
	piview2 = {x: viewDivision.x1 - 9/75, y: 6.075/75, w: 11.375/75, h: 5.075/75}
	piview3 = {x: viewDivision.x1 - 9/75, y: 12.25/75, w: 11.375/75, h: 5.075/75}
	piview4 = {x: viewDivision.x1 - 9/75, y: 18.325/75, w: 11.375/75, h: 5.075/75}
	/*
	cameraMarker1 = {x: viewDivision.x1 + 1.5/75, y: 4.5/75, w: 1.5/75, h: 1.5/75}
	cameraMarker2 = {x: viewDivision.x1 + 1.5/75, y: 11.3/75, w: 1.5/75, h: 1.5/75}
	cameraMarker3 = {x: viewDivision.x1 + 1.5/75, y: 18.1/75, w: 1.5/75, h: 1.5/75}
	cameraMarker4 = {x: viewDivision.x1 + 13/75, y: 27.9/75, w: 2/75, h: 2/75}
	*/
	cameraMarker1 = {x: viewDivision.x1 + 13/75, y: 3.55/75, w: 2/75, h: 2/75}
	cameraMarker2 = {x: viewDivision.x1 + 13/75, y: 9.625/75, w: 2/75, h: 2/75}
	cameraMarker3 = {x: viewDivision.x1 + 13/75, y: 15.8/75, w: 2/75, h: 2/75}
	cameraMarker4 = {x: viewDivision.x1 + 13/75, y: 21.875/75, w: 2/75, h: 2/75}
	
	directionalMarker1 = {x: 2/75 + .26, y: 4/75 + .14, w: 1.5/75, h: 1.5/75}
	directionalMarker2 = {x: 2/75 + .585, y: 4/75 + .16, w: 1.5/75, h: 1.5/75}
	directionalMarker3 = {x: 2/75 + .005, y: 4/75 + .14, w: 1.5/75, h: 1.5/75}
	
	noRotateMarker = {x: 2/75 + .65, y: 4/75 - .02, w: 5/75, h: 2.5/75}
	
	bottomBarTopLine2 = {x1: 0, y1: videoRect.y + videoRect.h + 6/75, x2: viewDivision.x1, y2: videoRect.y + videoRect.h + 6/75}
	bottomBarBottomLine = {x1: 0, y1: bottomBarTopLine.y1 + 2.5/75, x2: bottomBarTopLine.x2, y2: bottomBarTopLine.y1 + 2.5/75}
	leftCoverRect = {x: 0, y: 0, w: viewDivision.x1, h: bottomBarBottomLine.y1 - .09};
	rightCoverRect = {x: viewDivision.x1, y: viewDivision.y1, w: 1 - viewDivision.x1, h: 2}
	bottomBarDivision1 = {x1: bottomBarTopLine.x2 * 1/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 1/6, y2: bottomBarBottomLine.y1}
	bottomBarDivision2 = {x1: bottomBarTopLine.x2 * 2/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 2/6, y2: bottomBarBottomLine.y1}
	bottomBarDivision3 = {x1: bottomBarTopLine.x2 * 3/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 3/6, y2: bottomBarBottomLine.y1}
	bottomBarDivision4 = {x1: bottomBarTopLine.x2 * 4/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 4/6, y2: bottomBarBottomLine.y1}
	bottomBarDivision5 = {x1: bottomBarTopLine.x2 * 5/6, y1: bottomBarTopLine.y1, x2: bottomBarTopLine.x2 * 5/6, y2: bottomBarBottomLine.y1}
	//rewindButtonRect.y = bottomBarTopLine.y1 - 5/75;
	rewindButtonRect.y = videoRect.y + videoRect.h + 1/75;
	//pausePlayButtonRect.y = bottomBarTopLine.y1 - 5/75;
	pausePlayButtonRect.y = videoRect.y + videoRect.h + 1/75;
	pausePlayButtonRect.x = rewindButtonRect.x + 8/75;
	//fastForwardButtonRect.y = bottomBarTopLine.y1 - 5/75;
	fastForwardButtonRect.y = videoRect.y + videoRect.h + 1/75;
	fastForwardButtonRect.x = rewindButtonRect.x + 16/75;
	playLine1 = {x1: pausePlayButtonRect.x + 2.5/75, y1: pausePlayButtonRect.y + .375/75, x2: pausePlayButtonRect.x + 2.5/75, y2: pausePlayButtonRect.y + 2.125/75}
	playLine2 = {x1: pausePlayButtonRect.x + 2.5/75, y1: pausePlayButtonRect.y + .375/75, x2: pausePlayButtonRect.x + 4/75, y2: pausePlayButtonRect.y + 1.25/75}
	playLine3 = {x1: pausePlayButtonRect.x + 4/75, y1: pausePlayButtonRect.y + 1.25/75, x2: pausePlayButtonRect.x + 2.5/75, y2: pausePlayButtonRect.y + 2.125/75}
	playLine4 = {x1: pausePlayButtonRect.x + 2.125/75, y1: pausePlayButtonRect.y + .375/75, x2: pausePlayButtonRect.x + 2.125/75, y2: pausePlayButtonRect.y + 2.125/75}
	fastForwardLine1 = {x1: fastForwardButtonRect.x + 2.375/75, y1: fastForwardButtonRect.y + .375/75, x2: fastForwardButtonRect.x + 2.375/75, y2: fastForwardButtonRect.y + 2.125/75}
	fastForwardLine2 = {x1: fastForwardButtonRect.x + 2.375/75, y1: fastForwardButtonRect.y + .375/75, x2: fastForwardButtonRect.x + 3.875/75, y2: fastForwardButtonRect.y + 1.25/75}
	fastForwardLine3 = {x1: fastForwardButtonRect.x + 3.875/75, y1: fastForwardButtonRect.y + 1.25/75, x2: fastForwardButtonRect.x + 2.375/75, y2: fastForwardButtonRect.y + 2.125/75}
	rewindLine1 = {x1: rewindButtonRect.x + 3.625/75, y1: rewindButtonRect.y + .375/75, x2: rewindButtonRect.x + 3.625/75, y2: rewindButtonRect.y + 2.125/75}
	rewindLine2 = {x1: rewindButtonRect.x + 3.625/75, y1: rewindButtonRect.y + .375/75, x2: rewindButtonRect.x + 2.125/75, y2: rewindButtonRect.y + 1.25/75}
	rewindLine3 = {x1: rewindButtonRect.x + 2.125/75, y1: rewindButtonRect.y + 1.25/75, x2: rewindButtonRect.x + 3.625/75, y2: rewindButtonRect.y + 2.125/75}
	pauseRect1 = {x: pausePlayButtonRect.x + 2.375/75, y: pausePlayButtonRect.y + .375/75, w: .375/75, h: 1.75/75}
	pauseRect2 = {x: pausePlayButtonRect.x + 3.25/75, y: pausePlayButtonRect.y + .375/75, w: .375/75, h: 1.75/75}
	//logoRect = {x: viewDivision.x1 + 4/75, y: topBarBottomLine.y1 - 2.375/75, w: 7/75, h: 2/75}
	logoRect = {x: 2/75, y: bottomBarTopLine.y1 - 8.5/75, w: 10.5/75, h: 3/75}
	otherLogoRect.x = logoRect.x - 78.125/75;
	mapRect.w = viewDivision.x1;
	mapRect.h = viewDivision.x1 * (852/1250);
	timeLineRect = {x: 0, y: aboveBottomBarLine.y1, w: 60/75, h: 1/75}
	bottomBarTopLine.x2 = viewDivision.x1;
	timeDot.y = bottomBarTopLine2.y1 - .5/75;
	
	//
	
	vid1dur.y = bottomBarTopLine2.y1 - 1/75;
	vid2dur.y = bottomBarTopLine2.y1 - 1/75;
	vid3dur.y = bottomBarTopLine2.y1 - 1/75;
	
	locationPoint1.y = bottomBarTopLine2.y1 + 4.5/75;
	locationPoint2.y = bottomBarTopLine2.y1 + 4.5/75;
	locationPoint3.y = bottomBarTopLine2.y1 + 7.5/75;
	locationPoint4.y = bottomBarTopLine2.y1 + 4/75;
	
	//
	
	visibleMapRect = {x: 0, y: bottomBarBottomLine.y1, w: viewDivision.x1, h: 1 - bottomBarBottomLine.y1}
	aboveBottomBarLine = {x1: 0, y1: videoRect.y + videoRect.h + timeBarBarDistance, x2: bottomBarTopLine.x2, y2: videoRect.y + videoRect.h + timeBarBarDistance}
	belowTimeDotLine = {x1: 0, y1: timeDot.y + 1/75, x2: viewDivision.x1, y2: timeDot.y + 1/75}
}<file_sep>
	/*
	scrolled = check if video is scrolled, whichVideo = the current video, currentTime = stores the current time, container = 360 video container, (camera, scene, renderer, cylinder, video, videoImage, videoImageContext, videoTexture, targetRotation, targetRotationOnMouseDown, mouseX, mouseXOnMouseDown, windowHalfX, windowHalfY, eometry, material) = specific three.js variables, video(integer)Is360 = checks videos to see if 360 based on width, (timeDotStartX, timeDotEndX) = stores x value of the timeline marker, frameNum = keeps track of which video to load, targetRotation(#) = variable tracking the rotation for each video, angleSet(#) = stores the rotation for each video
	*/
	
	var scrolled, whichVideo, currentTime, container, camera, scene, renderer, cylinder,
	mainCanvas, video, videoImage, videoImageContext, videoTexture, targetRotation,
	targetRotationOnMouseDown, mouseX, mouseXOnMouseDown, windowHalfX, windowHalfY,
	marval, geometry, material, windowCanvas, windowCanvasContext, video1Is360,
	video2Is360, video3Is360, video4Is360, video5Is360, timeDotStartX, timeDotEndX,
	frameNum, targetRotation1, targetRotation2, targetRotation3, targetRotation4,
	targetRotation5, angleSet1, angleSet2, angleSet3, angleSet4, angleSet5;
	
	// selecting the canvas and setting the context, assigning values
	
	windowCanvas = document.getElementById('windowCanvas');
	windowCanvasContext = windowCanvas.getContext('2d');
   	
   	video1Is360 = false;
   	video2Is360 = false;
   	video3Is360 = false;
   	video4Is360 = false;
   	video5Is360 = false;
   	
   	videoIsLucy = false;
   	
   	//frameNum = 1;
   	targetRotation = 4.75;
   	targetRotation1 = 4.75;
   	targetRotation2 = 4.75;
   	targetRotation3 = 4.75;
   	targetRotation4 = 4.75;
   	targetRotation5 = 4.75;
   	
   	angleSet1 = 4.75;
   	angleSet2 = 4.75;
   	angleSet3 = 4.75;
   	angleSet4 = 4.75;
   	angleSet5 = 4.75;
   	
	var arWidth = [];
	
	var projector, plane, object;
	var objects = [];
	var canSnag = document.getElementById('canvas360');
	
	var maxDuration;

	/*
	var videoDuration1 = 67.918367;
	var videoDuration2 = 67.866667 ;
	var videoDuration3 = 67.150417;
	var videoDuration4 = 136.576;
	*/
	
	// iterating through video elements to see which is 360 video
   	var nodes = document.getElementsByTagName('video');
   	for ( var lnt = 0; lnt < nodes.length; lnt++){
   		
   		var tnt= nodes[lnt].getAttribute('width');
   		arWidth.push(tnt);
   		if ( lnt == nodes.length - 1){
   		}
   	}

   	// detecting if the video is 360
	
	function videoTypeDetect(){
	
		if (video1.paused == false && video1.videoWidth > 1000){
			video = document.getElementById('video1');
		} else if (video2.paused == false && video2.videoWidth > 1000){
			video = document.getElementById('video2');
		} else if (video3.paused == false && video3.videoWidth > 1000){
			video = document.getElementById('video3');
		} else if (video4.paused == false && video4.videoWidth > 1000){
			video = document.getElementById('video4');	
		} 
		
		if (arWidth[0] > 1000){
			video1Is360 = true;
		}
		
		if (arWidth[1] > 1000){
			video2Is360 = true;
		}
		
		if (arWidth[2] > 1000){
			video3Is360 = true;
		}
		
		if (arWidth[3] > 1000){
			video4Is360 = true;
		}
		if (arWidth[4] > 1000){
			video5Is360 = true;
		}
		
	}
	
	videoTypeDetect()
	
	// assigning three.js variables
	
	mainCanvas = document.getElementById('windowCanvas');
	targetRotationOnMouseDown = 0;
	mouseX = 0;
	mouseXOnMouseDown = 0;
	windowHalfX = window.innerWidth/2;
	windowHalfY = window.innerHeight/2;
	container = document.getElementById( 'canvas360div' ); 
	camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.y = 0;
	camera.position.z = 10;
	
	// initialize three.js
	
	function init(){
		scene = new THREE.Scene();
		videoImage = document.createElement('canvas');
		videoImage.width = 1440;
		videoImage.height = 544;
		videoImageContext = videoImage.getContext('2d');
		videoTexture = new THREE.Texture(videoImage);
		videoTexture.minFilter = THREE.LinearFilter;
		videoTexture.magFilter = THREE.LinearFilter;
		geometry = new THREE.CylinderGeometry(360, 360, 520, 200, 200, true);
		geometry.applyMatrix(new THREE.Matrix4().makeRotationY(-Math.PI/2));		
		material = new THREE.MeshBasicMaterial({map: videoTexture, overdraw: true});
		cylinder = new THREE.Mesh(geometry, material);
		cylinder.scale.x = -1;
		cylinder.position.y = 0;
		scene.add( cylinder );
		
		var planeGeometry = new THREE.PlaneGeometry(8, 10);
		
		// creating objects in the 3d scene
		
		for ( var i = 0; i < 4; i ++ ) {
			var imgstring = 'img/kogeto_' + i + '.png';
			var planeTexture = new THREE.ImageUtils.loadTexture( imgstring );
			var planeMaterial = new THREE.MeshBasicMaterial( { map: planeTexture, side: THREE.DoubleSide, transparent: true } );
			var object = new THREE.Mesh(planeGeometry, planeMaterial);
			var sel = object.name = i;
			
			if (sel == 0){
				object.position.x = 60;
				object.position.y = 100;
				object.position.z = 60;
				object.rotation.y = -.5;
			}
			if (sel == 1){
				object.position.x = 80;
				object.position.y = 20;
				object.position.z = 80;
				object.rotation.y = -2.5;
			}
			if (sel == 2){
				object.position.x = 70;
				object.position.y = 25;
				object.position.z = -60;
				object.rotation.y = -.5;
			}
			if (sel == 3){
				object.position.x = -90;
				object.position.y = 0;
				object.position.z = 18;
				object.rotation.y = -1.5;
			}
	      	scene.add( object );
	      	objects.push( object );
		}			
		
		// projector for raycasting
		projector = new THREE.Projector();
		
		// Render
		renderer = new THREE.WebGLRenderer({antialias:true, canvas: canvas360});
		renderer.setSize( mainCanvas.width * 56/75, mainCanvas.width * 25.04/75 );
		container.appendChild( renderer.domElement );
		container.addEventListener( 'mousedown', onDocumentMouseDown, false );
	}

	// drawing all the objects and a refresh function to update them
	
	function layout(){
		refreshPieces();
		// map
		draw.image(windowCanvasContext, windowCanvas.width, "img/map.jpg", mapRect.x, mapRect.y, mapRect.w, mapRect.h);
		draw.fillObRect(windowCanvasContext, windowCanvas.width, "WhiteSmoke", leftCoverRect);
		draw.line(windowCanvasContext, windowCanvas.width, .5, 0, mapRect.y + mapRect.h, mapRect.w, mapRect.y + mapRect.h);
		// rewind, pause/play, fast forward objects
		draw.fillObRect(windowCanvasContext, windowCanvas.width, "white", rewindButtonRect);
		draw.obRect(windowCanvasContext, windowCanvas.width, .25, rewindButtonRect);
		draw.fillObRect(windowCanvasContext, windowCanvas.width, "white", pausePlayButtonRect);
		draw.obRect(windowCanvasContext, windowCanvas.width, .25, pausePlayButtonRect);
		draw.fillObRect(windowCanvasContext, windowCanvas.width, "white", fastForwardButtonRect);
		
		//timeline Rect
		draw.fillObRect(windowCanvasContext, windowCanvas.width, "lightsteelblue", timeLineRect);
		
		// rewind, pause/play, fast forward images
		draw.obRect(windowCanvasContext, windowCanvas.width, .25, fastForwardButtonRect);
		draw.image(windowCanvasContext, windowCanvas.width, "img/rewind.png", rewindButtonRect.x, rewindButtonRect.y, rewindButtonRect.w, rewindButtonRect.h);
		draw.image(windowCanvasContext, windowCanvas.width, "img/fastforward.png", fastForwardButtonRect.x, fastForwardButtonRect.y, fastForwardButtonRect.w, fastForwardButtonRect.h);
		draw.obLine(windowCanvasContext, windowCanvas.width, .5, viewDivision);
		
		// playback head
		draw.fillObArc(windowCanvasContext, windowCanvas.width, "white", timeDot);
		draw.obArc(windowCanvasContext, windowCanvas.width, .25, timeDot);
				
		draw.fillObRect(windowCanvasContext, windowCanvas.width, "white", rightCoverRect);
		
		// logo
		draw.obImage(windowCanvasContext, windowCanvas.width, "img/logo.png", logoRect);
		
		// sidebar thumbnails
		draw.obImage(windowCanvasContext, windowCanvas.width, "img/view_1.jpg", view1);
    	draw.obImage(windowCanvasContext, windowCanvas.width, "img/view_2.jpg", view2);
    	draw.obImage(windowCanvasContext, windowCanvas.width, "img/view_3.jpg", view3);
    	draw.obImage(windowCanvasContext, windowCanvas.width, "img/view_4.jpg", view4);
		
		// panoramic/normal video markers for the thumbs
    	draw.obImage(windowCanvasContext, windowCanvas.width, "img/kogeto_0.png", cameraMarker1);
		draw.obImage(windowCanvasContext, windowCanvas.width, "img/kogeto_1.png", cameraMarker2);
		draw.obImage(windowCanvasContext, windowCanvas.width, "img/kogeto_2.png", cameraMarker3);
		draw.obImage(windowCanvasContext, windowCanvas.width, "img/kogeto_3.png", cameraMarker4);
		
	}
	
	// drawing non-panoramic video and objects ] 
	function shouldDrawToVideoRect(video, videoIs360){
		if (video == whichVideo && videoIs360 != true){
    		windowCanvasContext.drawImage(whichVideo, videoRect.x * windowCanvas.width, videoRect.y * windowCanvas.width, videoRect.w * windowCanvas.width, videoRect.h * windowCanvas.width);
    		draw.obRect(windowCanvasContext, windowCanvas.width, .25, videoRect);
    		draw.obImage(windowCanvasContext, windowCanvas.width, "img/kogeto_0.png", directionalMarker1);
    		draw.obImage(windowCanvasContext, windowCanvas.width, "img/kogeto_1.png", directionalMarker2);
    		draw.obImage(windowCanvasContext, windowCanvas.width, "img/kogeto_2.png", directionalMarker3);
    		draw.obImage(windowCanvasContext, windowCanvas.width, "img/norotate.png", noRotateMarker);
    	}
	}
	
	function drawFrames(){
    	
    	draw.obRect(windowCanvasContext, windowCanvas.width, .25, view1);
    	if (currentTime == video1.duration || currentTime == 0){
    		draw.fillObRect(windowCanvasContext, windowCanvas.width, "alpha", view1);
    	}
		draw.obRect(windowCanvasContext, windowCanvas.width, .25, view2);
		draw.obRect(windowCanvasContext, windowCanvas.width, .25, view3);
		draw.obRect(windowCanvasContext, windowCanvas.width, .25, view4);

    	shouldDrawToVideoRect(video1, video1Is360);
    	shouldDrawToVideoRect(video2, video2Is360);
    	shouldDrawToVideoRect(video3, video3Is360);
    	shouldDrawToVideoRect(video4, video4Is360);
    	
    	draw360Circle(targetRotation1, video1, video1Is360, piview1, "yellowgreen");
    	draw360Circle(targetRotation2, video2, video2Is360, piview2, "cornflowerblue");
    	draw360Circle(targetRotation3, video3, video3Is360, piview3, "pink");
    	
    	draw360tooCircle(targetRotation1, video1, video1Is360, locationPoint1, "yellowgreen");
    	draw360tooCircle(targetRotation2, video1, video1Is360, locationPoint2, "CornflowerBlue");
    	draw360tooCircle(targetRotation3, video1, video1Is360, locationPoint3, "pink");
		
	}
	
	// browser event for playback
	window.requestAnimFrame = (function(){   
   		return window.requestAnimationFrame  ||    
		window.webkitRequestAnimationFrame ||    
 		window.mozRequestAnimationFrame ||    
   		window.oRequestAnimationFrame  ||    
     	window.msRequestAnimationFrame  ||    
     	function(callback, element){   
      		window.setTimeout(callback, 1000 / 60);   
     	};   
   	})();
	
	// renders 3d and adjusts margins of 3d container
	function render(){
		height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		if (whichVideo.readyState === whichVideo.HAVE_ENOUGH_DATA){
			videoImageContext.drawImage(whichVideo, 0, 0);
			if (videoTexture)
				videoTexture.needsUpdate = true;
				renderer.setSize(mainCanvas.width * videoRect.w, mainCanvas.width * videoRect.h);
				marval = (((videoRect.y) * mainCanvas.width)/height)*100;
				container.setAttribute("style", "top:" + marval.toString() + "%");						
		}
		camera.rotation.y = camera.rotation.y += (targetRotation - camera.rotation.y);
		renderer.render(scene, camera);
	}
	
	// synching video by time
	function synchronize(video){
   		if (video.paused == false){
    		currentTime = video.currentTime;
    		
    		if (video != video1){
    			video1.currentTime = currentTime;
    		}
    		
    		if (video != video2){
				video2.currentTime = currentTime;
			}
			
			if (video != video3){
				video3.currentTime = currentTime;
			}
			
			if (video != video4){
				video4.currentTime = currentTime;
			}
			/*
			if (video != video5){
				video5.currentTime = currentTime;
			}*/
			
			whichVideo = video;
		}
   	}
   	
   	// hide/show floating 3d canvas
   	function hide360Canvas(videoIs360, video){
   		if (videoIs360 == false && whichVideo == video){
    		document.getElementById('canvas360div').style.display = 'inline';
    		document.getElementById('canvas360div').style.display = 'none';
    	}
   	}
   	// rotation trackers on the thumbs
   	function draw360Circle(targetRotation, video, videoIs360, view, color){
   		if (videoIs360 == true){
   			draw.fillArc(windowCanvasContext, windowCanvas.width, "white", view.x + 11.5/75, view.y + 4.25/75, .75/75, 0, 2);
   			draw.fillArc(windowCanvasContext, windowCanvas.width, color, view.x + 11.5/75, view.y + 4.25/75, .75/75, -(targetRotation/Math.PI) - 1.25, -(targetRotation/Math.PI) - .75);
   		}
   	}
   	// rotation trackers on the map
   	function draw360tooCircle(targetRotation, video, videoIs360, locationPoint, color ){
   		if (videoIs360 == true){
   			draw.fillArc(windowCanvasContext, windowCanvas.width, "white", locationPoint.x + .01, locationPoint.y + .01, .75/75, 0, 2);
   			draw.fillArc(windowCanvasContext, windowCanvas.width, color, locationPoint.x + .01, locationPoint.y + .01, .75/75, -(targetRotation/Math.PI) - 1.85, -(targetRotation/Math.PI) - 1.35);
   		}
   	}
   	// play back circle
   	function playCircle(targetRotation, video, videoIs360, locationPoint, color ){
   		if (videoIs360 == true){
   			draw.lineArc(windowCanvasContext, windowCanvas.width, color, 2.5, locationPoint.x + .01, locationPoint.y + .01, .75/75, 0, 2);
   		}
   	}
   	//triangle shapes
   	function drawTriangle(targetRotation, video, videoIs360, view){
   		if (videoIs360 == false){
   			draw.fillTri(windowCanvasContext, windowCanvas.width, "orange", view.x + 11.5/75, view.y + 5/75, 1/75, (1.5) - .25, (1.5) + .25);
   		}
   	}
   	
   	function drawTriangle2(targetRotation, video, videoIs360, view){
   			draw.fillTri(windowCanvasContext, windowCanvas.width, "orange", locationPoint4.x + .02, locationPoint4.y + .005, 1/75, (-1.15) - .25, (-1.15) + .25);
   	}
   	
   	// updating objects and event conditionals
	
	function update(){
		draw.clearCanvas(windowCanvasContext, windowCanvas);
		draw.clearCanvas(windowCanvasContext, canSnag);
		render();
		layout();
		drawFrames();
		
		scrolled = document.body.scrollTop;
		
		if (expand == true){
			if (bottomBarBottomLine.y1 < 60/75){
				bottomBarTopLine.y1 += 1.125/75;
				bottomBarTopLine.y2 += 1.125/75;
			}
			if (viewDivision.x1 < 1){
				viewDivision.x1 += .75/75;
				viewDivision.x2 += .75/75;
				videoRect.w += (.007 * 1.4)
				videoRect.h += (.00313 * 1.4)
				rewindButtonRect.x += .375/75;
				timeDotX1 = videoRect.x + 1.5/75;
   				timeDotX2 = videoRect.x + videoRect.w;
			}
		} else {
			expand = false;
		}

		if (resetExpansion == true){
			if (bottomBarTopLine.y1 > 35.05/75){
				bottomBarTopLine.y1 -= 1.125/75;
				bottomBarTopLine.y2 -= 1.125/75;
			}
			if (viewDivision.x1 > 60/75){
				viewDivision.x1 -= .75/75;
				viewDivision.x2 -= .75/75;
				videoRect.w -= (.007 * 1.4)
				videoRect.h -= (.00313 * 1.4)
				rewindButtonRect.x -= .375/75;
				timeDotX1 = videoRect.x + 1.5/75;
   				timeDotX2 = videoRect.x + videoRect.w;
			}
		} else {
			resetExpansion = false;
		}
		
		if (whichVideo == video1){
			targetRotation1 = targetRotation;
			angleSet1 = targetRotation1;
			draw.obRectLine(windowCanvasContext, windowCanvas.width, 6, "yellowgreen", view1);
			playCircle(targetRotation1, video1, video1Is360, locationPoint1, "yellowgreen");
			
		} else {
			targetRotation1 = angleSet1;
		}
		if (whichVideo == video2){
			targetRotation2 = targetRotation;
			angleSet2 = targetRotation2;
			draw.obRectLine(windowCanvasContext, windowCanvas.width, 6, "cornflowerblue", view2);
			playCircle(targetRotation1, video1, video1Is360, locationPoint2, "cornflowerblue");
		} else {
			targetRotation2 = angleSet2;
		}
		if (whichVideo == video3){
			targetRotation3 = targetRotation;
			angleSet3 = targetRotation3;
			draw.obRectLine(windowCanvasContext, windowCanvas.width, 6, "pink", view3);
			playCircle(targetRotation1, video1, video1Is360, locationPoint3, "pink");
		} else {
			targetRotation3 = angleSet3;
		}
		if (whichVideo == video4){
			targetRotation4 = targetRotation;
			angleSet4 = targetRotation4;
			draw.obRectLine(windowCanvasContext, windowCanvas.width, 6, "orange", view4);
			drawTriangle2(2.5, video4, video4Is360, locationPoint4);
		} else {
			targetRotation4 = angleSet4;
		}
		
		draw360Circle(targetRotation1, video1, video1Is360, piview1, "yellowgreen");
    	draw360Circle(targetRotation2, video2, video2Is360, piview2, "cornflowerblue");
    	draw360Circle(targetRotation3, video3, video3Is360, piview3, "pink");

    	drawTriangle(targetRotation4, video4, video4Is360, piview4);
    	drawTriangle2(2.3, video4, video4Is360, locationPoint4);
		
		synchronize(video1);
		synchronize(video2);
		synchronize(video3);
		synchronize(video4);
		
		if (whichVideo.paused == true){
    		drawFrames();
    		draw.image(windowCanvasContext, windowCanvas.width, "img/play.png", pausePlayButtonRect.x, pausePlayButtonRect.y, pausePlayButtonRect.w, pausePlayButtonRect.h);
    	} else {
    		draw.image(windowCanvasContext, windowCanvas.width, "img/pause.png", pausePlayButtonRect.x, pausePlayButtonRect.y, pausePlayButtonRect.w, pausePlayButtonRect.h);
    	}
    	
    	hide360Canvas(video1Is360, video1);
		hide360Canvas(video2Is360, video2);
		hide360Canvas(video3Is360, video3);
		hide360Canvas(video4Is360, video4);
    	
    	if (timeDot.x < timeDotStartX){
    		//timeDot.x = timeDotStartX;
    		whichVideo.pause();
    		if (timeDotTruth == false){
    			whichVideo.play();
    		}
    	}
    	if (timeDot.x > timeDotEndX){
    		timeDot.x = timeDotEndX;
    		whichVideo.pause();
    		if (timeDotTruth == false){
    			whichVideo.play();
    		}
    	}
    	if (rewindButtonRectTruth == true){
    		currentTime -= 4/10;
    		whichVideo.currentTime = currentTime;
    	}
    	if (fastForwardButtonRectTruth == true){
    		currentTime += 4/10;
    		whichVideo.currentTime = currentTime;
    	}
    	
    	maxDuration = Math.max(video1.duration,video2.duration,video3.duration,video4.duration);

    	timeDot.x = ((currentTime/maxDuration)*(timeDotEndX))+ timeDotStartX;
    	//timeDot.x = ((currentTime/maxDuration)*(timeDotEndX))+ timeDotStartX;
    	currentTime = ((timeDot.x - timeDotStartX)/timeDotEndX)*maxDuration;
    	
    	timeDotStartX = videoRect.x + 1.5/75;
   		timeDotEndX = videoRect.x + videoRect.w - 1.5/75;
    	
    	if (timeDot.x > timeDotEndX){
    		timeDot.x = timeDotEndX;
    	}
    	if (timeDot.x < timeDotStartX){
    		timeDot.x = timeDotStartX;
    	}
	}
	
	function animate(){
		requestAnimFrame(animate);
		update();
	}
	
	// play one video at a time
	
	function playVideo1(){
    	video2.pause();
    	video3.pause();
    	video4.pause();
    	
    	video1.play();
    	
    }
    
    function playVideo2(){
    	video1.pause();
    	video3.pause();
    	video4.pause();

    	video2.play();
    }
    
     function playVideo3(){
    	video1.pause();
    	video2.pause();
    	video4.pause();

    	video3.play();
    }
    
     function playVideo4(){
    	video1.pause();
    	video2.pause();
    	video3.pause();

    	video4.play();
    }
    
    function pauseAll(){
    	video1.pause();
    	video2.pause();
    	video3.pause();
    	video4.pause();
    }
	
	function rotateLeft(){
		targetRotation += 1/30;
	}
	
	function rotateRight(){
		targetRotation -= 1/30;
	}
	// initializing on load
	window.onload = function(){
		whichVideo = video1;
		var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		if ( width < 1000 ){
		windowCanvas.width = width;
		} else {
		windowCanvas.width = 1000;
		}
		windowCanvas.height = windowCanvas.width * 1.08;
		
		layout();

		init();
		
		animate();
	}
	// redrawing for resize
	window.onresize = function(){
		width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		if ( width < 1000 ){
		windowCanvas.width = width;
		} else {
		windowCanvas.width = 1000;
		}
		windowCanvas.height = windowCanvas.width * 1.08;
	
		if ( width < 1001 ){
		renderer.setSize(windowCanvas.width * videoRect.w, windowCanvas.width * videoRect.h);
		}

	}
<file_sep>var draw = {

	//clearCanvas
	clearCanvas: function(context, canvas){
		context.clearRect(0, 0, canvas.width, canvas.height);
	},
	
	//scaled line
	line: function(context, scalefactor, thickness, x1, y1, x2, y2){
	
		context.beginPath();
		context.lineWidth = String(thickness);
		context.moveTo(x1 * scalefactor, y1 * scalefactor);
		context.lineTo(x2 * scalefactor, y2 * scalefactor);
		context.stroke();
	},
	
	//scaled object line
	obLine: function(context, scalefactor, thickness, line){
		
		var x1 = line.x1 * scalefactor;
		var y1 = line.y1 * scalefactor;
		var x2 = line.x2 * scalefactor;
		var y2 = line.y2 * scalefactor;
	
		context.beginPath();
		context.lineWidth = String(thickness);
		context.moveTo(x1, y1);
		context.lineTo(x2, y2);
		context.stroke();
	},
	
	//scaled object rect
	obRect: function(context, scalefactor, thickness, box){
	
		var x = box.x * scalefactor;
		var y = box.y * scalefactor;
		var w = box.w * scalefactor;
		var h = box.h * scalefactor;
		
		context.strokeStyle="black";
		context.fillStyle="black";
		context.beginPath();
		context.lineWidth=String(thickness);
		context.rect(x, y, w, h); 
		context.stroke();
	},
	
	obRectLine: function(context, scalefactor, thickness, color, box){
	
		var x = box.x * scalefactor;
		var y = box.y * scalefactor;
		var w = box.w * scalefactor;
		var h = box.h * scalefactor;
		
		context.strokeStyle=color;
		context.beginPath();
		context.lineWidth=String(thickness);
		context.rect(x, y, w, h); 
		context.stroke();
	},
	
	//filled scaled object rect
	fillObRect: function(context, scalefactor, color, box){
		
		var x = box.x * scalefactor;
		var y = box.y * scalefactor;
		var w = box.w * scalefactor;
		var h = box.h * scalefactor;
	
		context.fillStyle=color;
		context.fillRect(x, y, w, h);
	},
	//filled scaled object rect with opacity
	fillObRectAlph: function(context, scalefactor, box){
		
		var x = box.x * scalefactor;
		var y = box.y * scalefactor;
		var w = box.w * scalefactor;
		var h = box.h * scalefactor;
	
		context.fillStyle="rgba(0,0,0,.75)";
		context.fillRect(x, y, w, h);
	},
	
	//scaled object arc
	obArc: function(context, scalefactor, thickness, circle){
		
		var x = circle.x * scalefactor;
		var y = circle.y * scalefactor;
		var r = circle.r * scalefactor;
		var sAngle = circle.sAngle;
		var eAngle = circle.eAngle;
		
		//context.strokeStyle="black";
		context.beginPath();
		context.lineWidth=String(thickness);
		context.arc(x, y, r, sAngle * Math.PI, eAngle * Math.PI);
		context.stroke();
	},
	
	fillArc: function(context, scalefactor, color, x, y, r, sAngle, eAngle){
		
		var x = x * scalefactor;
		var y = y * scalefactor;
		var r = r * scalefactor;
		var sAngle = sAngle;
		var eAngle = eAngle;
		
		context.lineWidth=".25";
		context.strokeStyle="black";
		context.fillStyle=String(color);
		context.beginPath();
		context.moveTo(x, y);
		context.arc(x, y, r, sAngle * Math.PI, eAngle * Math.PI);
		context.stroke();
		context.fill()
	},
	
	lineArc: function(context, scalefactor, color, linewidth, x, y, r, sAngle, eAngle){
		
		var x = x * scalefactor;
		var y = y * scalefactor;
		var r = r * scalefactor;
		var sAngle = sAngle;
		var eAngle = eAngle;
		
		context.lineWidth=String(linewidth);
		context.strokeStyle=String(color);
		//context.fillStyle=String(color);
		context.beginPath();
		//context.moveTo(x, y);
		context.arc(x, y, r, sAngle * Math.PI, eAngle * Math.PI, false);
		context.stroke();
		//context.fill()
	},
	
	fillObArc: function(context, scalefactor, color, circle){
		
		var x = circle.x * scalefactor;
		var y = circle.y * scalefactor;
		var r = circle.r * scalefactor;
		var sAngle = circle.sAngle;
		var eAngle = circle.eAngle;
		
		context.beginPath();
		context.fillStyle=String(color);
		context.arc(x, y, r, sAngle * Math.PI, eAngle * Math.PI);
		context.stroke();
		context.fill()
	},
	
	//scaled image
	image: function (context, scalefactor, imageSource, x, y, w, h){
		
		var image = new Image();
		image.src = imageSource;
		
		context.drawImage(image, x * scalefactor, y * scalefactor, w * scalefactor, h * scalefactor);
	},
	
	//scaled object image
	obImage: function (context, scalefactor, imageSource, image){
		
		var newImage = new Image();
		newImage.src = imageSource;
		
		var x = image.x * scalefactor;
		var y = image.y * scalefactor;
		var w = image.w * scalefactor;
		var h = image.h * scalefactor;

		context.drawImage(newImage, x, y, w, h);
	},
	
	fillTri: function(context, scalefactor, color, x, y, r, sAngle, eAngle){
		
		var x = x * scalefactor;
		var y = y * scalefactor;
		var r = r * scalefactor;
		var sAngle = sAngle;
		var eAngle = eAngle;
		
		context.fillStyle=String(color);
		context.beginPath();
		context.moveTo(x, y);
		context.arc(x, y, r, sAngle * Math.PI, eAngle * Math.PI);
		context.stroke();
		context.fill()
	}
}

var interaction = {

	rectClickTruth: function(event, scalefactor, leftMargin, upperMargin, scrolled, box){
		var clientX = event.clientX;
		var clientY = event.clientY;
		
		var x = (box.x * scalefactor) + leftMargin;
		var y = (box.y * scalefactor) + upperMargin - scrolled;
		var w = box.w * scalefactor;
		var h = box.h * scalefactor;
		
		if (clientX > x && clientX < x + w && clientY > y && clientY < y + h){
			return true;
		}
		
		else{
			return false;
		}
	},
	
	circleClickTruth: function(event, scalefactor, leftMargin, upperMargin, scrolled, circle){
		var clientX = event.clientX;
		var clientY = event.clientY;

		var x = (circle.x * scalefactor) + leftMargin;
		var y = (circle.y * scalefactor) + upperMargin - scrolled;
		var r = circle.r * scalefactor;
		
		var dx = x - clientX;
		var dy = y - clientY;
		
		var clientR = Math.sqrt((dx*dx) + (dy*dy))
		
		if (clientR < r){
			return true;
		}
		else{
			return false;
		}
	}
}<file_sep>// event booleans
var pausePlayButtonRectTruth = false;
var pausePlayButtonShouldTrigger = false;
var rewindButtonRectTruth = false;
var fastForwardButtonRectTruth = false;
var video1PlayTruth = false;
var video1PlayShouldTrigger = false;
var video1IconPlayTruth = false;
var video1IconPlayShouldTrigger = false;

var location1IconPlayTruth = false;
var location1IconPlayShouldTrigger = false;

var location2IconPlayTruth = false;
var location2IconPlayShouldTrigger = false;

var location3IconPlayTruth = false;
var location3IconPlayShouldTrigger = false;

var location4IconPlayTruth = false;
var location4IconPlayShouldTrigger = false;

var video2PlayTruth = false;
var video2PlayShouldTrigger = false;
var video2IconPlayTruth = false;
var video2IconPlayShouldTrigger = false;
var video3PlayTruth = false;
var video3PlayShouldTrigger = false;
var video3IconPlayTruth = false;
var video3IconPlayShouldTrigger = false;
var video4PlayTruth = false;
var video4PlayShouldTrigger = false;
var video5PlayTruth = false;
var video5PlayShouldTrigger = false;
var timeDotTruth = false;
var bottomBarButton1Truth = false;
var bottomBarButton2Truth = false;
var bottomBarButton3Truth = false;
var bottomBarButton4Truth = false;
var bottomBarButton5Truth = false;
var bottomBarButton5ShouldTrigger = false;
var bottomBarButton6Truth = false;
var visibleMapRectTruth = false;
var expand = false;
var resetExpansion = false;
var hasExpanded = false;
var mouseX;
var mouseY;

window.onmousedown = function(event){
	// click interactions for thumbs and canvas objects
	pausePlayButtonRectTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, pausePlayButtonRect);
	if (pausePlayButtonRectTruth == true){
		pausePlayButtonShouldTrigger = true;
	}
	pausePlayButtonRectTruth = false;
	
	video1PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view1);
	if (video1PlayTruth == true){
		video1PlayShouldTrigger = true;
	}
	
	video1IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, directionalMarker1);
	if (video1IconPlayTruth == true){
		video1IconPlayShouldTrigger = true;
	}
	
	location1IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint1);
	if (location1IconPlayTruth == true){
		location1IconPlayShouldTrigger = true;
	}
	
	video2PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view2);
	if (video2PlayTruth == true){
		video2PlayShouldTrigger = true;
	}
	
	video2IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, directionalMarker2);
	if (video2IconPlayTruth == true){
		video2IconPlayShouldTrigger = true;
	}
	
	location2IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint2);
	if (location2IconPlayTruth == true){
		location2IconPlayShouldTrigger = true;
	}
	
	video3PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view3);
	if (video3PlayTruth == true){
		video3PlayShouldTrigger = true;
	}
	
	video3IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, directionalMarker3);
	if (video3IconPlayTruth == true){
		video3IconPlayShouldTrigger = true;
	}
	
	location3IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint3);
	if (location3IconPlayTruth == true){
		location3IconPlayShouldTrigger = true;
	}
	
	video4PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view4);
	if (video4PlayTruth == true){
		video4PlayShouldTrigger = true;
	}
	
	location4IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint4);
	if (location4IconPlayTruth == true){
		location4IconPlayShouldTrigger = true;
	}
	
	video5PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view5);
	if (video5PlayTruth == true){
		video5PlayShouldTrigger = true;
	}
	bottomBarButton5Truth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, bottomBarButtonRect5);
	if (bottomBarButton5Truth == true){
		bottomBarButton5ShouldTrigger = true;
	}
	bottomBarButton5Truth = false;
	
	timeDotTruth = interaction.circleClickTruth(event, windowCanvas.width, 0, 0, scrolled, timeDot);
	rewindButtonRectTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, rewindButtonRect);
	fastForwardButtonRectTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, fastForwardButtonRect);
	mouseX = event.clientX;
	mouseY = event.clientY;
}

window.onmousemove = function(event){

	if (timeDotTruth == true){
		timeDot.x = timeDot.x + ((event.clientX - mouseX) / windowCanvas.width);
		mouseX = event.clientX;
    	//currentTime = ((timeDot.x - (timeDotStartX))/(timeDotEndX))*whichVideo.duration;
    	currentTime = ((timeDot.x - (timeDotStartX))/(timeDotEndX))*maxDuration;
    	whichVideo.currentTime = currentTime;
	}
}

window.onmouseup = function(event){
	var portThumb1 = scene.children[1];
	var portThumb2 = scene.children[2];
	var portThumb3 = scene.children[3];
	var portThumb4 = scene.children[4];
	//pause
	pausePlayButtonRectTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, pausePlayButtonRect);
	if (whichVideo.paused == false && pausePlayButtonRectTruth == true && pausePlayButtonShouldTrigger == true){
		pauseAll();
		pausePlayButtonShouldTrigger = false;
		pausePlayButtonRectTruth = false;
	}
	
	//play
	pausePlayButtonRectTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, pausePlayButtonRect);
	if (whichVideo.paused == true && pausePlayButtonRectTruth == true && pausePlayButtonShouldTrigger == true){
		whichVideo.play();
		pausePlayButtonShouldTrigger = false;
		pausePlayButtonRectTruth = false;
		writeThumbs = true;
	}
	//thumbnail clicks
	video1PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view1);
	if (video1PlayTruth == true && video1PlayShouldTrigger == true){
		//if (!video1.ended){
			// setting 3d cylinder size, last played angle and 3d scene object coordinates
			videoImage.width = 1440;
			videoImage.height = 544;
			playVideo1();
			whichVideo = video1;
			targetRotation = angleSet1;
			portThumb1.position.set(60, 100, 60);
			portThumb1.rotation.y = -.5;
			portThumb2.position.set(80, 20, 80);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(70, 25, -60);
			portThumb3.rotation.y = -.5;
			portThumb4.position.set(-90, 0, 18);
			portThumb4.rotation.y = -1.5;
			
		//}
		
	}
	video1PlayTruth = false;
	video1PlayShouldTrigger = false;
	
	video1IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, directionalMarker1);
	if (video1IconPlayTruth == true && video1IconPlayShouldTrigger == true){
		//if (!video1.ended){
			videoImage.width = 1440;
			videoImage.height = 544;
			playVideo1();
			whichVideo = video1;
			targetRotation = angleSet1;
			portThumb1.position.set(60, 100, 60);
			portThumb1.rotation.y = -.5;
			portThumb2.position.set(80, 20, 80);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(70, 25, -60);
			portThumb3.rotation.y = -.5;
			portThumb4.position.set(-90, 0, 18);
			portThumb4.rotation.y = -1.5;			
		//}
		
	}
	video1IconPlayTruth = false;
	video1IconPlayShouldTrigger = false;
	
	location1IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint1);
	if (location1IconPlayTruth == true && location1IconPlayShouldTrigger == true){
		//if (!video1.ended){
			videoImage.width = 1440;
			videoImage.height = 544;
			playVideo1();
			whichVideo = video1;
			targetRotation = angleSet1;
			portThumb1.position.set(60, 100, 60);
			portThumb1.rotation.y = -.5;
			portThumb2.position.set(80, 20, 80);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(70, 25, -60);
			portThumb3.rotation.y = -.5;
			portThumb4.position.set(-90, 0, 18);
			portThumb4.rotation.y = -1.5;	
		//}
		
	}
	location1IconPlayTruth = false;
	location1IconPlayShouldTrigger = false;
	
	
	video2PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view2);
	if (video2PlayTruth == true && video2PlayShouldTrigger == true){
		//if (!video2.ended){
			videoImage.width = 1152;
			videoImage.height = 320;
			playVideo2();
			whichVideo = video2;
			targetRotation = angleSet2;
			portThumb1.position.set(-90, 15, -10);
			portThumb1.rotation.y = -1.5;
			portThumb2.position.set(80, 100, 80);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(-90, 25, -90);
			portThumb3.rotation.y = -2.5;
			portThumb4.position.set(-100, 10, 35);
			portThumb4.rotation.y = -1.5;
		//}
		
	}
	video2PlayTruth = false;
	video2PlayShouldTrigger = false;
	
	video2IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, directionalMarker2);
	if (video2IconPlayTruth == true && video2IconPlayShouldTrigger == true){
		//if (!video2.ended){
			videoImage.width = 1152;
			videoImage.height = 320;
			playVideo2();
			whichVideo = video2;
			targetRotation = angleSet2;
			portThumb1.position.set(-90, 15, -10);
			portThumb1.rotation.y = -1.5;
			portThumb2.position.set(80, 100, 80);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(-90, 25, -90);
			portThumb3.rotation.y = -2.5;
			portThumb4.position.set(-100, 10, 35);
			portThumb4.rotation.y = -1.5;
		//}
		
	}
	video2IconPlayTruth = false;
	video2IconPlayShouldTrigger = false;
	
	location2IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint2);
	if (location2IconPlayTruth == true && location2IconPlayShouldTrigger == true){
		//if (!video2.ended){
			videoImage.width = 1152;
			videoImage.height = 320;
			playVideo2();
			whichVideo = video2;
			targetRotation = angleSet2;
			portThumb1.position.set(-90, 15, -10);
			portThumb1.rotation.y = -1.5;
			portThumb2.position.set(80, 100, 80);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(-90, 25, -90);
			portThumb3.rotation.y = -2.5;
			portThumb4.position.set(-100, 10, 35);
			portThumb4.rotation.y = -1.5;
		//}
		
	}
	location2IconPlayTruth = false;
	location2IconPlayShouldTrigger = false;
	
	video3PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view3);
	if (video3PlayTruth == true && video3PlayShouldTrigger == true){
		//if (!video3.ended){
			videoImage.width = 822;
			videoImage.height = 144;
			playVideo3();
			whichVideo = video3;
			targetRotation = angleSet3;
			portThumb1.position.set(-20, -20, 80);
			portThumb1.rotation.y = -.5;
			portThumb2.position.set(80, -40, 110);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(70, 100, -60);
			portThumb3.rotation.y = -.5;
			portThumb4.position.set(-60, -24, 80);
			portThumb4.rotation.y = -.5;
		//}
		
	}
	video3PlayTruth = false;
	video3PlayShouldTrigger = false;
	
	video3IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, directionalMarker3);
	if (video3IconPlayTruth == true && video3IconPlayShouldTrigger == true){
		//if (!video3.ended){
			videoImage.width = 822;
			videoImage.height = 144;
			playVideo3();
			whichVideo = video3;
			targetRotation = angleSet3;
			portThumb1.position.set(-20, -20, 80);
			portThumb1.rotation.y = -.5;
			portThumb2.position.set(80, -40, 110);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(70, 100, -60);
			portThumb3.rotation.y = -.5;
			portThumb4.position.set(-60, -24, 80);
			portThumb4.rotation.y = -.5;
		//}
		
	}
	video3IconPlayTruth = false;
	video3IconPlayShouldTrigger = false;
	
	location3IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint3);
	if (location3IconPlayTruth == true && location3IconPlayShouldTrigger == true){
		//if (!video3.ended){
			videoImage.width = 822;
			videoImage.height = 144;
			playVideo3();
			whichVideo = video3;
			targetRotation = angleSet3;
			portThumb1.position.set(-20, -20, 80);
			portThumb1.rotation.y = -.5;
			portThumb2.position.set(80, -40, 110);
			portThumb2.rotation.y = -2.5;
			portThumb3.position.set(70, 100, -60);
			portThumb3.rotation.y = -.5;
			portThumb4.position.set(-60, -24, 80);
			portThumb4.rotation.y = -.5;
		//}
	}
	location3IconPlayTruth = false;
	location3IconPlayShouldTrigger = false;
	
	video4PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view4);
	if (video4PlayTruth == true && video4PlayShouldTrigger == true){
		//if (!video4.ended){
			playVideo4();
			whichVideo = video4;
			targetRotation = angleSet4;
		//}
		
	}
	video4PlayTruth = false;
	video4PlayShouldTrigger = false;
	
	location4IconPlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, locationPoint4);
	if (location4IconPlayTruth == true && location4IconPlayShouldTrigger == true){
		//if (!video4.ended){
			playVideo4();
			whichVideo = video4;
			targetRotation = angleSet4;
		//}
		
	}
	location4IconPlayTruth = false;
	location4IconPlayShouldTrigger = false;
	/*
	video5PlayTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, view5);
	if (video5PlayTruth == true && video5PlayShouldTrigger == true){
		init();
		playVideo5();
		targetRotation = angleSet5;
		whichVideo = video5;
		//targetRotation = targetRotation5;
	}
	video5PlayTruth = false;
	video5PlayShouldTrigger = false;
	
	////////
	
	function timeLine(){
   		var mathy = Math.max(video1.duration,video2.duration,video3.duration,video4.duration);
   	}
   	timeLine(); 
	
	bottomBarButton1Truth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, bottomBarButtonRect1);
	bottomBarButton2Truth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, bottomBarButtonRect2);
	bottomBarButton3Truth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, bottomBarButtonRect3);
	bottomBarButton4Truth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, bottomBarButtonRect4);
	bottomBarButton6Truth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, bottomBarButtonRect6);
	
	bottomBarButton5Truth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, bottomBarButtonRect5);
	visibleMapRectTruth = interaction.rectClickTruth(event, windowCanvas.width, 0, 0, scrolled, visibleMapRect);
	if (bottomBarButton5Truth == true && hasExpanded == false && bottomBarButton5ShouldTrigger == true){
		resetExpansion = false;
		expand = true;
		hasExpanded = true;
	} else if (hasExpanded == true && (bottomBarButton5Truth == true && bottomBarButton5ShouldTrigger == true || visibleMapRectTruth == true)){
		expand = false
		resetExpansion = true;
		hasExpanded = false;
	}
	bottomBarButton5ShouldTrigger = false;
	bottomBarButton5Truth = false;
	
	*/
	
	rewindButtonRectTruth = false;
	fastForwardButtonRectTruth = false;
	timeDotTruth = false;
}

// key commands
var SPACE_BAR = 32;
var LEFT_ARROW = 37;
var RIGHT_ARROW = 39;

document.onkeydown = function(event){
	var code = event.keyCode;
	if (code == SPACE_BAR){
		if (whichVideo.paused == false){
			pauseAll();
		} else {
			whichVideo.play();
		}
		return false;
	}
	
	if (code == LEFT_ARROW){
		rotateLeft();
		return false;
	}
	
	if (code == RIGHT_ARROW){
		rotateRight();
		return false;
	}
}

document.onkeyup = function(event){
	rewindButtonRectTruth = false;
	fastForwardButtonRectTruth = false;
}

// mouse events for 3d (rotating the cylinder, raycasting projector for 3d scene objects)
function onDocumentMouseDown(event){
	event.preventDefault();
	container.addEventListener( 'mousemove', onDocumentMouseMove, false );
	container.addEventListener( 'mouseup', onDocumentMouseUp, false );
	container.addEventListener( 'mouseout', onDocumentMouseOut, false );
	
	var vectorWidth = mainCanvas.width * 56/75;
	var vectorHeight = mainCanvas.width * 25.04/75;
	
	var mousexx = ( ( event.clientX - container.offsetLeft ) / vectorWidth ) * 2 - 1;
	var mouseyy =  - ( ( event.clientY - container.offsetTop ) / vectorHeight ) * 2 + 1;
	
	var vector = new THREE.Vector3( mousexx, mouseyy, 1 );
	
	projector.unprojectVector( vector, camera );

	var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

	var intersects = raycaster.intersectObjects( objects );
	
	if ( intersects.length > 0 ) {
	
		var port1 = scene.children[1];
		var port2 = scene.children[2];
		var port3 = scene.children[3];
		var port4 = scene.children[4];
		var partname = intersects[ 0 ].object.name;
		if ( partname == 0 ){
			videoImage.width = 1440;
			videoImage.height = 544;
			playVideo1();
			whichVideo = video1;
			targetRotation = angleSet1;
			port1.position.set(60, 100, 60);
			port1.rotation.y = -.5;
			port2.position.set(80, 20, 80);
			port2.rotation.y = -2.5;
			port3.position.set(70, 25, -60);
			port3.rotation.y = -.5;
			port4.position.set(-90, 0, 18);
			port4.rotation.y = -1.5;
		}
		if ( partname == 1 ){
			videoImage.width = 1152;
			videoImage.height = 320;
			playVideo2();
			whichVideo = video2;
			targetRotation = angleSet2;
			port1.position.set(-90, 15, -10);
			port1.rotation.y = -1.5;
			port2.position.set(80, 100, 80);
			port2.rotation.y = -2.5;
			port3.position.set(-90, 25, -90);
			port3.rotation.y = -2.5;
			port4.position.set(-100, 10, 35);
			port4.rotation.y = -1.5;
		}
		if ( partname == 2 ){
			videoImage.width = 822;
			videoImage.height = 144;
			playVideo3();
			whichVideo = video3;
			targetRotation = angleSet3;
			port1.position.set(-20, -20, 80);
			port1.rotation.y = -.5;
			port2.position.set(80, -40, 110);
			port2.rotation.y = -2.5;
			port3.position.set(70, 100, -60);
			port3.rotation.y = -.5;
			port4.position.set(-60, -24, 80);
			port4.rotation.y = -.5;
		}
		if ( partname == 3 ){
			playVideo4();
		}

	}

	mouseXOnMouseDown = event.clientX - windowHalfX;
	targetRotationOnMouseDown = targetRotation;
}

function onDocumentMouseMove(event){
	mouseX = event.clientX - windowHalfX;
	targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown)*.005;
}
// removing events that would cause bugs
function onDocumentMouseUp(event){
	container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
	container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
	container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
		
function onDocumentMouseOut(event) {
	container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
	container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
	container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}<file_sep>chrome_experiment
=================

3D video player

A WebGL experiment. VIEW IN GOOGLE CHROME!

http://adam-christie.com/chrome_experiment/
