0xPr0xy · July 27, 2012 10:47
diff --git a/test.html b/test.html
 <html>
    <head>
        <style type="text/css">
            #containername {
                background-color:red;
                width: 500;
                height: 500;
            }
        </style>
    </head>
    <body>
        <article id="containername" ></article>
        <script>
            var animationname = new Animation("containername", false, 5, 3, 85, 95, 1000/20);
            animationname.start();
            animationname.stop();
 
            function Animation (div, looping, horFrames, verFrames, horFrameSize, verFrameSize, speed, callback) {
 
                var update = false;
                var stopping = false;
 
                this.div = div;
                this.looping = looping;
                this.horFrames = horFrames;
                this.verFrames = verFrames;
                this.horFrameSize = horFrameSize;
                this.verFrameSize = verFrameSize;
                this.speed = speed;
                this.numberOfFrames = horFrames * verFrames;
 
                this.callback = callback;
 
                this.x = 0;
                this.y = 0;
                this.index = 0;
                this.dir = 1;
 
                this.start = function() {
                    this.dir = 1;
                    this.update = true;
                    this.loop();
                };
 
                this.stop = function() {
                    if(this.looping){
                        this.stopping = true;
                    } else {
                        this.dir = -1;
                        this.stopping = true;
                        this.update = true;
                        if(this.index != 0){
                            this.loop();
                        }
                    }
                };
 
                this.loop = function() {
                    var ref = this;
                    var updateDir = this.dir;
 
                    this.index += (1 * updateDir);
 
                    if(this.index >= this.numberOfFrames - 1) {
                        this.index = this.numberOfFrames - 1;
                        if(this.looping){
                            this.dir = -1;
                        }else {
                            this.update = false;
                        }
                    }
                    if(this.index < 0) {
                        if(this.looping){
                            this.dir = 1;
                            this.index = 0;
                        }
                        if(this.stopping){
                            this.index = 0;
                            this.update = false;
                            if(callback != null){
                                callback();
                            }
                        }
                    }
 
                    this.x = -this.horFrameSize * (this.index % this.horFrames);
                    this.y = -this.verFrameSize * Math.floor(this.index/this.horFrames);
 
                    // This might be a bit ugly, but I ran into problems storing the container in a var. 
                    // The page I used this on is loaded by javascript, making it inpossible to to use body onload functions.
                    // Suggestions? 
                    // Email me: [email protected]
                    if(document.getElementById(this.div) != null){
                        document.getElementById(this.div).style.backgroundPosition = (this.x)+"px "+(this.y)+"px";
                    }                  
                    if(this.update){
                        setTimeout(function(){ ref.loop() },this.speed);
                    }
                };
        </script>
    </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	#containername {
	background-color:red;
	width: 500;
	height: 500;
	}
	</style>
	</head>
	<body>
	<article id="containername" ></article>
	<script>
	var animationname = new Animation("containername", false, 5, 3, 85, 95, 1000/20);
	animationname.start();
	animationname.stop();

	function Animation (div, looping, horFrames, verFrames, horFrameSize, verFrameSize, speed, callback) {

	var update = false;
	var stopping = false;

	this.div = div;
	this.looping = looping;
	this.horFrames = horFrames;
	this.verFrames = verFrames;
	this.horFrameSize = horFrameSize;
	this.verFrameSize = verFrameSize;
	this.speed = speed;
	this.numberOfFrames = horFrames * verFrames;

	this.callback = callback;

	this.x = 0;
	this.y = 0;
	this.index = 0;
	this.dir = 1;

	this.start = function() {
	this.dir = 1;
	this.update = true;
	this.loop();
	};

	this.stop = function() {
	if(this.looping){
	this.stopping = true;
	} else {
	this.dir = -1;
	this.stopping = true;
	this.update = true;
	if(this.index != 0){
	this.loop();
	}
	}
	};

	this.loop = function() {
	var ref = this;
	var updateDir = this.dir;

	this.index += (1 * updateDir);

	if(this.index >= this.numberOfFrames - 1) {
	this.index = this.numberOfFrames - 1;
	if(this.looping){
	this.dir = -1;
	}else {
	this.update = false;
	}
	}
	if(this.index < 0) {
	if(this.looping){
	this.dir = 1;
	this.index = 0;
	}
	if(this.stopping){
	this.index = 0;
	this.update = false;
	if(callback != null){
	callback();
	}
	}
	}

	this.x = -this.horFrameSize * (this.index % this.horFrames);
	this.y = -this.verFrameSize * Math.floor(this.index/this.horFrames);

	// This might be a bit ugly, but I ran into problems storing the container in a var.
	// The page I used this on is loaded by javascript, making it inpossible to to use body onload functions.
	// Suggestions?
	// Email me: [email protected]
	if(document.getElementById(this.div) != null){
	document.getElementById(this.div).style.backgroundPosition = (this.x)+"px "+(this.y)+"px";
	}
	if(this.update){
	setTimeout(function(){ ref.loop() },this.speed);
	}
	};
	</script>
	</body>
	</html>