var queue_idx = 0;
var current_idx = null;
var form_html = [];
var pending_uploads = [];

function get_queue(idx) {
  var queue = $('upload-queue');
  return idx != null ? queue.down('li', idx) : queue;
}

function escape_quote(s) {
  return s.gsub(/"/, '"');
}

function image_tag(filename) {
  return '<img src="/images/' + filename + '" />';
}

function frame_target_id(idx) {
  return 'frame-' + idx;
}

function set_view(li, idx, pre_text, full_name, post_text, view_message) {
  var full_name_e = full_name.strip().escapeHTML();
  var title = view_message ? 'Click to view this submission' : 'Click to stop this upload';
  li.update('<a href="#" title="' + title + '">' + pre_text + '<i>' + full_name_e + '</i>' + (post_text||'') + '</a>');
  li.down().onclick = view_message ? function() { return view(idx, view_message) } : function() { return stop(idx, full_name_e) };
  if (view_message == 'edit') {
    li.insert('<a class="stop-btn" href="#" title="Click to delete this submission">' + image_tag('cross.png') + '</a>');
    li.down('.stop-btn').onclick = function() { return stop(idx, full_name_e); }
  }
}

function set_submit(edit) {
  $('add-my-tail').src = '/images/' + (edit ? 'save-changes' : 'add-my-tail-button') + '.gif';
}

function set_current(idx, message){
  if (current_idx != idx) {
    $('member-form').update(form_html[idx]);
    if (current_idx != null) get_queue(current_idx).removeClassName('current');
    set_submit(message == 'edit');
    get_queue(idx).addClassName('current');
    current_idx = idx;
  }
}

function view(idx, message) {
  $('overlay').hide();
  set_current(idx, message);
  show_message(message);
  return false;
}

function show_message(name) {
  Effect.Queues.get('message').invoke('cancel');
  var div = name && $(name + '-message');
  if (div && div.visible()) {
    div.setOpacity(0.0);
  } else {
    $$('#messages div').invoke('hide');
  }
  $('ready-to-add').scrollTo();
  if (div) div.appear({duration: 1.0, queue: {scope: 'message'}});
}

function show_actions(error) {
  var done = pending_uploads.size() == 0;
  if (done && !error && current_idx != null) {
    $('done').show();
    Effect.Fade('done',  {duration: 10.0});
  } else {
    $('done').hide();
  }
  if (!done && !error) $('wait').show(); else $('wait').hide();
  if (done) $('im_done_here').show(); else $('im_done_here').hide();
  Effect.Appear('next-actions', {duration: 2.0});
  //$('add_another').focus();
}

function add_my_tail(form) {
  var first_name = $F('member_first_name');
  if (first_name.search(/\w/) != -1) {
    var li;
    if (current_idx == null) {
      current_idx = queue_idx++;
      $('frames').insert(new Element('iframe', {name: frame_target_id(current_idx)}));
      var queue = get_queue();
      queue.up().show();
      li = new Element('li');
      queue.insert(li);
    } else {
      li = get_queue(current_idx);
    }
     
    var full_name = first_name;
    var last_name = $F('member_last_name');
    if (last_name.search(/\w/) != -1) full_name += ' ' + last_name; 
    li.className = 'current uploading';
    set_view(li, current_idx, image_tag('spinner.gif') + 'Uploading ', full_name);
    $('overlay').setOpacity(0.6);
    $('overlay').show();
    li.scrollIntoView();
    show_message();
    
    $('queue_idx').value = current_idx;
    form.target = frame_target_id(current_idx);
    form_html[current_idx] = $('member-form').down().cloneNode(true);
    pending_uploads.push(current_idx);
    $('upload-info').show();
    $('add_another').show();
    show_actions();
    return true;
  } else {
    $('ready-to-add').scrollTo();
    $('member_first_name').focus();
    alert('Please enter a first name.');
    return false;
  }
}

function add_another(message) {
  var form = $('member-form').down();
  form.addClassName('hide-errors');
  form.removeClassName('show-errors');
  if (current_idx != null) {
    $('member_first_name').value = $('member_last_name').value = '';
    var li = get_queue(current_idx);
    li.removeClassName('current');
    current_idx = null;
    set_submit(false);
  }
  $('overlay').hide();
  show_message(message || 'add-new');
}

function upload_ok(idx, ok_form_html, thumb_url, full_name, edit) {
  form_html[idx] = ok_form_html;
  var li = get_queue(idx);
  set_view(li, idx, '<img src="' + thumb_url + '" alt="' + escape_quote(full_name) + '" />', full_name, '', 'edit');
  li.removeClassName('uploading');
  li.addClassName('done');
  pending_uploads = pending_uploads.without(idx);
  show_actions();
  if (idx == current_idx) {
    $('member-form').update(form_html[idx]);
    add_another(edit ? 'edit-done' : 'upload-ok');
  }
}

function upload_error(idx, error_form_html, full_name) {
   form_html[idx] = error_form_html;
   var li = get_queue(idx);
   set_view(li, idx, '', full_name, '  has errors', 'errors');
   li.removeClassName('uploading');
   li.addClassName('error');
   pending_uploads = pending_uploads.without(idx);
   show_actions(true);
   if (idx == current_idx) {
    $('member-form').update(form_html[idx]);
    view(idx, 'errors');
   }
}

function stop(idx, full_name) {
  var li = get_queue(idx);
  if (li.hasClassName('uploading')) {
    if (confirm('Stop uploading ' + full_name + '?')) {
      set_view(li, idx, '', full_name, ' is being stopped', 'being-stopped');
      li.removeClassName('uploading');
      li.addClassName('stopped');
      set_current(idx);
      view(idx, 'being-stopped');
    } else {
      return false;
    }
  } else {
    if (confirm('Delete this tail?')) { 
      li.removeClassName('done');
      li.addClassName('stopped');
      set_view(li, idx, image_tag('spinner.gif') + 'Deleting ', full_name, '', 'being-deleted');
      set_current(idx);
      view(idx, 'being-deleted');
    } else {
      return false;
    }   
  }
  
  new Ajax.Request('/members/stop', {parameters: {queue_idx: idx, full_name: full_name}});
  return false;
}

function stopped(idx, full_name) {
  pending_uploads = pending_uploads.without(idx);
  var li = get_queue(idx);
  set_view(li, idx, '', full_name, ' is stopped', 'stopped');
  if (idx == current_idx) view(idx, 'stopped');
}

function deleted(idx, full_name) {
  var li = get_queue(idx);
  set_view(li, idx, '', full_name, ' has been deleted', 'deleted');
  if (idx == current_idx) view(idx, 'deleted');
}

Event.observe( window, 'load', function() {
  $('no_js').remove();
});