function showOptions(el)
{
  $(el).getElements('td').each(function(el1)
  {
    if (el1.getStyle('display') == 'none')
    {
      el1.setStyle('display', '');
      el1.addClass('view');
    }
  });
}

function hideOptions(el)
{
  $(el).getElements('td').each(function(el1)
  {
    if (el1.hasClass('view'))
    {
      el1.removeClass('view');
      el1.setStyle('display', 'none');
    }
  });
}

function validateForm()
{
  /* check if user email address ik oke */
  var oke = 1;
  if ($('labelUserEMail') && $('userEMail').value.length > 0)
  {
    var usermail = $('userEMail').value;
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if(reg.test(usermail) == false)
    {
      ModalBox.error('Het ingevulde email adres waar u de antwoorden naar toe wilt sturen is onjuist.');
      oke = 0;
    }
  }

  
  if (oke == 1)
  {
      $('formID').getElements('label[class*=error], span[class*=error]').each(function(el)
      {
        el.removeClass('error');
      });


      var errorArray = [];
      $('formID').getElements('input[class*=required], textarea[class*=required], select[class*=required]').each(function(el)
      {
        if (el.type == 'text' || el.tagName == 'TEXTAREA')
        {
          if (el.value.length == 0)
            errorArray.include(el.id);
        }
        else if (el.type == 'radio')
        {
          var f = el.id.substr(0, el.id.lastIndexOf('_') + 1 ) ;
          var checked = false;
          if ( el.id.substr(el.id.lastIndexOf('_') + 1)  == 1)
          {
            $$('input[id*='+f+']').each(function(el2)
            {
              if (el2.checked)
                checked = true;
            });
            if (!checked)
              errorArray.include( el.id.substr(0, el.id.lastIndexOf('_') ) );
          }
        }
        else if (el.tagName == 'SELECT')
        {
          if (el.value == 0 || el.value.length == 0)
            errorArray.include(el.id);
        }
        else if (el.type == 'checkbox')
        {
          var f = el.id.substr(0, el.id.lastIndexOf('_') + 1 ) ;
          var checked = false;
          if ( el.id.substr(el.id.lastIndexOf('_') + 1)  == 1)
          {
            $$('input[id*='+f+']').each(function(el2)
            {
              if (el2.checked)
                checked = true;
            });
            if (!checked)
              errorArray.include( el.id.substr(0, el.id.lastIndexOf('_') ) );
          }
        }
      });

      errorArray.each(function(item, index){
        var id = item.replace(/field/, 'label');
        $( id ).addClass('error');
    }); 
      if (errorArray.length > 0)
        ModalBox.error('Vul alle verplichte velden in.');
      else
        $('formID').submit();

  }
  

}

function setPage(catID, catLabel)
{
  $('redirect').value = catLabel;
  $('redirectID').value = catID;
}

function removeBorders()
{
  $('table').getElements('td').each(function(el){
    el.setStyle('border', 'none');
  });
}

function showPopupPage(url)
{
  popup(url, 450, 600);
}

function showHideEmail(value)
{
  $('afhandeling').setStyle('display', (value == 0?'none':''));
}

function showHideRedirect(value)
{
  $('redirectTbody').setStyle('display', (value == 0?'none':''));
}

function createEmailBox(id)
{
  if (!$('email'+id))
  {
    var next = id+1;
    var myEmailBoxTDText = new Element('td', {
      'html': '<input type="text" id="email'+id+'" name="email[email'+id+']" value="" onblur="createEmailBox('+next+');"/>'
                                });
    var myEmailBoxTDLabel = new Element('td', {
      'html': '<span>E mail adres '+id+'</span>'
                                });
    var myEmailBoxTR= new Element('tr', {
                               'class' : 'body'
                                });
    myEmailBoxTDLabel.inject(myEmailBoxTR);
    myEmailBoxTDText.inject(myEmailBoxTR);
    myEmailBoxTR.inject($('afhandeling'));
  }
}

function setFocus()
{
  $('prettyForm').getElement('input').focus();
}

function showcontainers(value)
{
  $('containerResult').setStyle('display', (value==0?'none':'') );
}

function showSetValues(value)
{
  $('values').setStyle('display', (value == 'text' || value == '0' || value == 'label' || value=='textarea'?'none':'')  );
}

function showSetEl(el, value)
{
  $(el).setStyle('display', (value == 'text' || value == '0'?'none':'')  );
}

function deleteLI(el)
{
  $(el).getParent().destroy();
}

function deleteTR(el)
{
  $(el).destroy();
}

function setTemplateField(containerID, rowID, fieldID, url)
{
  //  maak de template voor het toevoegen van een veld met ajax.
  url += '&f=ajax_setTemplateFields';
  var options = {
			url : url,
			method : 'get',
			onComplete: function(response) { 
        $('fieldTemplate').set('html', response);
        setSortables();
			}};
	var fieldRequest= new Request(options);
	fieldRequest.send('containerID='+containerID+'&rowID='+rowID+'&fieldID='+fieldID);
}

