var lastrequestedrow = false;
var lastreqcontent = false;
var origform = false;
var genurl = 'generator.php';
var ajaxreq = false;
var dontshowloader = false;

Event.observe( document, 'dom:loaded', function() {
  
  var imgpreload = [];
  $A([
    'images/gen/previewarea-selected-bg-top.png',
    'images/gen/previewarea-selected-bg-middle.png',
    'images/gen/previewarea-selected-bg-bottom.png',
    'images/listitem_bigdot_gray.png'
  ]).each( function( elem, i ) {
    
    imgpreload[ i ] = new Image() || false;
    if ( imgpreload[ i ] )
      imgpreload[ i ].src = elem;
      
  });
  
  var ajaxcomplete = function() {
    document.body.style.cursor = 'auto';
    $('loadingscreen').setStyle({display: 'none'});
  };
  
  var headermenuclick = function( e ) {
    
    if ( $('loadingscreen').getStyle('display') != 'none' ) return;
    getPwa( $(this).href, {ajax: 1} );
    e.stop();
    
  };
  
  Ajax.Responders.register({
    'onCreate': function() {
      
      document.body.style.cursor = 'progress';
      if ( dontshowloader ) return;
      
      if ( $('elementeditor').visible() ) {
        
        var height = $('elementeditor').getHeight();
        $('elementeditor').hide();
        $('pwa-addelement').show();
        
      } else {
        
        var height = $('basicelements').getHeight();
        $('basicelements').hide();
        $('pwa-addelement').hide();
        
      }
      
      $('loadingscreen').setStyle({
        display: 'block',
        height: height + 'px'
      });
      
    },
    'onComplete': ajaxcomplete,
    'onException': ajaxcomplete
  });
  
  $('refreshbutton').observe('click', headermenuclick );
  $('examplechooserbutton').observe('click', function( e ){ e.stop(); });
  $('notesbutton').observe('click', function( e ){ e.stop(); });
  
  var examplesshowing = false;
  var examplesstimer  = false;
  $('examplechooserbutton').observe('mouseenter', function() {
    $('examplechooser').setStyle({display: 'block'});
    examplesshowing = false;
  });
  $('examplechooserbutton').observe('mouseleave', function(){
    
    if ( examplesstimer )
      clearTimeout( examplesstimer );
    
    examplesstimer = setTimeout( function() {
      
      if ( !examplesshowing )
        $('examplechooser').setStyle({display: 'none'});
      
      examplesstimer = false;
      
    }, 500);
    
  });
  
  $('examplechooser').observe('mouseenter', function(){
    examplesshowing = true;
  });
  
  $('examplechooser').observe('mouseleave', function(){
    $('examplechooser').setStyle({display: 'none'});
    examplesshowing = false;
  });
  
  $('emptyformbutton').observe('click', headermenuclick );
  
  $$('#examplechooser li').each( function( elem ) {
    
    $( elem ).observe('mouseenter', function( e ) {
      
      $( elem ).addClassName('active');
      
    });
    
    $( elem ).observe('mouseleave', function( e ) {
      
      $( elem ).removeClassName('active');
      
    });
    
    $( elem ).observe('click', headermenuclick );
  });
  
  $$('#formactions div').each( function( elem ) {

    $( elem ).observe('mouseenter', function() { setHeaderBG( elem, true); });
    $( elem ).observe('mouseleave',  function() { setHeaderBG( elem, false); });
    
  });
  
  $$('#basicelements .long, #basicelements .short').each( function ( elem ) {
    
    $( elem ).observe('mouseenter', function() { setButtonBG( elem, true); });
    $( elem ).observe('mouseleave',  function() { setButtonBG( elem, false); });
    
  });
  
  $$('.basics').each( function( elem, i ) {

    new NewDraggable( elem );

    $( elem ).observe('dblclick', function( e ) {
      
      var elems = $$('.pwa-elemtable, .pwa-fieldset');
      if ( elems.length > 0 )
        var target = elems[ elems.length - 1 ];
      else
        var target = $('pwa-empty');

      dropHandler( this, target );
      e.stop();
      
    });
    
    $( elem ).observe('click', function( e ){ e.stop(); });
    
  });
  
  origform = document.forms.elementeditor.innerHTML;
  setupElementEditor();
  
  setupPwa();
  
});

