Event.observe(window, 'load', function() {
   var EDITING = false;
   var EDITING_ID = false;

   function reInitFormSortable() {
       Sortable.create('form-components', {tag:'li', containment:['form-components','toolbar-buttons'],scroll:window,onUpdate:updatePositions,dropOnEmpty:true,hoverclass:'hoverclass'});
   }

   function dragDropAdd(el) {
      el = document.getElementsByClassName('control', $('form-components'))[0];
      var nel = addField(el);

      Event.observe(nel, 'click', editProperties);

      // where should this be in the toolbar?
      pos = el.className.replace("control ", "") * 1;

      var tbut = $('toolbar-buttons');
      if (pos > tbut.childNodes.length) { // last one
          tbut.appendChild(el);
      }
      else {
          $('toolbar-buttons').insertBefore(el, $$('#toolbar-buttons .' + (pos+1))[0]);
      }

      new Ajax.Updater($(nel), 'form.php', {
              parameters: { type: el.id }
          });
      reInitFormSortable();
   }
   
   function addField(el) {
       var type = el.id;
       var nel = document.createElement('LI');
       nel.appendChild(document.createTextNode(type + Math.random()));
       el.parentNode.insertBefore(nel, el);
       return nel;
   }

   function updatePositions(el) {
      
   }

   function editProperties (el) {
       $$('#form-components li').each(function (e) {
               e.removeClassName('current-edit');
           });

       EDITING = true;
       EDITING_ID = this.firstChild.id.replace('field-', '');
       setupPropertyEditor(this.firstChild.id);
       Element.extend(this);
       Element.addClassName(this, 'current-edit');
   }

   function setupPropertyEditor(id) {
       var w = id.replace('field-', '');
       $('property-label-value').value = $('field-label-' + w).innerHTML;
       $('property-default-value').value = $('field-value-' + w).value;
       $('property-help-value').value = $('field-help-' + w).innerHTML;
   }

   function syncPropertyEditor() {

       //       $('field-value-' + EDITING_ID).value = $('property-default-value').value;
       //       $('field-help-' + EDITING_ID).innerHTML = $('property-help-value').value;
   }
   
   Element.observe('property-label-value', 'change', function () {
           if (EDITING_ID) {
               $('field-label-' + EDITING_ID).innerHTML = $('property-label-value').value; }
       });
   Element.observe('property-default-value', 'change', function () {
           if (EDITING_ID) {
               $('field-value-' + EDITING_ID).removeAttribute('readonly');
               $('field-value-' + EDITING_ID).value = $('property-default-value').value;           
               $('field-value-' + EDITING_ID).setAttribute('readonly', 'readonly');
           }
       });
   Element.observe('property-help-value', 'change', function () {
           if (EDITING_ID) {
               $('field-help-' + EDITING_ID).innerHTML = $('property-help-value').value;           
           }
       });

   reInitFormSortable();
   Sortable.create('toolbar-buttons', {tag:'li', containment:[], constraint:false,onUpdate:dragDropAdd});
});