Germany's Spinners

A CBE Programming Example

[ Start |  Stop |  Reset |  Debug ]

Thanks to Germany for the initial code.

Get CBE at Cross-Browser.com

The Javascript

var
  // edit these when adding more spinners:
  ne = 4,          // number of spinner elements
  cp = new Array('e','s','w','n'), // cardinal point for each spinner
  // edit these when changing overall behavior:
  a2 = 360,        // radial distance for a spinner's slide
  tm = 8000,       // slide time
  xr = 75,         // x radius
  yr = 75,         // y radius
  ss = 20,         // spinner size
  // automatically calculated:
  bw = 2*xr+ss,    // spinnerBox width
  bh = 2*yr+ss,    // spinnerBox height
  dl = 360/ne,     // radial distance between spinner elements
  a1 = 0;          // for calculating start angle
  
function windowOnload() {
  var i, e;
  for (i=0; i<ne; ++i) {
    e = document.getElementById('spinner'+i).cbe;
    e.sequence = new Array("ellipse("+xr+","+yr+",0,"+tm+","+a1+","+a2+")");
//    e.sequence = new Array("ellipse("+xr+","+yr+",0,"+tm+","+a1+","+a2+")", "stopSequence()");
    a1 += dl; a2 += dl;
  }
  window.cbe.addEventListener("resize", init, false);
  init();
}

function init() {
  var i, e, m;
  cycle(false);
  with (document.getElementById('spinnerBox').cbe) {
    ele.style.border='1px solid #666';
    background('#ccf');
    resizeTo(bw,bh); //(cw,ch);
    moveTo(document.cbe.width()-width()-30, 30);
    show();
  }
  for (i=0; i<ne; ++i) {
    with (document.getElementById('spinner'+i).cbe) {
      resizeTo(ss, ss);
      moveTo(cp[i]);
      show();
    }
  }  
}

function cycle(bStart) {
  var i, e;
  for (i=0; i<ne; ++i) {
    e = document.getElementById('spinner'+i).cbe;
    if (bStart) e.startSequence();
    else e.stopSequence();
  }
}