var txtTijd
var divUur
var divMin
var divAmPm
var hPicker;
var iMarginItem = 20
var iHTeller = 0
var HAMPM
var b = true;
function toonClok(txt, Uur, Min, AmPm, Picker) {

    document.getElementById(Picker).className = 'divPicker'
    txtTijd = txt;

    divUur = document.getElementById(Uur);
    divMin = document.getElementById(Min);
    divAmPm = document.getElementById(AmPm);
    hPicker = document.getElementById(Picker);
    opvullenAMPM();
    opvullenUur('AM');

}
function toonClokWUC(txt) {

    txtTijd = txt;
    //hoofd
    var parent_parent = txt.parentNode.parentNode.getElementsByTagName('Div');
    var Picker = parent_parent[1];
    Picker.className = 'divPicker'
    var AmPm
    var Uur
    var Min
    if (checkBrowser() == 999) {
        AmPm = Picker.childNodes[1]
        Uur = Picker.childNodes[3]
        Min = Picker.childNodes[5]
    } else {

        AmPm = Picker.childNodes[0]
        Uur = Picker.childNodes[1]
        Min = Picker.childNodes[2]
    }
//    alert(AmPm.getAttribute('id'));
//    alert(Uur.getAttribute('id'));
//    alert(Min.getAttribute('id'));
    divUur = Uur;
    divMin = Min;
    divAmPm = AmPm;
    hPicker = Picker;
    opvullenAMPM();
    opvullenUur('AM');
}

function opvullenAMPM() {
    var html = '<Table class=clockTable>'
    html += '<tr>'
    html += '<td onmouseover=opvullenUur("AM")>'
    html += 'VM'
    html += '</td>'
    html += '<td onmouseover=opvullenUur("PM")>'
    html += 'NM'
    html += '</td>'
    html += '</tr>'
    html += '</Table>'
    var div = divAmPm
    div.innerHTML = html;
}
function opvullenUur(AMPM) {
    var iBegin
    var iEind
    var iMargin
    if (AMPM == 'AM') {
        iBegin = 0
        iEind = 12
        iMargin = 0
        opvullenMin(0, iHTeller, 'AM');

    } else {
        iBegin = 12
        iEind = 24
        iMargin = iMarginItem
        opvullenMin(0, iHTeller, 'PM');
    }

    var html = '<Table class=clockTable>'
    html += '<tr>'
    var Teller = 0
    for (var i = iBegin; i < iEind; i++) {
        if (AMPM == 'AM') {
            html += '<td onmouseover=opvullenMin(' + i + ',' + Teller + ',"AM") onclick=zetTijdVast(' + i + ',00)>'
        } else {
            html += '<td onmouseover=opvullenMin(' + i + ',' + Teller + ',"PM") onclick=zetTijdVast(' + i + ',00)>'

        }
        html += zetUur(i);
        html += '</td>'
        Teller++;
    }
    html += '</tr>'
    html += '</Table>'
    var div = divUur
    div.style.marginLeft = iMargin + 'px';
    div.innerHTML = html;



}

function opvullenMin(uur, Teller, AMPM) {
    zetTijd(uur, 0);
    iHTeller = Teller;
    var iMargin
    if (AMPM == 'AM') {
        iMargin = (Teller * iMarginItem)
    } else {
        iMargin = (Teller * iMarginItem) + iMarginItem

    }
    var html = '<Table class=clockTable>'
    html += '<tr>'
    var t0 = '00';
    html += '<td onclick=zetTijdVast(' + uur + ',00) onmouseover=zetTijd(' + uur + ',00) >'
    html += t0;
    html += '</td>'
    var t15 = '15';
    html += '<td onclick=zetTijdVast(' + uur + ',15) onmouseover=zetTijd(' + uur + ',15)>'
    html += t15
    html += '</td>'
    var t30 = '30';
    html += '<td onclick=zetTijdVast(' + uur + ',30) onmouseover=zetTijd(' + uur + ',30)>'
    html += t30;
    html += '</td>'
    var t45 = '45';
    html += '<td onclick=zetTijdVast(' + uur + ',45) onmouseover=zetTijd(' + uur + ',45)>'
    html += t45;
    html += '</td>'
    html += '</tr>'
    html += '</Table>'
    var div = divMin
    div.style.marginLeft = iMargin + 'px';
    div.innerHTML = html;

}
function zetUur(uur) {
    var uurText
    if (uur < 10) {
        uurText = '0' + uur;

    } else {
        uurText = uur
    }
    return uurText

}
function zetMin(uur) {
    var minText;
    if (uur < 10) {
        minText = '0' + uur;

    } else {
        minText = uur;
    }
    return minText

}

function zetTijd(uur, min) {
    if (uur < 10) {
        if (min == 0) {
            txtTijd.value = '0' + uur + ':00';
        } else {
            txtTijd.value = '0' + uur + ':' + min;
        }

    } else {

        if (min == 0) {
            txtTijd.value = uur + ':00';
        } else {
            txtTijd.value = uur + ':' + min;

        }
    }
    txtTijd.focus();
}
function zetTijdVast(uur, min) {
    if (uur < 10) {
        if (min == 0) {
            txtTijd.value = '0' + uur + ':00';
        } else {
            txtTijd.value = '0' + uur + ':' + min;

        }
    } else {

        if (min == 0) {
            txtTijd.value = uur + ':00';
        } else {
            txtTijd.value = uur + ':' + min;

        }
    }
    hPicker.className = 'itemOnvisible';
   
}
function verwijderClok(picker) {
    document.getElementById(picker).className = 'itemOnvisible';

}
function verwijderClokWUC(txt) {
    var parent_parent = txt.parentNode.parentNode.getElementsByTagName('Div');
    var Picker = parent_parent[1];
    Picker.className = 'itemOnvisible';

    var parent = txt.parentNode.getElementsByTagName('span')
    if (parent[1].style.display = 'inline') {
        parent[1].style.display = 'none'
    }
      var regUur = new RegExp("^([01][0-9]|2[0-3]):[0-5][0-9]$")
      if (regUur.test(txt.value) == true) {
            if (parent[3].style.display = 'inline') {
                parent[3].style.display = 'none'
              }
      }


}