function start(){
  // prepare the itembox
  // called when boxes have been identified
  var box=itemHolder.getBoxById('b1');
  box.onShowContent=function(){drawHead()}
  box.onHideContent=function(){stopDrawHead()}
}
//--------------------------
// all the canvas stuff
var rotimg = new Image();   
rotimg.src = 'bs1.png';
var angle=0.05; 
var rotcid='canid'
var timer=null;

// freeze and copy to image on page
function freeze(){
  var elt=document.getElementById('frozen');
  var canvas=document.getElementById('canid');
  elt.src=canvas.toDataURL();
}
// stop the animation
function stopDrawHead(){
  clearTimeout(timer);
  timer=null;
}
//draw head, aagin and again
function drawHead()
{
  var canvas = document.getElementById(rotcid);
  if (canvas.getContext){
    var dc = canvas.getContext('2d');
    dc.restore();
    dc.fillStyle="rgb(256,256,256)";
    dc.fillRect(0,0,200,200);
    dc.translate(50,50);        
    dc.rotate(angle);
    dc.drawImage(rotimg, -25, -25, 50, 50);
    dc.translate(-50,-50);
    timer=setTimeout(drawHead,100);
    dc.save();
  } 
  else {
    // canvas-unsupported
    alert('cannot do canvas');
  }
}