
var MAX_ITEMS = 10;

function add_items(){
/*  for(var i = 0; i < 5; i++){
    add_item();
  }
  return false;
*/
}

function add_item(){

  var add_more_button = document.getElementById('add_more');
  var items = document.getElementById('items');
  var new_node = document.createElement('li');

  item_count++;
  if(item_count >= MAX_ITEMS - 1){
    add_more_button.disabled = true;
    add_more_button.className += ' disabled';
//    return false;
  }
  var item_id = item_count + 1;

  new_node.innerHTML = '<input type="text" class="recommendation-item-name" name="recommendation_items[new_' + item_id + ']" id="recommendation_items_new_' +  item_id + '" size="55" /> <button id="item_' + item_id + '_remove" title="Remove this item" class="remove-button">X</button>';
  items.appendChild(new_node);
//  rebuild_ids();
  page_load();

  return false;
}

function rebuild_ids(){
  var items = document.getElementById('items');
  var input, button;
  for(var i = 0; i <= items.childNodes.length; i++){
    if(items.childNodes[i].nodeName = 'LI'){
      item_id = i + 1;
      input = items.childNodes[i].getElementsByTagName('INPUT');
      input.setAttribute('id', 'recommendatioi_items_new_' +  item_id);
      input.setAttribute('name', 'recommendation_items[new_' + item_id + ']');
      button = items.childNodes[i].getElementsByTagName('BUTTON');
      button.setAttribute('id', 'item_' + item_id + '_remove');
    }
  }
}

function remove_item(){
  var this_id = this.parentNode.id.split('_')[1];
  var id_to_select = this_id - 1;
  document.getElementById('recommendation-items').removeChild(document.getElementById('details_' + this_id));
  document.getElementById('items').removeChild(this.parentNode);
  item_count--;
/* 
// doesn't work with the way IDs are now
alert('id_to_select: '+id_to_select)
  var details_to_select = document.getElementById('details_' + id_to_select);
  var item_to_select = document.getElementById('item_' + id_to_select);

  current_item = 'item_' + id_to_select;
  item_to_select.className = 'selected';
  details_to_select.className = 'details selected';
*/
  return false;
}

function item_change(){
//window.status = 'item_change: '+this.value;
/*
  var this_id = this.id.split('_')[3];
  var node = document.getElementById('recommendation_item_comment_wrapper_' + this_id);
  var adjective = document.forms[0]['recommendation_category_id'][document.forms[0]['recommendation_category_id'].selectedIndex].text;
  var subject = document.forms[0]['recommendation_subject'].value;
  var location_name = document.getElementById('location_name').value;
  var comments = '';
*/
/*
  if(node == null){
    node = document.createElement('div');
    node.id = 'recommendation_item_comment_wrapper_' + this_id;
    node.className = 'recommendation-item-comment-wrapper';
    this.parentNode.appendChild(node);
  }else{
    comments = document.getElementById('recommendation_item_comments_new_' + this_id).value;
  }
  node.innerHTML = '<label for="recommendation_item_comments_new_' +  this_id + '">Why is it a ' + adjective + ' ' + subject + '?</label><br /><textarea name="recommendation_item_comments[new_' + this_id + ']" id="recommendation_item_comments_new_' + this_id + '" rows="4" cols="54" class="recommendation-item-why">' + comments + '</textarea>';
*/
}

var current_item = 'item_1';
function select_item_parent(){
  var current_element = $(current_item);
  if(current_element){
    current_element.className = '';
    $('details_' + current_item.split('_')[1]).removeClassName('selected');
  }
  current_item = this.parentNode.id;
  this.parentNode.className = 'selected';
  $('details_' + current_item.split('_')[1]).addClassName('selected');
}

function select_item(){
  var current_element = $(current_item);
  if(current_element){
    current_element.className = '';
    $('details_' + current_item.split('_')[1]).removeClassName('selected');
  }
  current_item = this.id;
  this.className = 'selected';
  $('details_' + current_item.split('_')[1]).addClassName('selected');
}

function update_order(el){
  var items = document.getElementById('items');
  var order, remove_button;

  for(var i = 0; i < items.childNodes.length; i++){
    if(items.childNodes[i].nodeName == 'LI'){
      item_id = items.childNodes[i].id.split('_')[1];
      label = items.childNodes[i].getElementsByTagName('LABEL')[0];
      label.innerHTML = '#' + (i + 1);
      order = document.getElementById('recommendation_order_' + item_id);
      remove_button = document.getElementById('item_' + item_id + '_remove');
      order.value = i + 1;
      remove_button.disabled = (i == 0) ? true : false;
    }
  }
}

var handlerFunc = function(t) {
    eval(t.responseText);
}

function check_item_exists(){
  new Ajax.Request('/recommendation/item/' + escape(this.value) + '.js?id=' + this.id + '&callback=item_check_load', {onSuccess:handlerFunc});
}

function item_check_load(item){
  var item_id = item[0].substr(21);
  $('recommendation_item_description_new_' + item_id).update(item[2]);
}

function page_load(){
  for(var i = 1; i<= item_count + 1; i++){
    document.getElementById('item_' + i).onclick = select_item;
    document.getElementById('recommendation_items_' + i).onfocus = select_item_parent;
    document.getElementById('item_' + i + '_remove').onclick = remove_item;
    document.getElementById('recommendation_items_' + i).onkeyup = item_change;
    document.getElementById('recommendation_items_' + i).onchange = item_change;
    document.getElementById('recommendation_items_' + i).onchange = check_item_exists; // onblur kills Safari - WTF??
  }
  document.getElementById('add_more').onclick = add_items;

  
  var details_divs = $$('#recommendation-items div.details');
  details_divs.each(function(details_div){
    details_div.setStyle({height: $('items').getHeight() + 'px'});
  });

  Sortable.create("items", {onChange:update_order,handle:'handle',starteffect: null,endeffect: null});

}

if(recommendations_do_page_load){
  EventManager.addEventListener(window, 'load', page_load);
}

