var HandTest = Class.create({
  initialize: function(server_scriptname) {
    this.server_scriptname = server_scriptname;
    this.steps = 5;
    this.step = 1;
    this.moves = 0;
    this.draggables = [];
  },

  doStart: function() {
    for (var i = 0; i < this.steps; i++) {
      this.draggables[i] = new Draggable('step_' + (i + 1), { revert: true } );
    }
    this.doStep(1);
  },

  doStep: function(step) {
    $('fingers').addClassName('fingers_' + step);

    var finger = $('drop_' + step);
    finger.addClassName('active');
    finger.show();

    // Add droppable
    Droppables.add(finger.id, { accept: 'drag',
                                onDrop: this.drop.bind(this) } );
  },

  next: function() {
    Droppables.remove($('drop_' + this.step));
    this.step++;
    this.doStep(this.step);
  },

  done: function() {
    new Ajax.Updater('result',
                     this.server_scriptname + '/interview/handtestResult?moves=' + this.moves, {
                       onComplete: this.showResult.bind(this)
                     });
  },

  showResult: function() {
    new Effect.Grow('result');
    $$('li.step').each(function(step) {
      step.hide();
      step.select('ul')[0].show();
    });
    this.activate();
  },

  activate: function() {
    $('fingers').select('div.finger').each(
        function(finger) {
          finger.setStyle({ cursor: 'pointer' });
          var hand = this;
          finger.observe('mouseover', (function(e) {
              var source = Event.element(e);
              var digit = source.id.replace(/drop\_/, '');
              this.displaySamples(digit);
            }).bind(hand));
          finger.observe('mouseout', (function(e) {
              var source = Event.element(e);
              var digit = source.id.replace(/drop\_/, '');
              this.hideSamples(digit);
            }).bind(hand));
        },
        this);
  },

  drop: function(draggable, droppable, event) {
    this.moves++;
    if (draggable.id.substring(5) != this.step) {
      new Effect.Pulsate(droppable.id, { duration: 1.5 });
    }
    else {
      droppable.innerHTML = draggable.innerHTML;
      droppable.addClassName('done');
      droppable.removeClassName('active');
      $('li_' + this.step).addClassName('ok');
      this.reorder();
      if (this.step == this.steps) { this.done(); }
      else { this.next(); }
    }
  },

  reorder: function() {
    var ul = $('steps').select('ul')[0];
    var li = $('li_' + this.step);
    if (this.step == this.steps) { /* ul.appendChild(li); */ }
    else {
      ul.removeChild(li);
      ul.insertBefore(li, ul.select('li.step')[this.step - 1]);
    }
  },

  displaySamples: function(digit) {
    $('li_' + digit).show();
  },

  hideSamples: function(digit) {
    $('li_' + digit).hide();
  },

  display: function() {
    $('fingers').select('div.finger').each(function(item) { item.show(); });
    this.activate();
  }
});