function insertNewURL() {
    var url = document.getElementById ( "form-url" ).value;
    var xhr = new XMLHttpRequest ( );
    xhr.open ( "POST", 'insert', true );
    xhr.onreadystatechange = function ( ) {
        if ( xhr.status == 200 ) {
            if ( xhr.readyState == XMLHttpRequest.DONE ) {
                var response = xhr.responseText;
                response = JSON.parse ( response );
                if ( response [ 'status' ] == 200 ) {
                    document.getElementById ( "responsetext" ).innerHTML = response [ 'message' ];
                    setTimeout( function( ) {
                        document.getElementById ( 'responsetext' ).innerHTML = ""
                    }, 1500 );
                    var div = document.createElement ( 'div' );
                    div.classList.add ( "urlContainer" );
                    div.appendChild ( document.createElement ( 'text' ) );
                    div.appendChild ( document.createElement ( 'div' ) );
                    div.childNodes [ 1 ].classList.add ( "urlId" );
                    div.childNodes [ 1 ].innerHTML = "<button onclick=\"window.open('" + script_name + "/go/" + response [ 'last_insert' ] + "', '_blank');\">" + response [ 'last_insert' ] + "</button>";
                    div.appendChild ( document.createElement ( 'text' ) );
                    div.appendChild ( document.createElement ( 'input' ) );
                    div.childNodes [ 3 ].type = 'text';
                    div.childNodes [ 3 ].classList.add ( "urlLink" );
                    div.childNodes [ 3 ].setAttribute ( 'value', url );
                    div.appendChild ( document.createElement ( 'text' ) );
                    div.appendChild ( document.createElement ( 'div' ) );
                    div.childNodes [ 5 ].classList.add ( "urlControl" );
                    div.childNodes [ 5 ].setAttribute ( 'style', "display: none;" );
                    div.childNodes [ 5 ].appendChild ( document.createElement ( 'text' ) );
                    div.childNodes [ 5 ].appendChild ( document.createElement ( 'button' ) );
                    div.childNodes [ 5 ].childNodes [ 1 ].innerHTML = "<i class=\"fas fa-check\"></i>";
                    div.childNodes [ 5 ].appendChild ( document.createElement ( 'text' ) );
                    div.childNodes [ 5 ].appendChild ( document.createElement ( 'button' ) );
                    div.childNodes [ 5 ].childNodes [ 3 ].innerHTML = "<i class=\"fas fa-times\"></i>";
                    makeURLEditable ( div.childNodes [ 3 ] );
                    document.getElementsByClassName ( "urlList" ) [ 0 ].appendChild ( div );
                    document.getElementById ( "form-url" ).value = "";
                }
                else {
                    document.getElementById ( "responsetext" ).innerHTML = response [ 'error_message' ];
                    setTimeout( function( ) {
                        document.getElementById ( 'responsetext' ).innerHTML = ""
                    }, 1500 );
                }
            }
        }
        else {
            document.getElementById ( "responsetext" ).innerHTML = response [ 'error_message' ];
                setTimeout( function( ) {
                    document.getElementById ( 'responsetext' ).innerHTML = ""
                }, 1500 );
        }
    }
    data = new FormData ( );
    data.append('url', url);
    xhr.send( data );
}
function editURL(node) {
    var url = node.childNodes[3].value;
    var url_id = node.childNodes[1].childNodes[0].innerHTML;
    var xhr = new XMLHttpRequest ( );
    xhr.open ( "POST", 'edit', true );
    xhr.onreadystatechange = function ( ) {
        if ( xhr.status == 200 ) {
            if ( xhr.readyState == XMLHttpRequest.DONE ) {
                var response = xhr.responseText;
                response = JSON.parse ( response );
                if ( response [ 'status' ] == 200 ) {
                    document.getElementById ( "responsetext" ).innerHTML = response [ 'message' ];
                    setTimeout( function( ) {
                        document.getElementById ( 'responsetext' ).innerHTML = ""
                    }, 1500 );
                }
                else {
                    document.getElementById ( "responsetext" ).innerHTML = response [ 'error_message' ];
                    setTimeout( function( ) {
                        document.getElementById ( 'responsetext' ).innerHTML = ""
                    }, 1500 );
                }
            }
        }
        else {
            document.getElementById ( "responsetext" ).innerHTML = response [ 'error_message' ];
                setTimeout( function( ) {
                    document.getElementById ( 'responsetext' ).innerHTML = ""
                }, 1500 );
        }
    }
    data = new FormData ( );
    data.append('url', url);
    data.append('url_id', url_id);
    xhr.send( data );
}
function makeURLEditable ( node ) {
    node.onclick = function() {
        var oldText = this.value;
        this.parentNode.childNodes[5].style.display = "";
        this.parentNode.childNodes[5].childNodes[1].onclick = function() {
            editURL(this.parentNode.parentNode);
            this.parentNode.style.display = "none";
        }
        this.parentNode.childNodes[5].childNodes[3].onclick = function() {
            this.parentNode.parentNode.childNodes[3].value = oldText;
            this.parentNode.style.display = "none";
        };
    }
}
(function(){
    var URLs = document.getElementsByClassName("urlLink");
    for(i=0;i<URLs.length;i++) {
        makeURLEditable(URLs[i]);
    }
})();