///<reference path="/Web/Js/TESCO.js" />
///<reference path="/Web/Js/system/event.js" />
///<reference path="/Web/Js/system/event.manager.js" />
///<reference path="/Web/Js/system/exception.js" />
///<reference path="/Web/Js/system/DOM.node.js" />
///<reference path="/Web/Js/UI/position.js" />

TESCO.sites.retail.UI.Loader = (function() {
 
    var NODE = TESCO.system.DOM.node;
            
    //  constructor
    function _constructor() {
		/// <summary>Creates loader animation in a div with a heading</summary>
    	/// <returns type="TESCO.sites.retail.UI.Loader">TESCO.sites.retail.UI.Loader object</returns>

        var _loader = document.createElement("div");
        NODE.addClassName(_loader, "loaderHeader");
        _loader.setAttribute("id", "jsLoader");
        
        var _h4 = document.createElement("h4");
        NODE.addClassName(_h4, "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();
})();