// EDUCATION
function populateEducation()
{
    var url = '/data/php/frontend.actions.php?action=ajax-fetcheducation&id=0';
    new Ajax.Request(url, { method: 'get'
                           ,requestHeaders: {Accept: 'application/json'}
                           ,onSuccess: function(transport) { loadRootEducation(transport.responseText); } } );
}

function loadRootEducation(json)
{
    var data = $H(json.evalJSON(true));
    var select = document.createElement('SELECT');
    select.appendChild(document.createElement('OPTION'));
    select.id = 'education-0';
    select.className = 'hierselect';
    Event.observe(select, 'change', function() { populateSubEducation($('education-0').value, $('education-0')); });
    data.each(function(pair)
              {
              var opt = document.createElement('OPTION');
              opt.value = pair.key;
              opt.appendChild(document.createTextNode(pair.value));
              select.appendChild(opt);
              });
    $('educationcontainer').appendChild(select);
}

function populateSubEducation(parent, select)
{
    var selectID = parseInt(select.id.replace(/education-/, ''));
    for ( var x = selectID + 1 ; x < 10 ; ++x )
    {
        if ( $('education-' + x) )
            $('education-' + x).parentNode.removeChild($('education-' + x));
        if ( $('ehook-' + x) )
            $('ehook-' + x).parentNode.removeChild($('ehook-' + x));
        if ( $('ebr-' + x) )
            $('ebr-' + x).parentNode.removeChild($('ebr-' + x));
    }
    if ( selectID == 0 && select.value == '' )
        return;

    parent = parent.replace(/e/, '');
    var url = '/data/php/frontend.actions.php?action=ajax-fetcheducation&id=' + encodeURIComponent(parent);
    new Ajax.Request(url, { method: 'get'
                           ,requestHeaders: {Accept: 'application/json'}
                           ,onSuccess: function(transport) { loadSubEducation(transport.responseText); } } );
}

function loadSubEducation(json)
{
    var data = $H(json.evalJSON(true));
    if( data.keys().length > 0)
    {
        var maxSelect = 0;
        for ( var x=0 ; x<5 ; ++x )
            if ( $('education-' + x) )
                maxSelect = x + 1;

        var br = document.createElement('BR');
        br.id = 'ebr-' + maxSelect;
        $('educationcontainer').appendChild(br);
        
        var hook = document.createElement('IMG');
        if ( navigator && navigator.appName == 'Microsoft Internet Explorer' )
            hook.src = '/data/images/frontend/hookIE.gif';
        else
            hook.src = '/data/images/backend/hook.gif';
        hook.style.marginLeft = (20 * maxSelect) + 'px';
        hook.style.marginRight = '5px';
        hook.id = 'ehook-' + maxSelect;
        $('educationcontainer').appendChild(hook);
        
        var select = document.createElement('SELECT');
        select.appendChild(document.createElement('OPTION'));
        select.id = 'education-' + maxSelect;
        select.className = 'hierselect';
        Event.observe(select, 'change', function() { populateSubEducation($('education-' + maxSelect).value, $('education-' + maxSelect)); });
        data.each(function(pair)
                  {
                  var opt = document.createElement('OPTION');
                  opt.value = pair.key;
                  opt.appendChild(document.createTextNode(pair.value));
                  select.appendChild(opt);
                  });
        $('educationcontainer').appendChild(select);
    }
}

// OCCUPATION
function populateOccupation()
{
    var url = '/data/php/frontend.actions.php?action=ajax-fetchoccupation&id=0';
    new Ajax.Request(url, { method: 'get'
                     ,requestHeaders: {Accept: 'application/json'}
                     ,onSuccess: function(transport) { loadRootOccupation(transport.responseText); } } );
}

function loadRootOccupation(json)
{
    var data = $H(json.evalJSON(true));
    var select = document.createElement('SELECT');
    select.appendChild(document.createElement('OPTION'));
    select.id = 'occupation-0';
    select.className = 'hierselect';
    Event.observe(select, 'change', function() { populateSubOccupation($('occupation-0').value, $('occupation-0')); });
    data.each(function(pair)
              {
              var opt = document.createElement('OPTION');
              opt.value = pair.key;
              opt.appendChild(document.createTextNode(pair.value));
              select.appendChild(opt);
              });
    $('occupationcontainer').appendChild(select);
}

