Modifying busy box

<zk>
	<script type="text/javascript"><![CDATA[
		var override = setInterval(function () {
			if (zAu && zAu.cmd0) {
				var oldShowBusy = zAu.cmd0.showBusy;
				var oldClearBusy = zAu.cmd0.clearBusy;
				zAu.cmd0.showBusy = function (uuid, msg) {
					var cls, // class of original busy box
						custom, // the custom busy box
						$body = jq(document.body),
						bwid = $body.width()-5, // body width (slightly smaller)
						bhgh = $body.height()-5, // body height (slightly smaller)
						innerWid = 200, // width of inner content of custom busy box
						innerHgh = 30, // height of inner content of custom busy box
						wid, hgh, // width and height of busy box
						mt, ml, key; // margin-top, margin-left and mapping key
					// get the class of original busy box and mapping key
					if (arguments.length == 1 || !uuid) {
						cls = 'z-modal-mask';
						key = 'null'
					} else {
						cls = 'z-apply-mask';
						key = zk.Widget.$(uuid).uuid;
					}
					// do the original showBusy
					oldShowBusy.apply(this, arguments);
					// get the original busy box
					var $dom = jq('.'+cls);
					if ((custom = jq('$customBusy'))) { // custom busybox exists
						var outer = jq(custom.find('div').clone()[0]), // clone the content of custom busy box
							wid = $dom.width(), // get original width
							hgh = $dom.height(), // get original height
							inner; // the inner content
						// shrink the size if too large
						if (wid > bwid) wid = bwid;
						if (hgh > bhgh) hgh = bhgh;
						// put content into body
						document.body.appendChild(outer[0]);
						// get inner content
						inner = jq(outer.find('div')[0]);
						// apply style to outer content
						outer.css({
							left: $dom.offset().left + 'px',
							top: $dom.offset().top + 'px',
							width: wid + 'px',
							height: hgh + 'px'
						});
						outer[0].style.zIndex = $dom[0].style.zIndex;
						// calculate the appropriate margin
						ml = wid > innerWid? ($dom.outerWidth(true) - innerWid)/2 : 0;
						mt = hgh > innerHgh? ($dom.outerHeight(true) - innerHgh)/2 : 0;
						// apply the style to inner content
						inner.css({
							marginTop: mt + 'px',
							marginBottom: mt + 'px',
							marginLeft: ml + 'px',
							marginRight: ml + 'px'
						})
 
						$dom.parent()[0].style.display = 'none';
						// store the outer node with mapping key
						zAu.cmd0[key] = outer[0];
					}
				};
				zAu.cmd0.clearBusy = function (uuid) {
					var key,
						node;
					// get the mapping key
					if (!uuid)
						key = 'null'
					else
						key = zk.Widget.$(uuid).uuid;
					// get node and remove it by mapping key
					if ((node = zAu.cmd0[key])
						&& node.parentNode)
						node.parentNode.removeChild(node);
 
					delete node;
					oldClearBusy.apply(this, arguments);
				}
				clearInterval(override);
			}
		});
	]]></script>
	<!-- Show busy on full page and clear it after 3 seconds -->
	<button label="busy on page">
		<attribute name="onClick">
			Clients.showBusy("busy...");
			tmOne.start();
		</attribute>
	</button>
	<!-- Show busy on label 'lb' and clear it after 3 seconds -->
	<button label="busy on label">
		<attribute name="onClick">
			Clients.showBusy(lb, "busy...");
			tmTwo.start();
		</attribute>
	</button>
	<timer id="tmOne" delay="3000" repeats="false" running="false" onTimer="Clients.clearBusy(null);" />
	<timer id="tmTwo" delay="3000" repeats="false" running="false" onTimer="Clients.clearBusy(lb);" />
	<label id="lb" value="message: " width="100px" height="100px" />
	<!-- The custom busy box, can put anything in it -->
	<div id="customBusy">
		<div style="position: absolute; left: -1000px; top: -1000px; border: 1px solid red; overflow: hidden; height: 200px; width: 200px;">
			<div style="background-color: white;">
				Custom busy box
				<window border="normal" title="busy..." />
			</div>
		</div>
	</div>
</zk>