padawin/float.html

## float.html
<html>
	<head>
		<style type="text/css">
			#mydiv {
				position: absolute;
				top: 200px;
				left: 200px;
				width: 50px;
				height: 50px;
				border: 1px black solid;
			}
		</style>
		<script type="text/javascript" src="/path/to/Butterfly.js"></script>
	</head>
	<body>
		<div id="mydiv"></div>
		<script type="text/javascript">
			(function(){
				var Floater=function(e){
					this.DOMElement=e;
				};

				Floater.minSpeed=-2;
				Floater.maxSpeed=2;
				Floater.prototype={
					speedX:0,
					speedY:0,
					running:false,
					run:function(minLeft,maxLeft,minTop,maxTop){
						if (this.running) return;

						var that=this;
						setInterval(function(){
							var oldSpeed = that.speedX;
							that.speedX=Math.random()*(-1*Floater.minSpeed+Floater.maxSpeed)+Floater.minSpeed;
							that.speedY=Math.random()*(-1*Floater.minSpeed+Floater.maxSpeed)+Floater.minSpeed;
							that.DOMElement.style.left=Math.max(minLeft,Math.min(B.getStyleValue(that.DOMElement,'left')+that.speedX,maxLeft))+'px';
							that.DOMElement.style.top=Math.max(minTop,Math.min(B.getStyleValue(that.DOMElement,'top')+that.speedY,maxTop))+'px';
						}, 100);
					}
				};

				// boundaries of the element, to avoid it to move anywhere
				var minLeft=180,
					maxLeft=220,
					minTop=180,
					maxTop=220;

				var mydiv=B.$id('mydiv');
				// initial position
				mydiv.style.top = 200;
				mydiv.style.left = 200;

				var floater = new Floater(mydiv);
				floater.run(minLeft,maxLeft,minTop,maxTop)

			})();
		</script>
	</body>
</html>
	<html>
	<head>
	<style type="text/css">
	#mydiv {
	position: absolute;
	top: 200px;
	left: 200px;
	width: 50px;
	height: 50px;
	border: 1px black solid;
	}
	</style>
	<script type="text/javascript" src="/path/to/Butterfly.js"></script>
	</head>
	<body>
	<div id="mydiv"></div>
	<script type="text/javascript">
	(function(){
	var Floater=function(e){
	this.DOMElement=e;
	};

	Floater.minSpeed=-2;
	Floater.maxSpeed=2;
	Floater.prototype={
	speedX:0,
	speedY:0,
	running:false,
	run:function(minLeft,maxLeft,minTop,maxTop){
	if (this.running) return;

	var that=this;
	setInterval(function(){
	var oldSpeed = that.speedX;
	that.speedX=Math.random()(-1Floater.minSpeed+Floater.maxSpeed)+Floater.minSpeed;
	that.speedY=Math.random()(-1Floater.minSpeed+Floater.maxSpeed)+Floater.minSpeed;
	that.DOMElement.style.left=Math.max(minLeft,Math.min(B.getStyleValue(that.DOMElement,'left')+that.speedX,maxLeft))+'px';
	that.DOMElement.style.top=Math.max(minTop,Math.min(B.getStyleValue(that.DOMElement,'top')+that.speedY,maxTop))+'px';
	}, 100);
	}
	};

	// boundaries of the element, to avoid it to move anywhere
	var minLeft=180,
	maxLeft=220,
	minTop=180,
	maxTop=220;

	var mydiv=B.$id('mydiv');
	// initial position
	mydiv.style.top = 200;
	mydiv.style.left = 200;

	var floater = new Floater(mydiv);
	floater.run(minLeft,maxLeft,minTop,maxTop)

	})();
	</script>
	</body>
	</html>