/* ###############################
 * # Script to handle show/hide  #
 * # the radio buttons following #
 * # the API                     #
 * ############################### */

// dom traversal magic to get the apis with radio groups
function customizeRegistration() {
    // get all forms on the page
    var formList = document.getElementsByTagName('form');

    // iterate through all forms for known types
    for(var i = 0; i < formList.length; i++) {
        var form = formList[i]; // store the form for reference

        // clean out the main url
        var urlRegex = new RegExp('.*' + window.location.host);
        var formAction = form.action.replace(urlRegex, '');

        // check for known form types
        if(formAction.search('/apps/select') != -1) { // when you "add" a key to an app
            var form = formList[i]; // get the form
            var apiFieldset = form.getElementsByTagName('fieldset')[0]; // get the api fieldset from the form

            break; // leave loop
        } else if(formAction.search('/apps/register') != -1) { // myaccount->applications->new application
            var form = formList[i]; // get the form
            var apiFieldset = form.getElementsByTagName('fieldset')[1]; // get the api fieldset from the form
            var appFieldset = form.getElementsByTagName('fieldset')[0]; // get the app fieldset

            break; // leave loop
        } else if(formAction.search('/member/register') != -1) { // on portal->register
            var form = formList[i]; // get the form
            var apiFieldset = form.getElementsByTagName('fieldset')[2]; // get the api fieldset from the form
            var appFieldset = form.getElementsByTagName('fieldset')[1]; // get the app fieldset from the form

            break; // leave loop
        } else if(formAction.search('/member/join') != -1) { // when logging into a different area from an existing account
            var form = formList[i]; // get the form
            var apiFieldset = form.getElementsByTagName('fieldset')[1]; // get the api fieldset from the form
            var appFieldset = form.getElementsByTagName('fieldset')[0]; // get the app fieldset from the form

            break; // leave loop
        } else if(formAction.search('/key/register') != -1) {
            var form = formList[i]; // get the form
            var apiFieldset = form.getElementsByTagName('fieldset')[0]; // get the api fieldset from the form

            break; // leave loop
        }

    }

    // Application fieldset stuff
    if(appFieldset != undefined) { // check for the valid fieldset
        // get the DL of the fieldset
        var dl = appFieldset.getElementsByTagName('dl')[0]; // should only be 1
        var ddAppList = dl.getElementsByTagName('dd'); // get the list of DD's
        var dtAppList = dl.getElementsByTagName('dt'); // get the list of DT's

        // traverse away!
        for(var i = 0; i < ddAppList.length; i++) { // look for the radio buttons first
            var dd = ddAppList[i]; // store the dt/dd element
            var inputList = dd.getElementsByTagName('input'); // get the input items in the DD
            var input = inputList[0]; // get the first input element inside

            if(input != undefined) {
                // hide the ads_system input box by default if applicable
                if(input.id == 'applications-ads_system') {
                    ddAppList[i].style.display = 'none'; // input box
                    dtAppList[i].style.display = 'none'; // label

                    // store the dd/dt position to show/hide
                    var adsSystemPosition = i;
                }
            }
        }

        // check for ads system position before proceeding
        if(adsSystemPosition != undefined) {
            // traverse away!
            for(var i = 0; i < ddAppList.length; i++) { // look for the radio buttons first
                var dd = ddAppList[i]; // store the dt/dd element
                var labelList = dd.getElementsByTagName('label'); // get the label items in the DD
                var label = labelList[0]; // get the first label element inside

                if(label != undefined) {
                    // get the first input from this label
                    var input = label.getElementsByTagName('input')[0];

                    // apply the onclick to the radio buttons for ads
                    if(input.id == 'applications-ads') {
                        input['onclick'] = function() { // this is the 'yes' radio button
                            ddAppList[adsSystemPosition].style.display = 'block'; // input box
                            dtAppList[adsSystemPosition].style.display = 'block'; // label
                        };

                        // also apply it to the 'no' radio button
                        var noLabel = labelList[1];
                        var noInput = noLabel.getElementsByTagName('input')[0];

                        noInput['onclick'] = function() { // this is the 'no' radio button
                            ddAppList[adsSystemPosition].style.display = 'none'; // input box
                            dtAppList[adsSystemPosition].style.display = 'none'; // label
                        };
                    }
                }
            }
        }
    }

    // API section stuff
    if(apiFieldset != undefined) { // check for the valid fieldset
        // get the DL of the fieldset
        var dl = apiFieldset.getElementsByTagName('dl')[0]; // should only be 1
        var ddApiList = dl.getElementsByTagName('dd'); // get the list of DD's
        var dtApiList = dl.getElementsByTagName('dt'); // get the list of DT's

        // next flag to denote that we've found a radio button and to apply funcitonality to the next checkbox
        var next = false;

        // traverse away!
        for(var i = (ddApiList.length - 1); i >= 0; i--) { // reverse iteration to find the radio buttons
            var dd = ddApiList[i]; // store the dt/dd element
            var labelList = dd.getElementsByTagName('label'); // get the labels in the DD
            var label = labelList[0]; // should be only 1

            if(label != undefined) { // make sure we got a label
                var input = label.getElementsByTagName('input')[0]; // get the input box inside the label

                // apply the onchange for the checkbox input
                if(next == true) {
                    // mark the input position
                    input.formPosition = i;

                    // apply the onclick event
                    input['onclick'] = function() {
                        var displayType = (this.checked == true) ? 'block' : 'none'; // set the type to display

                        // this does the set of radio stuff
                        var radioButtons = ddApiList[(this.formPosition + 1)]; // radio buttons
                        radioButtons.style.display = displayType; // hide the set
                        dtApiList[(this.formPosition + 2)].style.display = displayType; // label
                        
                        // check the next dd if it has a custom input
                        var nextDD = ddApiList[(this.formPosition + 2)];
                        var customInput = nextDD.childNodes[1];
                        
                        // if the custom input exists and has a manual_key id
                        if(customInput != undefined && customInput.id.search(/manual_key/) != -1) {
                            nextDD.style.display = displayType; // custom limit

                            // also make sure the custom input is displayed if the custom radio button is selected
                            var radioInput = radioButtons.getElementsByTagName('input');

                            // check the last radio button since we have a custominput the last is always the corresponding
                            if(radioInput[radioInput.length - 1].checked) {
                                customInput.style.display = displayType;
                            }
                        }

                        // member/register has an input box for custom key
                        if((formAction.search('/member/register') != -1) || (formAction.search('/member/join') != -1) || (formAction.search('/key/register') != -1)) {
                            ddApiList[(this.formPosition + 2)].style.display = displayType; // input box for custom key
                        }
                    };

                    // if it's already unchecked hide the inputs
                    if(!input.checked) {
                        input.onclick();
                    }

                    next = false; // reset the flag
                }

                // check if it's a radio button
                if(input.type == 'radio') {
                    next = true; // set the flag

                    // if there are more labels we have more radio buttons
                    if(labelList.length > 1) {
                        var customKey = labelList[(labelList.length - 1)]; // get the last radio button
                        var customInput = ddApiList[(i + 1)].getElementsByTagName('input')[0]; // get the custom input
                        var customRadio = customKey.getElementsByTagName('input')[0]; // get the radio box from it

                        // make sure there is a custom input before proceeding
                        if(customInput != undefined) {
                            // apply the show hide of the radio for the custom input
                            if(customInput.id.search('manual_key') != -1) {
                                // hide if the the custom radio is not checked
                                if(!customRadio.checked) {
                                    customInput.style.display = 'none'; // hide the custom input box to start
                                }

                                customRadio.attachedInput = customInput; // keep the reference to the custom input for this radio button
                                input.attachedInput = customInput; // keep the reference to the custom input for this radio button

                                customRadio['onclick'] = function() { // select custom to show
                                    this.attachedInput.style.display = 'block';
                                };

                                // other input types hide the custom input
                                input['onclick'] = function() {
                                    this.attachedInput.style.display = 'none';
                                };
                            }
                        }
                    }
                }
            }
        }
    }
}

customizeRegistration();