// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

function selectEmotion(id, key, title) {
  $('feeling_emotion_id').value = id;
  $('emotion_key').value = key;
  $('emotie-title').update(title);
  $('new_feeling').show();
  if (!clip_glued) {
    clip.glue('clip-button', 'clip-container');
    hclip.glue('hclip-button', 'hclip-container');
    clip_glued = true;
  }
  updateEmoticon();
}

function selectSituation(id) {
  $('feeling_situation_id').value = id;
}

function updateEmoticon() {
  var context = $F('feeling_context_business') || $F('feeling_context_personal');
  if (!context) {
    context = $F('user_key');
  }

  var strong = ($F('feeling_strength_strong') == 'strong');

  var source = '/images/' + context + '/' + $('emotion_key').value + '.png';
  $('emoticon').src = source;
  source = '/images/modifiers/' + context + '.png';
  $('emoticon-modifier').src = source;

  if (strong) {
    $('emoticon-modifier').show();
  } else {
    $('emoticon-modifier').hide();
  }
}


// Set the size of an emotion item.
function set_emotion_size(item, value) {
  item.setStyle({fontSize: value + 'em'});
}


// Highlight emotions based on the value. The value is between -100
// and 100 and indicates the negativity or positivity of the wanted
// emotion. We highlight based on this.
function highlight_emotions(value) {
  // Don't do anything for 0 since that is the default value.
  if (value == 0)
    return;

  var size = Math.abs(value);

  // In the range -30 to 30 we highlight the neutral emotions, peaking at 15.
  if (size <= 30) {
    size = (30 - size) / 30 + 1;
    $$('.neutral').each(function(item) {set_emotion_size(item, size)});
    $$('.neutral .first-word').each(function(item) {item.addClassName('highlight')});
    $$('.positive').each(function(item) {set_emotion_size(item, 1)});
    $$('.negative').each(function(item) {set_emotion_size(item, 1)});
    $$('.positive .first-word').each(function(item) {item.removeClassName('highlight')});
    $$('.negative .first-word').each(function(item) {item.removeClassName('highlight')});
  };

  // In the range 30-100 we highlight the positive emotions, peaking at 100.
  if (value > 30) {
    size = (size - 30) / 70 + 1;
    $$('.positive').each(function(item) {set_emotion_size(item, size)});
    $$('.positive .first-word').each(function(item) {item.addClassName('highlight')})
    $$('.neutral').each(function(item) {set_emotion_size(item, 1)});
    $$('.negative').each(function(item) {set_emotion_size(item, 1)});
    $$('.neutral .first-word').each(function(item) {item.removeClassName('highlight')});
    $$('.negative .first-word').each(function(item) {item.removeClassName('highlight')});
  };


  // In the range -100--30 we highlight the negative emotions, peaking at 100.
  if (value < -30) {
    size = (size - 20) / 80 + 1;
    $$('.negative').each(function(item) {set_emotion_size(item, size)});
    $$('.negative .first-word').each(function(item) {item.addClassName('highlight')})
    $$('.positive').each(function(item) {set_emotion_size(item, 1)});
    $$('.neutral').each(function(item) {set_emotion_size(item, 1)});
    $$('.neutral .first-word').each(function(item) {item.removeClassName('highlight')});
    $$('.positive .first-word').each(function(item) {item.removeClassName('highlight')});
  };

}


function initialize_slider() {
  var slider = new Control.Slider('slider-handle',
                                  'slider-track',
                                  { range: $R(-100,100)});
  slider.setValue(0);
  slider.options.onSlide = function(value) {
    highlight_emotions(value);
  }
  slider.options.onChange = function(value) {
    highlight_emotions(value);
  }
}