var colour="#D5E986"; // what colour are the blobs
    var framerate=60; // speed of animation, lower is faster
    var blobs=20; // how many blobs are in the jar
    var bsize = '50px';
    var enableWAT = 0;
    var charc=String.fromCharCode(9679); // a blob - can be changed to charc='hello' or charc='*' for a different effect
    var div;
    var xpos=[];
    var ypos=[];
    var zpos=[];
    var dx=[];
    var dy=[];
    var dz=[];
    var blob=[];
    var swide=800;
    var shigh=600;

    window.onload=createBlobs;
    window.onresize=updateWidth;


    function createBlobs() {
      var i, dvs;
      div=document.createElement('div');
      dvs=div.style;
      dvs.position='fixed';
      dvs.left='0px';
      dvs.top='0px';
      dvs.width='1px';
      dvs.height='1px';
      document.body.appendChild(div);
      updateWidth();
      for (i=0; i<blobs; i++) {
        createBlob(i);
      }
      moveBlobs();
    }

    function createBlob(ref) {
      var dv, sy;
      dv=document.createElement('div');
      dv.appendChild(document.createTextNode(charc));
      sy=dv.style;
      sy.position='absolute';
      sy.textAlign="center";
      sy.fontSize=bsize;
      sy.color='rgba(0,0,0,0)';
      ypos[ref]=Math.floor(shigh*Math.random());
      dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
      xpos[ref]=Math.floor(swide*Math.random());
      dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
      zpos[ref]=Math.random()*20;
      dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
      blob[ref]=dv;
      div.appendChild(blob[ref]);
      updateBlob(ref);
    }

    function updateBlobPosition(ref, xy) {
      if (xy=='y') {
        dx[ref]=(0.5+Math.random())*sign(dx[ref]);
        dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
      }
      else {
        dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
        dy[ref]=(0.5+Math.random())*sign(dy[ref]);
      }
    }

    function sign(a) {
      if (a<0) return (-2);
      else if (a>0) return (2);
      else return (0);
    }

    function updateBlob(ref) {
      var sy;
      sy=blob[ref].style;
      sy.top=ypos[ref]+'px';
      sy.left=xpos[ref]+'px';
      sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
      if (enableWAT) sy.transform='scale(' + zpos[ref]/5 + ')';
    }

    function moveBlobs() {
      for (i=0; i<blobs; i++) {
        moveBlob(i);
      }
      setTimeout("moveBlobs()", 1000/framerate);
    }

    function moveBlob(ref) {
      if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) updateBlobPosition(ref, 'y');
      ypos[ref]+=dy[ref];
      if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) updateBlobPosition(ref, 'x');
      xpos[ref]+=dx[ref];
      if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
      zpos[ref]+=dz[ref];
      updateBlob(ref);
    }

    function updateWidth() {
      var sw_min=999999;
      var sh_min=999999;
      if (document.documentElement && document.documentElement.clientWidth) {
        if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
        if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
      }
      if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
        if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
        if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
      }
      if (document.body.clientWidth) {
        if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
        if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
      }
      if (sw_min==999999 || sh_min==999999) {
        sw_min=800;
        sh_min=600;
      }
      swide=sw_min;
      shigh=sh_min;
    }