// -------------------------------------------------------------
function setupPwa() {
  
  var dropoptions = {
    greedy: false,
    accept: 'basics',
    onDrop: function(drag, drop) {
      dropHandler(drag, drop);
    }
  };
  
  if ( $('pwa-empty') ) {
    Droppables.add( $('pwa-empty'), dropoptions );
    moveElementEditor('pwa-empty');
  } else
    $$('.pwa-elemtable').each( function( elem, i ) {
      
      elem.id = 'previewlist_' + i;
      
      Droppables.add( elem, dropoptions );
      
      $( elem ).observe('mouseenter', function( e ) { setPwaBG( elem, true, e ); });
      $( elem ).observe('mouseleave', function( e ) { setPwaBG( elem, false, e ); });
      
      $( elem ).observe('click',  function( e ) {
        if ( $('loadingscreen').getStyle('display') != 'none' ) return;
        if ( !updatesentinel ) setPwaSelected( elem );
      });
      
      $( elem ).down('.pwa-uparrow').up().observe('click',  function( e ) {
        movePwa( elem, 'up');
        e.stop();
      });
      
      $( elem ).down('.pwa-downarrow').up().observe('click',  function( e ) {
        movePwa( elem, 'down');
        e.stop();
      });
      
      $( elem ).down('.pwa-close a').observe('click',  function( e ) {
        getPwa( this.href, {ajax: 1} );
        e.stop();
      });
      
    });
  
  $$('.pwa-fieldset').each( function( elem, i ) {
    Droppables.add( elem, dropoptions );
  });
  
  $$('.pwa-fieldset legend').each( function( elem, i ) {
  
    var id = $( elem ).down('.pwa-uparrow').up().readAttribute('href').substr(13);
    
    $( elem ).down('.fieldname').observe('click',  function( e ) {
      if ( !updatesentinel && modifyPwa( id, this ) ) clearPwaSelected();
      e.stop();
    });
    
    $( elem ).down('.pwa-uparrow').up().observe('click',  function( e ) {
      movePwa( elem, 'up', id );
      e.stop();
    });
    
    $( elem ).down('.pwa-downarrow').up().observe('click',  function( e ) {
      movePwa( elem, 'down', id );
      e.stop();
    });
    
    $( elem ).down('.pwa-close').up().observe('click',  function( e ) {
      getPwa( this.href, {ajax: 1} );
      e.stop();
    });
    
  });
  
  $('basicelements').style.display = 'block';
  $('pwa-addelement').style.display = 'none';
  $('elementeditor').style.display = 'none';
    
  $('pwa-addelement').observe('click', function(e) {
    
    if ( $('loadingscreen').getStyle('display') != 'none' ) return e.stop();
    $('basicelements').show();
    $('elementeditor').hide();
    $('pwa-addelement').hide();
    $('content').setStyle({ height: 'auto' });
    sizeContent();
    e.stop();
    
  });
  var containers = [];
  var fieldsetelements = [];
  var fieldsetroots = []
  var rootelements = [];
  var fieldsetcount = 0;
  
  containers.push( $('pwa-sortable') );
  $('pwa-sortable').immediateDescendants().each( function( elem ) {
    
    
    if ( $( elem ).hasClassName('pwa-fieldset') ) {
      
      elem.id = 'pwafieldset_' + fieldsetcount;
      fieldsetroots[ fieldsetcount ] = elem;
      containers.push( elem );
      
      if ( fieldsets[ fieldsetcount ] > 0 ) {
        
        fieldsetelements[ fieldsetcount ] = [];
        
        for( var i = 0; i <= fieldsets[ fieldsetcount ]; i++ )
          fieldsetelements[ fieldsetcount ].push( $( elem ).down('.pwa-elemtable', i ) );
        
      } else {
        
        fieldsetelements[ fieldsetcount ] = [];
        var i = 0;
        while( $( elem ).down('.pwa-elemtable', i) ) {
          
          fieldsetelements[ fieldsetcount ].push( $( elem ).down('.pwa-elemtable', i) );
          i++;
          
        }
        
      }
      
      fieldsetcount++;
    } else if ( $( elem ).hasClassName('pwa-elemtable') )
      rootelements.push( elem );
    
  });
  
  $A( fieldsetelements ).each( function( value, i ) {
    
    Sortable.create( 'pwafieldset_' + i , {
      dropOnEmpty: false,
      elements: $A( fieldsetelements[ i ] ).compact(),
      containment: $A( containers ),
      maximum: fieldsets[ i ],
      onChange: deferPwaOrder
    });
    
  });
  
  Sortable.create('pwa-sortable', {
    dropOnEmpty: false,
    elements: rootelements,
    containment: containers,
    onChange: deferPwaOrder
  });

}

// -------------------------------------------------------------
function getPwa( url, params ) {
  
  if ( ajaxreq ) return;
  ajaxreq = true;
  
  $$('.pwa-elemtable, #pwa-empty, .pwa-fieldset').each( function( elem ) {
    Droppables.remove( elem );
  });
  try {
    Recaptcha.destroy();
  } catch ( e ) {
  }

  params['_'] = (new Date).getTime();
  new Ajax.Request( url , { 
      method: 'get',
      parameters: params,
      onComplete: function( request ) {

        ajaxreq = false;
        $('pwa-form').replace( '<div id="pwa-form">' + 
          ( request.responseText || 'Ajax error' ) +
        '</div>' );
        lastrequestedrow = false;
        setupPwa();
        setTimeout( sizeContent, 100);
        
      }
    }
  );
}

