<!DOCTYPE html>
<html lang="fi">
    <head>
        <% include head %>

        <script>
            document.addEventListener('DOMContentLoaded', (event) => {
                const omat = document.querySelectorAll('.oma');
                // Add eventListeners to all messages that belong to user
                omat.forEach(item => {
                    item.addEventListener('dragstart', dragStart, false);
                    item.addEventListener('dragend', dragEnd, false);
                });

                // Start drag
                function dragStart(e){
                    // Change opacity
                    this.style.opacity='0.4';
                    // Define content
                    e.dataTransfer.setData('text/plain', e.target.id);                    
                    // Change possible target attributes to make dropzones more visible
                    targetit.forEach(item =>{
                        item.style.zIndex='50';
                        item.classList.add('hilit_dz');
                        e.target.style.opacity='.4';       
                    });
                };

                // End drag
                function dragEnd(e) {
                    // Return opacity of dragged object
                    this.style.opacity='1';
                    // Return attributes of target areas
                    targetit.forEach(item =>{
                        item.classList.remove('hilit_dz');
                        item.style.zIndex='-5';
                        e.target.style.opacity='1';
                    });
                };
                // Define what target zones are
                const targetit = document.querySelectorAll('.dropzone');
                // Define properties for target zones
                targetit.forEach(item => {
                    item.addEventListener('dragenter', dragEnter);
                    item.addEventListener('dragover', dragOver);
                    item.addEventListener('dragleave', dragLeave);
                    item.addEventListener('drop', drop);
                });
                
                // Aother definition for when dragging is started
                function dragEnter(e){

                    e.preventDefault();
                    e.target.classList.add('hilit_dz');
                    e.target.style.opacity='0.8';

                };
                // Change drag over effect
                function dragOver(e){
                    e.preventDefault();

                };
                // Change drop zone opacity when object is no longer hovering over it
                function dragLeave(e){
                    //e.target.classList.remove('hilit_dz');
                    e.target.style.opacity='.4';
                };
                
                // What happens on drop
                function drop(e){
                     e.preventDefault();
                    // Define the id of the dropped html-object
                    const noutoId = e.dataTransfer.getData('text/plain');
                    // get the ID of the message that was being handled
                    const iidee = document.getElementById(noutoId).getElementsByTagName('span')[0].innerHTML;
                    //const topikki = document.getElementById(noutoId).getElementsByTagName('span')[1].innerHTML;

                    if(this.id =='jatkoon') {
                        // if message is dropped on edit-area
                        let url = '/uusi_viesti/?muokkaa='+iidee;
                        location = url;
                    } else { //ts. poistoon
                        // if message is droppedn on delete-area
                        let url = '/omat_viestit/?delid='+iidee+"&v="+<%= messages.length %>;
                        location = url;               
                        
                    };
                };
            });

        </script>
    </head>
    <body class="container-fluid">
        <% include ggl_analytics_body %>
        <% include header %>
        <% include hallinta %>
        <div class="dropzone" id="poistoon" ></div>
        <main class="flex justify-content-center flex-column">
            <div class="serif"><a href="/">Aiheet</a> >
            </div>

            <section><h2 class="serif">Omat viestit</h2></section>
            <section>
                <% for(var i = 0; i < messages.length; i++) { %>
                <article class="kommentti row oma" id="oma_<%= messages[i].id %>" draggable="true" >
                    <span class="tunnus col-sm-1"><%= messages[i].id %></span>
                    <span ><a href="/keskustelu_aiheesta/?id=<%= messages[i].id%>" ><%= messages[i].topic %></a></span>
                    <div class="col-sm-9 row">
                        <p class="col-sm-12 <%= (h_tiivis)?'tiivis':''%>" id="komm_<%-messages[i].id %>"><%= messages[i].message%></p>
                    </div>
                    <%- (h_tiivis)?'<button id="nappi_'+messages[i].id+'" class="col-sm-2 btn btn-dark" onclick="laajennaYksi('+messages[i].id+')" value="Laajenna">Laajenna</button>':'' %>

                </article>
                <%- (i< messages.length-1)?'<hr>':''; %>
                <% }%>
            </section>

            <script>
                function laajennaYksi(id){

                    var para = "komm_"+id;
                    var nappi = "nappi_"+id;

                    if (document.getElementById(para).classList.contains("tiivis")) {
                        document.getElementById(para).classList.remove("tiivis");
                        document.getElementById(nappi).innerHTML ="Tiivist√§";
                    } else {
                        document.getElementById(para).classList.add("tiivis");
                        document.getElementById(nappi).innerHTML ="Laajenna";
                    };
                };
            </script>
        </main>
        <% include footer %>
        <div class="dropzone" id="jatkoon"></div> <!-- ondrop="drop(event)" ondragover="allowDrop(event)" -->
    </body>
</html>
