function Aframe(src, top, left) {
    this.src = src;
    this.top = top;
    this.left = left;
}

function initAnimation(element, interval, imageSrcArray, imageSrcDir, topPositionArray, leftPositionArray, loopflag) {
    var a = new Animation(element, interval, loopflag);
    
    if (!imageSrcDir) imageSrcDir = "";
    
    // if no position information is supplied don't move element during animation
    if (!topPositionArray) topPositionArray = [null];
    if (!leftPositionArray) leftPositionArray = [null];
    
    // add image frames to Animation object 
    // if more images are supplied than positions, continue to use last position when positions run out 
    for (var i = 0; i < imageSrcArray.length; i++) {
        if (i < topPositionArray.length) 
            var top = topPositionArray[i];
        if (i < leftPositionArray.length)
            var left = leftPositionArray[i];
        a.addFrame(imageSrcDir + imageSrcArray[i], top, left);
    }
    
    return a;
}

function Animation(imageEl, interval, loopflag) {
    var that = this;
    this.imageEl = imageEl;
    this.timer;
    this.currentFrame;
    this.syncContext = null;
    this.syncFunc = null;
    this.syncFuncFrame = 0;
    this.onCompletion = null;
    
    // array of frames for the animation sequence
    this.frames = new Array;
    
    // interval between frames
    this.interval = interval;
    
    // true if animation should loop continuously, false if it should stop at last frame
    this.loopflag = loopflag;

    this.loop = function() {
        with (that) {
            if (currentFrame >= frames.length) {
                if (loopflag)
                    currentFrame = 0;
                else {
                    stop();
                    if (onCompletion) onCompletion();
                    return;
                }
            }
            imageEl.src = frames[currentFrame].src;
            if (frames[currentFrame].left) {
                imageEl.style.left = frames[currentFrame].left;
            }
            if (frames[currentFrame].top) {
                imageEl.style.top = frames[currentFrame].top;
            }

            if (syncFunc != null && syncFuncFrame == currentFrame)
                syncFunc.call(syncContext);
            currentFrame++;
        }
    }    
}

Animation.prototype.addFrame = function(imageSrc, top, left) {
    var frame = new Aframe(imageSrc, top, left);
    this.frames.push(frame);
}

Animation.prototype.start = function() {
    this.currentFrame = 0;
    this.timer = setInterval(this.loop, this.interval);
}

Animation.prototype.stop = function () {
    clearInterval(this.timer);
}

Animation.prototype.syncWith = function(context, f, frame) {
    // need the context (object) in which f() should be called so it doesn't use ours
    this.syncContext = context;
    this.syncFunc = f;
    this.syncFuncFrame = frame;
}

// registers a function to be run when this animation completes
Animation.prototype.runOnCompletion = function(f) {
    this.onCompletion = f;
}