TESCO.sites.retail.UI.Loader = (function() {
    /// <summary>this function creates a set of html elements and loads them with body load.</summary>
    /// <returns>object</returns>
    
    //  constructor
    function _constructor() {
        var NODE = TESCO.system.DOM.node;
        
        var _loader = document.createElement("div");
        _loader.setAttribute("class", "jsLoader");
        _loader.setAttribute("id", "jsLoader");
        
        //Create a new h4 element
        //set the class of the h4
        var _h4 = document.createElement("h4");
        _h4.setAttribute("class", "loaderHeader");
        TESCO.system.event.document.addEventListener("beforeload",
            function() {
                NODE.setTextValue(_h4, TESCO.locale.loader.message);
            }
        );
        var _loading = document.createElement("div");
        NODE.addClassName(_loading, "loading");

        //	append the html elements to the main container
        _loader.appendChild(_h4);
        _loader.appendChild(_loading);

        //	derive from position
        _constructor.base.constructor.call(this, _loader);
        return this;
    }

    //  copies the properties of the TESCO.system.DOM.Rectangle.Position to the loader object
    _constructor.extend(TESCO.UI.Rectangle);

    _constructor.prototype.NAME = "TESCO.sites.retail.UI.Loader";
    
    //  return instance
    return new _constructor();
})();