touch event

/**
 * Author: humanhuang
 * Date: 13-12-12
 */
var canvas = document.getElementById("canvas"),
    stacks = [{
        color: "red"
    }, {
        color: "blue"
    }, {
        color: "green"
    }, {
        color: "black"
    }, {
        color: "yellow"
    }, {
        color: "orange"
    }];

function getEmptyStack() {
    var i = 0, s, l = stacks.length;
    for (; i < l; i++) {
        s = stacks[i];
        if (!s.touchId)
            return s;
    }
    return null;
}

function getStackByTouchId(touchId) {
    var i = 0, s, l = stacks.length;
    for (; i < l; i++) {
        s = stacks[i];
        if (s.touchId == touchId)
            return s;
    }
    return null;
}

function touchStart(e) {
    e.preventDefault();
    var touches = e.changedTouches,
        i = 0, l = touches.length, touch, stack;
    for (; i < l; i++) {
        touch = touches[i];
        stack = getStackByTouchId(touch.identifier);
        if (stack) return;
        stack = getEmptyStack();
        if (stack) {
            stack.touchId = touch.identifier;
            stack.spirit = document.createElement("div");
            stack.spirit.className = "spirit";
            stack.startX = touch.pageX;
            stack.startY = touch.pageY;
            stack.spirit.style.left = touch.pageX + "px";
            stack.spirit.style.top = touch.pageY + "px";
            stack.spirit.style.backgroundColor = stack.color;
            canvas.appendChild(stack.spirit);
        } else { // stack list is full
            return;
        }
    }
}

function touchMove(e) {
    e.preventDefault();
    var touches = e.targetTouches,
        i = 0, l = touches.length, touch, stack;
    for (; i < l; i++) {
        touch = touches[i];
        stack = getStackByTouchId(touch.identifier);
        if (stack) {
            var x = touch.pageX - stack.startX,
                y = touch.pageY - stack.startY,
                spirit = stack.spirit;
            spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
        }
    }
}

function touchEnd(e) {
    var touches = e.changedTouches,
        i = 0, l = touches.length, touch, stack;
//        alert(e.targetTouches.length);
    for (;i < l; i++) {
        touch = touches[i];
        stack = getStackByTouchId(touch.identifier);
        if (stack) {
            stack.touchId = null;
            canvas.removeChild(stack.spirit);
            stack.spirit = null;
        }
    }
}

function touchCancel(e) {
    var touches = e.changedTouches,
        i = 0, l = touches.length, touch, stack;
    for (;i < l; i++) {
        touch = touches[i];
        stack = getStackByTouchId(touch.identifier);
        if (stack) {
            stack.touchId = null;
            canvas.removeChild(stack.spirit);
            stack.spirit = null;
        }
    }
}

canvas.addEventListener("touchstart", touchStart, false);
canvas.addEventListener("touchmove", touchMove, false);
canvas.addEventListener("touchend", touchEnd, false);
canvas.addEventListener("touchCancel", touchCancel, false);