function setTemplateFieldTofield(containerID, rowID, fieldID)
{
    // sla eerst het veld op in de buffer tabellen
    if ($('fieldName1').value.length > 0 && $('fieldType').value != 0)
    {
      $('buttons').setStyle('display', 'none');
      if ($('fieldRequired').checked)
        var required = '1';
      else
        var required = '0';
      
      url = ajaxUrl + '&f=ajax_fieldGroupFunctions&g=addField&containerID='+containerID+'&rowID='+rowID+'&fieldID='+fieldID+'&fieldType='+$('fieldType').value+'&fieldName='+$('fieldName1').value+'&fieldCssclass='+$('fieldCssclass').value+'&fieldRequired='+required;
      var options = {
          url : url,
          method : 'get',
  			onComplete: function(response) {
            var fieldID = response;
        //als het veld een multiple is sla dan ook de fieldvalues op.
        if ($('fieldType').value != 'text')
        {
            var temporder = 0;
            $('ulList').getElements('li').each(function(el)
            {
              temporder++;
              var value = el.getElement('input[type=hidden]').value;
              if ($('alfa').checked)
                var order = 0;
              else
                var order = temporder;

              url2 = ajaxUrl + '&f=ajax_fieldGroupFunctions&g=addFieldValue&fieldID='+fieldID+'&value='+value+'&order='+order;
              var options = {
                  url : url2,
                  method : 'get'
              };
              var fieldRequest2 = new Request(options);
              fieldRequest2.send();
            });
         }

        // maak een nieuwe li element en stop die in ul met id ulList1
        if ($('field'+fieldID))
        {
          $('span'+fieldID).set('html', $('fieldName1').value );
        }
        else
        {
          var myLI = new Element('li', {
                                  'id': 'field'+response, 
                                  'html': '<table class="workspace" style="border:none; border-bottom: 1px solid #dedede; width:100%;" onmouseover="this.style.backgroundColor=\'#dedede;\'" onmouseout="this.style.backgroundColor=\'\';" ><tr><td style="cursor:move;"><input type="hidden" name="fieldRow'+response+'"><span id="span'+response+'">'+$('fieldName1').value+'</span></td><td style="width:20px; cursor:pointer;"><img src="/modules/formdragdrop/images/edit.png" alt="" title=""/></td><td style="width:20px; cursor:pointer;"><img onclick="deleteBufferField(\''+ajaxUrl+'\', '+response+');" src="/modules/formdragdrop/images/cross.png" alt="" title=""/></td></tr></table>'
                                      });

          myLI.inject('ulList1', 'bottom');
        }
        setSortables1();
        $('fieldTemplate').empty();
  		}
        };
      var fieldRequest= new Request(options);
      fieldRequest.send();
    }
    else
      alert('Niet alle velden zijn ingevuld.');
}

function deleteAllBuffer(containerID)
{
  url = ajaxUrl + '&f=ajax_fieldGroupFunctions&g=deleteRow';
  var options = {
			url : url,
			method : 'get',
      onComplete: function()
      {
        setFieldsAndRows('container-'+containerID, containerID);
        ModalBox.close();
      }
	  };
	var fieldRequest= new Request(options);
	fieldRequest.send();
}

function deleteBufferField(url, fieldID)
{
 // delete field from buffer
  url += '&f=ajax_fieldGroupFunctions&g=deleteField&fieldID='+fieldID;
  var options = {
			url : url,
			method : 'get'
	  };
	var fieldRequest= new Request(options);
	fieldRequest.send();

  $('field'+fieldID).fade('out');
  (function(){ $('field'+fieldID).destroy(); }).delay(1000);
}

function addTR()
{
  if ($('value').getProperty('value') == '')
    return false;
  
  // first create a tr element
/*  print '<tr id="value_'.$v[0].'" onmouseover="this.style.backgroundColor = \'#BDD6DE\';" onmouseout="this.style.backgroundColor = \'\';">
           <td><input type="hidden" name="values[]" value="'.$v[1].'" />
           <td>'.$v['1'].'</td>
           <td><img src="gfx/fc_cross.png" style="cursor:pointer;" alt="" title="delete" onclick="deleteTR(\'value_'.$v[0].'\')"/></td>
         </tr>'; */

var id = 'value_'+Number(new Date());

var myLI = new Element('li', {
    'id'  : id,
    'class' : 'hover',
    'html' : '<img src="/modules/formdragdrop/images/cross.png" style="cursor:pointer;" alt="" title="delete" onclick="deleteTR(\''+id+'\')"/><input type="hidden" name="values[]" value="'+$('value').getProperty('value')+'" />&nbsp;&nbsp;'+$('value').getProperty('value'),
    'events': {
               'mousedown': function(){
                
               },
               'mouseup': function(){
                
            }
        },
    'styles': { 'cursor' : 'move'
            
        }
 });
  
  myLI.inject($('ulList'), 'bottom');
  $('value').set('value' , '');
  setSortables();
}

function setClassLi(el)
{
  $(el).setStyle('background-color', 'yellow');
  deleteMouseOver();
}

function removeClassLi(el)
{
  $(el).setStyle('background-color', '');
  addMouseOver();
}

function setSortables()
{
  var thisSortables = new Sortables($('ulList'), {
  constrain: true,
  clone: false,
  revert: true
  });
}

var thisSortables1

function setSortables1()
{
  thisSortables1 = new Sortables($('ulList1'), {
  constrain: true,
  clone: false,
  revert: true
  });
}


function deleteMouseOver()
{
  $('ulList').getElements('li').each(function(el)
  {
    $(el).removeEvents('mouseover');
    $(el).removeEvents('mouseout');
  }
  );
}


function addMouseOver()
{
  $('ulList').getElements('li').each(function(el)
  {
    $(el).addEvent('mouseover', function(event){
      el.setStyle('background-color', '#BDD6DE');

    });
    $(el).addEvent('mouseout', function(event){
      el.setStyle('background-color', '');
    });
  }
  );
}

/* change the order of the fields of an row */
function saveOrder()
{
  url = ajaxUrl+'&f=ajax_fieldGroupFunctions&g=changeOrder&fields='+thisSortables1.serialize();
  var options = {
			url : url,
			method : 'get'
  };
	var fieldRequest= new Request(options);
	fieldRequest.send();
}


window.addEvent('domready', function()
{
  if ($('ulList'))
  {
    setSortables();
    addMouseOver();
  }
});