// -------------------------------------------------------------
function dropPwa( elem ) {
  if ( confirm( 'Are you sure you want to remove this element?' ) ) {
    
    var name = $( elem ).down('label').readAttribute('for');
    getPwa( genurl, {
      'target': 'delete',
      'name': name,
      'ajax': 1
    });
  }
}

// -------------------------------------------------------------
function movePwa( elem, target, id ) {
  
  var name = id || $( elem ).down('label').readAttribute('for');
  getPwa( genurl, {
    'target': target,
    'name': name,
    'ajax': 1
  });
}

// -------------------------------------------------------------
function modifyPwa( name, elem ) {
  if ( lastrequestedrow != name ) {
    
    if ( ajaxreq ) return false;
    ajaxreq = true;
    
    new Ajax.Request( genurl, {
        method: 'get',
        parameters: {
          'target': 'modify',
          'ajax': 1,
          'name': name
        },
        onComplete: function( request ) {
          
          ajaxreq = false;
          $('elementeditor').replace( '<div id="elementeditor">'+
            ( request.responseText || 'Ajax error' ) + 
            '</div>' );
          lastrequestedrow = name;
          setupElementEditor();
          setTimeout( function() { moveElementEditor( elem ); }, 200);
          
        }
      }
    );
    
  } else if ( lastrequestedrow == name )
    setTimeout( function() { moveElementEditor( elem ); }, 200);
  
  return true;
}

// -------------------------------------------------------------
function moveElementEditor( elem ) {
  //position the element editor to the element if its not near
  
  var elempos = $( elem ).cumulativeOffset();
  elempos.bottom = elempos.top + $( elem ).getHeight();
  
  var editorpos = $('workstage').cumulativeOffset();
  editorpos.bottom = editorpos.top + $('workstage').getHeight();
  
  if ( editorpos.left < 200 )
    return;
  
  if ( elempos.bottom > ( editorpos.bottom - 20 ) || elempos.top < ( editorpos.top + 20 ) ) {
    
    //move the least amount possible
    if( ( $('workstage').getHeight() / 2 + editorpos.top ) > elempos.top ) {
      //moving up
      var newtop = elempos.top - 20;
      new Effect.Move('workstage', { mode: 'absolute', x: editorpos.left, y: newtop, queue: { 
        position: 'end',
        limit: 2,
        scope: 'elemeditor'
      }, afterFinish: sizeContent });
      
    } else {
      //moving down
      var newtop = elempos.bottom - $('workstage').getHeight() + 20;
      new Effect.Move('workstage', { mode: 'absolute', x: editorpos.left, y: newtop , queue: { 
        position: 'end',
        limit: 2,
        scope: 'elemeditor'        
      }, afterFinish: sizeContent });
      
    }
  }
}

// -------------------------------------------------------------
var updatesentinel = false;
var registered = false;
function deferPwaOrder() {

  if ( !registered ) {
    
    $(document).observe('mouseup', updatePwaOrder);
    updatesentinel = true;
    registered = true;
    
  }

}

