//
// This demo code shows how to interface to the animation library. The
// library requires an object with a setValue and a getValue method. Here,
// we make a wrapper object that wraps a Dom node and ads getValue/setValue
// methods that talk to the Dom node's stylesheet.
//
function AnimatableNode(domNode) {
this.node = domNode;
}
AnimatableNode.prototype.getValue = function AnimatableNode_getValue(propertyName) {
var node = this.node;
var value = 0;
switch (propertyName) {
case "x":       { value = node.style.left; break; }
case "y":       { value = node.style.top; break; }
case "width":   { value = node.style.width; break; }
case "height":  { value = node.style.height; break; }
}
// If the properties are not set correctly in the stylesheet, this may produce NaN...
return parseInt(value);

};
AnimatableNode.prototype.setValue = function AnimatableNode_setValue(propertyName, value) {
var node = this.node;
value = value + "px"; // animations in pixels
switch (propertyName) {
case "x":       { node.style.left = value; break; }
case "y":       { node.style.top = value; break; }
case "width":   { node.style.width = value; break; }
case "height":  { node.style.height = value; break; }
}
};
// That's it - the rest of this code now uses a simple form
// to demonstrate things you can do with the animation
// library.
// ---------------------------------------------------------
// The "Settings" form
//
// Handle input from the settings form
//
var helloWorld = null;
function animateIt(x) {
// Create the control on first animation
if (helloWorld == null) {
var hw = document.getElementById("helloWorld");
		hw.style.top="10px";
		hw.style.left="0px";
helloWorld = new AnimatableNode(document.getElementById("helloWorld"));
}

// Tell the animation library to run
AnimationLibrary.animate(helloWorld, 1000,"x", x, "y",0).then(500,"y",10,"onComplete", function() { document["butterfly"].src="images/butterfly_static.gif"; });
document["butterfly"].src="images/butterfly.gif";
}
function stopAnimateIt() {
AnimationLibrary.stop(helloWorld);
}
function findPos(obj)
{
var curleft = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
obj = obj.offsetParent
curleft += obj.offsetLeft
}
return curleft;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}