// JavaScript Document

	// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
	// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
	
	// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger

	var triggerElementID = null; // this variable is used to identity the triggering element
	var fingerCount = 0;
	var startX = 0;
	var startY = 0;
	var curX = 0;
	var curY = 0;
	var deltaX = 0;
	var deltaY = 0;
	var horzDiff = 0;
	var vertDiff = 0;
	var minLength = 100; // the shortest distance the user may swipe
	var swipeLength = 0;
	var swipeAngle = null;
	var swipeDirection = null;
	var didMove = false;
	
	var panelSetStartX = 0;
	var projectWidth = 944;
	
	// The 4 Touch Event Handlers
	
	// NOTE: the touchStart handler should also receive the ID of the triggering element
	// make sure its ID is passed in the event call placed in the element declaration, like:
	// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');"  ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">

	function touchStart(event,passedName) {
		// disable the standard ability to select the touched object
		event.preventDefault();
			
		didMove = false;
		
		// get the total number of fingers touching the screen
		fingerCount = event.touches.length;
	
		// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
		// check that only one finger was used
		if ( fingerCount == 1 ) {
			// get the coordinates of the touch
			startX = event.touches[0].pageX;
			startY = event.touches[0].pageY;
			
			panelSetStartX = $('#' + passedName).position().left;
			// store the triggering element ID
			triggerElementID = passedName;
			
		} else {
			// more than one finger touched so cancel
			touchCancel(event);
		}
	}

	function touchMove(event) {
		didMove = true;
		event.preventDefault();
		if ( event.touches.length <= 1 ) {
			curX = event.touches[0].pageX;
			curY = event.touches[0].pageY;
			
			// track the pageSet while finger is now
			var newLeft = (panelSetStartX + curX - startX).toString();
			//trace(newLeft + " " + panelSetStartX + " " + curX + " " + startX);
			$('#' + triggerElementID).css('left',newLeft.toString() + 'px');
		} else {
			touchCancel(event);
		}
	}
	
	function touchEnd(event) {
		//curX = event.touches[0].pageX;
		//alert('touchend: ' + event.touches[0].pageX);
		event.preventDefault();
		// check to see if more than one finger was used and that there is an ending coordinate
		if ( fingerCount <= 1) { // && curX != 0 
			// use the Distance Formula to determine the length of the swipe
			swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
			// if the user swiped more than the minimum length, perform the appropriate action
			if ( swipeLength >= minLength ) {
				calculateAngle();
				determineSwipeDirection();
				processingRoutine();
				touchCancel(event); // reset the variables
			} else {
				//if (didMove){
					$('#' + triggerElementID).stop(true,false).animate({"left":panelSetStartX},200);
					targLeft = panelSetStartX;
				//} else {
					// launch the media
					
				//}
				//slideInto();
				touchCancel(event);
			}	
		} else {
			touchCancel(event);
		}
	}

	function touchCancel(event) {
		// reset the variables back to default values
		fingerCount = 0;
		startX = 0;
		startY = 0;
		curX = 0;
		curY = 0;
		deltaX = 0;
		deltaY = 0;
		horzDiff = 0;
		vertDiff = 0;
		swipeLength = 0;
		swipeAngle = null;
		swipeDirection = null;
		triggerElementID = null;
	}
	
	function calculateAngle() {
		var X = startX-curX;
		var Y = curY-startY;
		var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
		var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
		swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
		if ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); }
	}
	
	function determineSwipeDirection() {
		if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
			swipeDirection = 'left';
		} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
			swipeDirection = 'left';
		} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
			swipeDirection = 'right';
		} else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
			swipeDirection = 'down';
		} else {
			swipeDirection = 'up';
		}
	}
	
	function processingRoutine() {
		//alert("swipe: " + swipeDirection);
		//var swipedElement = document.getElementById(triggerElementID);
		var myProjId = triggerElementID.split("-")[0];
		if ( swipeDirection == 'left' ) {
			//slideOne(-1);
			nextPanel(myProjId);
		} else if ( swipeDirection == 'right' ) {
			//slideOne(1);	
			prevPanel(myProjId);
		} 
	}
	
	function slideOne(dir){
		//trace('sideOne: ' + dir);
		var currentLeft =  -currentPageIndex*projectWidth; //panelSetStartX; //$("#workwrapper").position().left;
		targLeft = Math.min(0,Math.max(currentLeft + dir*projectWidth,-projectWidth*(maxPanels-1)));
		var dotIndex = - targLeft/projectWidth;
		
		if (dir == 1){
			nextPanel();
		} else {
			prevPanel();
		}
		
		//var leftStr = newLeft.toString() + "px";
		//$("#workwrapper").css('left',leftStr);
		//slideInto();
		//slideInt = setInterval(slideInto,frameTime);
		//selectDot(dotIndex);

		
		//$("#workwrapper").stop(true,false).animate({"left":targLeft},200,function(){selectDot(dotIndex);});
	};
	
	var frameTime = 60; // about 18 fps
	var targLeft = 0;
	var slideTO;
	var callCount = 0;
	
	function slideInto(){
		callCount ++;
		var pageX = $('#' + triggerElementID).position().left;
		var dist = targLeft - pageX;
		var targetX = pageX + Math.round(dist/2);
		//trace(callCount + " targLeft:  " + targLeft + " pageX: " + pageX +  " targetX: " + targetX + " " + $('#workwrapper').css('left'));
		if (Math.abs(dist) > 10){
			slideInt = setInterval(slideInto,frameTime);
		} else {
			targetX = targLeft; //lock in 
			//trace(callCount + " finished");
			callCount = 0;
			// set index dot
			var dotIndex = - targLeft/projectWidth;
			selectDot(dotIndex);
			clearInterval(slideInt);
		}
		var leftStr = targetX.toString() + 'px';
		$('#' + triggerElementID).css('left',leftStr);
		//alert($('#workwrapper').css('left'));
		
	}