// -------------------------------------------------------------
function updatePwaOrder( e ) {

  $(document).stopObserving('mouseup', updatePwaOrder);
  registered = false;
  var param    = '?target=updateorder&ajax=1';
  var fieldset = 0;
  
  $('pwa-sortable').immediateDescendants().each( function( elem ) {
  
    if ( elem.hasClassName('pwa-fieldset') ) {
      
      param = param + '&preview[]=fieldset' + fieldset;
      fieldset++;
      
      var i = 0;
      while( elem.down('.pwa-elemtable', i) ) {
        
        var name = elem.down('.pwa-elemtable', i).down('label').readAttribute('for');
        param = param + '&preview[]=' + name;
        i++;
        
      }
      
    } else if ( elem.hasClassName('pwa-elemtable') ) {
      
      var name = elem.down('label').readAttribute('for');
      param = param + '&preview[]=' + name;
      
    }
  });
  
  if ( $('elementeditor').visible() )
    var elemtoshow = 'elementeditor';
  else
    var elemtoshow = 'basicelements';
    
  new Ajax.Request( genurl + param, { 
      method:'get',
      onComplete: function() {
        updatesentinel = false;
        $( elemtoshow ).show();
      }
    }
  );

}
var uniqueid = 1;
// -------------------------------------------------------------
function dropHandler( drag, drop ) {
  
  var form = $(document.forms.elementeditor);
  var rows = $$('.pwa-fieldset, .pwa-elemtable');
  
  if ( rows.length == 0 ) {
    
    var newelemid = 'sample' + uniqueid;
    uniqueid++;
    var position = 1;
    
  } else {
    
    if ( uniqueid == 1 )
      uniqueid = rows.length + 1;
    
    var newelemid = 'sample' + uniqueid;
    uniqueid++;
    var position = 0;
    var elemcount = 0;
    
    $('pwa-sortable').immediateDescendants().each( function( elem ) {
      
      if ( elem.hasClassName('pwa-fieldset') ) {
        
        elem.immediateDescendants().each( function ( subelem ) {
          
          if ( subelem.hasClassName('pwa-elemtable') ) elemcount++;
          if ( subelem.id == drop.id ) { position = elemcount; throw $break; }
          
        });
        
      } else if ( elem.hasClassName('pwa-elemtable') ) {
        
        elemcount++;
        if ( elem.id == drop.id ) { position = elemcount; throw $break; }
        
      }
    });
    
  }
  
  var formbackup = form.innerHTML;
  form.innerHTML = origform;

  form.type.value = drag.id;
  
  if ( drag.id == 'select' || drag.id == 'inputRadio' )
    form.values.value = 
      'optvalue1**sample option 1\n' +
      'optvalue2**sample option 2\n' +
      'optvalue3**sample option 3\n'
    ;
  
  form.name.value = newelemid;
  
  if ( drag.id == 'fieldset' )
    form.legend.value = newelemid;
  else
    form.displayname.value = newelemid;
  
  form.value.value = 'Sample Value';
  
  var params = form.serialize();
  
  new Ajax.Request( genurl + '?ajax=1&moveto=' + position, { 
      method: 'post',
      parameters: params,
      onComplete: function( request ) {
        
        $$('.pwa-elemtable, #pwa-empty').each( function( elem ) {
          Droppables.remove( elem );
        });
        $('pwa-form').replace( '<div id="pwa-form">' + 
          ( request.responseText || 'Ajax error' ) +
        '</div>' );
        setupPwa();
        setTimeout( sizeContent, 100);
        
      }
    }
  );
    
  form.innerHTML = formbackup;
  setupElementEditor();
}

// -------------------------------------------------------------
function clearPwaSelected() {
  
  $$('.pwa-elemtable').each( function( elem ) {
    
    var top = $( elem ).down('.pwa-bg-top');
    var arrows = $( elem ).down('.pwa-movers');
    var middle = $( elem );
    var content = $( elem ).down('.pwa-container');
    var close = $( elem ).down('.pwa-close');
    var bottom = $( elem ).down('.pwa-bg-bottom');
    
    top.removeClassName('pwa-bg-top-selected');
    arrows.removeClassName('pwa-movers-selected');
    middle.removeClassName('pwa-elemtable-selected');
    content.removeClassName('pwa-container-selected');
    close.removeClassName('pwa-movers-selected')
    bottom.removeClassName('pwa-bg-bottom-selected');
    
  });
  
}

// -------------------------------------------------------------
var pwaLastSelected = null;
function setPwaSelected( elem ) {
  
  $('basicelements').hide();
  $('elementeditor').show();
  
  if ( !elem || !modifyPwa( $( elem ).down('label').readAttribute('for'), elem ) || pwaLastSelected == elem )
    return;
    
  clearPwaSelected();
  
  var top = $( elem ).down('.pwa-bg-top');
  var arrows = $( elem ).down('.pwa-movers');
  var middle = $( elem );
  var content = $( elem ).down('.pwa-container');
  var close = $( elem ).down('.pwa-close');
  var bottom = $( elem ).down('.pwa-bg-bottom');

  top.addClassName('pwa-bg-top-selected');
  arrows.addClassName('pwa-movers-selected');
  middle.addClassName('pwa-elemtable-selected');
  content.addClassName('pwa-container-selected');
  close.addClassName('pwa-movers-selected')
  bottom.addClassName('pwa-bg-bottom-selected');
  
  pwaLastSelected = elem;
  
}

