Array access problems

bg = new BackgroundLayer
    backgroundColor: "#6441A5"

#prepare array to hold each box object
boxArray = []

#create 3 box layers via a loop
for num in [0..2]
        boxArray[num] = new Layer
            width: 100
            height: 100
            midX: 150 + (num * 150 )
            midY: (bg.height / 2 )
            backgroundColor: "#DD2476"
            borderRadius: 20

        #boxArray[num].draggable.enabled = true

        boxArray[num].states.add({
            clicked: {
                scale: 0.6,
                #backgroundColor: "#FF512F"
            }})

        boxArray[num].states.animationOptions = {
            curve: "spring(300, 40, 10)",
            time: 0.5
        }


for num in [0..2]
    boxArray[num].on Events.TouchStart, ->
        this.states.next()

#testing that the value is correct
for i in [0..2]
    print "boxArray.midX test: Box " + num + ": " + boxArray[i].midX

#getting errors that boxArray[i].midX is undefined
bg.on Events.TouchMove, (event) ->
    #set I to loop as 0, 1, 2
        for i in [0..3]
        # getting the error here that the item is undefined
            delta =
                x: boxArray[i].midX - Events.touchEvent(event).clientX
                y: boxArray[i].midY - Events.touchEvent(event).clientY

            dist = Math.abs(delta.x) + Math.abs(delta.y)
            alpha = Utils.modulate dist, [0, 150], [0.1, 0.5], true


            boxArray[i].shadowX = Utils.modulate delta.x, [0, Screen.width /2], [0, 50]
            boxArray[i].shadowY = Utils.modulate delta.y, [0, Screen.height/2], [0, 50]

            boxArray[i].shadowBlur = Utils.modulate dist, [0, 100], [0, 35]

            boxArray[i].shadowColor = "rgba(0,0,0,#{alpha})"