/*
So, like, how do I use this list input thing?

Step 1: Setup your HTML

      <ul id="list_input_{$key}">
        <li class="input"><input /></li>
      </ul>

Key is a unique string for this particular inputlist. It's probably going to be 
something like {$page_type_alias}_{$hash}, or maybe just {$hash}, or even "Steve". It's your choice. Note that this
adds some styling and an input observer (which takes care of backspacing away an item). In addition, you'll probably want to add an
autocompleter. You can do this as you typically would. 

Step 2: Add item. 
  call addDtag({$key}, {$var_name}, {$display_name}, {$value});
  This is probably done from your autocompleter ajax script. The key is the same key as in step 1. var_name is the variable you
  want your items to be saved in. So, if it's 'page_id', then you'll have a variable 'page_id' that is equal to a list of values. The display_name
  is what you want to appear in the tag, and the value is the actual value. 
  
Step 3: Getting values.
  your values are in the whatever variable you suppode for addDtag. So, like, you know, just get that. You know?

*/
function constructListInput(hash) {

  $('list_input_'+hash).addClassName('listinput');
  var input_element = $$('#list_input_'+hash+" li.input input" )[0];
  input_element.observe('keypress', createCheckBackspace(hash, input_element) );
}

function addDtag(hash, var_name, name, value) {
    var existing_tag_inputs = $$('#list_input_'+hash+' li input');
    var existing_tag = null;
    for( var i=0; i < existing_tag_inputs.length; i++) {
      if(existing_tag_inputs[i].value == value) {
        existing_tag = existing_tag_inputs[i];
      }
    }
    if(!existing_tag) {
      var element_id = 'dtag_'+randomString(30);
      var input_element = $$('#list_input_'+hash+" li.input" )[0];
  
      //var children = element_id.childElements();
      var inner =   '  <span class="dtag_display" >'+name+'</span>'+
                    '  <input type="hidden" value="'+value+'" name="'+var_name+'[]" />'+
                    '  <a class="dtag_close" onClick="$(\''+element_id+'\').remove();return false;">X</a>';
                    
      var dtag= new Element('li', {'class':'dtag_span', 'id':element_id}).update(inner);
      Element.insert(input_element, {'before':dtag});
    } else {
      new Effect.Highlight(existing_tag.parentNode, {startcolor:'#1464F4'});
    }
    return false;
}

function getPageIdsAsString(hash) {
  var inputs = $$('li.dtag_span input');
  var ids = '';
  for(var i = 0; i < inputs.length; i++) {
    ids = ids+ inputs[i].value + ',';
  }
  ids = ids + '0'; // append zero so you don't have the trailing comma
  return ids;
}

function createCheckBackspace(hash, input_element) {
  return function checkBackspace(e, value)
  {
    var keynum;
    var keychar;
    var numcheck;
    
    if(window.event) // IE
      {
      keynum = e.keyCode;
      }
    else if(e.which) // Netscape/Firefox/Opera
      {
      keynum = e.which;
      }
    if(keynum == 8 && input_element.value == '') {
      deleteLatestDtag(hash);
    }
    //return !numcheck.test(keychar);
  }
}

function deleteLatestDtag(hash) {
  var dtags = $$('#list_input_'+hash+' li.dtag_span');
  var last_dtag = dtags[dtags.length-1];
  if(last_dtag) {
    last_dtag.remove();
  }
}

     
// this particular function is used in
function getPageIdsAsString(hash) {
  var inputs = $$('li.dtag_span input');
  var ids = '';
  for(var i = 0; i < inputs.length; i++) {
    ids = ids+ inputs[i].value + ',';
  }
  ids = ids + '0'; // append zero so you don't have the trailing comma
  return ids;
}





function randomString(len) {
  var str = "";
  for(var i = 0; i < len; i++ ) {
    str = str + String.fromCharCode(65 + Math.round(Math.random() * 25));
  }
  return str;
}