// -------------------------------------------------------------
function setPwaBG( elem, hovering, e ) {
  if ( !elem )
    return;
  
  var top = $( elem ).down('.pwa-bg-top');
  var arrows = $( elem ).down('.pwa-movers');
  var middle = $( elem );
  var content = $( elem ).down('.pwa-container');
  var close = $( elem ).down('.pwa-close');
  var bottom = $( elem ).down('.pwa-bg-bottom');
  
  if ( !hovering ) {
    
    //need to get the bounding box of elem and look at the events
    //mouse coordinates so we can be sure that the mouseout event is actually
    //correct because IE fires it for every child element too
    
    var dimensions = $( elem ).getDimensions();
    var pos = $( elem ).viewportOffset();
    
    pos.right = pos.left + dimensions.width;
    pos.bottom = pos.top + dimensions.height;
    
    if ( e.clientX > pos.left && e.clientX < pos.right 
         &&
         e.clientY > pos.top && e.clientY < pos.bottom
       ) return;
    
    top.removeClassName('pwa-bg-top-hover');
    arrows.hide();
    middle.removeClassName('pwa-elemtable-hover');
    content.removeClassName('pwa-container-hover');
    close.hide();
    bottom.removeClassName('pwa-bg-bottom-hover');
    
  } else {
    $$('.pwa-elemtable-hover').each( function( el ) {
      
      var top = $( el ).down('.pwa-bg-top');
      var arrows = $( el ).down('.pwa-movers');
      var middle = $( el );
      var content = $( el ).down('.pwa-container');
      var close = $( el ).down('.pwa-close');
      var bottom = $( el ).down('.pwa-bg-bottom');
      
      top.removeClassName('pwa-bg-top-hover');
      arrows.hide();
      middle.removeClassName('pwa-elemtable-hover');
      content.removeClassName('pwa-container-hover');
      close.hide();
      bottom.removeClassName('pwa-bg-bottom-hover');
      
    });
    
    top.addClassName('pwa-bg-top-hover');
    arrows.setStyle({ 'display': 'block'});
    middle.addClassName('pwa-elemtable-hover');
    content.addClassName('pwa-container-hover');
    close.setStyle({ 'display': 'block'});
    bottom.addClassName('pwa-bg-bottom-hover');
    
  }
  
}

// -------------------------------------------------------------
function setHeaderBG( element, hovering ) {
  if ( !element )
    return;
  
  var menu = element.up();

  if ( !hovering ) {
    menu.setStyle({backgroundPosition: '0 0'});
    return;
  }
  
  switch ( element.id ) {
    case 'refreshbutton':
      menu.setStyle({backgroundPosition: '0 -32px'});
      break;
    case 'showconfigbutton':
      menu.setStyle({backgroundPosition: '0 -64px'});
      break;
    case 'examplechooserbutton':
      menu.setStyle({backgroundPosition: '0 -96px'});
      break;
    case 'emptyformbutton':
      menu.setStyle({backgroundPosition: '0 -128px'});
      break;
    case 'notesbutton':
      menu.setStyle({backgroundPosition: '0 -160px'});
      break;
  }
  
}

// -------------------------------------------------------------
function setButtonBG( elem, hovering ) {
  if ( !elem )
    return;
    
  if ( !hovering )
    $( elem ).setStyle({backgroundPosition: '0 0'});
  else
    $( elem ).setStyle({backgroundPosition: '0 -32px'});

}

// -------------------------------------------------------------
function setupElementEditor() {
  
  var form = $(document.forms.elementeditor);
  
  if ( form == undefined ) return;
  
  form.observe('submit', function( e ) {
    
    if ( check_elementeditor() ) {
      
      if ( ajaxreq ) return;
      ajaxreq = true;
      
      var valuestext = getOptions();
      if ( valuestext == "")
        valuestext = "optionvalue**This is a sample text";
      
      $('values').setValue( valuestext );
      
      new Ajax.Request( genurl + '?ajax=1', { 
          method: 'post',
          parameters: this.serialize(),
          onComplete: function( request ) {
            
            $('pwa-form').replace( '<div id="pwa-form">' + 
              ( request.responseText || 'Ajax error' ) +
            '</div>' );
            setupPwa();
            
            document.forms.elementeditor.innerHTML = origform;
            setupElementEditor();
            setTimeout( sizeContent, 100);
            
            lastrequestedrow = false;
            ajaxreq = false;
            
          }
        }
      );
      
    }
    e.stop();
  });
  
  $$('#elementeditor .button').each( function( elem ) {
    $( elem ).observe('mouseenter', function() { setButtonBG( elem, true); });
    $( elem ).observe('mouseleave', function() { setButtonBG( elem, false); });
  });
  
  $( form.type ).observe('change', function( e ) {
    switchFields( form.type[ form.type.selectedIndex ].value, form.level[1].checked );
  });
  
  $( form.reset ).observe('click', function( e ) {
    form.innerHTML = origform;
    setupElementEditor();
    e.stop();
  });
  
  $( form.addvalidation ).observe('click', function( e ) {
    generatorValidator( $$('.pwa-elemtable-selected')[0].down('label').readAttribute('for'), $('lightwindow_contents') );
    e.stop();
  });
  
  $$( '#ed_level label' ).each( function( element ) {
    
    $( element ).observe('click', function( e ) {
      
      var type = form.type[ form.type.selectedIndex ].value;
      
      if ( form.level[0].checked )
        var firstbox = false;
      else
        var firstbox = true;
      
      form.level[0].checked = firstbox; 
      form.level[1].checked = !firstbox;

      Cookie.set( type, firstbox, 3600 );
      switchFields( type, !firstbox );

      e.stop();
  
    });

  });
  
  
  var type = form.type[ form.type.selectedIndex ].value;
  var details = Cookie.get( type );
  
  if ( details !== null) {
    details = ( details == "true" )? true: false;
    
    form.level[0].checked = details; 
    form.level[1].checked = !details;
    
    switchFields( type, !details );
  } else
    switchFields( type, form.level[1].checked );
  
}

