var DataBus = require("databus");
var transform = require("transform-js").transform;

function LoadingScreen () {

    DataBus.inject(this);

    this._loading = 0;
    this._loaded = 0;
    this._max = 0;
    this._finished = false;

    this._template = '' + 
        '<div class="container">' + 
            '<div class="logo">' +
                '<img src="assets/images/logo.png"' +
                    'onerror="this.style.display=\'none\'"/>' +
            '</div>' +
            '<div class="heading">' + 
                '<span id="WSELoadingScreenPercentage">{$progress}%</span>' + 
                'Loading...' + 
            '</div>' + 
            '<div class="progressBar">' + 
                '<div class="progress" id="WSELoadingScreenProgress" ' +
                    'style="width: {$progress}%;">' + 
                '</div>' + 
            '</div>' + 
        '</div>';

    this._container = document.createElement("div");
    this._container.setAttribute("id", "WSELoadingScreen");
    this._container.style.zIndex = 10000;
    this._container.style.width = "100%";
    this._container.style.height = "100%";

}

LoadingScreen.prototype.setTemplate = function (template) {
    this._template = template;
};

LoadingScreen.prototype.addItem = function () {

    if (this._finished) {
        return;
    }

    this._loading += 1;
    this._max += 1;

    this.update();
};

LoadingScreen.prototype.count = function () {
    return this._max;
};

LoadingScreen.prototype.itemLoaded = function () {

    if (this._finished) {
        return;
    }

    if (this._loaded === this._max) {
        return;
    }

    this._loading -= 1;
    this._loaded += 1;

    if (this._loaded === this._max) {
        this._finished = true;
        this.trigger("finished");
    }

    this.update();
};

LoadingScreen.prototype.update = function () {

    var progress;

    if (this._loaded > this._max) {
        this._loaded = this._max;
    }

    progress = parseInt((this._loaded / this._max) * 100, 10);

    if (this._max < 1) {
        progress = 0;
    }

    this._container.innerHTML = render(this._template, {
        all: this._max,
        remaining: this._max - this._loaded,
        loaded: this._loaded,
        progress: progress
    });

};

LoadingScreen.prototype.show = function (parent) {
    this._container.style.display = "";
    parent.appendChild(this._container);
    this.update();
};

LoadingScreen.prototype.hide = function () {

    var self = this;

    function valFn (v) {
        self._container.style.opacity = v;
    }

    function finishFn () {
        self._container.style.display = "none";
        self._container.parentNode.removeChild(self._container);
    }

    transform(1, 0, valFn, {
        duration: 500,
        onFinish: finishFn
    });

    this._container.style.display = "none";
};

function render (template, vars) {

    for (var key in vars) {
        template = insertVar(template, key, vars[key]);
    }

    return template;
}

function insertVar (template, name, value) {
    return ("" + template).split("{$" + name + "}").join("" + value);
}

module.exports = LoadingScreen;

Documents

