How to determine the current pointer x position in MSGestureChange event? - windows-runtime

Question

This may sound like a duplicate, but please hear me out as I need a specific answer.
I am creating UI that needs to visually change while the user is dragging - not on complete. I've discovered how to determine if we've moved left or right based upon a selected item offset left position in an array and how to determine the position of the pointer while moving right from that position and am able the give visual feedback just fine. Now that I also know how to determine if we're moving left from the selected item offset left position in the array, how do I determine how far left I'm moving the pointer? I've been struggling with this for hours.
Here's a summary of what I have so far:
var ActiveElement = null;
function init() {
touchElement.msg = new MSGesture();
touchElement.msg.target = touchElement;
touchElement.addEventListener("MSGestureStart", te_gs, false);
touchElement.addEventListener("MSGestureChange", te_gc, false);
touchElement.addEventListener("MSGestureEnd", te_ge, false);
touchElement.addEventListener("MSInertiaStart", te_is, false);
touchElement.addEventListener("MSPointerDown", te_pd, false);
touchElement.addEventListener("MSPointerUp", te_pu, false);
touchElement.addEventListener("MSGestureTap", te_click, false);
};
//************************************************************************************************************************
// POINTER DOWN
//************************************************************************************************************************
function te_pd(e) {
//get activeel pos
ActiveElement.pos = getElPos(ActiveElement);
var touchE = e.currentTarget;
touchE.msg.addPointer(e.pointerId);
}
//************************************************************************************************************************
// GESTURE START
//************************************************************************************************************************
function te_gs(e) {
// set touchElement to the widget
var touchE = e.currentTarget;
// track the location from the start
touchE.diffx = ActiveElement.offsetLeft - e.clientX;
}
//************************************************************************************************************************
// GESTURE CHANGE
//************************************************************************************************************************
function te_gc(e) {
var touchE = e.currentTarget;
var activeElementLeftEdge = listArray[ActiveElement.pos].offsetLeft - listArray[ActiveElement.pos - 1].offsetLeft;
var dragRight = e.translationX > ActiveElement.offsetLeft - e.clientX;
var dragLeft = e.translationX < ActiveElement.offsetLeft - e.clientX;
if (dragRight) {
// I'm doing stuff to the right here where activeElementLeftEdge helps me determine the current location of the pointer going to the right
// my problem is that I don't know how to determine the equivalent when moving left
if (activeElementLeftEdge > listArray[ActiveElement.pos - 1].offsetLeft * 0) {
// show state
} else if (activeElementLeftEdge < 100) {
// hide state
}
if (activeElementLeftEdge > 200) {
// show next state
} else if (activeElementLeftEdge < 200) {
// hide state
}
}
if (dragLeft) {
// How do I determine the x position of the pointer here?
}
}
//************************************************************************************************************************
// GESTURE END
//************************************************************************************************************************
function te_ge(e) {
}
//************************************************************************************************************************
// POINTER UP
//************************************************************************************************************************
function te_pu(e) {
}
//************************************************************************************************************************
// INERTIA STARTING
//************************************************************************************************************************
function te_is(e) {
}
//************************************************************************************************************************
// CLICKED
//************************************************************************************************************************
function te_click(e) {
}
//************************************************************************************************************************
//returns the element position in the listArray
//************************************************************************************************************************
function getElPos(element) {
//loop through the array
for (i = 0; i < listArray.length; i++) {
if (listArray[i].id == element.id) {
return (i);
}
}
}