function setupValueEditor() {
  if ( !$('values').visible() )
    return;
  
  var insertafter = $('values');
  insertafter.hide();
  var text = insertafter.getValue();
  text = text.split("\n");
  
  for (var i = 0, j = text.length; i < j; i++ ) {
    if ( text[ i ] == "" ) continue;
    
    var separator = text[ i ].indexOf("**");
    if ( separator == -1 ) continue;
    
    var optionvalue = text[ i ].substr(0, separator );
    var optiontext = text[ i ].substr( separator + 2 );
    
    insertafter = createOptionRow( insertafter, optionvalue, optiontext, i );
    
  }
  
  var addoption = new Element("a", {
    href: "#",
    id: "values_addoption"
  });
  
  insertafter.insert({
    after: addoption
  });
  
  addoption.innerHTML = "Add a new option...";
  addoption.observe("click", function( e ) {
    createOptionRow( $("values_addoption").previous(), "Value", "Sample Text");
    e.stop();
  });
  
}

function createOptionRow( insertafter, optionvalue, optiontext, id ) {
  if ( !id )
    var id = $$(".values_optionvalues").length;
  
  var optionvalue = new Element("input", {
    "type": "text",
    "name": "values_optionvalue_" + id,
    "id": "values_optionvalue_" + id,
    "class": "values_optionvalues",
    "value": optionvalue
  });
  
  var optiontext = new Element("input", {
    "type": "text",
    "name": "values_optiontext_" + id,
    "id": "values_optiontext_" + id,
    "class": "values_optiontexts",
    "value": optiontext
  });
  
  var deleteoption = new Element("a", {
    "href": "#",
    "id": "values_deleteoption_" + id,
    "class": "values_optiondelete"
  });
  
  insertafter.insert({
    "after": optionvalue
  });
  optionvalue.insert({
    "after": optiontext
  });
  optiontext.insert({
    "after": deleteoption
  });
  
  deleteoption.insert(
    new Element("img", {
      "src": "images/b_drop.png"
    })
  );
  
  deleteoption.observe("click", function( e ) {
    optionvalue.remove();
    optiontext.remove();
    deleteoption.remove();
    e.stop();
  });
  
  return deleteoption;
}

function getOptions() {
  var text = [];
  $$(".values_optionvalues").each( function( elem, i ) {
    var optionvalue = $(elem).getValue();
    var id = $(elem).id.match(/(\d+$)/)[0];
    var optiontext = $("values_optiontext_" + id ).getValue();
    
    text.push( optionvalue + "**" + optiontext );
  });
  
  return text.join("\n");
}

var types  = [ 
  'inputText', 
  'inputPassword',
  'inputHidden', 
  'textarea', 
  'select', 
  'selectDynamic',
  'selectFile', 
  'selectDate', 
  'inputRadio', 
  'inputRadioDynamic',
  'inputCheckbox',
  'inputCheckboxDynamic',
  'text',
  'template',
  'inputFile',
  'fieldset',
  'fckeditorarea2',
  'recaptcha',
  'mapMarker'
];

var basicfields = [
  ['displayname', 'value'],                          // inputtext
  ['displayname', 'value'],                          // password
  ['value'],                                         // hidden
  ['displayname', 'value'],                          // textarea
  ['displayname', 'value', 'values'],                // select
  ['displayname', 'value', 'values', 'sql', 'valuesql'], // selectDynamic
  ['displayname', 'value', 'directory', 'tree', 'includedirs', 'includefiles'], // selectFile
  ['displayname', 'value', 'yearfrom', 'yearuntil'], // selectDate
  ['displayname', 'value', 'values'],                // radio
  ['displayname', 'value', 'values', 'sql'],         // radioDynamic
  ['displayname', 'value', 'onvalue', 'offvalue'],   // inputCheckbox
  ['displayname', 'value', 'onvalue', 'offvalue', 'values', 'sql', 'valuesql'], //inputCheckboxDynamic
  ['displayname', 'value'],                          // text
  ['displayname', 'value'],                          // template
  ['displayname'],                                   // inputfile
  ['legend', 'submit', 'fieldscounter'],             // fieldset
  ['displayname', 'value'],                          // fckeditor2
  ['displayname', 'pubkey'],                         // recaptcha
  ['displayname']                                    // mapmarker
];

