ethics-canvas/canvas/js/canvas.js

/* Contains all the Javascript logic of the canvas and its main features: save, export and share */
$(document).ready(function() {
    /* ================================================
    Miscellaneous
    ================================================= */
    
    // Prevent AJAX requests from being cached
    $.ajaxSetup({ cache: false });
    
    // Declare canvas id
    var canvasId = $("input[name='canvas_id']").val();
    
    // Declare canvas owner
    var canvasOwner;
    
    // Declare current user
    var username = $("input[name='username']").val();
    
    // Total number of collaborators
    var numberOfCollaborators = 0;
    
    // The user is a collaborator. If the user is not a collaborator, that means the canvas being viewed is public.
    var userIsCollaborator = false;
    
    // Initiate tag
    var tag = "";
    
    // Declare the currently loaded tags belonging to the user
    var tags = [];
    
    // Fixes bug when added item field zooms on tag click
    var tagWindowIsOpen = false;
    
    // The text area has been changed
    var textareaHasBeenChanged = false;
    
    // The idea ID for the current comments
    var currentCommentsId;
    
    // Prevent pressing ENTER on Project Title from submitting the form
    $('.proj_title').keydown(function(event){
        if(event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });
    
    /* ================================================
    Remember whether the canvas is a new canvas or not
    ================================================= */
    
    // Declarations
    var canvasIsNew = true;
    
    // If canvasId is set. Whether the canvas is new or not is initially determined in the $_SESSION['canvas_id'] variable.
    if(canvasId) {
        // Remember that the canvas is not new
        canvasIsNew = false;
    }
  
    /* ================================================
    Remember if the user is a collaborator
    ================================================= */
    
    // If the canvas isn't new
    if(canvasIsNew === false) {
        // AJAX
        $.ajax({
            async: false,
            type: "POST",
            url: "php/check-is-collaborator.php",
            dataType: "TEXT",
            data: {
                "canvas_id": canvasId,
                "username": username
            },
            timeout: 5000,
            success: function(returnData) {
                // If the active user is a collaborator
                if(returnData === username) {
                    userIsCollaborator = true;
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    /* ================================================
    If the user is a collaborator, show the items that aren't public
    ================================================= */
    
    // If the user is a collaborator or the canvas is new
    if(userIsCollaborator === true || canvasIsNew === true) {
        // If the user hovers over the canvas title
        $("input.proj_title").on("focusin mouseover", function() {
            // Change the cursor to a text cursor
            $(this).css("cursor", "text");
        });
        
        // Show the Collaborators button
        $("div#collaborators-container").show();
        
        // Hide all buttons inside every category
        $("div.add_box").show();
        
        // Show the character count in the tag window
        $("div#tag-window p.chars-count").show();
        
        // Show the buttons in the tag window
        $("div#tag-window div#tag-buttons").show();
        
        // Show the message saying that the canvas is saved automatically
        $("div#saved-automatically").show();
        
        // Show the Publish This Canvas button
        $("button.publish_canvas").show();
    }
    
    /* ================================================
    Generate generic ID
    ================================================= */
    
    // Generate a random string of a specific length to be used as canvas_id
    function generateId() {
        var i = 0;
        var length = 10;
        var characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var charactersLength = characters.length;
        var randomString = "";
        var minimum = 0;
        var maximum = charactersLength - 1;
        
        for (i = 0; i < length; i++) {
            randomString += characters[Math.floor(Math.random() * (maximum - minimum + 1)) + minimum];
        }
        
        return randomString;
    }
    
    /* ================================================
    Generate canvas ID
    ================================================= */
    
    // Generate canvas ID
    function generateCanvasId() {
        if(canvasId === "") {
            canvasId = generateId();
            $("input[name='canvas_id']").val(canvasId);
        }
    }
    
    // Generate canvas ID
    if(canvasId === "") {
       generateCanvasId();
    }
    
    /* ================================================
    Rearrange fields numerically if 1 column is displayed
    ================================================= */
    
    // Declarations
    var groupOneLayout = $("#7-5-col-layout");
    var groupTwoLayout = $("#2-col-layout");
    var groupThreeLayout = $("#1-col-layout");
    
    var field01 = $("#panel_01");
    var field03 = $("#panel_03");
    var field04 = $("#panel_04");
    var field09 = $("#panel_09");
    var field05 = $("#panel_05");
    var field06 = $("#panel_06");
    var field02 = $("#panel_02");
    var field07 = $("#panel_07");
    var field08 = $("#panel_08");
    var field10 = $("#panel_10");
    
    var isRearranged = false;
    
    // Rearrange the fields to suit mobile
    function rearrangeFields() {
        field01.detach();
        field03.detach();
        field04.detach();
        field09.detach();
        field05.detach();
        field06.detach();
        field02.detach();
        field07.detach();
        field08.detach();
        field10.detach();
        
        groupOneLayout.append(field01);
        groupOneLayout.append(field02);
        groupOneLayout.append(field03);
        groupOneLayout.append(field04);
        groupOneLayout.append(field05);
        groupOneLayout.append(field06);
        groupOneLayout.append(field07);
        groupOneLayout.append(field08);
        groupOneLayout.append(field09);
        groupOneLayout.append(field10);
    }
    
    // Rearrange the fields according to their original order
    function rearrangeFieldsOriginal() {
        field01.detach();
        field02.detach();
        field03.detach();
        field04.detach();
        field05.detach();
        field06.detach();
        field07.detach();
        field08.detach();
        field09.detach();
        field10.detach();
        
        groupOneLayout.append(field01);
        groupOneLayout.append(field03);
        groupOneLayout.append(field04);
        groupOneLayout.append(field09);
        groupOneLayout.append(field05);
        groupOneLayout.append(field06);
        groupOneLayout.append(field02);
        groupTwoLayout.append(field07);
        groupTwoLayout.append(field08);
        groupThreeLayout.append(field10);
    }
    
    // If the web page is opened on a mobile
    if($(window).width() <= 499) {
        rearrangeFields();
    }
    
    // When resizing the window
    $(window).on("resize", function() {
        // If the user is using a mobile device
        if(isRearranged === false && $(window).width() <= 499) {
            // Rearrange fields
            rearrangeFields();
            
            isRearranged = true;
        }
        // If the user is not using a mobil device
        else if(isRearranged === true && $(window).width() >= 500) {
            // Restore fields
            rearrangeFieldsOriginal();
            
            isRearranged = false;
        }
    });
    
    /* ================================================
    If the user changes the project title
    ================================================= */
    
    // If the user is a collaborator or the canvas is new
    if(userIsCollaborator === true || canvasIsNew === true) {        
        // If the user focuses on the project title
        $("input.proj_title").unbind("focusin").on("focusin", function() {            
            // Declarations
            var oldText = $(this).val();
            
            // If the user leaves the project title
            $("input.proj_title").unbind("focusout").on("focusout", function() {
                var newText = $(this).val();
                
                // If the project title has been changed
                if(newText !== oldText) {
                    // Save the canvas
                    prepareSaveCanvas();
                }
            });
        });
    }
    else {
        // If the user focuses on the project title
        $("input.proj_title").on("focusin", function(event) {
            // Blur immediately
            $(this).blur();
        });
    }
    
    /* ================================================
    Get the owner
    ================================================= */
    
    // Get the owner
    function getOwner() {
        // AJAX
        $.ajax({
            async: false,
            type: "POST",
            url: "php/get-owner.php",
            dataType: "TEXT",
            data: {
                "canvas_id": canvasId
            },
            timeout: 5000,
            success: function(returnData) {
                // Remember the canvas owner
                canvasOwner = returnData;
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    getOwner();
    
    /* ================================================
    Collaborators
    ================================================= */
    
    // Validate email
    function validateEmail(email) {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    }
    
    // If the user clicks on the "Collaborators" button, show the collaborators window
    $("div#collaborators button").on("click", function() {
        // Show the collaborators window
        $("div#shadow").css("display", "block");
        $("div#collaborators-window").css("display", "block");
        
        // In 1.5 seconds
        window.setTimeout(function() {
            // If the canvas is new
            if(canvasIsNew === true) {
                // Save the canvas
                prepareSaveCanvas();
            }
        }, 1500);
    });
    
    // Close the collaborators window
    function closeCollaboratorsWindow() {
        // Close the collaborators window
        $("div#shadow").css("display", "none");
        $("div#collaborators-window").css("display", "none");
    }
    
    // If the user clicks on the "Close" button in the Collaborators window
    $("div#collaborators-window > div.window-heading > button.close").on("click", function() {
        // Close the Collaborators window
        closeCollaboratorsWindow();
        
        $("div#collaborators-window div#collaborator-email").text("Please enter an email address...");
        $("div#user-is-not-member").hide();
        $("div#username-already-exists").hide();
        $("div#enter-valid-email").hide();
    });
    
    // If the user clicks on the "Close" button in the Remove Collaborator dialog
    $("div#dialog-remove-collaborator button.close").on("click", function() {
        // Close the Remove Collaborator window
        $("div#shadow").css("z-index", "2");
        $("div#dialog-remove-collaborator").css("display", "none");
    });
    
    // Remove the collaborator
    function removeCollaborator(collaborator, currentRow) {
        // AJAX
        $.ajax({
            timeout: 5000,
            dataType: "text",
            type: "post",
            data: {
                "canvas_id": canvasId,
                "collaborator": collaborator
            },
            url: "php/remove-collaborator.php",
            success: function() {
                // If the collaborator that has been removed is the active user
                if(collaborator === username) {
                    // Redirect the user to the dashboard
                    window.location.replace("php/dashboard.php");
                }
                
                // Close the Remove Collaborator window
                $("div#shadow").css("z-index", "2");
                $("div#dialog-remove-collaborator").css("display", "none");
                updateCollaboratorsView();
                
                // Update Collaborators
                updateCollaborators();
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // If the user clicks on the "Remove" button
    function showRemoveCollaboratorDialog() {
        // If the user clicks on the "Remove" button
        $("div#collaborators-window td:nth-child(4) span").on("click", function() {
            // Declarations
            var collaborator = $(this).parent().prev().text();
            var currentRow = $(this).parent().parent();
            
            // Show the Remove Collaborator dialog
            $("div#shadow").css("z-index", "3");
            $("div#dialog-remove-collaborator").css("display", "block");
            
            // If the user clicks on "Yes"
            $("#dialog-remove-collaborator #button-yes").on("click", function() {
                // Remove the collaborator
                removeCollaborator(collaborator, currentRow);
            });
            
            // If the user clicks on "Cancel"
            $("#dialog-remove-collaborator #button-cancel").on("click", function() {
                // Cancel
                $("div#shadow").css("z-index", "2");
                $("div#dialog-remove-collaborator").css("display", "none");
            });
        });
    }
    
    // Show only active collaborators or show all
    function updateCollaboratorsView() {
        // If the user only wants to see active collaborators
        if($("input[name='show-only-active']").is(":checked")) {
            // For every collaborator
            $("div#collaborators-window tr").each(function() {
                // If the collaborator is offline
                if($(this).find("td:nth-child(1)").html() === "") {
                    // Hide the collaborator
                    $(this).css("display", "none");
                }
            });
        }
        // If the user wants to see all active collaborators
        else {
            // For every collaborator
            $("div#collaborators-window tr").each(function() {
                // Show the collaborator
                $(this).css("display", "table-row");
            });
        }
    }
    
    // If the user checks the "Show only active collaborators" checkbox
    $("input[name='show-only-active']").on("change", function() {
        // Show only active collaborators
        updateCollaboratorsView();
    });
    
    // If the user enters the email field
    $("div#collaborators-window div#collaborator-email").on("click", function() {
        // Focus on the email field
        $(this).focus();
        
        // If the text is the default text
        if($(this).text() === "Please enter an email address...") {
            $(this).text("");
            $(this).css("color", "rgb(51, 51, 51)");
        }
    });
        
    // If the user leaves the email field
    $("div#collaborators-window div#collaborator-email").on("focusout", function() {
        // If nothing has been entered
        if($(this).text() === "") { 
            $(this).text("Please enter an email address...");
            $(this).css("color", "rgb(117, 117, 117)");
        }
    });
    
    // If the user leaves the email field or pastes text in it
    $("div#collaborators-window div#collaborator-email").on("paste", function(event) {
        // Replace HTML with plain text
        event.preventDefault();
        var text = (event.originalEvent || event).clipboardData.getData("text/plain");
        document.execCommand("insertText", false, text);
    });
    
    // If the user types a key inside the email field
    $("div#collaborators-window div#collaborator-email").on("keydown", function(event) {
        // If the user has pressed enter
        if(event.keyCode === 13) {
            event.preventDefault();
        }
    });
    
    // If the user clicks on "Add collaborator"
    $("div#collaborators-window button#add-collaborator").on("click", function() {
        // Declarations
        var collaborator = $("div#collaborators-window div#collaborator-email").text();
        
        // Reset error messages
        $("div#user-is-not-member").hide();
        $("div#username-already-exists").hide();
        $("div#enter-valid-email").hide();
        
        // If the email address is valid
        if(validateEmail(collaborator)) {
            // AJAX
            $.ajax({
                timeout: 5000,
                dataType: "text",
                type: "post",
                data: {
                    "canvas_id": canvasId,
                    "collaborator": collaborator
                },
                url: "php/add-collaborator.php",
                success: function(returnData) {
                    // Hide error messages
                    $("div#username-already-exists").hide();
                    $("div#enter-valid-email").hide();
                    
                    // If the collaborator is not already a member
                    if(returnData == 1) {
                        $("div#user-is-not-member").show();
                        numberOfCollaborators++;
                    }
                    // If the collaborator is already a collaborator
                    else if(returnData == 2) {
                        $("div#username-already-exists").show();
                        numberOfCollaborators++;
                    }
                    // If everything is okay
                    else if(returnData == 3) {
                        // Restore the default text
                        $("div#collaborators-window div#collaborator-email").text("Please enter an email address...");
                        $("div#collaborators-window div#collaborator-email").css("color", "rgb(117, 117, 117)");
                        
                        // Update collaborators
                        updateCollaborators();
                    }
                },
                error: function(xhr) {
                    console.log(xhr.statusText);
                }
            });
        }
        else {
            // Show an error message
            $("div#enter-valid-email").show();
        }
    });
    
    // Add the owner as a collaborator if the currently logged in user is the owner and hasn't been added before
    function addOwnerToCollaborators() {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/add-owner-to-collaborators.php",
            dataType: "TEXT",
            data: {
                "canvas_id": canvasId
            },
            timeout: 5000,
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    addOwnerToCollaborators();
    
    // Update collaborators
    function updateCollaborators() {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/update-collaborators.php",
            dataType: "JSON",
            data: {
                "canvas_id": canvasId,
                "username": username
            },
            timeout: 5000,
            success: function(returnData) {
                // Declarations
                var newHtml = "<tr><th>Active</th><th>Name</th><th>Username</th><th>Remove</th></tr>";
                var index = 0;
                
                // Remember the number of collaborators
                numberOfCollaborators = returnData.length;
                
                // While there still are collaborators to append
                while(index < returnData.length) {
                    newHtml += "<tr><td class='collaborators-active'>";
                    
                    // If the collaborator is active
                    if(returnData[index]["active"] === 1) {
                        newHtml += "<span class='glyphicon glyphicon-ok-sign'></span>";
                    }
                    
                    newHtml += "</td><td>" + returnData[index]["name"] + "</td><td>" + returnData[index]["collaborator"] + "</td><td>";
                    
                    // If the collaborator isn't the owner of the canvas
                    if(returnData[index]["collaborator"] !== canvasOwner) {
                        // Add the remove icon
                        newHtml += "<span class='glyphicon glyphicon-remove-sign'></span>";
                    }
                    
                    newHtml += "</td></tr>";
                    
                    // Increment the index
                    index++;
                }
                
                // Append collaborators
                $("div#collaborators-window table").html(newHtml);
                
                // Update the button to open the collaborators window
                $("div#collaborators button span").text("Collaborators (" + $("td.collaborators-active span").length + " active)");
                
                // If the user clicks on the "Remove" button
                showRemoveCollaboratorDialog();
                
                // Show only active collaborators or show all
                updateCollaboratorsView();
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // If the canvas is new
    if(canvasIsNew === false) {
        // Update the collaborators
        updateCollaborators();
    }
    
    // Post typing information
    function postTyping(typingId) {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/post-typing.php",
            dataType: "TEXT",
            data: {
                "canvas_id": canvasId,
                "username": username,
                "typing_id": typingId
            },
            timeout: 5000,
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // If the user closes the window
    $(window).on("beforeunload", function() {
        // Reset "User is typing" notification information
        postTyping("");
    });
    
    // Get typing information
    function getTyping() {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/get-typing.php",
            dataType: "JSON",
            data: {
                "canvas_id": canvasId,
                "username": username
            },
            timeout: 5000,
            success: function(returnData) {
                var loopCounter = 0;
                var typingDiv;
                var name;
                var typingId;
                var typingIds = [];
                // var typingDivIds = $("div.user-is-typing");
                
                // For every user user/DIV currently being typed in
                for(t in returnData) {
                    name = returnData[loopCounter]["name"];
                    typingId = returnData[loopCounter]["typingId"];
                    
                    // Save the typing ID in a separate array
                    typingIds[loopCounter] = returnData[loopCounter]["typingId"];
                    
                    if($("#" + typingId + "-typing").length === 0) {
                        typingDiv = "<div class='user-is-typing' id='" + typingId + "-typing'>" + name + "<br /> is typing...</div>";
                    }
                    
                    // For the current idea
                    $("#" + typingId).after(typingDiv);
                    
                    // Increment loop Counter
                    loopCounter++;
                }
                
                // For every "user is typing" DIV on the canvas
                $("div.user-is-typing").each(function() {
                    // If the typing ID of the current "user is typing" DIV does not exist in the new array with collaborators currently typing
                    if($.inArray($(this).attr("id").substring(0, 10), typingIds) === -1) {
                        // Remove this "user is typing" DIV
                        $(this).remove();
                    }
                });
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // Get typing information every 1.5 seconds
    window.setInterval(function() {
        // If collaborators have been added
        if(numberOfCollaborators > 1) {
            // Get typing information
            getTyping();
        }
    }, 1500);
    
    /* ================================================
    "Jump to" functions
    ================================================= */
    
    // Declarations
    var hasScrolledDown = false;
    
    // If the user scrolls down, change "position" to "fixed"    
    $(window).on("scroll", function() {
        // If the web page is opened on a mobile
        if($(window).width() <= 499) {            
            // Declarations
            var scrollPosition = $(window).scrollTop();
            
            // If the user scrolls down
            if(hasScrolledDown === false && scrollPosition >= 200) {
                $("div.jump-to").show();
                $("div.jump-to-click-area").show();
                
                hasScrolledDown = true;
            }
            // If the user scrolls to the top
            else if(hasScrolledDown === true && scrollPosition <= 10) {
                $("div.jump-to").hide();
                $("div.jump-to-click-area").hide();
                
                hasScrolledDown = false;
            }
        }
        // If the web page is not opened on a mobile
        else {
            $("div.jump-to-click-area").show();
            $("div.jump-to").hide();
            
            hasScrolledDown = false;
        }
    });
    
    // If the user resizes the window
    $(window).on("resize", function(event){
        // If the web page is not opened on a mobile
        if($(this).width() >= 500) {
            // Restore the space between the header and Saved Tags
            $("div.jump-to-click-area").show();
            $("div.jump-to").hide();
            
            hasScrolledDown = false;
        }
    });
    
    // If the user clicks on "Jump to", show menu
    $("div.jump-to-click-area").on("click", function() {
        // Toggle the menu
        $("div.jump-to-list").slideToggle(300);
        
        // Rotate arrow
        $("img.jump-to-img").toggleClass("jump-to-arrow-90");
        $("img.jump-to-img").toggleClass("jump-to-arrow-0");
        
        return false;
    });
    
    // If the user clicks on a menu item
    $("div.jump-to ul a").on("click", function() {
        // Declarations
        var chosenLiIndex = $(this).parent().index();
        var chosenFieldPosition;
        var scrollPositionNew;
        
        // If the user has chosen the list item 0
        if(chosenLiIndex === 0) {
            // Detect the scroll position of the chosen field "Saved Tags"
            chosenFieldPosition = $("div.saved-tags").offset().top;
        }
        // If the user has chosen the list item 1-9
        else if(chosenLiIndex >= 1 && chosenLiIndex <= 9) {
            // Detect the scroll position of the chosen field
            chosenFieldPosition = $("div.field_0" + chosenLiIndex).offset().top;
        }
        // If the user has chosen the list item 10 or higher
        else {
            // Detect the scroll position of the chosen field
            chosenFieldPosition = $("div.field_" + chosenLiIndex).offset().top;
        }
        
        // If the user has scrolled down
        if(hasScrolledDown === true) {
            // Set the new scroll position
            scrollPositionNew = chosenFieldPosition - 58;
            
            // Toggle the menu
            $("div.jump-to-list").slideToggle(300);
            
            // Rotate arrow
            $("img.jump-to-img").toggleClass("jump-to-arrow-90");
            $("img.jump-to-img").toggleClass("jump-to-arrow-0");            
        }
        
        // Apply the new scroll position
        $(window).scrollTop(scrollPositionNew);
        
        return false;
    });
    
    /* ================================================
    Show tooltip for every category
    ================================================= */
    
    // Activate the tooltips on hover
    $("a[data-toggle='tooltip']").tooltip({container: "body"});
    
    // If the user clicks on a tooltip
    $("a[data-toggle='tooltip']").on("click", function() {
        return false;
    });
    
    /* ================================================
    Remove all tags from all fields
    ================================================= */
    
    // Remove all tags from all fields
    function removeTags() {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/get-tags.php",
            dataType: "JSON",
            data: {
                "canvas_id": canvasId
            },
            timeout: 5000,
            success: function(returnData) {
                // Declarations
                var loopCounter = 0;
                
                // Remember the tags
                tags = returnData;
                
                // For every added item
                $("li.added_item .expandable").each(function() {
                    // Replace HTML with plain text
                    $(this).html($(this).text());
                });
                
                // If no tags have been added
                if(tags.length === 0) {
                    // Reset default message
                    $("div.saved-tags p").html("No tags could be found.");
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    /* ================================================
    Get the tags from the database and apply them on the canvas
    ================================================= */
    
    // Apply tags
    function updateTags() {
        // Apply tags on the canvas
        window.setTimeout(function() {
            // Regular expressions
            RegExp.escape = function(s) {
                return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
            };
            
            // Sort tags by size
            tags.sort(function(a, b) {
                return b.length - a.length;
            });
            
            // Replace the tag
            function replace(currentIdea, textIn, textOut) {
                currentIdea.html(function() {
                    return $(this).html().replace(textIn, textOut);
                });
            };
            
            // For every added item that currently isn't being edited
            $("li.added_item div.expandable").each(function() {
                // Declarations
                var currentIdea = $(this);
                var currentIdeaText = currentIdea.html();
                
                // For every tag
                for(var tag of tags) {
                    // Replace the tag
                    tag = RegExp.escape(tag);
                    currentIdeaText = currentIdeaText.replace(new RegExp(tag, 'g'), '<span class="tag-with-badge-effect">' + tag + '</span>');
                }
                
                // Replace the HTML with plain text
                currentIdea.html(currentIdeaText);
                
                // For every tag badge
                currentIdea.find("span").each(function() {
                    // Declarations
                    var span = $(this);
                    
                    // If the parent is the current idea
                    if(!span.parent().is(currentIdea)) {
                        // Replace the span
                        span.replaceWith(span.text());
                    }
                });
            });
            
            // If the user hovers on a nested tag, only apply the badge effect on said tag
            $(".expandable span.tag-with-badge-effect").on("mouseover", function(event) {
                // Stop propagation
                event.stopPropagation();
                
                // Add the badge effect
                $(this).addClass("tag-with-badge-effect-hover");
            });
            
            // If the user leaves a tag, remove the badge effect
            $(".expandable span.tag-with-badge-effect").on("mouseout", function() {
                // Remove the badge effect
                $(this).removeClass("tag-with-badge-effect-hover");
            });
            
            // If the user clicks on a nested clack, stop propagation
            $(".expandable span.tag-with-badge-effect").on("click", function(event) {
                // Stop propagation
                event.stopPropagation();
            });
            
            // Show the tag window on tag click
            showTagWindowOnTagClick();
        }, 100);
        
        // Populate "Saved Tags"
        var loopCounter = 0;
        var savedTags = $("div.saved-tags p");
        
        // Sort tags alphabetically
        tags.sort(function(a, b) {
            if(a < b) return -1;
            if(a > b) return 1;
            
            return 0;
        });
        
        // Clear Saved Tags
        savedTags.html("");
        
        // For every tag
        for(t in tags) {
            // Append the tag in Saved Tags
            savedTags.append("<span class='tag-with-badge-effect'>" + tags[loopCounter] + "</span>").append("&nbsp;&nbsp; ");
            
            // Increment the index
            loopCounter++;
        }
        
        // If Saved Tags is empty
        if(savedTags.html() === "") {
            // Restore the default text
            savedTags.html("No tags could be found.");
        }
    }
    
    // Get the tags from the database
    function getTags() {    
        // AJAX
        $.ajax({
            // async: false,
            type: "POST",
            url: "php/get-tags.php",
            dataType: "JSON",
            data: {
                "canvas_id": canvasId
            },
            timeout: 5000,
            success: function(returnData) {
                // Assign returnData to the tags variable
                tags = returnData;
                
                // Update tags on the canvas
                updateTags();
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    /* ================================================
    Tag window functions
    ================================================= */
    
    // Check if the tag is new
    function hideDeleteTagIfTagIsNew() {
        // Declarations
        var tagToAJAX = tag;
        
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/check-if-tag-exists.php",
            dataType: "text",
            data: {
                "tag": tagToAJAX,
                "canvas_id": canvasId
            },
            timeout: 5000,
            success: function(returnData) {
                // If the current tag does not exist in the database
                if(returnData === "") {
                    // Hide "Delete tag" button
                    $("div#tag-window button#delete-tag").css("display", "none");
                }
                // If the current tag exists in the database
                else {
                    // Show "Delete tag" button
                    $("div#tag-window button#delete-tag").css("display", "inline");
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // Updating the remaining characters information
    function updateRemainingCharacters() {
        // Declarations
        var length = $("div#tag-window textarea#tag-description").val().length;
        var maxLength = 200;
        
        // Update length
        length = maxLength - length;
        
        // Show the remaining characters
        $("div#tag-window span.chars").text(length);
    }
    
    // Get the description for the selected tag
    function getDescriptionForSelectedTag() {
        // Declarations
        var tagToAJAX = tag;
        
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/get-description-for-selected-tag.php",
            dataType: "text",
            data: {
                "tag": tagToAJAX,
                "canvas_id": canvasId
            },
            timeout: 5000,
            success: function(returnData) {
                // If the description isn't empty
                if(returnData != "") {
                    // Update description field with the description for the selected tag
                    $("div#tag-window textarea#tag-description").val(returnData);
                    
                    // Update remaining characters
                    updateRemainingCharacters();
                }
                // If the description is empty
                else {
                    // Restore default text
                    $("div#tag-window textarea#tag-description").val("Please enter a description...");
                }
                
                textareaHasBeenChanged = true;
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // Get similar tags by other users
    function getSimilarTags() {
        // Declarations
        var tagToAJAX = tag;
        
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/get-similar-tags.php",
            dataType: "JSON",
            data: {
                "tag": tagToAJAX,
                "canvas_id": canvasId,
                "username": username
            },
            timeout: 5000,
            success: function(returnData) {
                // Reset similar tags if similar tags are to be showed again
                $("p.similar-tags-tag").remove();
                $("p.similar-tags-description").remove();
                $("p.similar-tags-canvas-name").remove();
                
                // Declarations
                var htmlToAppend = "";
                
                // If similar tags exist
                if(returnData.length > 0) {
                    // Declarations
                    var index = 0;
                    
                    // While there still are tags to append
                    while(index < returnData.length) {
                        htmlToAppend += "<p class='similar-tags-tag'><span class='tag-with-badge-effect'>" + returnData[index]["tag"] + "</span></p>"
                                     +  "<p class='similar-tags-description'>" + returnData[index]["description"] + "</p>"
                                     +  "<p class='similar-tags-canvas-name'>from <span class='canvas-name'>" + returnData[index]["canvas_name"] + "</span></p>";
                                        
                        // Increment index
                        index++;
                    }
                    
                    // Append tags
                    $("div#tag-window h2.similar-tags").after(htmlToAppend);
                    $("p.similar-tags-description-none").css("display", "none");
                }
                else {
                    // Show the message saying that there are no similar tags to show
                    $("p.similar-tags-description-none").css("display", "block");
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // Close the tag window
    function closeTagWindow() {
        // Close the tag window
        tagWindowIsOpen = false;
        
        // Update iew
        $("div#shadow").css("display", "none");
        $("div#tag-window").css("display", "none");
    }
    
    // Show the tag window
    function showTagWindow() {
        // Show the tag window
        $("div#shadow").css("display", "block");
        $("div#tag-window").css("display", "block");
        
        // Update the header
        $("div#tag-window h1").html("<span class='glyphicon glyphicon-tag'></span> " + tag);
        
        // Check if the tag is new
        hideDeleteTagIfTagIsNew();
        
        // Get the description for the selected tag
        getDescriptionForSelectedTag();
        
        // Get tags by other users from the database
        getSimilarTags();
        
        // Update remaining characters in case description is loaded
        updateRemainingCharacters();
        
        // If a description hasn't been entered
        if($("div#tag-window textarea#tag-description") !== "Please enter a description..." && textareaHasBeenChanged !== true) {
            // Reset the remaining characters information
            $("div#tag-window span.chars").text("200");
        }
    }
    
    // If the user presses a key in the description textarea
    $("div#tag-window textarea#tag-description").on("keyup", function() {
        // Update remaining characters
        updateRemainingCharacters();
    });
    
    // If the user clicks on the "Save tag" button
    $("div#tag-window #save-tag").on("click", function() {
        // Declarations
        var description = $("div#tag-window textarea#tag-description").val();
        var tagToAJAX = tag;
        
        // If a description has been entered
        if(description != "" && description != "Please enter a description...") {
            // AJAX
            $.ajax({
                timeout: 5000,
                dataType: "text",
                type: "post",
                data: {
                    "tag": tagToAJAX,
                    "description": description,
                    "canvas_id": canvasId
                },
                url: "php/save-tag.php",
                success: function() {
                    textareaHasBeenChanged = true;
                    
                    // Get the tags from the database and apply them on the canvas
                    getTags();
                },
                error: function(xhr) {
                    console.log(xhr.statusText);
                }
            });
            
            // Close the tag window
            closeTagWindow();
        }
    });
    
    // If the user clicks on the "Close" button
    $("div#tag-window button.close").on("click", function() {
        // Close the tag window
        closeTagWindow();
    });
    
    // If the user clicks on the "Delete tag" button
    $("div#tag-window #delete-tag").on("click", function() {    
        // Declarations
        var tagToAJAX = tag;
        
        // AJAX
        $.ajax({
            timeout: 5000,
            dataType: "text",
            type: "post",
            data: {
                "tag": tagToAJAX,
                "canvas_id": canvasId
            },
            url: "php/delete-tag.php",
            success: function() {
                // Remove all tags from all fields
                removeTags();
                
                // Get the tags from the database and apply them on the canvas
                getTags();
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
        
        // Close the tag window
        closeTagWindow();
    });
    
    // If the user focuses in the textarea
    $("div#tag-window textarea#tag-description").on("focusin", function() {
        // Declarations
        var description = $("div#tag-window textarea#tag-description").val();
        
        // If a description hasn't been entered
        if(description === "Please enter a description...") {
            // Empty the description textarea
            $("div#tag-window textarea#tag-description").val("");
        }
    });
    
    // If the user leaves the textarea
    $("div#tag-window textarea#tag-description").on("focusout", function() {
        // Declarations
        var description = $("div#tag-window textarea#tag-description").val();
        
        // If a description hasn't been entered
        if(description === "") {
            // Reset the description textarea
            $("div#tag-window textarea#tag-description").val("Please enter a description...");
        }
    });
    
    /* ================================================
    If the user clicks on a tag, show the tag window
    ================================================= */
    
    // If the user clicks on a tag
    function showTagWindowOnTagClick() {
        $("span.tag-with-badge-effect").on("click", function() {
            // Declarations
            tag = $(this).text();
            
            // If the user is logged in
            if($("input[name='username']").val() != "") {
                tagWindowIsOpen = true;
                
                // Show the tag window
                showTagWindow();
            }
            // If the user isn't logged in
            else {
                // Show a dialog
                $("div#shadow").css("display", "block");
                $("div#dialog-log-in").css("display", "block");
            }
        });
    }
    
    /* ================================================
    Save added idea on Enter press
    ================================================= */
    
    // Save added idea on Enter press
    function saveAddedIdeaOnEnterPress(li) {
        // If the user presses a key
        $("li.added_item textarea.expandable").unbind("keydown").on("keydown", function(event) {            
            // If the key is Enter
            if(event.which === 13) {
                // Prevent default behaviour
                event.preventDefault();
                
                // Declarations
                var li = $(this).parent();
                var textElement;
                var textElementId = $(this).attr("id");
                var textElementWidth;
                var oldText = $(this).text();
                
                // Replace textarea with a div
                $(this).replaceWith(
                    "<div class='expandable' id='" + textElementId + "' name='" + $(this).attr("name") + "'>" + $(this).val() + "</div>"
                );
                
                // Reset "User is typing" notification information
                if(numberOfCollaborators > 1) {
                    // Post typing information
                    postTyping("");
                }
                
                // Remember the text element
                textElement = li.find(".expandable");
                
                // Remember the width of the text element
                textElementWidth = textElement.width();
                
                // Change the cursor
                $("ul.item_list div.expandable").css("cursor", "pointer");
                
                // Update tags on the canvas
                getTags();
                
                // Zoom out animation
                if(textElementWidth >= 0 && textElementWidth <= 250) {
                    textElement.addClass("zoom-out-regular");
                }
                else if(textElementWidth >= 251 && textElementWidth <= 500) {
                    textElement.addClass("zoom-out-less");
                }
                else if(textElementWidth >= 501) {
                    textElement.addClass("zoom-out-least");
                }
                
                textElement.css("background-color", "rgba(255, 255, 255, 0.75)");
                textElement.css("-ms-transform", "scale(1)");
                textElement.css("-webkit-transform", "scale(1)");
                textElement.css("transform", "scale(1)");
                
                // If no tags have been added
                if(tags.length === 0) {
                    // Reset the text explaining that no tags have been added
                    $("div.saved-tags p").html("No tags could be found.");
                }
                
                // Save the canvas automatically if the user has logged in and collaborators have been added
                var newText = textElement.text();
                
                // If the text has been changed
                if(oldText !== newText) {
                    // Save the canvas
                    prepareSaveCanvas();
                }
                
                // Toggle the text element on focus
                toggleTextElementOnFocus();
            }
        });
    }
    
    /* ================================================
    Toggle textarea.expandable/div.expandable on edit
    ================================================= */
    
    // Toggle the HTML element of the idea on focus
    function toggleTextElementOnFocus() {
        // If the user clicks on an added idea
        $("li.added_item .expandable").unbind("click").on("click", function(event) {
            // If the tag window isn't open
            if(tagWindowIsOpen === false) {
                var li = $(this).parent();
                var textElement;
                var textElementId = $(this).attr("id");
                var textElementWidth;
                var oldText = $(this).text();
                
                // Replace div with a textarea
                $(this).replaceWith(
                    "<textarea maxlength='100' class='expandable' id='" + textElementId + "' rows='3' data-limit-rows='true' data-autoresize name='" + $(this).attr("name") + "'>" + $(this).text() + "</textarea>"
                );
                
                // If collaborators have been added
                if(numberOfCollaborators > 1) {
                    // Notify collaborators that the user is currently typing
                    postTyping(textElementId);
                }
                
                // Remember the text element
                textElement = li.find(".expandable");
                
                // Remember the width of the text element
                textElementWidth = textElement.width();
                
                // Focus immediately on click instead of having to click on the element a second time
                textElement.focus();
                
                // Zoom in animation
                if(textElementWidth >= 0 && textElementWidth <= 250) {
                    textElement.addClass("zoom-in-regular");
                    textElement.css("background-color", "rgba(255, 255, 255, 1)");
                    textElement.css("-ms-transform", "scale(1.02)");
                    textElement.css("-webkit-transform", "scale(1.02)");
                    textElement.css("transform", "scale(1.02)");
                }
                else if(textElementWidth >= 251 && textElementWidth <= 600) {
                    textElement.addClass("zoom-in-less");
                    textElement.css("background-color", "rgba(255, 255, 255, 1)");
                    textElement.css("-ms-transform", "scale(1.01)");
                    textElement.css("-webkit-transform", "scale(1.01)");
                    textElement.css("transform", "scale(1.01)");
                }
                else if(textElementWidth >= 601) {
                    textElement.addClass("zoom-in-least");
                    textElement.css("background-color", "rgba(255, 255, 255, 1)");
                    textElement.css("-ms-transform", "scale(1.005)");
                    textElement.css("-webkit-transform", "scale(1.005)");
                    textElement.css("transform", "scale(1.005)");
                }
                
                // Save added idea on Enter press
                saveAddedIdeaOnEnterPress(li);
                
                // Replace textarea with a div
                $("li.added_item textarea.expandable").unbind("focusout").on("focusout", function(event) {
                    // Declarations
                    var li = $(this).parent();
                    var textElement;
                    var textElementId = $(this).attr("id");
                    var textElementWidth;
                    
                    // Replace textarea with a div
                    $(this).replaceWith(
                        "<div class='expandable' id='" + textElementId + "' name='" + $(this).attr("name") + "'>" + $(this).val() + "</div>"
                    );
                    
                    // Reset "User is typing" notification information
                    if(numberOfCollaborators > 1) {
                        // Post typing information
                        postTyping("");
                    }
                    
                    // Remember the text element
                    textElement = li.find(".expandable");
                    
                    // Remember the width of the text element
                    textElementWidth = textElement.width();
                    
                    // Change the cursor
                    $("ul.item_list div.expandable").css("cursor", "pointer");
                    
                    // Update tags on the canvas
                    getTags();
                    
                    // Zoom out animation
                    if(textElementWidth >= 0 && textElementWidth <= 250) {
                        textElement.addClass("zoom-out-regular");
                    }
                    else if(textElementWidth >= 251 && textElementWidth <= 500) {
                        textElement.addClass("zoom-out-less");
                    }
                    else if(textElementWidth >= 501) {
                        textElement.addClass("zoom-out-least");
                    }
                    
                    textElement.css("background-color", "rgba(255, 255, 255, 0.75)");
                    textElement.css("-ms-transform", "scale(1)");
                    textElement.css("-webkit-transform", "scale(1)");
                    textElement.css("transform", "scale(1)");
                    
                    // If no tags have been added
                    if(tags.length === 0) {
                        // Reset the text explaining that no tags have been added
                        $("div.saved-tags p").html("No tags could be found.");
                    }
                    
                    // Save the canvas automatically if the user has logged in and collaborators have been added
                    var newText = textElement.text();
                    
                    // If the text has been changed
                    if(oldText !== newText) {
                        // Save the canvas
                        prepareSaveCanvas();
                    }
                    
                    // Toggle the text element on focus
                    toggleTextElementOnFocus();
                });
            }
        });
    }
    
    /* ----------------------------------------------
    Limiting the number of characters the user is allowed to type
    ----------------------------------------------- */
    
    // Declarations
    var maxLength = 100;
    
    $('.card').on('keyup', '.new_item', function() {
        var length = $(this).val().length;
        length = maxLength - length;
        
        // Show the characters remaining only on this field
        $(this).closest('.user-input').find('.chars').text(length);
    });
    
    function limitLengthOnInput() {        
        // Limit text on key press
        $("li.added_item .expandable").unbind("keypress").on("keypress", function(event) {
            // Declarations
            var numberOfTags = $(this).children().filter("a").length;
            var textLength = $(this).html().length;
            
            // Subtract 43 from textLength per tag (the tag HTML is 43 characters)
            $(this).each(function() {
                textLength -= 43 * numberOfTags;
            });
            
            if(textLength === 100) {     // Windows menu/Right cmd
                event.preventDefault();
            }
        });
    }
    
    /* ================================================
    If the user closes a dialog
    ================================================= */
    
    // If the user clicks on a close button inside a dialog
    $("div.dialog").not($("div.window-dialog")).find("button.close").on("click", function() {
        // Close the dialog
        $("div#shadow").css("display", "none");
        $("div.dialog").css("display", "none");
    });
    
    /* ================================================
    If the user clicks on the "Tag selected term" link
    ================================================= */
    
    // Declarations
    var selection = "";
    
    // If the user selects new text
    document.onselectionchange = function() {
        // If the user has focused on an idea
        if($("li.added_item .expandable").is(":focus")) {
            // Update the tag variable
            selection = window.getSelection().toString();
            tag = selection.trim();
        }
    }
    
    // If the user clicks on the "Tag selected term" link
    $("p.tag-selected-term a").on("click", function() {
        // If the user is not logged in
        if($("input[name='username']").val() === "") {
            // Show a dialog
            $("div#shadow").css("display", "block");
            $("div#dialog-log-in").css("display", "block");
        }
        // If the tag isn't empty
        else if(canvasIsNew === true) {
            // Show a dialog
            $("div#shadow").css("display", "block");
            $("div#dialog-please-save").css("display", "block");
        }
        // If no term has been selected
        else if(tag === "") {
            // Show a dialog
            $("div#shadow").css("display", "block");
            $("div#dialog-select-term").css("display", "block");
        }
        // If a term has been selected
        else if(tag != "") {
            // Show the tag window
            showTagWindow();
        }
        
        // Prevent the current view to jump to the top of the screen
        return false;
    });
    
    // If the user leaves the idea
    $("li.added_item .expandable").on("focusout", function() {
        // Reset variables
        selection = "";
        tag = "";
    });
    
    /* ================================================
    Serialize Form to JSON
    ================================================= */
    
    // Serialize Form to JSON
    $.fn.serializeObject = function() {
        // Declarations
        var o = {};
        var a = this.serializeArray();
        var addedIdeaLists = $(".card ul");
        
        $.each(a, function() {
            if(o[this.name]) {
                if(!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            }
            else {
                o[this.name] = this.value || '';
            }
        });
        
        // Add added ideas to the JSON object manually
        $.each(addedIdeaLists, function() {
            // Declarations
            var field = $(this).attr("id");
            var addedItemDivs = $(this).find($(".expandable"));
            var addedItemArray = [];
            var numberOfAddedItem = addedItemDivs.length;
            
            // For every idea
            for(var i = 0; i < numberOfAddedItem; i++) {
                addedItemArray[i] = [addedItemDivs[i].textContent, addedItemDivs[i].id];
            }
            
            // Add the idea to the array
            o[field + "[]"] = addedItemArray;
        });
        
        return o;
    };
    
    /* ================================================
    Getting the current date
    ================================================= */
    
    // Declarations
    var fullDate = new Date();
    var fourDigitYear = fullDate.getFullYear();
    var twoDigitMonth = fullDate.getMonth() + 1 + "";
    var twoDigitDate = fullDate.getDate() + "";
    var currentDate;
    
    // If the month digit is 1 character long
    if(twoDigitMonth.length == 1) {
        // Add the prefix "0"
        twoDigitMonth = "0" + twoDigitMonth;
    }
    
    // If the date digit is 1 character long
    if(twoDigitDate.length == 1) {
        // Add the prefix "0"
        twoDigitDate = "0" + twoDigitDate;
    }
    
    // Save the current date
    currentDate = fourDigitYear + "-" + twoDigitMonth + "-" + twoDigitDate;
    
    // Set the current date in the date input field    
    $(".proj_date").val(currentDate);
    
    /* ================================================
    If the user clicks on "Log Out"
    ================================================= */
    
    // If the user clicks on "Log Out"
    $('#user-profile').on('click', '#logout', function() {
        var url = "php/logout.php";
        
        $.post(url, function(data, status) {
            if(data == 200) {
                $("#user-profile").hide();
                $(".invited-members").hide();
                
                window.location.href = "https://www.ethicscanvas.org";
            }
        });
    });
    
    /* ================================================
    Check if the canvas is public
    ================================================= */
    
    // Check if the canvas is public
    function checkPublic() {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/check-public.php",
            dataType: "TEXT",
            data: {
                "canvas_id": canvasId
            },
            timeout: 5000,
            success: function(returnData) {
                if(returnData === "0") {
                    $("button.publish_canvas").text("Publish for viewing/commenting");
                }
                else if(returnData === "1") {
                    $("button.publish_canvas").text("Unpublish for viewing/commenting");
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    /* ================================================
    When the page loads, import the chosen canvas if the user has
    picked one from the dashboard, otherwise load an empty canvas
    ================================================= */
    
    // Import the canvas from the server
    function importCanvasFirst() {
        // If a canvas is chosen by the user to be loaded
        if(current_canvas_id !== '') {
            var url = 'json/' + current_canvas_id + '.json';
            // var url= 'json/test_canvas.json';
            
            // Get the saved JSON object in the sendJSON.text file
            $.getJSON(url, function(returnedObj) {
                
                // Display the JSON data in the HTML
                var itemListHTML = '';
                
                // Iterate through the object
                $.each(returnedObj, function(key, value) {
                    // Project name and item field
                    if(key === 'field_00[]') {
                        $('.form-header').find('input.proj_title').val(value[0]);
                        $('.form-header').find('input.proj_date').val(value[1]);
                    }
                    else if(key !== 'new_item') {
                        // An array
                        if($.type(value) === "array") {
                            $.each(value, function(i, itm) {
                                // FIX DUPLICATIONS in the canvas when importing. Importing will override the canvas content clear the canvas by giving en empty content to the ul list (remove previous list items)
                                $('.canvas-form').find('.card').filter('.' + key.substr(0, 8)).find('ul.item_list').html('');
                                
                                // Create a list item with each value item and give it text area with the name attribute as the "key" (right field name)
                                itemListHTML +=
                                    '<li class="added_item"><div class="expandable" id="' + itm[1] + '" name="' + key + '">' + itm[0] + '</div><br /><span class="comment glyphicon glyphicon-public glyphicon-comment"></span><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
                            });
                        }
                        // A single value string
                        else {
                            itemListHTML +=
                                '<li class="added_item"><div class="expandable" name="' + key + '">' + value + '</div><br /><span class="comment glyphicon glyphicon-public glyphicon-comment"></span><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
                        }
                        // Append the created list items/textatreas to the right field based on the "key"*/
                        // The str.substr(start,length) is used to remove the [] from the end of the "key"name (for each field. also the name attributes accociated with each fields) so that we can select the right class (right field) and append the created lists to the right field so field names/key/name attribute will tuen into class names: ex:  field_1[] becomes field_1
                        // Find the field by its class names besed on the current key name
                        // Append the created list of item values to that right field
                        
                        $('.canvas-form').find('.card').filter('.' + key.substr(0, 8)).find('ul.item_list').append(itemListHTML);
                        // $('form').find('.card').filter('.field_1').find('ul.item_list').append(itemListHTML);
                        // !! Empty the item list after each count of "key" so that the previous item lists from the other fields (associated with the previous key) don't get added up to the item list of other fields
                        itemListHTML = '';
                        
                        // Limit the text in the idea field if it reaches the max length
                        limitLengthOnInput();
                        
                        // If the user is a collaborator
                        if(userIsCollaborator === true) {
                            // Show the idea buttons
                            $("ul.item_list span.glyphicon").show();
                            
                            // Change the cursor
                            $("ul.item_list div.expandable").css("cursor", "pointer");
                            
                            // Toggle textarea.expandable/div.expandable on focus
                            toggleTextElementOnFocus();
                            
                            // Show "Tag selected term" link
                            // For every list of ideas
                            $(".card .item_list").each(function() {
                                // the list of ideas has ideas
                                if($(this).find("li.added_item").length) {
                                    // Show "Tag selected term"
                                    $(this).next().show();
                                }
                            });
                        }
                        
                        // Get typing information
                        getTyping();
                        
                        // Get owner
                        getOwner();
                        
                        // Show the owner of the canvas in the Collaborators window
                        $("p#canvas-owner").text(canvasOwner);
                        
                        // Get the tags from the database and apply them on the canvas
                        getTags();
                        
                        // Remember that the canvas isn't new
                        canvasIsNew = false;
                        
                        // Check if the canvas is public
                        checkPublic();
                    }
                });
            });
        }
    }
    
    importCanvasFirst();
    
    /* ================================================
    Receiving remote updates from collaborators
    ================================================= */
    
    // Import the canvas from the server
    function importCanvasAgain() {
        // If a canvas is chosen by the user to be loaded
        if(current_canvas_id !== '') {
            var url = 'json/' + current_canvas_id + '.json';
            // var url= 'json/test_canvas.json';
            
            // Get the saved JSON object in the sendJSON.text file
            $.getJSON(url, function(returnedObj) {
                // Display the JSON data in the HTML
                var itemListHTML = '';
                var ideaIdsJSON = [];
                
                // Iterate through the object
                $.each(returnedObj, function(key, value) {
                    // Project name and item field
                    if(key === 'field_00[]') {
                        // If the current Project Title has a different text from the text in the JSON file
                        if($('.form-header').find('input.proj_title').val() !== value[0]) {
                            // If the Project Title isn't currently being edited
                            if(!$('.form-header').find('input.proj_title').is(":focus")) {
                                $('.form-header').find('input.proj_title').val(value[0]);
                            }
                        }
                        $('.form-header').find('input.proj_date').val(value[1]);
                    }
                    else if(key !== 'new_item') {
                        // An array
                        if($.type(value) === "array") {
                            $.each(value, function(i, itm) {
                                // Declarations
                                var ideaTextJSON = itm[0];
                                var ideaIdJSON = itm[1];
                                
                                // Add the current idea ID to the array
                                ideaIdsJSON.push(ideaIdJSON);
                                
                                // console.log("We are now about to check if the idea \"" + $("#" + ideaIdJSON) + "\" exists on the currently viewed canvas");
                                
                                // If the idea exists in the JSON file and on the currently viewed canvas (then the idea might or might not have been changed)
                                if($("#" + ideaIdJSON).length > 0) {
                                    // console.log("The idea \"" + ideaIdJSON + "\" exists in both the JSON file and on the currently viewed canvas");
                                    // console.log("We are now about to compare \"" + $("#" + ideaIdJSON).text() + "\" with \"" + ideaTextJSON + "\"");
                                    
                                    // If the current idea has a different text from the text in the JSON file
                                    if($("#" + ideaIdJSON).text() !== ideaTextJSON) {
                                        // console.log("The text of \"" + ideaIdJSON + "\" has been changed by either you or a collaborator");
                                        
                                        // If the current idea isn't currently being edited
                                        if($("#" + ideaIdJSON).prop("tagName") === "DIV") {
                                            // console.log("The current idea is a DIV");
                                            
                                            // Update the current idea with the text in the JSON file
                                            $("#" + ideaIdJSON).text(ideaTextJSON);
                                            
                                            // Add Notification effect
                                            // $("#" + ideaIdJSON).css("-webkit-animation-name", "update-notification");
                                            // $("#" + ideaIdJSON).css("-webkit-animation-duration", "2s");
                                            $("#" + ideaIdJSON).css("animation-name", "update-notification");
                                            $("#" + ideaIdJSON).css("animation-duration", "2s");
                                            
                                            // Remove Notification effect
                                            window.setTimeout(function() {
                                                // $("#" + ideaIdJSON).css("-webkit-animation-name", "");
                                                // $("#" + ideaIdJSON).css("-webkit-animation-duration", "");
                                                $("#" + ideaIdJSON).css("animation-name", "");
                                                $("#" + ideaIdJSON).css("animation-duration", "");
                                            }, 2000);
                                        }
                                    }
                                }
                                // If the idea exists in either the JSON file or on the currently viewed canvas, but not both
                                else {
                                    // console.log("The idea exists in either the JSON file or on the currently viewed canvas, but not both");
                                    
                                    // If the idea exists in the JSON file, but not on the currently viewed canvas (then the idea is new)
                                    if(ideaIdJSON) {
                                        // console.log("The idea \"" + ideaIdJSON + "\" is new");
                                        
                                        // Create the idea
                                        itemListHTML +=
                                            '<li class="added_item"><div class="expandable" id="' + ideaIdJSON + '" name="' + key + '">' + ideaTextJSON + '</div><br /><span class="comment glyphicon glyphicon-public glyphicon-comment"></span><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
                                        
                                        // Append the idea to the item list
                                        $('.canvas-form').find('.card').filter('.' + key.substr(0, 8)).find('ul.item_list').append(itemListHTML);
                                    }
                                }
                            });
                        }
                    }
                });
                
                // If the idea doesn't exist in the JSON file, but on the currently viewed canvas (then the idea has been removed)
                // Declarations
                var ideasCanvas = $(".added_item .expandable");
                
                // For every idea on the currently viewed canvas
                for(var counter = 0; counter < ideasCanvas.length; counter++) {
                    // Declarations
                    var ideaIdCanvas = ideasCanvas[counter].id;
                    
                    // If the current idea on the currently viewed canvas doesn't exist in the JSON file
                    if(ideaIdsJSON.indexOf(ideaIdCanvas) === -1) {
                        // If there are no ideas left
                        if($("#" + ideaIdCanvas).parent().parent().length === 1) {
                            // Hide "Tag selected term" link
                            $("#" + ideaIdCanvas).parent().parent().next().css("display", "none");
                        }
                        
                        // Delete the idea
                        $("#" + ideaIdCanvas).parent().remove();
                        
                        // console.log("The idea \"" + ideaIdCanvas + "\" has been removed");
                    }
                }
                
                // Limit the text in the idea field if it reaches the max length
                limitLengthOnInput();
                
                // If the user is a collaborator
                if(userIsCollaborator === true) {
                    // Show the idea buttons
                    $("ul.item_list span.glyphicon").show();
                    
                    // Change the cursor
                    $("ul.item_list div.expandable").css("cursor", "pointer");
                    
                    // Toggle textarea.expandable/div.expandable on focus
                    toggleTextElementOnFocus();
                    
                    // Show "Tag selected term" link in the destination category
                    // For every list of ideas
                    $(".card .item_list").each(function() {
                        // If the list of ideas has ideas
                        if($(this).find("li.added_item").length) {
                            // Show "Tag selected term"
                            $(this).next().show();
                        }
                    });
                }
               
                // Get the tags from the database and apply them on the canvas
                getTags();
            });
        }
    }
    
    /* ================================================
    Toggle the introduction text in fields
    ================================================= */
    
    // Toggle the introduction text in fields
    /*
    // $(selector).toggle(speed,easing,callback)
    $('.card').on('click', '.intro-toggle', function() {
        var $TogglingText = $($(this).closest('.card').find('.intro'));
        var $Toggler = $($(this).closest('.card').find('.intro-toggle'));
        $TogglingText.toggle('slow', function() {
            // Do this when toggling:
            // the boolean .is(':visible') of the current toggle state
            if($TogglingText.is(':visible')) {
                // change the text of the toggle
                $Toggler.find('.intro-toggle-text').text('Hide description');
                // change the icon of the toggle
                $Toggler.find('.intro-toggle-icon').switchClass("glyphicon-plus-sign", "glyphicon-minus-sign", 1000, "easeInOutQuad");
            }
            else {
                $Toggler.find('.intro-toggle-text').text('Show description');
                $Toggler.find('.intro-toggle-icon').switchClass("glyphicon-minus-sign", "glyphicon-plus-sign", 1000, "easeInOutQuad");
                
            }
            
        });
        
    });
     */
    
    /* ================================================
    Auto expand user input textareas
    ================================================= */
    
    // Works for textareas already existing in the HTML when the page loads -> User input
    /*
    $.each($('textarea[data-autoresize]'), function() {
        var offset = this.offsetHeight - this.clientHeight;
        
        var resizeTextarea = function(el) {
            $(el).css('height', 'auto').css('height', el.scrollHeight + offset);
        };
        $(this).on('keyup input', function() {
            resizeTextarea(this);
        }).removeAttr('data-autoresize');
    });
     */
        
    /* ================================================
    Limiting the number of lines in textareas
    ================================================= */
    
    // Limiting the number of lines in textareas
    /*
    // <textarea data-limit-rows="true" cols="60" rows="8"></textarea>
    
    $('.card').on('keypress', 'textarea[data-limit-rows=true]', function(event) {
        var textarea = $(this),
            text = textarea.val(),
            // match() -> Searches a string for a match against a regular expression, and returns the matches, as an Array object.
            numberOfLines = (text.match(/\n/g) || []).length + 1,
            maxRows = parseInt(textarea.attr('rows'));
            
        // if the number of lines have reached the max rows
        if(numberOfLines === maxRows) {
            return false;
        }
    });
     */
        
    /* ================================================
    Handling user input, ADD items
    A. Add button
    B. Clicking enter
    ================================================= */
    
    /* ----------------------------------------------
    Add new idea slide effect
    ----------------------------------------------- */
    
    // When clicking on "add a new idea", Slide down and show the input field for adding a new item (from the begining, it is set to display:hidden with CSS). If clicked again, slide it up. After that, set the textarea in automatic focus
    $('.card').on('click', 'a.add-idea', function(event) {
        // Stop the default behavior of the link (jumping back to the start of the page)
        event.preventDefault();
        // Set the textarea automatically in focus
        $(this).closest('.card').find('.user-input').slideToggle("slow", function() {
            // When the toggle animation is complete:
            // Set the text area in focus
            $(this).closest('.card').find('.new_item').val('');
            $(this).closest('.card').find('.chars').text(maxLength);
            $(this).closest('.card').find('.new_item').focus();
        });
        
    });
    
    /* ----------------------------------------------
    A. When we click the add btn to
    add the item to the list
    ----------------------------------------------- */
    
    // Event deligation to handle the present and future elements that are dynamically added
    $('.card').on('click', '.add_btn', function() {
        var new_item = $(this).closest('.card').find('.new_item').val();
        var new_item_height = $(this).closest('.card').find('.new_item').height();
        // Number of items are in the list
        var fieldItemCount = $(this).closest('.card').find('ul.item_list').find('li').length;
        // New item added, increment the number of items
        fieldItemCount++;
        // Add the input value as a textarea item
        // Create a name attribute in the "field_nr[]" format to be able to tag each new item with the right field attr name (based on the field they are added to). This is to format the json file for each group of dynamically added items. We get the name attribute directly from the id attribute of the ul list in each card (the one we pressed the add button in)
        // If the new item input exist (is not empty), add the item
        
        if(new_item) {
            var field_attr = $(this).closest('.card').find('ul.item_list').attr('id') + '[]';
            // The height of the newly added item = the height of the add new idea textarea
            $(this).closest('.card').find('ul.item_list').append(
                '<li class="added_item"><div class="expandable" id="' + generateId() + '" name="' + field_attr + '">' + new_item + '</div><br /><span class="comment glyphicon glyphicon-public glyphicon-comment"></span><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
            );
            
            // Fix the heights only after a new item is added
            // fixHeights();
        }
        // Clear the new item the text area value
        $(this).closest('.card').find('.new_item').val('');
        // When clicking on "add idea", hide the input field for adding a new item (slideUp() doesn't work nicely here)
        $(this).closest('.card').find('.user-input').hide("fast", function() {
            // Animation complete
        });
        
        // Show the idea buttons
        $("ul.item_list span.glyphicon").show();
        
        // Change the cursor
        $("ul.item_list div.expandable").css("cursor", "pointer");
        
        // Limit the text in the idea field if it reaches the max length
        limitLengthOnInput();
        
        // Toggle textarea.expandable/div.expandable on edit
        toggleTextElementOnFocus();
        
        // Remove all tags from all fields
        removeTags();
        
        // Get the tags from the database and apply them on the canvas
        getTags();
        
        // If the list of ideas has ideas
        if($(this).parent().parent().prev().prev().children().length > 0) {
            // Show "Tag selected term" link
            $(this).parent().parent().prev().css("display", "block");
        }
        
        // Save the canvas automatically if the user has logged in and collaborators have been added
        prepareSaveCanvas();
    });
    
    /* ----------------------------------------------
    B. Clicking enter in the add idea textarea,
    will add the new item to the card
    ----------------------------------------------- */
    
    $('.card').on('keypress', 'textarea[data-limit-rows=true]', function(event) {
        var textarea = $(this);
        var text = textarea.val();
        
        /* The jQuery event.which -->
        Returns which keyboard key was pressed: */
        // If the enter is pressed, event.which === 13
        if(event.which === 13 && !$("li.added_item .expandable").is(":focus")) {
            var new_item = $(this).closest('.card').find('.new_item').val();
            var new_item_height = $(this).closest('.card').find('.new_item').height();
            // Number of items are in the list
            var fieldItemCount = $(this).closest('.card').find('ul.item_list')
            .find('li').length;
            // New item added, increment the number of items
            fieldItemCount++;
            // Add the input value as a textarea item
            // Create a name attribute in the "field_nr[]" format to be able to tag each new item with the right field attr name (based on the field they are added to). This is to format the json file for each group of dynamically added items. We get the name attribute directly from the id attribute of the ul list in each card (the one we pressed the add button in)
            // If the new item input exist (is not empty), add the item
            
            if(new_item) {
                var field_attr = $(this).closest('.card').find('ul.item_list').attr(
                    'id') + '[]';
                // The height of the newly added item = the height of the add new idea textarea
                $(this).closest('.card').find('ul.item_list').append(
                    '<li class="added_item"><div class="expandable" id="' + generateId() + '" name="' + field_attr + '">' + new_item + '</div><br /><span class="comment glyphicon glyphicon-public glyphicon-comment"></span><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
                );
                
                // Fix the heights only after a new item is added
                // fixHeights();
            }
            // Clear the new item the text area value
            $(this).closest('.card').find('.new_item').val('');
            // When clicking on "add idea", hide the input field for adding a new item (slideUp() doesn't work nicely here)
            $(this).closest('.card').find('.user-input').hide("fast", function() {
                // Animation complete
            });
            
            // Show the idea buttons
            $("ul.item_list span.glyphicon").show();
            
            // Change the cursor
            $("ul.item_list div.expandable").css("cursor", "pointer");
            
            // Limit the text in the idea field if it reaches the max length
            limitLengthOnInput();
            
            // Toggle textarea.expandable/div.expandable on edit
            toggleTextElementOnFocus();
            
            // Remove all tags from all fields
            removeTags();
            
            // Get the tags from the database and apply them on the canvas
            getTags();
            
            // If the list of ideas has ideas
            if($(this).parent().parent().parent().prev().prev().children().length > 0) {
                // Show "Tag selected term" link
                $(this).parent().parent().parent().prev().css("display", "block");
            }
            
            // Save the canvas automatically if the user has logged in and collaborators have been added
            prepareSaveCanvas();
        }
    });
    
    /* ================================================
    Commenting ideas
    ================================================= */
    
    // Remove the comment
    function deleteComment(commentId) {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/delete-comment.php",
            dataType: "TEXT",
            data: {
                "comment_id": commentId
            },
            timeout: 5000,
            success: function() {
                // Get comments
                getComments();
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // Get comments
    function getComments() {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/get-comments.php",
            dataType: "JSON",
            data: {
                "canvas_id": canvasId,
                "idea_id": currentCommentsId
            },
            timeout: 5000,
            success: function(returnData) {
                // If comments exist
                if(returnData.length > 0) {
                    // Declarations
                    var newHtml = "<tr><th>Comment</th><th>Delete</th></tr>";
                    var index = 0;
                    
                    // While there still are comments to append
                    while(index < returnData.length) {
                        newHtml += "<tr id='" + returnData[index]["id"] + "'><td><p class='comments-comment'>" + returnData[index]["comment"] + "</p><p class='comments-by'>by <span class='comments-name'>" + returnData[index]["name"] + "</span> on " + returnData[index]["date"] + "</p></td><td>"
                        
                        // If the current collaborator who commented is the active user
                        if(returnData[index]["collaborator"] === username) {
                            // Add the remove icon
                            newHtml += "<span class='glyphicon glyphicon-remove-sign'></span>";
                        }
                        
                        newHtml += "</td></tr>";
                        
                        // Increment the index
                        index++;
                    }
                    
                    // Fix the margin-bottom of the heading
                    $("h2#comments-thread-heading").css("margin-bottom", "0.4em");
                    
                    // Show the table
                    $("table#comments-thread").show();
                    
                    // Hide the default text
                    $("div#comments-window p#comments-none").hide();
                    
                    // Remove all previous comments
                    $("table#comments-thread tr").remove();
                    
                    // Append the comments
                    $("table#comments-thread").append(newHtml);
                    
                    // If the user clicks on the "Remove Comment" button
                    $("div#comments-window td span").on("click", function() {
                        // Declarations
                        var commentId = $(this).parent().parent().prop("id");
                        
                        // Remove the comment
                        deleteComment(commentId);
                    });
                    
                    // If the user is a collaborator
                    if(userIsCollaborator === true) {
                        // Show the "Resolve Comments" button
                        $("div#comments-window button#comments-resolve").css("display", "block");
                    }
                    // If the user is not a collaborator
                    else {
                        // Fix the margin below the table
                        $("table#comments-thread").css("margin-bottom", 0);
                    }
                }
                // If there are no comments
                else {
                    // Fix the margin-bottom of the heading
                    $("h2#comments-thread-heading").css("margin-bottom", "0");
                    
                    // Show the table
                    $("table#comments-thread").hide();
                    
                    // Hide the default text
                    $("div#comments-window p#comments-none").show();
                    
                    // Remove all previous comments
                    $("table#comments-thread tr").remove();
                    
                    // Show the "Resolve Comments" button
                    $("div#comments-window button#comments-resolve").hide();
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // If the user clicks on the "Comment" icon, show the comments window
    $(".card").on("click", "span.comment", function() {
        // Show the move window
        $("div#shadow").css("display", "block");
        $("div#comments-window").css("display", "block");
        
        // Remember the ID of the idea
        currentCommentsId = $(this).parent().find("div").prop("id");
        
        // Get commments
        getComments();
        
        updateRemainingCharacters();
    });
    
    // Close the comments window
    function closeCommentsWindow() {
        // Close the comments window
        $("div#shadow").css("display", "none");
        $("div#comments-window").css("display", "none");
        $("div#comments-window textarea#comments-new").val("Please enter a comment...");
    }
    
    // If the user clicks on the "Close" button
    $("div#comments-window button.close").on("click", function() {
        // Close the comments window
        closeCommentsWindow();
    });
    
    // If the user focuses in the textarea
    $("div#comments-window textarea#comments-new").on("focusin", function() {
        // Declarations
        var comment = $("div#comments-window textarea#comments-new").val();
        
        // If a comment hasn't been entered
        if(comment === "Please enter a comment...") {
            // Empty the comment textarea
            $("div#comments-window textarea#comments-new").val("");
        }
    });
    
    // If the user leaves the textarea
    $("div#comments-window textarea#comments-new").on("focusout", function() {
        // Declarations
        var comment = $("div#comments-window textarea#comments-new").val();
        
        // If a comment hasn't been entered
        if(comment === "") {
            // Reset the comment textarea
            $("div#comments-window textarea#comments-new").val("Please enter a comment...");
        }
    });
    
    // Updating the remaining characters information
    function updateRemainingCharacters() {
        // Declarations
        var length = $("div#comments-window textarea#comments-new").val().length;
        var maxLength = 200;
        
        // Update length
        length = maxLength - length;
        
        // If the text isn't the default text
        if($("div#comments-window textarea#comments-new").val() !== "Please enter a comment...") 
            // Show the remaining characters
            $("div#comments-window span.chars").text(length);
        // If the text is the default text
        else {
            $("div#comments-window span.chars").text(maxLength);
        }
    }
    
    // If the user presses a key in the comments textarea
    $("div#comments-window textarea#comments-new").on("keyup", function() {
        // Update remaining characters
        updateRemainingCharacters();
    });
    
    // If the user clicks on the "Post comment" button
    $("div#comments-window button#comments-post").on("click", function() {
        // Declarations
        var comment = $("div#comments-window textarea#comments-new").val();
        
        // If a comment has been entered
        if(comment != "" && comment != "Please enter a comment...") {
            // AJAX
            $.ajax({
                timeout: 5000,
                dataType: "json",
                type: "post",
                data: {
                    "canvas_id": canvasId,
                    "collaborator": username,
                    "idea_id": currentCommentsId,
                    "comment": comment
                },
                url: "php/post-comment.php",
                success: function() {
                    // Empty the textarea
                    $("div#comments-window textarea#comments-new").val("Please enter a comment...");
                    
                    getComments();
                    
                    // Update reamining characters
                    updateRemainingCharacters();
                },
                error: function(xhr) {
                    console.log(xhr.statusText);
                }
            });
        }
    });
    
    // Resolve the comments
    function resolveComments() {
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/resolve-comments.php",
            dataType: "TEXT",
            data: {
                "idea_id": currentCommentsId
            },
            timeout: 5000,
            success: function() {
                // Close the Delete Comment window
                $("div#shadow").css("z-index", "2");
                $("div#dialog-resolve-comments").css("display", "none");
                
                // Get comments
                getComments();
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    // If the user clicks on the "Remove" button
    function showResolveCommentsDialog() {
        // Show the Remove comment dialog
        $("div#shadow").css("z-index", "3");
        $("div#dialog-resolve-comments").css("display", "block");
        
        // If the user clicks on "Yes"
        $("#dialog-resolve-comments #button-yes").on("click", function() {
            // Resolve the comments
            resolveComments();
        });
        
        // If the user clicks on "Cancel"
        $("#dialog-resolve-comments #button-cancel").on("click", function() {
            // Cancel
            $("div#shadow").css("z-index", "2");
            $("div#dialog-resolve-comments").css("display", "none");
        });
    }
    
    // If the user clicks on the "Close" button in the Remove Collaborator dialog
    $("div#dialog-resolve-comments button.close").on("click", function() {
        // Close the Remove Collaborator window
        $("div#shadow").css("z-index", "2");
        $("div#dialog-resolve-comments").css("display", "none");
    });
    
    // If the user clicks on the "Resolve comments" button
    $("div#comments-window button#comments-resolve").on("click", function() {
        showResolveCommentsDialog();
    });
    
    /* ================================================
    Moving ideas to a different category
    ================================================= */
    
    // Declarations
    var categoryDestination;
    var categoryLis = $("div#move-window ul").html();
    var categoryAs = $("div#move-window ul a");
    var categoryOrigin;
    var ideaLi;
    var linkLi;
    var linkText;
    
    // Remove the link to the current category, as the idea cannot be moved to its own category where it already is
    function removeLinkToOriginCategory(text) {
        // If the number of the category is between 10-99
        if(text.substring(6, 7) != "0") {
            // Remember the origin category
            categoryOrigin = text.substring(6, 9) - 1;
        }
        // If the number of the category is between 0-9
        else {
            // Remember the origin category
            categoryOrigin = text.substring(7, 9) - 1;
        }
        
        // Remove A tag
        linkLi = $("div#move-window ul li").get(categoryOrigin);
        linkText = categoryAs.get(categoryOrigin).innerHTML;
        linkLi.innerHTML = linkText;
    }
   
    // If the user clicks on the "Move" icon, show the move window
    $(".card").on("click", "span.handle", function() {
        // Show the move window
        $("div#shadow").css("display", "block");
        $("div#move-window").css("display", "block");
        
        // Assign the idea that is going to be moved
        ideaLi = $(this).parent();
        
        // Remove the link to the current category, as the idea cannot be moved to its own category where it already is
        removeLinkToOriginCategory($(this).parent().parent().attr("id"));
    });
    
    // Close the move window
    function closeMoveWindow() {
        // Close the move window
        $("div#shadow").css("display", "none");
        $("div#move-window").css("display", "none");
    }
    
    // If the user clicks on the "Close" button
    $("div#move-window button.close").on("click", function() {
        // Close the move window
        closeMoveWindow();
    });
    
    // If the user clicks on a category, move the idea
    function moveIdeaOnClick() {
        $("div#move-window ul a").on("click", function() {
            // If the number of the category is between 10-99
            if($(this).parent().text().trim().substring(1, 2) != ".") {
                // Remember the destination category
                categoryDestination = $(this).parent().text().trim().substring(0, 2);
            }
            // If the number of the category is between 0-9
            else {
                // Remember the destination category
                categoryDestination = $(this).parent().text().trim().substring(0, 1);
            }
            
            // If the number of the category is between 10-99
            if(categoryDestination > 9) {
                // Move the idea
                $("ul#field_" + categoryDestination).append(ideaLi);
            }
            // If the number of the category is between 0-9
            else {
                // Move the idea
                $("ul#field_0" + categoryDestination).append(ideaLi);
            }
            
            // Close the move window
            closeMoveWindow();
            
            // Save the canvas automatically if the user has logged in and collaborators have been added
            prepareSaveCanvas();
            
            // If the Move window isn't opened for the first time
            if($("div#move-window li").length > $("div#move-window a").length) {
                // Restore links in the move window
                $("div#move-window ul").children().remove()
                $("div#move-window ul").append(categoryLis);
                moveIdeaOnClick();
            }
            
            // Hide "Tag selected term" link in the origin category if there are no ideas left
            if($("ul#field_0" + (categoryOrigin + 1)).children().length === 0) {
                // If the number of the category is between 10-99
                if((categoryOrigin + 1) > 9) {
                    // Hide the "Tag selected term" button
                    $("ul#field_" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
                }
                // If the number of the category is between 0-9
                else {
                    // Hide the "Tag selected term" button
                    $("ul#field_0" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
                }
            }
            
            // If the user is a collaborator
            if(userIsCollaborator === true) {                
                // Show "Tag selected term" link in the destination category
                // If the number of the category is between 10-99
                if((categoryOrigin + 1) > 9) {
                    $("ul#field_" + categoryDestination).parent().find("p.tag-selected-term").css("display", "block");
                }
                // If the number of the category is between 0-9
                else {
                    $("ul#field_0" + categoryDestination).parent().find("p.tag-selected-term").css("display", "block");
                }
            }
        });
    }
    
    moveIdeaOnClick();
    
    /* ================================================
    Moving ideas up
    ================================================= */
    
    // If the user clicks on the "Up" button
    $('.card').on('click', 'span.move-up', function() {
        // Declarations
        var ideaLiCurrent = $(this).parent();
        var ideaLiPrevious = $(this).parent().prev();
        
        // If the previous element is a list item
        if(ideaLiPrevious.is("li")) {
            // Move the idea
            ideaLiCurrent.detach();
            ideaLiPrevious.before(ideaLiCurrent);
        }
        
        // Save the canvas automatically if the user has logged in and collaborators have been added
        prepareSaveCanvas();
    });
   
    /* ================================================
    Moving ideas down
    ================================================= */
    
    // If the user clicks on the "Down" button
    $('.card').on('click', 'span.move-down', function() {
        // Declarations
        var ideaLiCurrent = $(this).parent();
        var ideaLiNext = $(this).parent().next();
        
        // If the previous element is a list item
        if(ideaLiNext.is("li")) {
            // Move the idea
            ideaLiCurrent.detach();
            ideaLiNext.after(ideaLiCurrent);
        }
        
        // Save the canvas automatically if the user has logged in and collaborators have been added
        prepareSaveCanvas();
    });
    
    /* ================================================
    Deleting ideas
    ================================================= */
    
    var ideaToDelete;
    
    function deleteIdea() {
        // If there are no ideas left
        if(ideaToDelete.prev().parent().parent().children().length === 1) {
            // Hide "Tag selected term" link
            ideaToDelete.prev().parent().parent().next().css("display", "none");
        }
        
        // Remove the list item
        ideaToDelete.closest("li").remove();
        
        // Save the canvas automatically if the user has logged in and collaborators have been added
        prepareSaveCanvas();
    }
    
    function showDeleteIdeaDialog() {
        // Show a dialog
        $("div#shadow").css("display", "block");
        $("div#dialog-delete-idea").css("display", "block");
    }
    
    // If the user clicks on "Yes" button in the Delete Comment dialog
    $("div#dialog-delete-idea #button-yes").on("click", function() {
        // Resolve the comments
        resolveComments();
        
        // Delete the idea
        deleteIdea();
        
        // Update view
        $("div#shadow").css("display", "none");
        $("div#dialog-delete-idea").css("display", "none");
    });
    
    // If the user clicks on "Cancel" button in the Delete Comment dialog
    $("div#dialog-delete-idea #button-cancel").on("click", function() {
        // Cancel
        $("div#shadow").css("display", "none");
        $("div#dialog-delete-idea").css("display", "none");
    });
    
    // If the user clicks on the "Close" button in the Delete Comment dialog
    $("div#dialog-delete-idea button.close").on("click", function() {
        // Close the Delete Comment window
        $("div#shadow").css("display", "none");
        $("div#dialog-delete-idea").css("display", "none");
    });
    
    // If the cross beside the textarea is clicked, remove that list item
    $('.card').on('click', 'span.remove', function() {
        ideaToDelete = $(this);
        
        // Remember the ID of the idea
        currentCommentsId = ideaToDelete.parent().find("div").prop("id");
        
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/check-comments.php",
            dataType: "JSON",
            data: {
                "canvas_id": canvasId,
                "idea_id": currentCommentsId
            },
            timeout: 5000,
            success: function(returnData) {
                // If the idea has comments
                if(returnData.length > 0) {
                    showDeleteIdeaDialog();
                }
                else {
                    deleteIdea();
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    });
    
    /* ================================================
    Sortable field ideas
    ================================================= */
    
    // Make items sortable in their fields and between fields
    /*
    $('.sortable').sortable({
        connectWith: '.connectedList',
        placeholder: "sort-placeholder",
        // revert: true
        
        zIndex: 300 // Or greater than any other relative/absolute/fixed elements and droppables
    });
     */
        
    /* ================================================
    Sorting and Dragging events
    ================================================= */
    
    // Every textarea in a item needs to get the right name attribute once they have been dropped in another field (so it ends up in the right place in the json file)
    /*
    // Dragging starts
    
    $(".sortable").on("sortstart", function(event, ui) {
        // WHEN WE SORT CARDS, $(this) ---> the "begining" ul with the class of .sortable
    });
    
    // Dragging ends: item dropped
    
    $(".sortable").on("sortstop", function(event, ui) {
        // get the id of the field ul (to set the name attribute of textareas)
        // # mouseleave is the right event for when we release and leave a card mouseup doesn't work properly in this case
        $('.card').on('mouseleave', 'li', function() {
            //$(selector).attr(attribute,value)
            var fieldAttr = $(this).closest('ul.item_list').attr('id');
            // $(this).find('textarea').attr('name', fieldAttr + '[]');
            $(this).find('li.added_item .expandable').attr('name', fieldAttr + '[]');
        });
        
    });
     */
        
    /* ================================================
    Update the project and date title of the canvas in the database
    ================================================= */
    
    // Update the project and date title of the canvas in the database
    function updateProjectTitleInDatabase() {
        // Declarations
        var projectTitle = $("div.form-header input.proj_title").val();
        
        // AJAX
        $.ajax({
            async: false,
            timeout: 5000,
            dataType: "text",
            type: "post",
            data: {
                "canvas_id": canvasId,
                "project_title": projectTitle,
                "current_date": currentDate
            },
            url: "php/update-project-in-database.php",
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
    }
    
    /* ================================================
    SAVING THE CANVAS:
    CLICK ON #EXPORT JSON# form button
    ================================================= */
    
    // Save the canvas
    function saveCanvas() {
        /* ----------------------------------------------
        A: Saving the canvas
        as a registered user
        ----------------------------------------------- */
        
        // PHP variables are retieved in the header of the canvas index.php as js variables -->
        var name_save_canvas = $('.form-header').find('.proj_title').val();
        // var date_save_canvas = $('.form-header').find('.proj_date').val();
        var date_save_canvas = currentDate;
        var save_canvas_obj;
        
        // If canvasOwner isn't empty
        if(canvasOwner !== "") {
            save_canvas_obj = {
                'email_save_canvas': canvasOwner,
                'name_save_canvas': name_save_canvas,
                'date_save_canvas': date_save_canvas,
                'id_save_canvas': canvasId
            };
        }
        // If this is the first time saving the canvas
        else {
            console.log("The canvas is about to be saved for the first time");
            
            save_canvas_obj = {
                'email_save_canvas': email_save_canvas,
                'name_save_canvas': name_save_canvas,
                'date_save_canvas': date_save_canvas,
                'id_save_canvas': canvasId
            };
        }
        
        var save_canvas = $.param(save_canvas_obj);
        // Post the JSON stringified object to the php file (the PHP script will save it in a .json file )
        var save_reg_url = "php/save-canvas.php";
        
        $.post(save_reg_url, { save_canvas: save_canvas }, function(data, status) {
            // If the returned data is successful, it is the $canvas_id
            var canvas_id = data;
            
            // Send this canvas_id with the next AJAX request to the php/canvas.php file and use it as the name of the JSON file to be saved
            
            /* ----------------------------------------------
            For the second AJAX request:
            
            B: Exporting the form data JSON to a file
            and save it on the server
            ----------------------------------------------- */
            
            // $('#result').text(JSON.stringify($('.canvas-form').serializeObject()));
            
            // Make the JSON object into a JSON string
            // var JSONstrObj = JSON.stringify($('.canvas-form').serializeObject());
            var JSONstrObj = JSON.stringify($('.canvas-form').serializeObject());
            var url = "php/canvas.php";
            // Post the JSON stringified object to the php file (the php script will save it in a .json file)
            // Also, send the canvas_id and use it for naming the file
            $.post(url, {
                JSONstrObj: JSONstrObj,
                canvas_id: canvas_id
            }, function(data, status) {
                console.log(
                    'Response from PHP when sending the form JSON object: \n' +
                    'data:' + data + '\n status: ' + status);
                    
                // Update the project title in the database
                updateProjectTitleInDatabase();
                
                // If the canvas is saved for the first time
                if(numberOfCollaborators === 0) {
                    // Show the Collaborators button
                    $(".form-header #collaborators-container").show();
                    
                    // Add the owner to Collaborators in the database
                    addOwnerToCollaborators();
                    
                    // Get the owner
                    getOwner();
                    
                    // Update the Collaborators table
                    updateCollaborators();
                    
                    // Update owner
                    $("p#canvas-owner").text(canvasOwner);
                }
                
                // Remember that the canvas isn't new
                canvasIsNew = false;
            }).fail(function(jqXHR) {
                console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
            });
            
        }).fail(function(jqXHR) {
            console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
        });
        
        // Prevent the card item list from reseting itself after clicking on the export button (submission). Because the type of the button is submit
        return false;
    }
    
    /* ----------------------------------------------
    Save the canvas if the user has logged in
    ----------------------------------------------- */
    
    // Prepare to save the canvas
    function prepareSaveCanvas() {
        // If the viewer of the canvas is a logged in user
        if($("input[name='username']").val() != "") {
            // Save the canvas
            saveCanvas();
        }
    }
    
    // Save the canvas on load
    // prepareSaveCanvas();
    
    /* ================================================
    Create and remove hidden copies of every list item.
    These are needed in order to export the canvas as PDF.
    ================================================= */
    
    // Create an hidden copy of every list item
    function createHiddenLiCopies() {
        // For every idea
        $("li.added_item").each(function() {
            // Declarations
            var oldLiName = $(this).find(".expandable").attr("name");
            var oldLiText = $(this).find(".expandable").text();
            var newLi = "<li class='hidden'><textarea name='" + oldLiName + "'>" + oldLiText + "</textarea></li>";
            
            // Append the hidden copy
            $(this).after(newLi);
        });
    }
    
    // Remove the hidden copies of every list item
    function removeHiddenLiCopies() {
        window.setTimeout(function() {
            $("li.hidden").remove();
        }, 1000);
    }
    
    /* ================================================
    HANDLING CLICK ON: Email This Canvas BUTTON
    ================================================= */
    
    // "Email This Canvas" button
    $(".canvas-form").on("click", ".share_canvas", function(event) {
        // Prevent default operation
        event.preventDefault();
        
        // Create an hidden copy of every list item
        createHiddenLiCopies();
        
        // Remove the hidden copies of every list item
        removeHiddenLiCopies();
        
        $(".share_canvas_email").slideToggle(1000, function() {
            // Save the PDF as file
            $.post("mpdf/canvas-save.php", function(data, status) {});
        });
    });
    
    // "Send" button
    $(".canvas-form").on("click", ".share_canvas_send", function() {
        // Create an hidden copy of every list item
        createHiddenLiCopies();
        
        // Remove the hidden copies of every list item
        removeHiddenLiCopies();
        
        var share_email = $(".share_canvas_email").find("input").serialize();
        
        // This sends a serialized array share_email to the PHP file. Example: the value of this array will be: share-canvas-email=eternalflame.f%40gmail.com
        $.post("php/share-canvas.php", {
            share_email: share_email
        }, function(data, status) {
            // Canvas successfully shared
            if(data == 200) {
                $(".canvas-form").find(".imp-exp-btn ").append("<div class='save-canvas-feedback'><p><span class='glyphicon glyphicon-ok' aria-hidden='true'></span>Your canvas has been shared by email</p></div>");
            }
            // Canvas could not be shared
            else { 
                $(".canvas-form").find(".imp-exp-btn ").append("<div class='save-canvas-feedback'><p><span class='glyphicon glyphicon-ok' aria-hidden='true'></span>Your canvas could not be shared</p></div>");
            }
        });
        
        // Slide up the .share_canvas_email area
        $(".share_canvas_email").slideUp();
    });
    
    /* ================================================
    HANDLING CLICK ON: Download as PDF
    ================================================= */
    
    // If the user clicks on "Download as PDF"
    $(".canvas-form").on("click", ".pdf_exp", function() {
        // Create an hidden copy of every list item
        createHiddenLiCopies();
        
        // Remove the hidden copies of every list item
        removeHiddenLiCopies();
    });
    
    /* ================================================
    HANDLING CLICK ON: Publish This Canvas BUTTON
    ================================================= */
    
    // HANDLING CLICK ON: Publish This Canvas BUTTON
    $("button.publish_canvas").on("click", function(event) {
        // Prevent default operation
        event.preventDefault();
        
        // AJAX
        $.ajax({
            type: "POST",
            url: "php/toggle-public.php",
            dataType: "TEXT",
            data: {
                "canvas_id": canvasId
            },
            timeout: 5000,
            success: function(returnData) {
                if(returnData === "0") {
                    $("button.publish_canvas").text("Publish for viewing/commenting");
                }
                else if(returnData === "1") {
                    $("button.publish_canvas").text("Unpublish for viewing/commenting");
                }
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        });
        
        return false;
    });
    
    /* ================================================
    Receiving remote updates automatically
    ================================================= */
    
    // For every 7 seconds
    window.setInterval(function() {
        // If collaborators have been added and the canvas isn't new
        if(numberOfCollaborators > 1 && canvasIsNew === false) {
            console.log("Importing canvas!");
            
            // Refresh
            importCanvasAgain();
            updateCollaborators();
            checkPublic();
            
            // If the comments window is open
            if($("div#comments-window").css("display") !== "none") {
                // Get comments
                getComments();
            }
        }
    }, 7000);
    
    /* ================================================
    Controlling the height of divs dynamically
    ================================================= */
    
    // Call this function after adding a new item and importing
    /*
    // $( window ).width(); ->Returns width of browser viewport
    function fixHeights() {
        // Returns width of browser viewport
        var screenSize = $(window).width();
        //the longest card of the group 1 .masonry-layout7-5
        var longest_1 = $('.masonry-layout7-5').height();
        //the longest card of the group 2 .masonry-layout7-5
        var longest_2 = $('.masonry-layout4').height();
        
        // --- 5 COL Range ----
        if(screenSize >= 1139) {
            // inforcing a fixed height ".height(longest_1/2)" will create some layout issues when we try to add new items the add item area will go outside the box and the heights don't increase naturally
            
            // card group 1:
            // $('.field_05,.field_11, .field_07').css('min-height', longest_1 - longest_1 * 5 / 100);
            // $('.field_06,.field_08, .field_12').css('min-height', longest_1 + longest_1 * 5 / 100);
            // $('.field_01, .field_02').css('min-height', longest_1 * 2 + longest_1 * 1 / 100);
            
            // card group 2:
            // $('.field_03, .field_09, .field_10, .field_04').css('min-height', longest_2 * 2 - longest_2 * 20 / 100);
            $('.field_05,.field_11, .field_07').css('min-height', longest_1 - longest_1 * 20 / 100);
            $('.field_06,.field_08, .field_12').css('min-height', longest_1 - longest_1 * 20 / 100);
            $('.field_01, .field_02').css('min-height', longest_1 + longest_1 * 40 / 100);
            
            // card group 2:
            $('.field_03, .field_09, .field_10, .field_04').css('min-height', longest_2 - longest_2 * 10 / 100);
        }
        //  4 COL Range //
        else if(screenSize >= 977 && screenSize <= 1138) {
            // card group 1:
            // row 1
            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height', longest_1 + longest_2 * 20 / 100);
            // row 2
            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height', longest_1 + longest_2 * 20 / 100);
            
            // card group 2:
            // row 3
            $('.field_03, .field_09, .field_10, .field_04').css('min-height', longest_2 * 2 - longest_2 * 20 / 100);
            
        } else if(screenSize >= 920 && screenSize <= 976) {
            // card group 1:
            // row 1
            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height', longest_1 + longest_2 * 20 / 100);
            // row 2
            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height', longest_1 + longest_2 * 20 / 100);
            
            // card group 2:
            // row 3
            $('.field_03, .field_09, .field_10, .field_04').css('min-height', longest_2 * 2 - longest_2 * 20 / 100);
        } else if(screenSize >= 485 && screenSize <= 919) {
            // else if(500 <= screenSize < 920) {
            
            // card group 1:
            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height', longest_1 * 80 / 100);
            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height', longest_1 * 80 / 100);
            
            // card group 2:
            $('.field_03, .field_09, .field_10, .field_04').css('min-height', longest_2 * 80 / 100);
            
            // --- 1 COL Range ----
        } else {
            // card group 1:
            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height', longest_1 * 20 / 100);
            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height', longest_1 * 20 / 100);
            
            // card group 2:
            $('.field_03, .field_09, .field_10, .field_04').css('min-height', longest_2 * 20 / 100);
        }
    }
    
    function fixHeights() {
        // Returns width of browser viewport
        var screenSize = $(window).width();
        
        var field01 = $("div.field_01");
        var field02 = $("div.field_02");
        var field03 = $("div.field_03");
        var field04 = $("div.field_04");
        var field05 = $("div.field_05");
        var field06 = $("div.field_06");
        var field07 = $("div.field_07");
        var field08 = $("div.field_08");
        var field09 = $("div.field_09");
        
        // Set the height of every field
        var heightOfField01 = field01.height();
        var heightOfField03 = field03.height();
        var heightOfField04 = field04.height();
        var heightOfField03And04 = field03.height() + field04.height();
        var heightOfField09 = field09.height();
        var heightOfField05 = field05.height();
        var heightOfField06 = field06.height();
        var heightOfField05And06 = field05.height() + field06.height();
        var heightOfField02 = field02.height();
        
        // --- 5 COL Range ---
        if(screenSize >= 935) {
            var longestInGroup1 = Math.max(heightOfField01, heightOfField03, heightOfField04, heightOfField03And04, heightOfField09, heightOfField05, heightOfField06, heightOfField05And06, heightOfField02);
            
            console.log(longestInGroup1);
            
            // Field group 1
            switch(longestInGroup1) {
                case heightOfField01:
                    $(".field_04").css("min-height", longestInGroup1 + 10);
                    $(".field_09").css("min-height", longestInGroup1 + 448);
                    $(".field_06").css("min-height", longestInGroup1 + 10);
                    $(".field_02").css("min-height", longestInGroup1 + 448);
                    break;
                case heightOfField03:
                    // Code goes here
                    break;
                case heightOfField04:
                    // Code goes here
                    break;
                case heightOfField03And04:
                    // Code goes here
                    break;
                case heightOfField09:
                    // Code goes here
                    break;
                case heightOfField05:
                    // Code goes here
                    break;
                case heightOfField06:
                    // Code goes here
                    break;
                case heightOfField05And06:
                    // Code goes here
                    break;
                case heightOfField02:
                    // Code goes here
                    break;
                default:
                    break;
            }
        }
        
        // --- 4 COL Range ---
        else if(screenSize >= 935 && screenSize <= 991) {
            // Field group 1
            // Code goes here
            
            // Field group 2
            // Code goes here
        }
        
        else if(screenSize >= 992 && screenSize <= 1153) {
            // Field group 1
            // Code goes here
            
            // Field group 2
            // Code goes here
        }
        
        // --- 2 COL Range ---
        else if(screenSize >= 500 && screenSize <= 934) {
            // Field group 1
            // Code goes here
            
            // Field group 2
            // Code goes here
        }
        
        // --- 2-5 COL Range ---
        if(screenSize >= 500) {
            var longestInGroup2;
            
            // Field group 2
            // Determine the longest Field in group 2
            if(field07.height() < field08.height()) {
                longestInGroup2 = field08;
            }
            else {
                longestInGroup2 = field07;
            }
            
            if(longestInGroup2 === field07) {
                $(".field_08").css("min-height", longestInGroup2.height() + 10);
            }
            else {
                $(".field_07").css("min-height", longestInGroup2.height() + 10);
            }
        }
        
        // --- 1 COL Range ---
        // Field group 1
        // Code goes here
        
        // Field group 2
        // Code goes here
    }
     */
        
    // ResizeSensor
    /*
    new ResizeSensor($(".field_01, .field_02, .field_03, .field_04, .field_05, .field_06, .field_07, .field_08, .field_09"), function() {
        // fixHeights();
    });
     */
});