<%@ include file = "check_user.jsp"%>
<%@ include file = "header.jsp"%>
<div class="container-fluid">
    <a href="#" type="button" class="btn btn-default" onclick="newWriter()"> New/Edit Writer </a><br><br>
    <div id="newWriterDiv" class="container-fluid" style="display: none;">
        <div class="container-fluid">
        <div class="col-xs-4">
            <label id="wrtId" style="display: none;"></label>
            <label for="wrt">Name:</label>
            <input type="text" class="form-control" id="wrt"><br>
            <label for="wrtlink">Link:</label>
            <input type="text" class="form-control" id="wrtlink"><br>
            <label for="comment">Comment:</label>
            <textarea class="form-control" rows="3" id="comment"></textarea><br>
            <a href="#" type="button" class="btn btn-default" onclick="addEdit('edit')"> Edit </a>
            <a href="#" type="button" class="btn btn-default" onclick="addEdit('add')"> Add new </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label class="checkbox-inline"><input type="checkbox" id="wrtCheckbox" value="">Deactivate writer</label>
            <br><br>
        </div>
        <div class="col-xs-4">
            <label for="editList">Edit:</label>
            <select class="form-control" size="13" id="editList">
            </select>
        </div>
    </div>
    </div><br>
    <div id="stat" class="container-fluid"></div>
    <div class="container-fluid">
        <div class="container-fluid">
            <div class="container-fluid">
                <table>
                    <thead>
                    <th>Active</th>
                    <th></th>
                    <th>Deactive</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <select class="form-control" size="10" id="list1">
                            </select>
                        </td>
                        <td>
                            <center>
                                <button id="activate" onclick="activ()"> &#8656; activate </button> <br><br>
                                &nbsp;<button id="deactivate" onclick="deactiv()"> deactivate &#8658;</button>&nbsp;
                            </center>
                        </td>
                        <td>
                            <select class="form-control" size="10" id="list2">
                            </select>
                        </td>
                    </tr>
                    </tbody>
                </table><br><br>
                <h4>details:</h4>
            </div>
            <h4><div class="container-fluid" id="details"></div></h4>
        </div>
    </div>

</div>
    <script>
        var dataGson = "";
        window.onload= function(){
            jsonData = getData("read", "", "", "", "", "");
            jsonToTable();
        }
        function jsonToTable()
        {
            dataGson = JSON.parse(jsonData);
            for(var i=0; i < dataGson.length; i++) {
                addList(dataGson[i]["id"], dataGson[i]["name"], "editList");
                if(dataGson[i]["status"])
                    addList(dataGson[i]["id"], dataGson[i]["name"], "list1");
                if(!dataGson[i]["status"])
                    addList(dataGson[i]["id"], dataGson[i]["name"], "list2");
            }
        }
        function addList( lValue, lText, lList )
        {
            var selectL1 =  document.getElementById(lList);
            var myDocument = document;
            var l1Option1 = document.createElement("option");
            selectL1.appendChild(l1Option1);
            l1Option1.setAttribute("value", lValue);
            if(lList == "editList") {
                l1Option1.setAttribute("onClick", "editLst(this)");
            } else {
                l1Option1.setAttribute("onClick", "details(this)");
            }
            l1Option1.innerHTML = lText;
        }
        function details(val){

            var details = document.getElementById("details");
            details.clear;
            for(var i=0; i < dataGson.length; i++) {
                if(val.value == dataGson[i]["id"]){
                    details.innerHTML ="<a href='" + dataGson[i]["link"] + "' target='_blank'> " + dataGson[i]["name"] +" </a>" + "<br><br>" + dataGson[i]["comment"];
                }
            }
        }
        function editLst(val){
            for(var i=0; i < dataGson.length; i++) {
                if(val.value == dataGson[i]["id"]) {
                    document.getElementById("wrt").setAttribute("value", dataGson[i]["name"]);
                    document.getElementById("wrtlink").setAttribute("value", dataGson[i]["link"]);
                    document.getElementById("wrtCheckbox").checked = !(dataGson[i]["status"]);
                    document.getElementById("comment").innerHTML = dataGson[i]["comment"];
                    document.getElementById("wrtId").innerHTML = dataGson[i]["id"];
                }
            }
        }
        function activ(){
            var l2Id = document.getElementById("list2").options[document.getElementById("list2").selectedIndex].value;
            var newOpt = document.getElementById("list2").options[document.getElementById("list2").selectedIndex];
            document.getElementById("list1").add(newOpt)
            dataGson = JSON.parse(getData("act", l2Id, "", "", "", ""));
            var stat = document.getElementById("stat")
            stat.innerHTML = "<font color=red>" + newOpt.text + " activate </font> <br><br>";
        }
        function deactiv(){
            var l1Id = document.getElementById("list1").options[document.getElementById("list1").selectedIndex].value;
            var newOpt = document.getElementById("list1").options[document.getElementById("list1").selectedIndex];
            document.getElementById("list2").add(newOpt)
            dataGson = JSON.parse(getData("deact", l1Id, "", "", "", ""));
            var stat = document.getElementById("stat")
            stat.innerHTML = "<font color=red>" + newOpt.text + " deactivate </font> <br><br>";
        }
        function addEdit(op){
            dataGson = JSON.parse(getData(
                    op,
                    document.getElementById("wrtId").textContent,
                    document.getElementById("wrt").value,
                    document.getElementById("wrtlink").value,
                    document.getElementById("comment").textContent,
                    !(document.getElementById("wrtCheckbox").checked)
            ));
            var stat = document.getElementById("stat")
            stat.innerHTML = "<font color=red>" + document.getElementById("wrt").value + " send to server </font> <br><br>";
        }
        function getData( wrOp, wrId, wrName, wrLink, wrComment, wrStatus ){
            var body = "op="+wrOp+"&id="+wrId+"&name="+wrName+"&link="+wrLink+"&comment="+wrComment+"&status="+wrStatus;
            var xhr = new XMLHttpRequest();
            var res = "";
            xhr.onreadystatechange = function()
            {
                if (xhr.readyState == 4 && xhr.status == 200)
                {
                    res = xhr.responseText;
                }
            }
            xhr.open("POST", "writers.do", false);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(body);
            return res;
        }

        function newWriter(){
            var current = document.getElementById("newWriterDiv").getAttribute("style");
            if(current == 'display: none;') {
                document.getElementById("newWriterDiv").style.display = 'block';
            }else {
                document.getElementById("newWriterDiv").style.display = 'none';
            }

        }
    </script>
<%@ include file = "footer.jsp"%>