Weblabor

Function.create = function (methods) {
    var destination = (methods.hasOwnProperty('constructor') ? methods.constructor : function () {});
    return Function.override(destination, methods);
};

Function.extend = function (base, methods) {
    var destination = (methods.hasOwnProperty('constructor') ? methods.constructor : function () {
        this.parent.constructor.apply(this, arguments);
    });
    destination.prototype = new base();
    destination.prototype.parent = base.prototype;
    return Function.override(destination, methods);
};

Function.override = function (destination, methods) {
    for (var property in methods)
        if (methods.hasOwnProperty(property))
            destination.prototype[property] = methods[property];
    return destination;
};

Map = Function.create({
    constructor: function (values) {
        this.source={};
        this.count = 0;
        if (values)
            this.putAll(values);
    },
    putAll: function (values) {
        for (var key in values)
            if (values.hasOwnProperty(key))
                this.put(key, value);
    },
    put: function (key, value) {
        if (this.containsKey(key))
            return;
        this.source[key] = value;
        ++this.count;
    },
    get: function (key) {
        return this.source[key];
    },
    containsKey: function (key) {
        return this.source.hasOwnProperty(key);
    },
    remove: function (key) {
        if (!this.containsKey(key))
            return;
        delete(this.source[key]);
        --this.count;
    },
    size: function () {
        return this.count;
    },
    forEach: function (callBack) {
        for (var key in this.source)
            if (this.source.hasOwnProperty(key))
                callBack.call(this, key, value);
    },
    toObject: function () {
        return this.source;
    }
});


ImageRepository = Function.extend(Map, {
    constructor: function (images) {
        this.parent.constructor.call(this, images);
    },
    setDirectory: function (directory) {
        this.directory = directory;
    },
    preload: function (callBack) {
        this.complete = new Map();
        this.callBack = callBack;
        this.forEach(this.preloadImage);
    },
    preloadImage : function (name, path) {
        this.createPreloader(name);
        this.createAbsolutePath(path);
        this.runPreloaderOnAbsolutePath();
    },
    createPreloader : function (name) {
        var repository = this;
        this.preloader = new Image();
        this.preloader.onload = preloader.onerror = function () {
            repository.imagePreloadCompleteObserver(name, this);
        };
    },
    createAbsolutePath : function (path) {
        if (typeof(this.directory) == "string")
            this.absolutePath = path;
        else
            this.absolutePath = this.directory + "/" + path;
    },
    runPreloaderOnAbsolutePath: function () {
        this.preloader.src = this.absolutePath;
    },
    imagePreloadCompleteObserver: function (name, preloader) {
        this.complete.put(name, preloader);
        if (this.size() == this.complete.size())
            this.preloadCompleteObserver();
    },
    preloadCompleteObserver: function () {
        this.callBack.call(this.toObject());
    }
});


window.onload = function(){
    var canvasElement = document.getElementById('canvas')
    var canvasContext = canvasElement.getContext('2d');

    var images = new ImageRepository({
        first: "elso.jpg",
        second: "masodik.jpg"
    });
    images.setDirectory("images");
    images.preload(function () {
        canvasContext.drawImage (this.first, 0, 0);
        canvasContext.drawImage(this.second, 200, 200);
    });

};