document.write('<style type="text/css">.js-hidden { display: none }</style>');
var gCards = CardsDeck.create("cardbox", null, cnt_animate);
gCards.preload();

function cnt_animate() {
  
  var card = gCards[0];
  
   for(var j = 0; j <= 40; j++) {
    gCards[j].hide();
    gCards.show(j, gCards.center.x, gCards.center.y);
  }
  
  
  new Effect.Parallel([
    new Effect.Scale(card, 100, { scaleFrom: 150, scaleFromCenter: true, sync: true }),
    new Effect.Appear(card)
    ], { afterFinish: function() { new Effect.SlideUp(card); cnt_randomMove() } });
}

var fxOpts = {
    mode: 'absolute', 
    sync: true,
    queue: { position: 'end', scope: 'random' }
  };

function cnt_randomMove() {
  var effects = [];
  var pd = gCards.getDimensions();
  var d = gCards[0].getDimensions();
  pd.width -= d.width;
  pd.height -= d.height;
 

  for(var j = 1; j <= 40; j++) {
    gCards[j].style.zIndex = Math.round(Math.random() * 49);
    gCards[j].show();
    effects[j-1] = new Effect.Move(gCards[j], opts= Object.extend(fxOpts, { 
      x: Math.round(Math.random() * pd.width), 
      y: Math.round(Math.random() * pd.height)
    }));  
  }
  new Effect.Parallel(effects, { afterFinish: function() {
    Event.observe(document.body, "click", cnt_toCenter, true); 
  }});
  
}

function cnt_toCenter() {
  Event.stopObserving(document.body, "click", cnt_toCenter, true); 
  var effects = [];
  for(var j = 1; j <= 40; j++) {
    effects[j-1] = new Effect.Move(gCards[j],  Object.extend(fxOpts, { 
      x: gCards.center.x, 
      y: gCards.center.y
    }));
  }
  new Effect.Parallel(effects, { afterFinish: cnt_randomMove  });
}