var advancedfields = [
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help'], // inputtext
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help'], // password
  ['type', 'display', 'readonly', 'html', 'htmlid', 'help'], // hidden
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help'], // textarea
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help'], // select
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help', 'valuesql', 'treeid', 'treeparent', 'treestart'], // selectDynamic
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help', 'exclude', 'fullpath', 'fullpathvalue', 'trailingslash'], // selectFile
  ['type', 'layout', 'padding', 'format', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'htmlid', 'help'], // selectDate
  ['type', 'divide', 'divider', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'help', 'layout', 'itemlayout'], // radio
  ['type', 'divide', 'divider', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'help', 'layout', 'itemlayout'], // radioDynamic
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help', 'onvalue', 'offvalue'],  // inputCheckbox
  ['type', 'divide', 'divider', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'help', 'layout', 'itemlayout', 'onvalue', 'offvalue'],  //inputCheckboxDynamic
  ['type', 'rowlayout', 'display', 'prefix', 'postfix'], // text
  ['type', 'rowlayout', 'display', 'prefix', 'postfix'], // template
  ['type', 'rowlayout', 'display', 'prefix', 'postfix', 'readonly', 'html', 'htmlid', 'help', 'deletelayout', 'delete', 'linklayout', 'thumbnail', 'thumbnaillayout'], // inputfile
  ['type', 'rowlayout', 'prefix', 'postfix', 'legend', 'legendtag', 'submit', 'htmlid'], // fieldset
  ['type', 'prefix', 'postfix', 'width', 'height', 'path'], //fckeditor2
  ['type', 'prefix', 'postfix'], //recaptcha
  ['type', 'prefix', 'postfix'] //mapmarker
];

// -------------------------------------------------------------
function switchFields( type, advanced ) {
  if ( !$('elementeditor').visible() ) return;
  
  //recursively hide every editor element
  for ( var i = 0; i < types.length; i++ ) {
  
    for ( var j = 0; j < basicfields[ i ].length; j++ )
      $('ed_' + basicfields[ i ][ j ] ).hide();
    
    for ( var j = 0; j < advancedfields[ i ].length; j++ )
      $( 'ed_' + advancedfields[ i ][ j ] ).hide();
  
    if ( types[ i ] == type )
      thistype = i;
  
  }
  
  //show the fields corresponding to the type
  for ( var i = 0; i < basicfields[ thistype ].length; i++ )
    $('ed_' + basicfields[ thistype ][ i ] ).show();

  if ( advanced )
    for ( var i = 0; i < advancedfields[ thistype ].length; i++ )
      $('ed_' + advancedfields[ thistype ][ i ] ).show();
  
  //look for visible elements under the headings and show the heading if one is showing
  for ( var i = 1; i <= 2; i++ ) {
    
    $('ed_fs' + i ).hide();
    
    if ( elementeditorcache[ i ].length == 0 )
      buildElementEditorCache();
    
    for( var j = 0; j < elementeditorcache[ i ].length; j++ )

      if ( $( elementeditorcache[ i ][ j ] ).visible() ) {
        
        $('ed_fs' + i ).show();
        break;
        
      }
  }
    
  //make sure we have enough space to show all this, we also have to delay it a bit so things can calm down
  $('content').setStyle({ height: 'auto' });
  setTimeout(sizeContent, 100);
}

// -------------------------------------------------------------
function sizeContent() {
  $('content').setStyle({ height: 'auto' });
  
  var content = $('content').cumulativeOffset();
  content.bottom = content.top + $('content').getHeight();
  
  var workstage = $('workstage').cumulativeOffset();
  workstage.bottom = workstage.top + $('workstage').getHeight();
  
  if( content.bottom < workstage.bottom ) {
    
    var height = $('content').getHeight() + workstage.bottom - content.bottom + 20;
    $('content').setStyle({ height: height + 'px' });
    
  }
  
  //Ugly hack for webkit, which does not seem to notice that the state of the form.level radiobutton has changed
  var form = $(document.forms.elementeditor);
  var details = Cookie.get( form.type[ form.type.selectedIndex ].value );
  
  if ( details !== null)
    details = ( details == "true" )? true: false;
  else
    details = form.level[0].checked;

  if ( details ) {
    
    $( form.level[0] ).next('label').show();
    $( form.level[1] ).next('label').hide();
    
  } else {
    
    $( form.level[0] ).next('label').hide();
    $( form.level[1] ).next('label').show();
  }
  
  setupValueEditor();
}

