/* AJAX Text Fields */
var field = new Object();

field.field = '';

field.process = function(query, field, url)
{
  this.field = field;
  this.loader = new net.getContent(url + '?query=' + query, this.processResponse);
}

field.processResponse = function()
{
  var response = this.req.responseXML.documentElement;
  var Entries = response.getElementsByTagName('fieldVal');

  var theDiv = document.getElementById(field.field);

  if (Entries.length > 0)
  {
    /* Clear current entries */
    while (theDiv.firstChild)
      theDiv.removeChild(theDiv.firstChild);

    for (var i = 0; i < Entries.length; i++)
    {
      var newEntry = document.createElement("div");
      newEntry.onclick = field.savedata;
      newEntry.className = 'roll';
      newEntry.innerHTML = field.getContent(Entries[i]);
      theDiv.appendChild(newEntry);
    }
    showDiv(field.field);
  }
  else
  {
    hideDiv(field.field);
  }



  delete (this.loader);
}

field.getContent = function(element)
{
  return (element.text != undefined) ? element.text : element.textContent;
}

field.savedata = function()
{
  var formField = document.getElementById(field.field.substr(5));
  formField.value = this.innerHTML;
  hideDiv(field.field);
}

/* Editable Regions */
var editable = new Object();

editable.editing = false;

editable.highlight = function(element)
{
  element.parentNode.style.border = "2px solid #FF0000";
  element.parentNode.padding = "2px";
}

editable.nohighlight = function(element)
{
  element.parentNode.style.border = "0";
  element.parentNode.padding = "0";
}

editable.edit = function(element)
{
  if (!editable.editing) // To stop double editing
  {
    // Get the size of the current region
    //height = element.offsetHeight;
    var height = 100;
    var width = element.parentNode.offsetWidth - 5; // Parent width - not that of the element (incase it doesn't fill the parent)

    // Replace <br> with \r\n
    var BR = false;
    var textVal = element.innerHTML;
    if (textVal.search(/<BR>/gi) != -1)
    {
      BR = true;
      textVal = textVal.replace(/<br>/gi, '\n');
    }

    if (!BR) // Single Line
      element.innerHTML = "<input type=\"text\" id=\"field_" + element.id + "\" style=\"width: " + width + "px; \" onfocus=\"editable.highlight(this);\" onblur=\"editable.nohighlight(this); editable.save(this);\" value=\"" + textVal + "\" />";
    else // Multiline (text area)
      element.innerHTML = "<textarea id=\"field_" + element.id + "\" style=\"width: " + width + "px; height: " + height + "px;\" onfocus=\"editable.highlight(this);\" onblur=\"editable.nohighlight(this); editable.save(this);\">" + textVal + "</textarea>";

    element.firstChild.focus();

    editable.editing = true;
  }
}

editable.save = function(element)
{
  element.value = element.value.replace(/\n/g, "<br>");

  editable.element = element.parentNode;

  this.loader = new net.getContent(processorURL + '&element=' + element.parentNode.id + '&value=' + element.value, this.processResponse);

  editable.editing = false;
}

editable.processResponse = function()
{
  var response = this.req.responseXML.documentElement;
  var Entries = response.getElementsByTagName('dataVal');

  if (Entries.length > 0)
  {
    editable.element.innerHTML = field.getContent(Entries[0]);
  }
}


editable.setup = function()
{
  // Find all the divs
  var divs = document.getElementsByTagName("div");

  // Loop through the divs
	for (var i = 0; i < divs.length; i++)
	{
		var div = divs[i];

    if (div.getAttribute('class') == 'editable' || div.getAttribute('className') == 'editable')
    {
			div.onclick = function () { editable.edit(this); }
			div.style.cursor = "pointer";
			div.title = "Click to Edit this text.";
    }
	}
}

event.observe(window, 'load', editable.setup);