function populateSubOccupation(parent, select)
{
    var selectID = parseInt(select.id.replace(/occupation-/, ''));
    for ( var x = selectID + 1 ; x < 10 ; ++x )
    {
        if ( $('occupation-' + x) )
            $('occupation-' + x).parentNode.removeChild($('occupation-' + x));
        if ( $('ohook-' + x) )
            $('ohook-' + x).parentNode.removeChild($('ohook-' + x));
        if ( $('obr-' + x) )
            $('obr-' + x).parentNode.removeChild($('obr-' + x));
    }
    if ( selectID == 0 && select.value == '' )
        return;
    
    parent = parent.replace(/e/, '');
    var url = '/data/php/frontend.actions.php?action=ajax-fetchoccupation&id=' + encodeURIComponent(parent);
    new Ajax.Request(url, { method: 'get'
                     ,requestHeaders: {Accept: 'application/json'}
                     ,onSuccess: function(transport) { loadSubOccupation(transport.responseText); } } );
}

function loadSubOccupation(json)
{
    var data = $H(json.evalJSON(true));
    if( data.keys().length > 0)
    {
        var maxSelect = 0;
        for ( var x=0 ; x<5 ; ++x )
            if ( $('occupation-' + x) )
                maxSelect = x + 1;
        
        var br = document.createElement('BR');
        br.id = 'obr-' + maxSelect;
        $('occupationcontainer').appendChild(br);
        
        var hook = document.createElement('IMG');
        if ( navigator && navigator.appName == 'Microsoft Internet Explorer' )
            hook.src = '/data/images/frontend/hookIE.gif';
        else
            hook.src = '/data/images/backend/hook.gif';
        hook.style.marginLeft = (20 * maxSelect) + 'px';
        hook.style.marginRight = '5px';
        hook.id = 'ohook-' + maxSelect;
        $('occupationcontainer').appendChild(hook);
        
        var select = document.createElement('SELECT');
        select.appendChild(document.createElement('OPTION'));
        select.id = 'occupation-' + maxSelect;
        select.className = 'hierselect';
        Event.observe(select, 'change', function() { populateSubOccupation($('occupation-' + maxSelect).value, $('occupation-' + maxSelect)); });
        data.each(function(pair)
                  {
                  var opt = document.createElement('OPTION');
                  opt.value = pair.key;
                  opt.appendChild(document.createTextNode(pair.value));
                  select.appendChild(opt);
                  });
        $('occupationcontainer').appendChild(select);
    }
}

// REGISTRATION FORM
function submitRegistrationForm()
{
    var requiredFields = ['voornaam', 'naam', 'straat', 'nummer', 'postcode', 'plaats', 'telefoon'];

    var missingInfo = false;
    var amount = requiredFields.length;
    for ( var x=0 ; x<amount ; ++x )
    {
        if ( $(requiredFields[x]).value == '' )
        {
            $(requiredFields[x] + '-label').style.color = 'red';
            missingInfo = true;
        }
        else
            $(requiredFields[x] + '-label').style.color = '#555';
    }

    var education = '';
    for (var x=0 ; x<10 ; ++x)
    {
        if ( $('education-' + x) && $('education-' + x).value != '' )
            education = $('education-' + x).value;
    }
    
    if ( education == '' )
    {
        $('education-label').style.color = 'red';
        missingInfo = true;
    }
    else
    {
        $('education-label').style.color = '#555';
        if ( !$('education') )
        {
            var tmp = document.createElement('INPUT');
            tmp.id = 'education';
            tmp.name = 'opleiding';
            tmp.style.display = 'none';
            tmp.value = education.replace(/e/, '');
            $('regfrm').appendChild(tmp);
        }
        else
            $('education').value = education.replace(/e/, '');
    }
    
    var occupation = '';
    for (var x=0 ; x<10 ; ++x)
    {
        if ( $('occupation-' + x) && $('occupation-' + x).value != '' )
            occupation = $('occupation-' + x).value;
    }
    
    if ( occupation == '' )
    {
        $('occupation-label').style.color = 'red';
        missingInfo = true;
    }
    else
    {
        $('occupation-label').style.color = '#555';
        if ( !$('occupation') )
        {
            var tmp = document.createElement('INPUT');
            tmp.id = 'occupation';
            tmp.name = 'beroep';
            tmp.style.display = 'none';
            tmp.value = occupation.replace(/e/, '');
            $('regfrm').appendChild(tmp);
        }
        else
            $('occupation').value = occupation.replace(/e/, '');
    }
    
    if ( missingInfo )
        Effect.Appear('missinginfo');
    else
    {
        var tmp = document.createElement('INPUT');
        tmp.name = 'action';
        tmp.value = 'user-register';
        tmp.style.display = 'none';
        $('regfrm').appendChild(tmp);
    }

    return !missingInfo;
}