var lastSpriteIndex = -1;

Bubble = Behavior.create({
  
  initialize: function() {
    var spriteCount  = 5;
    this.spriteIndex = this.randomInRange(spriteCount);
    
    this.stateLayer     = this.element.down('.state_layer');
    this.dataLayer      = this.element.down('.data_layer');
    this.tableRow       = this.element.up('tr.emergent_task_row');
    this.emergentDayId  = EmergentDayForm.emergent_day_id();
    this.emergentTaskId = this.tableRow.id.match(/\d+$/).last();
    this.state          = this.dataLayer.innerHTML.strip();
    this.setState(this.state);
  },
  
  onclick: function(e) {
    this.incrementState();

    bubble_values = $$("#" + this.tableRow.id + " div.bubble .state_layer .data_layer").map(function(e) {
      return e.value.strip();
    }).join(",");
    
    EmergentQueue.enqueue(this.emergentDayId, this.emergentTaskId, $F(this.tableRow.down('input')), bubble_values);
    
    e.stop();    
  },
  
  incrementState: function() {
    // nothing > done > distracted
    switch(this.state) {
      case 'done':
        this.setState('distracted');
        break;
      case 'distracted':
        this.setState('');
        break;
      default:
        this.setState('done');
        break;      
    }
  },
  
  setState: function(state) {
    this.state = state;
    this.dataLayer.value = state;
    
    switch(this.state) {
      case 'done':
        this.stateLayer.removeClassName('distracted_' + this.spriteIndex);
        this.stateLayer.addClassName('done_' + this.spriteIndex);
        break;
      case 'distracted':
        this.stateLayer.removeClassName('done_' + this.spriteIndex);
        this.stateLayer.addClassName('distracted_' + this.spriteIndex);
        break;
      default:
        this.stateLayer.removeClassName('done_' + this.spriteIndex);
        this.stateLayer.removeClassName('distracted_' + this.spriteIndex);
        break;
    }
  },

  randomInRange: function(upperLimit) {
    var randomNumber = (Math.floor(upperLimit * Math.random()) + 1);
    // Avoid same sprite twice in a row
    if (randomNumber == lastSpriteIndex) {
      randomNumber++;
      if (randomNumber > upperLimit)
        randomNumber--;
    }
    lastSpriteIndex = randomNumber;
    return randomNumber;
  }
  
});

// Saves rows and submits via Ajax after a delay (as an optimization).
var EmergentQueue = {
  
  queue: {},
    
  enqueue: function(emergent_day_id, id, title, bubbles) {
    var secondsToWait = 2;
    this.queue[id] = {
      'emergent_day_id':        emergent_day_id,
      'emergent_task[title]':   title,
      'emergent_task[bubbles]': bubbles
    };
    this.save.delay(secondsToWait, this);
  },
  
  save: function(queueObject) {
    $H(queueObject.queue).each(function(hash) {
      new Ajax.Request("/emergent_days/" + hash.value.emergent_day_id + "/emergent_tasks/" + hash.key, {
        'asynchronous': true,
        'parameters': hash.value,
        'method': 'put'
      });
    });

    queueObject.queue = {};
  }
  
};

var EmergentDayForm = {

  emergent_day_id: function() { 
    return $$('table.emergent').first().id.match(/\d+$/).last();
  },
  
  save: function(e) {
    new Ajax.Request("/emergent_days/" + EmergentDayForm.emergent_day_id(), {
      asynchronous: true,
      parameters: Form.serialize(e)
    });
    
    var start_hour = parseInt($F('emergent_day_start_hour'), 10);
    var end_hour   = start_hour + 10;
    $R(start_hour, end_hour).each(function(hour, index) {
      var hour_adjusted_to_twelve_hour_clock = (hour > 12 ? hour - 12 : hour);
      $("emergent_day_hour_row_" + (index + 1)).innerHTML = hour_adjusted_to_twelve_hour_clock;
    });
  }
};

var EmergentTaskTitle = {
  save: function(e) {
    var title = $F(e);
    var emergent_task_id = e.id.match(/\d+$/).last();
    new Ajax.Request("/emergent_days/" + EmergentDayForm.emergent_day_id() + "/emergent_tasks/" + emergent_task_id, {
      'asynchronous': true,
      'parameters': { 'emergent_task[title]': title },
      'method': 'put'
    });
  }
};

Event.addBehavior({

  'div.bubble': Bubble,
  
  'form.edit_emergent_day': Observed(EmergentDayForm.save),

  'input.emergent_task_title': Observed(EmergentTaskTitle.save),

  'input#emergent_day_created_at': function(e) {
    this.disable();
  },

  /* Fade flash messages after a few seconds. */  
  "div.notice": function() {
    setTimeout(function() {
      Effect.Fade(this);
    }.bind(this), 3000);
  },

  '#timer': function() {
    var timer_id = this.className.match(/\d+$/);
    setTimeout(function() {
      new Ajax.Updater('timer', '/timer/show/' + timer_id);  
    }, 2000);    
  },
  
  'body': function() {
    new PeriodicalExecuter(function() {
      var timer_id = $('timer').className.match(/\d+$/);
      new Ajax.Updater('timer', '/timer/show/' + timer_id);
    }, 60);
  }
  
});

function observe_form(task_id_number) {
  new Form.EventObserver('task_form' + task_id_number, 
    function(element, value) { 
      new Ajax.Request('/tasks/update/' + task_id_number, 
      { asynchronous:true, 
        evalScripts:true, 
        onLoading:function(request) { 
          Form.disable('task_form' + task_id_number);
          Element.show('spinner' + task_id_number); },
        onComplete:function(request) { 
          Form.enable('task_form' + task_id_number); },
        parameters:Form.serialize('task_form' + task_id_number)
      });
    });
}


var TFGlobalAjaxHandlers = {
	onCreate: function(){
	  $('ajax_status').setOpacity(1.0);
		$('ajax_status').show();
	},

	onComplete: function() {
		if(Ajax.activeRequestCount === 0){
      // $('ajax_status').hide();
      $('ajax_status').fade({queue: 'end'});
		}
	}
};

Ajax.Responders.register(TFGlobalAjaxHandlers);