sprite.js

/*
Copyright (c) 2011 Batiste Bieler and contributors,
https://github.com/batiste/sprite.js

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/*jslint bitwise: true, undef: true, white: true, maxerr: 50, indent: 4 */

/* Sprite.js v1.2.1
 *
 * coding guideline
 *
 * CamelCase everywhere (I don't like it but it seems to the standard these days).
 * Tabs have to be 4 spaces (python style).
 * If you contribute don't forget to add your name in the AUTHORS file.
 */

(function (global) {

"use strict";
var sjs, Sprite, Scene, Layer, Ticker, Ticker_, Cycle, Input, _Input, List,
doc = global.document,
// number of sprites
nb_sprite = 0,
// number of scenes
nb_scene = 0,
// number of cycle
nb_cycle = 0,
browser_specific_runned = false,
// global z-index
zindex = 1;


//IE 8 fix help functions
function _addEventListener(element, type,listener,useCapture){
    if(element.addEventListener){
        element.addEventListener(type, listener, useCapture);
    }else if(element.attachEvent){
        element.attachEvent("on" + type, listener);
    }
}

function _removeEventListener(element, type,listener,useCapture){
    if(element.removeEventListener){
        element.removeEventListener(type, listener, useCapture);
    }else if (element.detachEvent){
        element.detachEvent(type, listener);
    }
}

function _preventEvent(e){
    if (e.preventDefault) {
        e.preventDefault();
        e.stopPropagation();
    }else{
        e.returnValue = false;
    }
}

// math functions
function mod(n, base) {
    // strictly positive modulo
    return ((n % base) + base) % base;
}

function hypo(x, y) {
    return Math.sqrt(x * x + y * y);
}

function normalVector(vx, vy, intensity) {
    var n = hypo(vx, vy);
    if (n === 0) {
        return {x: vx, y: vy};
    }
    if (intensity) {
        return {x: ((vx / n) * intensity), y: ((vy / n) * intensity)};
    }
    return {x: vx / n, y: vy / n};
}

function lineSide(ax, ay, bx, by, cx, cy) {
    // return true if the point C is on the right of the line (A, B)
    var v = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
    if (v === 0) {
        return null;
    }
    return v > 0;
}

// browser specific feature detection
function has(el, propList) {
    var prop = propList.shift();
    while (prop) {
        if (typeof el[prop] !== 'undefined') {
            return prop;
        }
        prop = propList.shift();
    }
}

function initBrowserSpecific() {
    sjs.tproperty = has(doc.body.style, [
        'transform',
        'webkitTransform',
        'MozTransform',
        'OTransform',
        'msTransform']);

    sjs.requestAnimationFrame = has(global, [
        'requestAnimationFrame',
        'mozRequestAnimationFrame',
        'webkitRequestAnimationFrame',
        'oRequestAnimationFrame',
        'msRequestAnimationFrame']);

    sjs.cancelAnimationFrame = has(global, [
        'cancelAnimationFrame',
        'cancelRequestAnimationFrame',
        'mozCancelAnimationFrame',
        'mozCancelRequestAnimationFrame',
        'webkitCancelAnimationFrame',
        'webkitCancelRequestAnimationFrame',
        'oCancelAnimationFrame',
        'oCancelRequestAnimationFrame',
        'msCancelAnimationFrame',
        'msCancelRequestAnimationFrame']);

    sjs.createEventProperty = has(doc, ['createEvent', 'createEventObject']);
    browser_specific_runned = true;
}

function optionValue(options, name, default_value, type) {
    if (options && options[name] !== undefined) {
        if (type === 'int') {
            return options[name] | 0;
        }
        return options[name];
    }
    return default_value;
}

function overlay(x, y, w, h) {
    var div = doc.createElement('div'),
    s = div.style;
    s.top = y + 'px';
    s.left = x + 'px';
    s.width = w + 'px';
    s.height = h + 'px';
    s.color = '#fff';
    s.zIndex = 100;
    s.position = 'absolute';
    s.backgroundColor = '#000';
    s.opacity = 0.7;
    return div;
}

Scene = function Scene(options) {

    if (this.constructor !== Scene) {
        return new Scene(options);
    }

    if (!browser_specific_runned) {
        initBrowserSpecific();
    }

    this.autoPause = optionValue(options, 'autoPause', true);
    // main function
    this.main = optionValue(options, 'main', function () {});

    var div = doc.createElement('div'), parent;
    div.style.overflow = 'hidden';
    // TODO: detect those features
    // image-rendering: -moz-crisp-edges;
    // ms-interpolation-mode: nearest-neighbor;
    div.style.imageRendering = '-webkit-optimize-contrast';
    div.style.position = 'relative';
    div.className = 'sjs';
    div.id = 'sjs' + nb_scene;
    this.id = nb_scene;
    nb_scene = nb_scene + 1;
    parent = optionValue(options, 'parent', doc.body);
    parent.appendChild(div);
    this.w = optionValue(options, 'w', 480, 'int');
    this.h = optionValue(options, 'h', 320, 'int');
    this.dom = div;
    this.dom.style.width = this.w + 'px';
    this.dom.style.height = this.h + 'px';
    this.layers = {};
    this.ticker = null;
    this.useCanvas = optionValue(options, "useCanvas",
        global.location.href.indexOf('canvas') !== -1);

    this.xscale = 1;
    this.yscale = 1;

    // needs to be done after this.useCanvas
    this.Layer("default");
    sjs.scenes.push(this);
    return this;
};

Scene.prototype.constructor = Scene;

Scene.prototype.Sprite = function SceneSprite(src, layer) {
    // A shortcut for sjs.Sprite
    if(layer===undefined)
        sjs.error("When you create Sprite from the scene the layer should be specified or false.");
    return new Sprite(this, src, layer);
};

Scene.prototype.Layer = function SceneLayer(name, options) {
    return new Layer(this, name, options);
};

// just for convenience
Scene.prototype.Cycle = function SceneCycle(triplets) {
    return new Cycle(triplets);
};

Scene.prototype.Input = function SceneInput() {
    this.input = new Input(this);
    return this.input;
};

Scene.prototype.scale = function SceneScale(x, y) {
    this.xscale = x;
    this.yscale = y;
    this.dom.style[sjs.tproperty+"Origin"] = "0 0";
    this.dom.style[sjs.tproperty] = "scale(" + x + "," + y + ")";
};

Scene.prototype.toString = function () {
    return "Scene(" + String(this.id) + ")";
};

Scene.prototype.reset = function reset() {
    var l;
    if (this.ticker) {
        this.ticker.pause();
    }
    for (l in this.layers) {
        if (this.layers.hasOwnProperty(l)) {
            this.layers[l].dom.parentNode.removeChild(this.layers[l].dom);
            delete this.layers[l];
        }
    }
    // remove remaining children
    while (this.dom.childNodes.length >= 1) {
        this.dom.removeChild(this.dom.firstChild);
    }
    this.layers = {};
    this.Layer("default");
};

Scene.prototype.Ticker = function Ticker(paint, options) {
    if (this.ticker) {
        this.ticker.pause();
        this.ticker.paint = function () {};
    }
    this.ticker = new Ticker_(this, paint, options);
    return this.ticker;
};

Scene.prototype.loadImages = function loadImages(images, callback) {
    // function used to preload the sprite images
    if (!callback) {
        callback = this.main;
    }

    var toLoad = 0, total, div, img, src, error, scene, i;
    for (i = 0; i < images.length; i++) {
        if (!sjs.spriteCache[images[i]]) {
            toLoad += 1;
            sjs.spriteCache[images[i]] = {src: images[i], loaded: false, loading: false};
        }
    }

    if (toLoad === 0) {
        return callback();
    }

    total = toLoad;
    div = overlay(0, 0, this.w, this.h);
    div.style.textAlign = 'center';
    div.style.paddingTop = (this.h / 2 - 16) + 'px';

    div.innerHTML = 'Loading';
    this.dom.appendChild(div);
    scene = this;
    error = false;

    var _loadImg = function(src) {
        sjs.spriteCache[src].loading = true;
        img = doc.createElement('img');
        sjs.spriteCache[src].img = img;
        _addEventListener(img, 'load', function () {
            sjs.spriteCache[src].loaded = true;
            toLoad -= 1;
            if (error === false) {
                if (toLoad === 0) {
                    scene.dom.removeChild(div);
                    callback();
                } else {
                    div.innerHTML = 'Loading ' + ((total - toLoad) / total * 100 | 0) + '%';
                }
            }
        }, false);

        _addEventListener(img, 'error', function () {
            error = true;
            div.innerHTML = 'Error loading image ' + src;
        }, false);

        img.src = src;
    }

    for (src in sjs.spriteCache) {
        if (sjs.spriteCache.hasOwnProperty(src)) {
            if (!sjs.spriteCache[src].loading) {
                _loadImg(src);
            }
        }
    }
};

Sprite = function Sprite(scene, src, layer) {

    this.scene = scene;
    this._dirty = {};
    this.changed = false;

    // positions
    this.y = 0;
    this.x = 0;
    this._x_before = 0;
    this._x_rounded = 0;
    this._y_before = 0;
    this._y_rounded = 0;

    //velocity
    this.xv = 0;
    this.yv = 0;
    this.rv = 0;

    // shape: rectangle, circle
    this.type = "rectangle";

    // newton
    this.mass = 1;
    this.friction = 0.05;
    // forces
    this.xf = 0;
    this.yf = 0;

    // image
    this.src = null;
    this.img = null;
    this.imgNaturalWidth = null;
    this.imgNaturalHeight = null;

    // width and height of the sprite view port
    this.w = null;
    this.h = null;

    // offsets of the image within the viewport
    this.xoffset = 0;
    this.yoffset = 0;

    this.dom = null;
    this.cycle = null;

    this.xscale = 1;
    this.yscale = 1;
    this.angle = 0;

    this.xTransformOrigin = null;
    this.yTransformOrigin = null;

    this.backgroundRepeat = null;

    this.opacity = 1;
    this.color = false;

    this.id = ++nb_sprite;

    // necessary to get set
    this.layer = null;

    var value, target, setF, first_char, d, p, properties;

    // if it doesn't seems to kouak like a Layer object
    if (layer) {
        // this is a layer object
        if (layer.sprites) {
            this.layer = layer;
        } else {
            // we can receive things like this
            // {x: 10, y: 10, w: 10, h: 50, size: [20, 30], layer: var}
            properties = layer;

            // this is the messy magic options initializer code
            for (p in properties) {
                if (properties.hasOwnProperty(p)) {
                    value = properties[p];
                    target = this[p];
                    if (typeof target === "function") {
                        this[p].apply(this, value);
                    }
                    else if (target !== undefined) {
                        // this is necessary to set cache value properly
                        first_char = p.charAt(0);
                        if ((first_char === 'x' || first_char === 'y') && p.length > 1) {
                            setF = 'set' + first_char.toUpperCase() + p.charAt(1).toUpperCase() + p.slice(2);
                        } else {
                            setF = 'set' + first_char.toUpperCase() + p.slice(1);
                        }
                        if (this[setF]) {
                            this[setF].apply(this, [value]);
                        } else {
                            // necessary for layer option
                            this[p] = value;
                        }
                    }
                }
            }
        }
    }

    // can be set by the properties
    if (this.layer === undefined || layer === undefined) {
        this.layer = scene.layers['default'];
    }

    if (this.layer  && !this.layer.useCanvas) {
        d = doc.createElement('div');
        d.style.position = 'absolute';
        this.dom = d;
        this.layer.dom.appendChild(d);
    }
    if (src) {
        this.loadImg(src);
    }
    return this;
};

Sprite.prototype.constructor = Sprite;

/* boilerplate setter functions */

Sprite.prototype.setX = function setX(value) {
    this.x = value;
    // this secessary for the physic
    this._x_rounded = value | 0;
    this.changed = true;
    return this;
};

Sprite.prototype.setY = function setY(value) {
    this.y = value;
    this._y_rounded = value | 0;
    this.changed = true;
    return this;
};

Sprite.prototype.setW = function setW(value) {
    this.w = value;
    this._dirty.w = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setH = function setH(value) {
    this.h = value;
    this._dirty.h = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setXOffset = function setXoffset(value) {
    this.xoffset = value;
    this._dirty.xoffset = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setYOffset = function setYoffset(value) {
    this.yoffset = value;
    this._dirty.yoffset = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setAngle = function setAngle(value) {
    this.angle = value;
    this._dirty.angle = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setColor = function setColor(value) {
    this.color = value;
    this._dirty.color = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setOpacity = function setOpacity(value) {
    this.opacity = value;
    this._dirty.opacity = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setXScale = function setXscale(value) {
    this.xscale = value;
    this._dirty.xscale = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setYScale = function setYscale(value) {
    this.yscale = value;
    this._dirty.yscale = true;
    this.changed = true;
    return this;
};

Sprite.prototype.transformOrigin = function transformOrigin(x, y) {
    this.xTransformOrigin = x;
    this.yTransformOrigin = y;
    this._dirty.transform = true;
    this.changed = true;
    return this;
};

Sprite.prototype.setBackgroundRepeat = function setBackgroundRepeat(value) {
    this._dirty.backgroundRepeat = true;
    this.backgroundRepeat = value;
    return this;
};

// End of boilerplate setters, start of helpers

Sprite.prototype.rotate = function (v) {
    this.setAngle(this.angle + v);
    return this;
};

Sprite.prototype.orient = function orient(x, y) {
    var a = Math.atan2(y, x);
    this.setAngle(a);
};

Sprite.prototype.scale = function (x, y) {
    if (this.xscale !== x) {
        this.setXScale(x);
    }
    if (y === undefined) {
        y = x;
    }
    if (this.yscale !== y) {
        this.setYScale(y);
    }
    return this;
};

Sprite.prototype.move = function (x, y) {
    this.setX(this.x + x);
    this.setY(this.y + y);
    return this;
};

Sprite.prototype.position = function (x, y) {
    this.setX(x);
    this.setY(y);
    return this;
};

Sprite.prototype.offset = function (x, y) {
    this.setXOffset(x);
    this.setYOffset(y);
    return this;
};

Sprite.prototype.size = function (w, h) {
    this.setW(w);
    this.setH(h);
    return this;
};

Sprite.prototype.toFront = function(){
    this.layer.lastZIndex++;
    return this.setZIndex(this.layer.lastZIndex);
};

Sprite.prototype.toBack = function(){
    this.layer.lastZIndex++;
    return this.setZIndex(-this.layer.lastZIndex);
};

Sprite.prototype.setZIndex = function(z){
    if(this.dom && this.layer) {
        this._dirty.zindex = true;
        this.changed = true;
        this.zindex = z;
    }
    return this;
};

// Physic

Sprite.prototype.setForce = function setForce(xf, yf) {
    this.xf = xf;
    this.yf = yf;
};

Sprite.prototype.addForce = function addForce(xf, yf) {
    this.xf += xf;
    this.yf += yf;
};

Sprite.prototype.applyForce = function applyForce(ticks) {
    if (ticks === undefined) {
        ticks = 1;
    }
    // Integrate newton's laws of motion F = ma => a = F / m
    this.xv -= this.friction * this.xv * this.mass * ticks;
    this.xv += (this.xf / this.mass) * ticks;
    this.yv -= this.friction * this.yv * this.mass * ticks;
    this.yv += (this.yf / this.mass) * ticks;
};

Sprite.prototype.velocity = function () {
    return hypo(this.xv, this.yv);
};

Sprite.prototype.setVelocity = function (xv, yv) {
    this.xv = xv;
    this.yv = yv;
};

Sprite.prototype.addVelocity = function (xv, yv) {
    this.xv += xv;
    this.yv += yv;
};

Sprite.prototype.applyVelocity = function (ticks) {
    if (ticks === undefined)
        ticks = 1;
    if (this.xv !== 0)
        this.setX(this.x + this.xv * ticks);
    if (this.yv !== 0)
        this.setY(this.y + this.yv * ticks);
    if (this.rv !== 0)
        this.setAngle(this.angle + this.rv * ticks);
    return this;
};

Sprite.prototype.reverseVelocity = function (ticks) {
    if (ticks === undefined)
        ticks = 1;
    if (this.xv !== 0)
        this.setX(this.x - this.xv * ticks);
    if (this.yv !== 0)
        this.setY(this.y - this.yv * ticks);
    if (this.rv !== 0)
        this.setAngle(this.angle - this.rv * ticks);
    return this;
};

Sprite.prototype.applyXVelocity = function (ticks) {
    if (ticks === undefined)
        ticks = 1;
    if (this.xv !== 0)
        this.setX(this.x + this.xv * ticks);
};

Sprite.prototype.reverseXVelocity = function (ticks) {
    if (ticks === undefined)
        ticks = 1;
    if (this.xv !== 0)
        this.setX(this.x-this.xv * ticks);
};

Sprite.prototype.applyYVelocity = function (ticks) {
    if (ticks === undefined)
        ticks = 1;
    if (this.yv !== 0)
        this.setY(this.y+this.yv * ticks);
};

Sprite.prototype.reverseYVelocity = function (ticks) {
    if (ticks === undefined)
        ticks = 1;
    if (this.yv !== 0)
        this.setY(this.y-this.yv * ticks);
};

Sprite.prototype.rotateVelocity = function (a) {
    var x = this.xv * Math.cos(a) - this.yv * Math.sin(a);
    this.yv = this.xv * Math.sin(a) + this.yv * Math.cos(a);
    this.xv = x;
};

Sprite.prototype.orientVelocity = function (x, y) {
    var intensity = hypo(this.xv, this.yv), v;
    v = normalVector(x, y, intensity);
    this.xv = v.x;
    this.yv = v.y;
};

Sprite.prototype.remove = function remove() {
    if (this.cycle)
        this.cycle.removeSprite(this);
    if (this.layer && !this.layer.useCanvas) {
        this.layer.dom.removeChild(this.dom);
        this.dom = null;
    }
    if (this.texture)
        this.texture.remove();
    this.texture = null;
    //delete this.layer.sprites[this.layerIndex];
    this.layer = null;
    this.img = null;
};

// Update methods

Sprite.prototype.webGLUpdate = function webGLUpdate () {
    if (!this.texture) {
        this.texture = new webgl.Texture(this);
    }
    this.texture.render(this.x, this.y);
    return this;
};

Sprite.prototype.update = function updateDomProperties () {

    if(this.layer.scene.disableUpdate)
        return this;

    // This is the CPU heavy function.
    if (this.layer.useWebGL) {
        return this.webGLUpdate();
    }

    if (this.layer.useCanvas) {
        return this.canvasUpdate();
    }

    var style = this.dom.style, trans;
    // using Math.round to round integers before changing seems to improve a bit performances
    if (this._x_before !== this._x_rounded)
    style.left=(this.x | 0) + 'px';
    if (this._y_before !== this._y_rounded)
        style.top=(this.y | 0) + 'px';

    // cache rounded positions, it's used to avoid unecessary update
    this._x_before = this._x_rounded;
    this._y_before = this._y_rounded;

    if (!this.changed)
        return this;

    if (this._dirty.w)
        style.width=(this.w | 0) +'px';
    if (this._dirty.h)
        style.height=(this.h | 0) + 'px';
    // translate and translate3d doesn't seems to offer any speedup
    // in my tests.
    if (this._dirty.xoffset || this._dirty.yoffset)
        style.backgroundPosition=-(this.xoffset | 0) + 'px ' + -(this.yoffset | 0) + 'px';

    if (this._dirty.opacity)
        if ('opacity' in document.body.style) {
            style.opacity = this.opacity;     
        } else {
            style.filter = "alpha(opacity="+ this.opacity*100 + ")";
        }

    if (this._dirty.color)
        style.backgroundColor = this.color;
    
    if (this._dirty.zindex)
        style.zIndex = this.zindex;

    if(this._dirty.transform) {
        style[sjs.tproperty + 'Origin'] = this.xTransformOrigin + " " + this.yTransformOrigin;
    }

    if(this._dirty.backgroundRepeat) {
        style.backgroundRepeat = this.backgroundRepeat;
    }

    // those transformation have pretty bad perfs implication on Opera,
    // don't update those values if nothing changed
    if (this._dirty.xscale || this._dirty.yscale || this._dirty.angle) {
        trans = "";
        if (this.angle !== 0)
            trans += 'rotate(' + this.angle + 'rad) ';
        if (this.xscale !== 1 || this.yscale !== 1) {
            trans += ' scale(' + this.xscale + ', ' + this.yscale + ')';
        }
        style[sjs.tproperty] = trans;
    }
    // reset
    this.changed = false;
    this._dirty = {};
    return this;
};

Sprite.prototype.canvasUpdate = function canvasUpdate(layer) {
    var ctx, transx, transy, repeat_w, repeat_y;
    if (layer)
        ctx = layer.ctx;
    else
        ctx = this.layer.ctx;

    var fast_track = (
        this.angle == 0
        && this.opacity == 1
        && this.imgNaturalWidth == this.w
        && this.imgNaturalHeight == this.h
        && this.xTransformOrigin === null
    )
    if(fast_track) {
        ctx.drawImage(this.img, this.xoffset, this.yoffset, this.w, this.h,
            this._x_rounded, this._y_rounded, this.w, this.h);
        return this;
    }

    ctx.save();
    if (this.xTransformOrigin === null) {
        // 50% 505 in CSS
        transx = this.w >> 1;
        transy = this.h >> 1;
    } else {
        transx = this.xTransformOrigin;
        transy = this.yTransformOrigin;
    }

    // rounding the coordinates yield a big performance improvement
    ctx.translate(this._x_rounded + transx, this._y_rounded + transy);
    ctx.rotate(this.angle);
    if (this.xscale !== 1 || this.yscale !== 1)
        ctx.scale(this.xscale, this.yscale);
    ctx.globalAlpha = this.opacity;
    ctx.translate(-transx, -transy);
    // handle background colors.
    if (this.color) {
        ctx.fillStyle = this.color;
        ctx.fillRect(0, 0, this.w, this.h);
    }
    // handle repeating images, a way to implement repeating background in canvas
    if (this.imgLoaded && this.img) {
        if (this.imgNaturalWidth < this.w || this.imgNaturalHeight < this.h) {
            repeat_w = Math.floor(this.w / this.imgNaturalWidth);
            while(repeat_w > 0) {
                repeat_w = repeat_w-1;
                repeat_y = Math.floor(this.h / this.imgNaturalHeight);
                while(repeat_y > 0) {
                    repeat_y = repeat_y-1;
                    ctx.drawImage(this.img, this.xoffset, this.yoffset,
                        this.imgNaturalWidth,
                        this.imgNaturalHeight,
                        repeat_w * this.imgNaturalWidth,
                        repeat_y * this.imgNaturalHeight,
                        this.imgNaturalWidth,
                        this.imgNaturalHeight);
                }

            }
        } else {
            // image with normal size or with
            ctx.drawImage(this.img, this.xoffset, this.yoffset, this.w, this.h, 0, 0, this.w, this.h);
        }
    }
    ctx.restore();
    return this;
};

// Other methods

Sprite.prototype.toString = function () {
    return "Sprite(" + String(this.id) + ")";
};

Sprite.prototype.onload = function (callback) {
    if (this.imgLoaded && this._callback) {
        this._callback = callback;
    }
};

Sprite.prototype.loadImg = function (src, resetSize) {
    // the image exact source value will change according to the
    // hostname, this is useful to retain the original source value here.
    var _loaded, there = this, img;
    this.src = src;
    // check if the image is already in the cache
    if (!sjs.spriteCache[src]) {
        // if not we create the image in the cache
        this.img = doc.createElement('img');
        sjs.spriteCache[src] = {src: src, img: this.img, loaded: false, loading: true};
        _loaded = false;
    } else {
        // if it's already there, we set img object and check if it's loaded
        this.img = sjs.spriteCache[src].img;
        _loaded = sjs.spriteCache[src].loaded;
    }

    // actions to perform when the image is loaded
    function imageReady(e) {
        img = there.img;
        sjs.spriteCache[src].loaded = true;
        there.imgLoaded = true;
        if (there.layer && !there.layer.useCanvas)
            there.dom.style.backgroundImage = 'url(' + src + ')';
        there.imgNaturalWidth = img.width;
        there.imgNaturalHeight = img.height;
        if (there.w === null || resetSize)
            there.setW(img.width);
        if (there.h === null || resetSize)
            there.setH(img.height);
        there.onload();
    }
    if (_loaded)
        imageReady();
    else {
        _addEventListener(this.img, 'load', imageReady, false);
        this.img.src = src;
    }
    return this;
};

Sprite.prototype.distance = function distance(x, y) {
    // Return the distance between this sprite and the point (x, y) or a Sprite
    if (typeof x === "number") {
        return Math.sqrt(Math.pow(this.x + this.w / 2 - x, 2) +
            Math.pow(this.y + this.h / 2 - y, 2));
    } else {
        return Math.sqrt(Math.pow(this.x + (this.w / 2) - (x.x + (x.w / 2)), 2) +
            Math.pow(this.y + (this.h / 2) - (x.y + (x.h / 2)), 2));
    }
};

Sprite.prototype.center = function center() {
    return {x: this.x + this.w / 2, y: this.y + this.h / 2};
};

// Fx

Sprite.prototype.explode2 = function explode(v, horizontal, layer) {
    if (!layer)
        layer = this.layer;
    var props = {layer:layer, color:this.color};
    if (v === undefined) {
        if (horizontal)
            v = this.h >> 1;
        else
            v = this.w >> 1;
    }
    var s1 = layer.scene.Sprite(this.src, props);
    var s2 = layer.scene.Sprite(this.src, props);
    if (horizontal) {
        s1.size(this.w, v);
        s1.position(this.x, this.y);
        s2.size(this.w, this.h - v);
        s2.position(this.x, this.y + v);
        s2.setYOffset(v);
    } else {
        s1.size(v, this.h);
        s1.position(this.x, this.y);
        s2.size(this.w - v, this.h);
        s2.position(this.x + v, this.y);
        s2.setXOffset(v);
    }
    return [s1, s2];
};

Sprite.prototype.explode4 = function explode(x, y, layer) {
    if (x === undefined)
        x = this.w >> 1;
    if (y === undefined)
        y = this.h >> 1;
    if (!layer)
        layer = this.layer;
    var props = {layer:layer, color:this.color};
    // top left sprite, going counterclockwise
    var s1 = layer.scene.Sprite(this.src, props),
        s2 = layer.scene.Sprite(this.src, props),
        s3 = layer.scene.Sprite(this.src, props),
        s4 = layer.scene.Sprite(this.src, props);

        s1.size(x, y);
    s1.position(this.x, this.y);

    s2.size(this.w - x, y);
    s2.position(this.x + x, this.y);
    s2.offset(x, 0);

    s3.size(this.w - x, this.h - y);
    s3.position(this.x + x, this.y + y);
    s3.offset(x, y);

    s4.size(x, this.h - y);
    s4.position(this.x, this.y + y);
    s4.offset(0, y);

    return [s1, s2, s3, s4];
};

Cycle = function Cycle(triplets) {

    if (this.constructor !== Cycle) {
        return new Cycle(triplets);
    }

    var i, triplet;

    // Cycle for the Sprite image.
    // A cycle is a list of triplet (x offset, y offset, game tick duration)
    this.triplets = triplets;
    // total duration of the animation in ticks
    this.cycleDuration = 0;
    // this array knows on which ticks in the animation
    // an image change is needed
    this.changingTicks = triplets.map(function(triplet) {
        this.cycleDuration += triplet[2];
        return this.cycleDuration;
    }, this);
    this.changingTicks.unshift(0);
    this.currentTripletIndex = undefined;
    // suppose to be private
    this.sprites = [];
    // if set to false, the animation will stop automaticaly after one run
    this.repeat = true;
    this.tick = 0;
    this.done = false;
    this.id = ++nb_cycle;
};

Cycle.prototype.addSprite = function addSprite(sprite) {
    this.sprites.push(sprite);
    sprite.cycle = this;
    return this;
};

Cycle.prototype.toString = function () {
    return "Cycle(" + String(this.id) + ")";
};

Cycle.prototype.update = function update() {
    var sprites = this.sprites, i, sp;
    for (i = 0; sp = sprites[i]; i++) {
        sp.update();
    }
    return this;
};

Cycle.prototype.addSprites = function addSprites(sprites) {
    this.sprites = this.sprites.concat(sprites);
    var j, sp;
    for (j = 0; sp = sprites[j]; j++) {
        sp.cycle = this;
    }
    return this;
};

Cycle.prototype.removeSprite = function removeSprite(sprite) {
    var j, sp;
    for (j = 0; sp = this.sprites[j]; j++) {
        if (sprite == sp) {
            sp.cycle = null;
            this.sprites.splice(j, 1);
        }
    }
    return this;
};

Cycle.prototype.next = function (ticks, update) {
    if (this.tick > this.cycleDuration) {
        if (this.repeat)
            this.tick = 0;
        else {
            this.done = true;
            return this;
        }
    }
    // search the current triplet index
    var currentTripletIndex, i, j, sprite, next;
    for (i = 0; i < this.changingTicks.length; i++) {
        next = this.changingTicks[i+1];
        if (this.tick >= this.changingTicks[i]) {
            if(next === undefined) {
                currentTripletIndex = 0;
                this.tick = 0;
                break;
            } else if(this.tick < next) {
                currentTripletIndex = i;
                break;
            }
        }
    }
    if (currentTripletIndex !== undefined && currentTripletIndex !== this.currentTripletIndex) {
        this.sprites.map(function(sprite) {
            sprite.setXOffset(this.triplets[currentTripletIndex][0]);
            sprite.setYOffset(this.triplets[currentTripletIndex][1]);
            if (update) {
                sprite.update();
            }
        }.bind(this));
        this.currentTripletIndex = currentTripletIndex;
    }

    ticks = ticks || 1; // default tick: 1
    this.tick = this.tick + ticks;
    return this;
};

Cycle.prototype.reset = function resetCycle(update) {
    var j, sprite;
    this.tick = 0;
    this.done = false;
    for (j = 0; sprite = this.sprites[j]; j++) {
        sprite.setXOffset(this.triplets[0][0]);
        sprite.setYOffset(this.triplets[0][1]);
        if (update)
            sprite.update();
    }
    return this;
};

Cycle.prototype.go = function gotoCycle(n) {
    var j, sprite;
    for (j = 0; sprite = this.sprites[j]; j++) {
        sprite.setXOffset(this.triplets[n][0]);
        sprite.setYOffset(this.triplets[n][1]);
    }
    return this;
};

Ticker_ = function Ticker_(scene, paint, options) {

    // backward compatiblity from the 1.1.1 API
    if (typeof paint == "number") {
        var buf = paint;
        paint = options;
        options = {tickDuration: buf}
    }

    this.scene = scene;

    if (this.constructor !== Ticker_){
        return new Ticker_(tickDuration, paint);
    }

    this.tickDuration = optionValue(options, 'tickDuration', 16);
    this.expectedFps = 1000 / this.tickDuration;
    this.useAnimationFrame = optionValue(options, 'useAnimationFrame', false);
    if (!sjs.requestAnimationFrame || !sjs.cancelAnimationFrame) {
        this.useAnimationFrame = false;
    }

    this.paint = paint;

    var that = this;
    this.bindedRun = function bindedRun(t) {that.run(t);}

    this.start = new Date().getTime();
    this.now = this.start;
    this.ticksElapsed = 0;
    // absolute number of ticks that have been played ever
    this.currentTick = 0;
    this.ticksSinceLastStart = 0;
    this.droppedFrames = 0;
    // will divide the framerate by 2 if true
    this.lowFrameRate = false;
};

Ticker_.prototype.next = function (timestamp) {
    var now = new Date().getTime();
    this.diff = now - this.now;
    this.now = now;
    // number of ticks that have elapsed since the last start
    this.lastTicksElapsed = Math.round(this.diff / this.tickDuration);
    this.droppedFrames += Math.max(0, this.lastTicksElapsed - 1);
    this.ticksSinceLastStart += this.lastTicksElapsed;
    // add the diff to the current ticks
    this.currentTick += this.lastTicksElapsed;
    return this.lastTicksElapsed;
};

Ticker_.prototype.run = function(timestamp) {
    if (this.paused) {
        return;
    }
    /*if(this.lowFrameRate || this.load > 20 && this.fps < (this.expectedFps / 2)) {
        this.lowFrameRate = true;
        if(this.skippedFrames == 1) {
            this.skippedFrames = 0;
            this.skipPaint = true;
            this.scene.disableUpdate = true;
        } else {
            this.skippedFrames = 1;
            this.skipPaint = false;
            this.scene.disableUpdate = false;
        }
    } else {
        this.skipPaint = false;
    }*/

    var t = this;
    var ticksElapsed = this.next(timestamp);

    // no update needed, this happen on the first run
    /*if (ticksElapsed == 0) {
        // this is not a cheap operation
        setTimeout(this.bindedRun, this.tickDuration);
        return;
    }*/
    
    //if(!this.skipPaint) {
    for (var name in this.scene.layers) {
        var layer = this.scene.layers[name];
        if (layer.useCanvas && layer.autoClear) {
            layer.clear();
        }
    }
    //}

    this.paint(this);
    // reset the keyboard change
    if (this.scene.input) {
        this.scene.input.next();
    }
    this.timeToPaint = (new Date().getTime()) - this.now;
    // spread the load value on 2 frames so the value is more stable
    this.load = ((this.timeToPaint / this.tickDuration * 100) + this.load) >> 1;
    this.fps = Math.round(1000 / (this.now - (this.lastPaintAt || 0)));

    this.lastPaintAt = this.now;
    if (this.useAnimationFrame) {
        this.tickDuration = 16;
        this.animationId = global[sjs.requestAnimationFrame](this.bindedRun);
    } else {
        var _nextPaint = Math.max(this.tickDuration - this.timeToPaint, 6);
        this.timeout = setTimeout(this.bindedRun, _nextPaint);
    }
};

Ticker_.prototype.pause = function () {
    if (this.useAnimationFrame) {
        global[sjs.cancelAnimationFrame](this.animationId);
    } else {
        global.clearTimeout(this.timeout);
    }
    this.paused = true;
};

Ticker_.prototype.resume = function () {
    this.start = new Date().getTime();
    this.ticksElapsed = 0;
    this.ticksSinceLastStart = 0;
    this.paused = false;
    this.run();
};


var inputSingleton = false;
function Input(scene) {
    if (!inputSingleton)
        inputSingleton = new _Input(scene);
    return inputSingleton;
};

_Input = function _Input(scene) {

    if (scene)
        this.dom = scene.dom;
    else
        this.dom = doc.body;

    var that = this;

    // record the current keyboard state
    this.keyboard = {};
    this.mouse = {position: {}, click: undefined};
    // record the keyboard changes since the last call
    this.keyboardChange = {};
    this.mousedown = false;
    that.mousepressed = false;
    this.mousereleased = false;
    this.keydown = false;
    this.touchMoveSensibility = 20;
    this.enableCustomEvents = false;

    this.touchable = 'ontouchstart' in global;

    this.next = function () {
        if(this.disableFor)
            this.disableFor = that.disableFor - 1;
        this.keyboardChange = {};
        this.mousepressed = false;
        this.mouse.click = undefined;
        this.mousereleased = false;
    }

    this.disableFor = 0;
    this.disable = function (ticks) {
        that.disableFor = ticks;
    }

    this.keyPressed = function (name) {
        return that.keyboardChange[name] !== undefined && that.keyboardChange[name];
    };

    this.keyReleased = function (name) {
        return that.keyboardChange[name] !== undefined && !that.keyboardChange[name];
    };

    this.arrows = function arrows() {
        /* Return true if any arrow key is pressed */
        return this.keyboard.right || this.keyboard.left || this.keyboard.up || this.keyboard.down;
    };

    function fireEvent(name, value) {
        if(!that.enableCustomEvents)
            return;
        if(doc.createEvent) {
            var evObj = doc.createEvent('Events');
            evObj.initEvent('sjs' + name, true, true);
            evObj.value = value;
            that.dom.dispatchEvent(evObj);
        } else if(doc.createEventObject) {
            var evObj = doc.createEventObject();
            evObj.value = value;
            that.dom.fireEvent('onsjs' + name, evObj);
        }
    }

    function updateKeyChange(name, val) {
        fireEvent(name, val);
        if(name == "space" || name == "enter") {
            updateKeyChange("action", val)
        }
        if (that.keyboard[name] !== val) {
            that.keyboard[name] = val;
            that.keyboardChange[name] = val;
        }
    }

    // this is handling WASD, and arrows keys
    function updateKeyboard(e, val) {
        if (e.keyCode == 40 || e.keyCode == 83) {
            updateKeyChange('down', val);
        }
        if (e.keyCode == 38 || e.keyCode == 87) {
            updateKeyChange('up', val);
        }
        if (e.keyCode == 39 || e.keyCode == 68) {
            updateKeyChange('right', val);
        }
        if (e.keyCode == 37 || e.keyCode == 65) {
            updateKeyChange('left', val);
        }
        if (e.keyCode == 32) {
            updateKeyChange('space', val);
        }
        if (e.keyCode == 17) {
            updateKeyChange('ctrl', val);
        }
        if (e.keyCode == 13) {
            updateKeyChange('enter', val);
        }
        if (e.keyCode == 27) {
            updateKeyChange('esc', val);
        }
        // 0..9, a-z
        if (e.keyCode >= 48 && e.keyCode <= 90) {
            var keyStr = String.fromCharCode(e.keyCode);
            updateKeyChange(keyStr.toLowerCase(), val);
        }
    }

    var listen = function (name, fct) {
        _addEventListener(global, name, fct, false);
    }

    // Mouse like events
    function clickEvent(event) {
        that.mouse.click = {
            x: (event.clientX - that.dom.offsetLeft) / scene.xscale,
            y: (event.clientY - that.dom.offsetTop) / scene.yscale
        };
    }

    function mouseDownEvent(event) {
        that.mousedown = true;
        that.mouse.down = true;
        that.mousepressed = true;
        // prevent unwanted browser drag and drop behavior
        _preventEvent(event);
    }

    function mouseUpEvent(event) {
        that.mousedown = false;
        that.mouse.down = false;
        that.mousereleased = true;
        that.mouse.click = {
            x: (event.clientX - that.dom.offsetLeft) / scene.xscale,
            y: (event.clientY - that.dom.offsetTop) / scene.yscale
        };
    }

    function mouseMoveEvent(event) {
        that.mouse.position = {
            x: (event.clientX - that.dom.offsetLeft) / scene.xscale,
            y: (event.clientY - that.dom.offsetTop) / scene.yscale
        };
    }

    function reduceTapEvent(e) {
        // To simplify I ignore multiple touch events and only return the first event
        if (e.touches && e.touches.length) { e = e.touches[0]; }
        else if (e.changedTouches && e.changedTouches.length) { e = e.changedTouches[0];}
        return e
    }

    if (this.touchable) {
        listen("touchstart", function (e) {
            e = reduceTapEvent(e);
            updateKeyChange('space', true); // tap imitates space
            // simulate the click
            clickEvent(e);
            //store initial coordinates to find out swipe directions later
            that.touchStart = {"x" : e.clientX, "y": e.clientY};

        });

    listen("touchend", function (e) {
        mouseUpEvent(e);
        that.keyboard = {}
        that.touchStart = null;
    });

    listen("touchmove", function (e) {
        _preventEvent(e); // avoid scrolling the page
        e = reduceTapEvent(e);
        updateKeyChange('space', false); // if it moves: it is not a tap
        mouseMoveEvent(e);
        if (that.touchStart) {
            var deltaX = e.clientX - that.touchStart.x;
            var deltaY = e.clientY - that.touchStart.y;

            if (deltaY < -that.touchMoveSensibility) {
                updateKeyChange('up', true);
                updateKeyChange('down', false);
            } else if (deltaY > that.touchMoveSensibility) {
                updateKeyChange('down', true);
                updateKeyChange('up', false);
            } else {
                updateKeyChange('up', false);
                updateKeyChange('down', false);
            }
            if (deltaX < -that.touchMoveSensibility) {
                updateKeyChange('left', true);
                updateKeyChange('right', false);
            } else if(deltaX > that.touchMoveSensibility) {
                updateKeyChange('right', true);
                updateKeyChange('left', false);
            } else {
                updateKeyChange('left', false);
                updateKeyChange('right', false);
            }
        }
    });

        listen("touchmove", function (e) {
            e = reduceTapEvent(e);
            mouseMoveEvent(e);
        });
    };

    listen("mousedown", mouseDownEvent);
    listen("mouseup", mouseUpEvent);
    listen("click", clickEvent);
    listen("mousemove", mouseMoveEvent);

    listen("keydown", function (e) {
        that.keydown = true;
        updateKeyboard(e, true);
    });

    listen("keyup", function (e) {
        that.keydown = false;
        updateKeyboard(e, false);
    });

    // can be used to avoid key jamming
    listen("keypress", function (e) {});
    if (!sjs.debug)
        listen("contextmenu", function (e) {_preventEvent(e);});
};


// Add an automatic pause to all the scenes when the user
// quit the current window.
_addEventListener(global, "blur", function (e) {
    for (var i = 0; i < sjs.scenes.length; i++) {
        var scene = sjs.scenes[i];
        if (!scene.autoPause)
            continue;
        var anon = function (scene) {
            Input(scene);
            inputSingleton.keyboard = {};
            inputSingleton.keydown = false;
            inputSingleton.mousedown = false;
            // create a semi transparent layer on the game
            if (scene.ticker && !scene.ticker.paused) {
                scene.ticker.pause();
                var div = overlay(0, 0, scene.w, scene.h);
                div.innerHTML = '<h1>Paused</h1><p>Click or press any key to resume.</p>';
                div.style.textAlign = 'center';
                div.style.paddingTop = ((scene.h / 2) - 32) + 'px';
                var listener = function (e) {
                    _preventEvent(e);
                    scene.dom.removeChild(div);
                    _removeEventListener(doc, 'click', listener, false);
                    _removeEventListener(doc, 'keyup', listener, false);
                    scene.ticker.resume();
                }
                _addEventListener(doc, 'click', listener, false);
                _addEventListener(doc, 'keyup', listener, false);
                scene.dom.appendChild(div);
            }
        }
        anon(scene);
    }
}, false);

Layer = function Layer(scene, name, options) {

    var domElement, needToCreate, domH, domW;

    if (!this || this.constructor !== Layer)
        return new Layer(scene, name, options);

    this.sprites = {};
    this.scene = scene;

    if (options === undefined)
        options = {useCanvas: scene.useCanvas, autoClear: true}

    if (options.useWebGL)
        options.useCanvas = true;

    if (options.autoClear === undefined)
        this.autoClear = true;
    else
        this.autoClear = options.autoClear;

    if (options.useCanvas === undefined)
        this.useCanvas = this.scene.useCanvas;
    else
        this.useCanvas = options.useCanvas;

    this.useWebGL = options.useWebGL;

    this.name = name;
    if (this.scene.layers[name] === undefined) {
        this.scene.layers[name] = this;
    } else {
        if (sjs.debug) {
            sjs.warning("A layer named " + name + " already exist.");
        }
        // if the user try to create a Layer that already exists,
        // we send back the same.
        return this.scene.layers[name];
    }
    
    this.lastZIndex = 0;
    
    domElement = doc.getElementById(name);
    if (!domElement)
        needToCreate = true;
    else
        needToCreate = false;

    if (this.useCanvas) {
        if (domElement && domElement.nodeName.toLowerCase() !== "canvas") {
            sjs.error("Cannot use HTMLElement " + domElement.nodeName + " with canvas renderer.");
        }
        if (needToCreate) {
            domElement = doc.createElement('canvas');
        }
    } else {
        if (needToCreate) {
            domElement = doc.createElement('div');
        }
    }

    if (!needToCreate) {
        domH = domElement.height || domElement.style.height;
        domW = domElement.width || domElement.style.width;
    } else {
        domH = false;
        domW = false;
    }

    if (options.parent)
        this.parent = options.parent;
    else
        this.parent = this.scene.dom;
    this.parent.appendChild(domElement);
    domElement.id = domElement.id || 'sjs' + scene.id + '-' + name;
    if (!options.disableAutoZIndex) {
        zindex += 1;
        domElement.style.zIndex = String(zindex);
    }
    domElement.style.backgroundColor = options.color || domElement.style.backgroundColor;
    this.h = options.h || domH || scene.h;
    this.w = options.w || domW || scene.w;
    if (domElement.nodeName == "CANVAS") {
        domElement.height = this.h;
        domElement.width = this.w;
    } else {
        domElement.style.height = this.h + 'px';
        domElement.style.width = this.w +'px';
    };
    domElement.style.position = 'absolute';
    domElement.style.top = domElement.style.top || '0px';
    domElement.style.left =  domElement.style.left || '0px';

    this.dom = domElement;

    // webgl needs to be set after the size
    if (this.useCanvas) {
        if (options.useWebGL) {
            this.ctx = webgl.init(domElement);
        } else {
            this.ctx = domElement.getContext('2d');
        }
    }
};

Layer.prototype.constructor = Layer;

Layer.prototype.clear = function clear() {
    if (this.useWebGL)
        this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);
    else
        this.ctx.clearRect(0, 0, this.dom.width, this.dom.height);
};

Layer.prototype.Sprite = function (src, options) {
    if (options)
        options.layer = this;
    else
        options = this;
    return new Sprite(this.scene, src, options);
};

Layer.prototype.remove = function remove() {
    this.parent.removeChild(this.dom);
    delete this.scene.layers[this.name];
};

Layer.prototype.addSprite = function addSprite(sprite) {
    var index = Math.random() * 11;
    this.sprites[index] = sprite;
    return index
};

Layer.prototype.setColor = function setColor(color) {
    this.dom.style.backgroundColor = color;
};

Layer.prototype.onTop = function onTop(color) {
    zindex += 1;
    this.dom.style.zIndex = String(zindex);
};

List = function List(list) {
    if (this.constructor !== List)
        return new List(list);
    // ensure that a List can be initialized with a list.
    this.list = (list && (list.list || list)) || [];
    this.length = this.list.length;
    this.index = -1;
};

List.prototype.add = function add(sprite) {
    if (sprite.length)
        this.list.push.apply(this.list, sprite);
    else
        this.list.push(sprite);
    this.length = this.list.length;
};

// alias
List.prototype.append = List.prototype.add;

List.prototype.remove = function remove(toRemove) {
    var removed = false
    for (var i = 0, el; el = this.list[i]; i++) {
        if (el == toRemove) {
            this.list.splice(i, 1);
            // delete during the iteration is possible
            if (this.index > -1)
                this.index = this.index - 1;
            i--;
            removed = true;
        }
    }
    this.length = this.list.length;
    return removed;
};

List.prototype.iterate = function iterate() {
    this.index += 1;
    if (this.index >= this.list.length) {
        this.index = -1;
        return false;
    }
    return this.list[this.index];
};

List.prototype.pop = function pop() {
    this.length -= 1;
    return this.list.pop();
};

List.prototype.shift = function shift() {
    this.index -= 1;
    this.length -= 1;
    return this.list.shift();
};

List.prototype.isIn = function isInList(el) {
    for(var i=0; i<this.list.length; i++) {
        if(this.list[i] == el) {
            return true;
        }
    }
    return false;
}

List.prototype.filter = function filterList(name, value) {
    var newList = new List();
    for(var i=0; i<this.list.length; i++) {
        if(this.list[i][name] == value) {
            newList.add(this.list[i]);
        }
    }
    return newList;
}

List.prototype.empty = function () {
    this.list = [];
    this.length = 0;
    this.index = -1;
}

var log_output = null;

function output(value) {
    if(!log_output) {
        log_output = doc.createElement('textarea');
        log_output.style.height = "200px";
        log_output.style.width = (window.innerWidth - 100) + 'px';
        doc.body.appendChild(log_output);
    }
    log_output.value = log_output.value + value;
    log_output.scrollTop = log_output.scrollHeight;
}

function _log() {
    if(!sjs.debug)
        return;
    var result = "";
    for (var i = 0; i < arguments.length; i++) {
        result += arguments[i] + ' ';
    }
    output(result + "\r\n");
}

var sjs = {
    // a global cache to load each sprite only one time.
    spriteCache: {},
    debug: false,
    Cycle: Cycle,
    Input: Input,
    Scene: Scene,
    SpriteList: List, // backward compatibility 1.1.1
    List: List,
    Sprite: Sprite,
    overlay: overlay,
    scenes: [],
    error: function error(msg) {_log("Error: " + msg);},
    warning:function warning(msg) {_log("Warning: " + msg);},
    log:_log,
    createEvent: null,
    math: {hypo: hypo, mod: mod, normalVector: normalVector, lineSide: lineSide}
};

global.sjs = sjs;

})(this);