/*Javascript for joecieplinski.com*/ 

function $style(ElementId, CssProperty)
{
function $(stringId)
{
return document.getElementById(stringId);
}
if($(ElementId).currentStyle)
{
var convertToCamelCase = CssProperty.replace(/\-(.)/g, function(m, l){return l.toUpperCase()});
return $(ElementId).currentStyle[convertToCamelCase];
}
else if (window.getComputedStyle)
{
var elementStyle = window.getComputedStyle($(ElementId), "");
return elementStyle.getPropertyValue(CssProperty);
}
}


function movecaption(x,y,z) { 
	var textcontainer = document.getElementById('textcaption');
	textcontainer.style.marginLeft = x+'px';
	var viewcontainer = document.getElementById('mainview');
	viewcontainer.style.marginLeft = x+'px';
	for (i=1;i<=z;i++) {
		var circlereset = document.getElementById('circle'+i);
		circlereset.style.opacity = 1;
	}
	var circlenumber = document.getElementById('circle'+y);
	circlenumber.style.opacity = .5;
	};

function dragcaption(x,y,z) {
            var deltaX = x-y;
            var movemargin = z+deltaX;
			var viewcontainer = document.getElementById('mainview');
	        viewcontainer.style.marginLeft = movemargin+'px';
}
	// 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 = 72; // the shortest distance the user may swipe
	var swipeLength = 0;
	var swipeAngle = null;
	var swipeDirection = null;
	// joe's variables
	var currentmargin2 = 0;
	var currentmarginparse2 = 0;
	
	// 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();
		// 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;
			//get the position of the mainview
			currentmargin2 = $style("mainview", "margin-left");
            currentmarginparse2 = parseFloat(currentmargin2);
			// store the triggering element ID
			triggerElementID = passedName;
		} else {
			// more than one finger touched so cancel
			touchCancel(event);
		}
	}

	function touchMove(event) {
		event.preventDefault();
		if ( event.touches.length == 1 ) {
			curX = event.touches[0].pageX;
			curY = event.touches[0].pageY;
			//dragcaption(curX,startX,currentmarginparse2);
		} else {
			touchCancel(event);
		}
	}
	
	function touchEnd(event) {
		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 ) {
				caluculateAngle();
				determineSwipeDirection();
				processingRoutine();
				touchCancel(event); // reset the variables
			} else {
				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 caluculateAngle() {
		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() {
        var swipedElement = document.getElementById(triggerElementID);
        if ( swipeDirection == 'left' ) {
                var currentmargin = $style("textcaption", "margin-left");
                var currentmarginparse = parseFloat(currentmargin);
            if (currentmarginparse > (jj-1)*(-700) && (currentmarginparse%700) == 0) {
           movecaption(currentmarginparse-700,(currentmarginparse/-700)+2,jj);
           }
		} else if ( swipeDirection == 'right' ) {
                var currentmargin = $style("textcaption", "margin-left");
                var currentmarginparse = parseFloat(currentmargin);
                if (currentmarginparse < 0 && (currentmarginparse%700) == 0) {
           movecaption(currentmarginparse+700,(currentmarginparse/-700),jj);   
        }
        }
}

function nextlinkpress() {
    var currentmargin = $style("textcaption", "margin-left");
    var currentmarginparse = parseFloat(currentmargin);
        if (currentmarginparse > (jj-1)*(-700) && (currentmarginparse%700) == 0) {
           movecaption(currentmarginparse-700,(currentmarginparse/-700)+2,jj);
        }
} 

function prevlinkpress() {
    var currentmargin = $style("textcaption", "margin-left");
    var currentmarginparse = parseFloat(currentmargin);
        if (currentmarginparse < 0 && (currentmarginparse%700) == 0) {
           movecaption(currentmarginparse+700,(currentmarginparse/-700),jj);   
        } 
                
                
}   

var homeimagearray = new Array();
homeimagearray[0] = "iOSapplications_teleprompt";
homeimagearray[1] = "iOSapplications_coastercounter";
homeimagearray[2] = "iOSapplications_spookyplaytime";
homeimagearray[3] = "iOSapplications_geronimo";
homeimagearray[4] = "iOSapplications_christmasplaytime";
homeimagearray[5] = "characterdesign_earth";
homeimagearray[6] = "characterdesign_spookycat";
homeimagearray[7] = "characterdesign_rocky";
homeimagearray[8] = "characterdesign_diverdave";
homeimagearray[9] = "graphicdesign_icons";
homeimagearray[10] = "characterdesign_gnapp";

function homeimagechooser() {
	var randomimagenumber = Math.floor(Math.random()*11);
	var homeimage = homeimagearray[randomimagenumber];
	var homeimagepath = "images/"+homeimage+".png";
	document.getElementById('mainview').innerHTML='<div id="mainview"><div class="singlemainview"><img src="'+homeimagepath+'" width="700" height="400" alt="homeimage" /></div></div>';
};