var Steps = Class.create({
  initialize: function(server_script) {
    this.moves = 0;
    this.server_script = server_script;
    // Start
    this.setupDraggables();
    this.doStep(1);
  },

  setupDraggables: function() {
    for (var i = 1; i <= 6; i++) {
      new Draggable('thought' + i, {revert: true});
    }
  },

  doStep: function(index) {
    Element.addClassName($('dropzone_' + index), 'dropzone_hightlight');
    // Adding droppable
    Droppables.drops = [];
    Droppables.add ( 'step' + index,
      { accept: 'drag',
        onDrop: this.drop.bind(this, index) } );
  },

  drop: function(index, draggable, droppable, event) {
    this.moves++;
    if (draggable.id != 'thought' + index) {
      new Effect.Pulsate(draggable.id, {duration: 1.5});
      this.doStep(index);
    }
    else {
      draggable.style.display = 'none';
      var step = $('step' + index);
      step.innerHTML = '<div id="step' + index + '_text">' +
                         draggable.innerHTML + '</div>';

      fade($('step' + index + '_text').id);
      new Effect.Pulsate('do_not_negotiate', {duration: 1.5 });

      if (index == 6) {
        $('negotiate').style.visibility = 'visible';
        new Effect.Pulsate('negotiate', { duration: 1.5 });
        var self = this;
        setTimeout(function() { self.done(); }, 2000 );
      }
      else { this.doStep(index + 1); }
    }
  },

  done: function() {
    new Ajax.Updater('result', this.server_script + '/salary/6stepsResult?moves=' + this.moves, {
      onComplete: function() {
        new Effect.Grow('result');
        new Effect.Grow('actions2');
      }
    });
  }
});