// -------------------------------------------------------------
// A tiny cache for the different sub-elements of the element editor
var elementeditorcache = [
  [], //basic elements (ed_fs0)
  [], //element specific (ed_fs1)
  [], //additional settings (ed_fs2)
];
function buildElementEditorCache() {
  
  var editorelements = $('ed_fs0').adjacent('.editorrow');
  var bucket = 0;
  
  for ( var i = 0; i < editorelements.length; i++ ) {
    
    var shouldcontinue = false;
    
    for (var j = 1; j <= 2; j++ )    
      if ( $( editorelements[ i ] ).readAttribute('id') == 'ed_fs' + j) {
        
        bucket++;
        shouldcontinue = true;
        
      }
      
    if ( shouldcontinue ) continue; //step over and start throwing elements into the other array
    elementeditorcache[ bucket ].push( editorelements[ i ].id )

  }
  
}

// -------------------------------------------------------------
function insertValue() {

  insert =
    "'<FORM." + 
     document.forms.validator.sqlhelper[
       document.forms.validator.sqlhelper.selectedIndex
     ].value + ">' ";
  sql    = document.forms.validator.sql.value;

  if ( document.selection ) {
    // ie
    document.validator.sql.focus();
    sel      = document.selection.createRange();
    sel.text = insert;
    document.validator.sql.focus();
  }
  else {

    if ( document.validator.sql.selectionStart || 
         ( document.validator.sql.selectionStart == '0' )
       ) {
      // mozilla/netscape
      startPos  = document.validator.sql.selectionStart;
      endPos    = document.validator.sql.selectionEnd;
      document.validator.sql.value = 
        sql.substring( 0, startPos ) + 
        insert +
        sql.substring( endPos, sql.length );
    }
    else {
      // fallback
      document.validator.sql.value += insert;
    }

  }

}

// -------------------------------------------------------------
function generatorValidator( name, elem ) {
  
  dontshowloader = true;
  myLightWindow.activateWindow({
    href: 'generator.php?target=validator&name=' + name,
    title: 'Validation',
    type: 'page',
    left: document.viewport.getWidth() / 2,
    width: 600,    
    height: 600,
    ajaxCallback: function( data, elem ) {
      
      dontshowloader = false;
      if ( !$('validatorcontainer') )
        elem.insert('<div id="validatorcontainer">' + 
          ( data || 'Ajax error' ) +
          '</div>', elem
        );
      else
        $('validatorcontainer').replace('<div id="validatorcontainer">' + 
          ( data || 'Ajax error' ) +
          '</div>');
      
      setupValidator();
    }
  });

  return false;
}

// -------------------------------------------------------------
function switchFieldsValidator( type, indoc ) {

  off = new Array();
  on  = new Array();

  thistype = '';
  
  for ( i in validators ) {  
    
    for( var j = 0; j < validators[ i ].length; j++ ) {
      
      if ( validators[ i ][ j ] == '' || !$( 'trv' + validators[ i ][ j ] ) ) 
        continue;
      
      $( 'trv' + validators[ i ][ j ] ).hide();
      
    }

    if ( i == type )
      thistype = i;
    
  }

  if ( thistype.length )
    
    for ( i in validators[ thistype ] ) {
      
      if ( validators[ thistype ][ i ] == '' || !$( 'trv' + validators[ thistype ][ i ] ) ) 
        continue;
      
      $( 'trv' + validators[ thistype ][ i ] ).show();
      
    }

}

function setupValidator() {
  
  $('elementeditor').show();
  $(document.forms.validator).observe('submit', function( e ) {
    
    new Ajax.Request('generator.php?ajax=1',
      { 
        method: 'post',
        parameters: this.serialize(),
        onComplete: function( request ) {
          
          $('validatorcontainer').replace( '<div id="validatorcontainer">' + 
            ( request.responseText || 'Ajax error' ) +
          '</div>' );
          setupValidator();
          
        }
      }
    );
    
    e.stop();
  });

  $$('.validatormod').each( function( elem ) {

    $( elem ).observe('click', function( e ) {
      
      new Ajax.Request( elem.href, { 
          method: 'get',
          parameters: { 'ajax': '1'},
          onComplete: function( request ) {
            
            $('validatorcontainer').replace( '<div id="validatorcontainer">' + 
              ( request.responseText || 'Ajax error' ) +
            '</div>' );
            setupValidator();
            
          }
        }
      );
      e.stop();
    });
  });
  
  $$('.validatordel').each( function( elem ) {

    $( elem ).observe('click', function( e ) {
      
      if ( !confirm('Are you sure?') )
        return e.stop();
        
      new Ajax.Request( elem.href, { 
          method: 'get',
          parameters: { 'ajax': '1'},
          onComplete: function( request ) {
            
            $('validatorcontainer').replace( '<div id="validatorcontainer">' + 
              ( request.responseText || 'Ajax error' ) +
            '</div>' );
            setupValidator();
            
          }
        }
      );
      e.stop();
    });
  });
}