docs/reference/elements/nametemplate.md
docs/reference/elements/stop.md
docs/development.md
docs/documentation.md
docs/downloads.md
docs/examples.md
docs/games.md
docs/index.md
docs/reference/elements/alert.md
docs/reference/elements/animation.md
docs/reference/elements/assets.md
docs/reference/elements/audio.md
docs/reference/elements/background.md
docs/reference/elements/break.md
docs/reference/elements/character.md
docs/reference/elements/choice.md
docs/reference/elements/clear.md
docs/reference/elements/composite.md
docs/reference/elements/conditionals.md
docs/reference/elements/confirm.md
docs/reference/elements/curtain.md
docs/reference/elements/displayname.md
docs/reference/elements/do.md
docs/reference/elements/easing_attribute.md
docs/reference/elements/else.md
docs/reference/elements/flash.md
docs/reference/elements/flicker.md
docs/reference/elements/fn.md
docs/reference/elements/global.md
docs/reference/elements/globalize.md
docs/reference/elements/goto.md
docs/reference/elements/group.md
docs/reference/elements/hide.md
docs/reference/elements/image.md
docs/reference/elements/imagepack.md
docs/reference/elements/line.md
docs/reference/elements/localize.md
docs/reference/elements/move.md
docs/community.md
docs/reference/elements/option.md
docs/reference/elements/pause.md
docs/reference/elements/play.md
docs/reference/elements/prompt.md
docs/reference/elements/restart.md
docs/reference/elements/scene.md
docs/reference/elements/scenes.md
docs/reference/elements/set.md
docs/reference/elements/set_vars.md
docs/reference/elements/settings.md
docs/reference/elements/shake.md
docs/reference/elements/show.md
docs/reference/elements/source.md
docs/reference/elements/stage.md
docs/reference/elements/start.md
docs/beginners-guide.md
docs/reference/elements/sub.md
docs/reference/elements/tag.md
docs/reference/elements/textbox.md
docs/reference/elements/track.md
docs/reference/elements/transform.md
docs/reference/elements/trigger.md
docs/reference/elements/trigger_command.md
docs/reference/elements/triggers.md
docs/reference/elements/var.md
docs/reference/elements/wait.md
docs/reference/elements/when.md
docs/reference/elements/while.md
docs/reference/elements/with.md
docs/reference/elements/ws.md
docs/reference/elements.md
docs/reference/language.md
docs/reference/structure.md
docs/reference/syntax.md
docs/web-servers.md
libs/MO5/README.md
libs/MO5/libs/using.js/README.md
libs/MO5/js/EventBus.js
libs/MO5/js/Animation.js
libs/MO5/js/CoreObject.js
libs/MO5/js/Exception.js
libs/MO5/js/List.js
libs/MO5/js/MO5.js
libs/MO5/js/Map.js
libs/MO5/js/Point.js
libs/MO5/js/Promise.js
libs/MO5/js/Queue.js
libs/MO5/js/Result.js
libs/MO5/js/Set.js
libs/MO5/js/Size.js
libs/MO5/js/Timer.js
libs/MO5/js/TimerWatcher.js
libs/MO5/js/ajax.js
libs/MO5/js/assert.js
libs/MO5/js/dom.Element.js
libs/MO5/js/dom.effects.typewriter.js
libs/MO5/js/dom.escape.js
libs/MO5/js/easing.js
libs/MO5/js/fail.js
libs/MO5/js/globals.document.js
libs/MO5/js/globals.window.js
libs/MO5/js/range.js
libs/MO5/js/tools.js
libs/MO5/js/transform.js
libs/MO5/js/types.js
libs/MO5/libs/using.js/tests/index.js
libs/MO5/libs/using.js/tests/module1.js
libs/MO5/libs/using.js/tests/module2.js
libs/MO5/libs/using.js/tests/module3.js
libs/MO5/libs/using.js/using.js
libs/MO5/tests/node/EventBus.test.js
libs/MO5/tests/node/Set.test.js
src/savegames.js
src/tools/reveal.js
src/tools/ui.js
src/loader.js
src/tools/tools.js
src/tools/compile.js
src/functions.js
src/DisplayObject.js
src/Game.js
src/Interpreter.js
src/Keys.js
src/LoadingScreen.js
src/Trigger.js
src/assets/Audio.js
src/assets/Background.js
src/assets/Character.js
src/assets/Composite.js
src/assets/Curtain.js
src/assets/Imagepack.js
src/assets/Textbox.js
src/assets.js
src/bus.js
src/commands/alert.js
src/commands/break.js
src/commands/choice.js
src/commands/confirm.js
src/commands/do.js
src/commands/fn.js
src/commands/global.js
src/commands/globalize.js
src/commands/goto.js
src/commands/line.js
src/commands/localize.js
src/commands/prompt.js
src/commands/restart.js
src/commands/set_vars.js
src/commands/sub.js
src/commands/trigger.js
src/commands/var.js
src/commands/wait.js
src/commands/while.js
src/commands/with.js
src/commands.js
src/dataSources/LocalStorage.js
src/dataSources.js
src/engine.js
src/extensions/button.js
src/extensions/colored-rectangle.js
src/extensions/get-backtrace.js
src/extensions/hello.js
src/extensions/side-images.js
CHANGELOG.md
LICENSE.md
README.md
build.js
index.js
index.md
package.js