HTML5, CSS3 & JS Experiments

(function() {
    // instantiate the class
    window.workers = new AcidJs.WebWorkers();

    // create a worker
    window.workers.create({
        script: "pages/javascript-wrapper-for-the-html5-webworkers-api/example/AcidJs.WebWorkers/workers/process-guitars.js",               
        name: "process-guitars",
        onMessage: function(data) {
            console.log(data);
        }
    });

    // start the worker, post a message to it and supply some data to be processed in the background
    window.workers.start({
        name: "process-guitars",
        data: ["schecter", "fender", "gibson", "jackson", "b.c. rich", "esp", "ibanez", "charvel"]
    });

    // get the worker
    // console.log(window.workers.getWorker({name: "process-guitars"}));

    // stop the worker
    // window.workers.stop({name: "process-guitars"});

    // destroy the worker
    // window.workers.destroy({name: "process-guitars"});
})();

(function() {
    "use strict";
    
    //importScripts('script1.js', 'script2.js');

    self.addEventListener("message", function(e) {
    
        var
            data = e.data;
        
        // for example - return the sorted array and it's length
        self.postMessage({itemsLength: data.length, items: data.sort()});
    }, false);
})();

/*
 * WebWorkers
 * JavaScript API the HTML5 WebWorkers
 * developer's website: http://wemakesites.net/#!/web-dev
 * developer's twitter: https://twitter.com/#!/wemakesitesnet
 * developer's blog http://acidmartin.wordpress.com/
 **/

(function() {
    "use strict";
    
    /*
     * @namespace AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }
    
    /*
     * @class WebWorkers
     * @constructor
     * @author Martin Ivanov http://acidjs.wemakesites.net
     **/
    function WebWorkers() {
        if(typeof(window.Worker) === "undefined") {
            var 
                fn = (function(){});
            
            for(var o in this) {
                if(Object.hasOwnProperty(o)) {
                    this[o] = fn;
                }
            }
        }
    }
    
    WebWorkers.prototype = {
        
        /*
         * @method create Create new WebWorker
         * @public
         * @param config {Object}
         * {
         *  name: {String},
         *  script: {URL},
         *  onMessage: {Function},
         * }
         **/
        create: function(config) {
            var
                name = config.name,
                script = config.script,
                onmessage = config.onMessage;
        
            if(undefined === config || undefined !== this[name]) {
                return;
            }
        
            this[name] = new Worker(script);
            
            this._bind(name, onmessage);
        },
        
        /*
         * @method getWorker Return Worker instance
         * @public
         * @param name {String}
         * @return XrayWrapper|undefined
         **/
        getWorker: function(config) {
            return this[config.name];
        },
        
        /*
         * @method start execute a Worker
         * @public
         * @param config {Object}
         * {
         *  name: {String}
         * }
         **/
        start: function(config) {
            var
                name = this.getWorker({name: config.name});
            
            if(undefined !== name) {
                name.postMessage(config.data);
            }
        },
        
        /*
         * @method stop terminate a Worker
         * @public
         * @param config {Object}
         * {
         *  name: {String}
         * }
         **/
        stop: function(config) {
            var
                name = this.getWorker({name: config.name});
        
            if(undefined !== name) {
                name.terminate();
            }
        },
        
        /*
         * @method destroy Stop and delete the instance of a Worker
         * @public
         * @param config {Object}
         * {
         *  name: {String}
         * }
         **/
        destroy: function(config) {
            var
                name = config.name;
            
            if(undefined !== this.getWorker({name: config.name})) {
                this.stop({
                    name: config.name
                });
                delete this[config.name];
            }
        },
        
        /*
         * @method _bind Attach handler to the onmessage event of the Worker
         * @private
         * @param name {String}
         * @onmessage {Function}
         * @data {Object|String}
         **/
        _bind: function(name, onmessage) {
            this[name].addEventListener("message", function(e) {
                onmessage.call(this, e.data);
            }, false);
        }
    };
    
    window.AcidJs.WebWorkers = WebWorkers;
})();