@(loggedInUser: common.User, breadcrumbs: String, localhost: Boolean, study: common.Study, studyResultsCount: Integer)

@views.html.gui.main(loggedInUser, breadcrumbs, localhost){

<div id="studyDescription" class="panel panel-default" hidden>
    <div class="panel-body">
        <div class="text">@study.getDescription()</div>
        <p class="showAll gradient"><a href="#" class="button">Show all</a></p>
    </div>
</div>

<!-- Toolbar -->
<div id="studyToolbar" class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button id="runStudy" type="button" class="btn btn-study"
                data-toggle="tooltip" data-placement="bottom"
                title="Runs the study as a JATOS worker in the default batch">
            Run <span class="glyphicon glyphicon-play"></span>
        </button>
        <button id="studyResults" type="button" class="btn btn-study"
                data-toggle="tooltip" data-placement="bottom"
                title="Shows study results">
            Results <span class="badge" data-toggle="tooltip" data-placement="bottom"
                          title="Number of study results of this study">@studyResultsCount</span>
        </button>
        <button id="studyPropertiesButton" type="button" class="btn btn-study"
                data-toggle="tooltip" data-placement="bottom"
                title="Edit this study's properties">
            Properties <span class="glyphicon glyphicon-option-vertical"></span>
        </button>
        <button id="exportStudy" type="button" class="btn btn-study"
                data-toggle="tooltip" data-placement="bottom"
                title="Export this study to your local file system (including its components and study assets but without its results)">
            Export <span class="glyphicon glyphicon-export"></span>
        </button>
        <div class="btn-group">
            <button type="button" class="btn btn-study dropdown-toggle"
                    data-toggle="dropdown">
                More <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li data-toggle="tooltip" data-placement="bottom"
                    title="Clone this study without its results">
                    <a id="cloneStudy" href="#">
                        <span class="glyphicon glyphicon-duplicate"></span>
                        Clone
                    </a>
                </li>
                <li data-toggle="tooltip" data-placement="bottom"
                    title="Change who is member of this study">
                    <a id="changeMemberUsersLink" href="#">
                        <span class="glyphicon glyphicon-user"></span>
                        Change&nbsp;Users
                    </a>
                </li>
                <li data-toggle="tooltip" data-placement="bottom"
                    title="Show this study's log">
                    <a id="showStudyLog" href="#">
                        <span class="glyphicon glyphicon-book"></span>
                        Study Log
                    </a>
                </li>
                <li class="divider"></li>
                <li data-toggle="tooltip" data-placement="bottom"
                    title="Delete this study including its components, assets and results">
                    <a id="removeStudy" href="#">
                        <span class="glyphicon glyphicon-remove"></span>
                        Delete
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- Content and tooltip of lock button is set later in JS -->
    <div class="btn-group">
        <button id="lockStudy" type="button" class="btn btn-study"
                data-toggle="tooltip" data-placement="bottom"
                title="">
            @if(study.isLocked()) {Locked} else {Unlocked}
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-component dropdown-toggle"
                data-toggle="dropdown">
            Components <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li data-toggle="tooltip" data-placement="bottom" title="Create a new component">
                <a id="createComponentLink" href="#">
                    <span class="glyphicon glyphicon-plus"></span>
                    New
                </a>
            </li>
            <input id="importComponentBrowser" type="file"
                   name="@models.gui.ComponentProperties.COMPONENT" style="display: none;">
            <li data-toggle="tooltip" data-placement="bottom"
                title="Create a new component from imported properties">
                <a id="importComponentButton" href="#">
                    <span class="glyphicon glyphicon-import"></span>
                    Import Properties
                </a>
            </li>
        </ul>
    </div>
    <button id="workerAndBatchManagerButton" type="button" class="btn btn-batch"
            data-toggle="tooltip" data-placement="bottom"
            title="Open Worker & Batch Manager to manage your batches and get links for workers">
        Worker & Batch Manager
    </button>
</div>

<!-- Components Table -->
<table id="componentsTable" class="table table-hover table-row-border"
       cellpadding="0" cellspacing="0" border="0" width="100%">
    <thead>
    <tr>
        <th data-toggle="tooltip" data-placement="bottom"
            title="The number in the button shows the position in this study - Use the button to drag and drop the component to a new position">
            <span class="glyphicon glyphicon-sort"></span></th>
        <th data-toggle="tooltip" data-placement="bottom"
            title="Inactive components won't show up in the next run">Active
        </th>
        <th data-toggle="tooltip" data-placement="bottom" title="ID of this component">ID</th>
        <th data-toggle="tooltip" data-placement="bottom" title="Title of this component">Title</th>
        <th></th>
    </tr>
    </thead>
    <tbody class="sortable">
    </tbody>
</table>

<!-- Template for active button in Component's row -->
<div id="componentActiveButtonDiv" style="display: none">
    <button type="button" class="btn btn-default activeButton"
            data-toggle="tooltip" data-placement="bottom" title="">
        <span class="glyphicon glyphicon-ok"></span>
    </button>
</div>

<!-- Template for drag button in Component's row -->
<div id="componentDragButtonDiv" style="display: none">
    <button type="button" class="btn btn-component dragButton"
            data-toggle="tooltip" data-placement="bottom" title="">
    </button>
</div>

<!-- Template for button toolbar in Component's row -->
<div id="componentToolbarDiv" style="display: none">
    <div class="noWrapBtnGroup btn-group">
        <button type="button" class="runComponent btn btn-component"
                data-toggle="tooltip" data-placement="bottom"
                title="Runs only this component as a JATOS worker in the default batch">
            Run <span class="glyphicon glyphicon-play"></span>
        </button>
        <button type="button" class="componentResults btn btn-component"
                data-toggle="tooltip" data-placement="bottom"
                title="Shows only the results of this component">
            Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                          title="Number of component results only of this component"></span>
        </button>
        <button type="button" class="componentPropertiesButton btn btn-component"
                data-toggle="tooltip" data-placement="bottom"
                title="Edit this component's properties">
            Properties <span class="glyphicon glyphicon-option-vertical"></span>
        </button>
        <div class="btn-group">
            <button type="button" class="btn btn-component dropdown-toggle"
                    data-toggle="dropdown">
                More <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li data-toggle="tooltip" data-placement="bottom"
                    title="Export this component's properties to the local file system (without its assets or results)">
                    <a class="exportComponent" href="#">
                        <span class="glyphicon glyphicon-export"></span>
                        Export Properties
                    </a>
                </li>
                <li data-toggle="tooltip" data-placement="bottom"
                    title="Clone this component without its results and assets">
                    <a class="cloneComponent" href="#">
                        <span class="glyphicon glyphicon-duplicate"></span>
                        Clone
                    </a>
                </li>
                <li class="divider"></li>
                <li data-toggle="tooltip" data-placement="bottom"
                    title="Deletes this component without its results and assets">
                    <a class="removeComponent" href="#">
                        <span class="glyphicon glyphicon-remove"></span>
                        Delete
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

@views.html.gui.study.changeMemberUsersModal(loggedInUser)
@views.html.gui.study.componentPropertiesModal(study)
@views.html.gui.study.studyLogModal(study)

<script type="text/javascript">
var studyId = @study.getId();
var studyLocked = @study.isLocked();
$(document).ready(setLockButton(studyLocked));

var componentsTable;
$(document).ready(function() {
    // Don't remove pageLength - default is only 10 and it would display only 10 components
    componentsTable = $('#componentsTable').DataTable({
        "ajax": {
            "type": "GET",
            "url" : '@controllers.gui.routes.Studies.tableDataByStudy(study.getId())',
            "error": function (err) {
                if (err.responseText) {
                    showError(err.responseText);
                } else {
                    showError("Cannot read components data.");
                }
            }
        },
        "pageLength": 100,
        "dom": 't',
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": "_all"
        } ],
        "columns": [
            {
                "class": 'componentDragButton',
                "data": null,
                "defaultContent": '',
                "width": "1px",
                "render": function (data, type, full, meta) {
                    var button = $('#componentDragButtonDiv button:first-child').clone();
                    button.html(button.html() + data.position);
                    button.attr('title', "Use this button to drag and drop this component to a new position");
                    return button.prop('outerHTML');
                }
            },
            {
                "class": 'activeComponent',
                "data": null,
                "defaultContent": '',
                "width": "1px",
                "render": function (data, type, full, meta) {
                    var button = $('#componentActiveButtonDiv button:first-child').clone();
                    setButtonActive(button, data.active);
                    return button.prop('outerHTML');
                }
            },
            {
                "class": "componentId",
                "data": "id",
                "width": "1px"
            },
            {
                "class": "componentTitle",
                "data": "title"
            },
            {
                "class": "toolbar",
                "data": null,
                "defaultContent": '',
                "width": "1%",
                "render": function (data, type, full, meta) {
                    var toolbar = $('#componentToolbarDiv').clone().show();
                    $(toolbar).removeAttr('id');
                    $(toolbar).find('.resultsBadge').text(data.resultCount);
                    return toolbar.html();
                }
            }
        ],
        "createdRow": function(row, data, index) {
            setRowActive($(row), data.active);
        },
        "order" : [],
        "language": {
            "emptyTable": "No components yet - go to 'Components' and then 'New', to add new components"
        }
    });

    // Adjust the width of every component's toolbar to the widest one
    componentsTable.on('column-sizing.dt', function (e, settings) {
        // Newly created components of an empty study have a negative width (no
        // clue why) - so set the width only if I have at least 2 components
        if ($(".componentResults").length > 1) {
            setButtonWidthToMax(".componentResults");
        }
    });

    $('#componentsTable tbody').on('click', '.runComponent', function() {
        window.location.href = "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/"
            + getComponentId(this) + "/run";
    });

    $('#componentsTable tbody').on('click', '.componentResults', function() {
        window.location.href = "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/"
            + getComponentId(this) + "/results";
    });

    $('#componentsTable tbody').on('click', '.exportComponent', function() {
        window.location.href = "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/"
            + getComponentId(this) + "/export";
    });

    $('#componentsTable tbody').on('click', '.cloneComponent', function() {
        $.ajax({
            type: 'GET',
            url: "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/" + getComponentId(this) + "/clone",
            success: function(result) {
                showMessages(JSON.parse(result));
                componentsTable.ajax.reload();
                fillSidebar();
            },
            error : function(err) {
                showError(err.responseText);
            }
        });
    });

    $('#componentsTable tbody').on('click', '.removeComponent', function() {
        var element = this;
        var componentId = getComponentId(this);
        if (!componentId) {return} // should never happen
        var componentTitle = getComponentTitle(this);
        var title = "Confirm Delete";
        var htmlText = "<p>You are about to delete component \"" + componentTitle
            + "\" (ID " + componentId + ") <b>with all its results</b>.</p>"
            + "<p><b>This cannot be undone.</b> Do you want to proceed?</p>";
        askConfirmation(title, htmlText, 'Delete', 'btn-component', function() {
            $.ajax({
                url : "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/" + componentId,
                type : 'DELETE',
                success : function(result) {
                    showMessages(JSON.parse(result));
                    componentsTable.ajax.reload();
                    fillSidebar();
                },
                error : function(err) {
                    showError(err.responseText);
                }
            });
        });
    });

    $('#componentsTable tbody').on('click', '.activeButton', function() {
        var button = this;
        var tr = $(this).closest('tr');
        var componentId = getComponentId(this);
        var active = $(this).hasClass('activeComponent');
        $.ajax({
            url : "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/" + componentId
                    + "/properties/active?active=" + !active,
            type : "POST",
            success: function(active) {
                setButtonActive($(button), active);
                setRowActive(tr, active);
            },
            error : function(err) {
                showError(err.responseText);
            }
        });
    });

    function setRowActive(tr, active) {
        if (active) {
            tr.find('.btn, .componentId, .componentTitle').removeClass("grayout");
        } else {
            tr.find('.btn, .componentId, .componentTitle').addClass("grayout");
        }
    }

    function setButtonActive(button, active) {
        if (active) {
            button.addClass('activeComponent');
            button.removeClass('btn-default');
            button.addClass('btn-component');
            button.attr('title', "Click to deactivate this component");
            button.html($(button.html())
                    .removeClass('glyphicon-remove')
                    .addClass('glyphicon-ok').prop('outerHTML'));
        } else {
            button.removeClass('activeComponent');
            button.removeClass('btn-component');
            button.addClass('btn-default');
            button.attr('title', "Click to activate this component");
            button.html($(button.html())
                    .removeClass('glyphicon-ok')
                    .addClass('glyphicon-remove').prop('outerHTML'));
        }
    }

    $("tbody.sortable").sortable({
        items: "> tr",
        handle: '.dragButton',
        // Interferes with dragging - need to overwrite since default it button
        cancel: '',
        helper: function(e, tr) {
            var $originals = tr.children();
            var $helper = tr.clone();
            $helper.children().each(function(index) {
                // Set helper cell sizes to match the original sizes
                $(this).width($originals.eq(index).width());
            });
            return $helper;
        },
        zIndex: 9999,
    });

});

$("tbody.sortable").on("sortstop", function(event, ui) {
    var componentId = getComponentId(ui.item);
    var newPosition = ui.item.index() + 1;
    $.ajax({
        url : "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() + "/componentOrder"
                + "?componentId=" + componentId + "&newPosition=" + newPosition,
        type : "POST",
        success : function(response) {
            componentsTable.ajax.reload();
            fillSidebar();
        },
        error : function(err) {
            showError(err.responseText);
        }
    });
});

function getComponentId(element) {
    var tr = $(element).closest('tr');
    var rowData = componentsTable.row(tr).data();
    return rowData.id;
}

function getComponentTitle(element) {
    var tr = $(element).closest('tr');
    var rowData = componentsTable.row(tr).data();
    return rowData.title;
}

function ajaxChangeComponentOrder(componentId, direction, tr) {
    $.ajax({
        url : "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() + "/changeComponentOrder"
                + "?componentId=" + componentId + "&direction=" + direction,
        type : "POST",
        success : function(response) {
            componentsTable.ajax.reload();
            fillSidebar();
        },
        error : function(err) {
            showError(err.responseText);
        }
    });
}

$('#studyToolbar').on('click', '#lockStudy', function() {
    $.ajax({
        url : "@controllers.gui.routes.Studies.toggleLock(study.getId())",
        type : "POST",
        success : function(response) {
            studyLocked = response === 'true';
            setLockButton(studyLocked);
            fillSidebar();
        },
        error : function(err) {
            showError(err.responseText);
        }
    });
});

function setLockButton(locked) {
    if (locked) {
        $('#lockStudy').html('Locked');
        $('#lockStudy').addClass('btn-warning');
        $('#lockStudy').removeClass('btn-study');
        $("#lockStudy").attr("title", "Press to unlock this study and allow changes.");
    } else {
        $('#lockStudy').html('Unlocked');
        $('#lockStudy').addClass('btn-study');
        $('#lockStudy').removeClass('btn-warning');
        $("#lockStudy").attr("title", "Press to lock this study and prohibit changes.");
    }
}

$('#studyToolbar').on('click', '#runStudy', function() {
    window.location.href = "@controllers.gui.routes.Studies.runStudy(study.getId())";
});

$('#studyToolbar').on('click', '#studyResults', function() {
    window.location.href = "@controllers.gui.routes.StudyResults.studysStudyResults(study.getId())";
});

$('#studyToolbar').on('click', '#workerAndBatchManagerButton', function() {
    window.location.href = "@controllers.gui.routes.Batches.workerAndBatchManager(study.getId())";
});

$('#studyToolbar').on('click', '#exportStudy', function() {
    showWaitingModal();
    download('@controllers.gui.routes.ImportExport.exportStudy(study.getId())');
});

function download(url) {
    // From https://stackoverflow.com/a/23797348/1278769
    // Doesn't use jQuery

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        if (this.status === 200) {
            filename = getFilenameFromContentDispositionHeader(xhr);

            var type = xhr.getResponseHeader('Content-Type');
            var blob;
            if (typeof File === 'function') {
                try {
                    blob = new File([this.response], filename, { type: type });
                } catch (e) { /* Edge */ }
            }
            if (typeof blob === 'undefined') {
                blob = new Blob([this.response], { type: type });
            }

            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                window.navigator.msSaveBlob(blob, filename);
            } else {
                var URL = window.URL || window.webkitURL;
                var downloadUrl = URL.createObjectURL(blob);

                if (filename) {
                    // use HTML5 a[download] attribute to specify filename
                    var a = document.createElement("a");
                    // safari doesn't support this yet
                    if (typeof a.download === 'undefined') {
                        window.location = downloadUrl;
                    } else {
                        a.href = downloadUrl;
                        a.download = filename;
                        document.body.appendChild(a);
                        a.click();
                    }
                } else {
                    window.location = downloadUrl;
                }

                setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
            }
        } else {
            showError("Download failed (" + this.statusText + ")");
        }
        hideWaitingModal();
    };

    xhr.onerror = function (err) {
        hideWaitingModal();
        showError(err.responseText);
    };

    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.send();
}

$('#studyToolbar').on('click', '#removeStudy', function() {
    var title = "Confirm Delete";
    var htmlText = "<p>You are about to delete study \"@study.getTitle()\" "
        + "(ID @study.getId()) "
        + "<b>with all its components, results, and the entire study assets directory, "
        + "including the HTML files</b>.</p>"
        + "<p><b>This cannot be undone.</b> Do you want to proceed?</p>";
    askConfirmation(title, htmlText, 'Delete', 'btn-primary', function() {
        $.ajax({
            url : '@controllers.gui.routes.Studies.remove(study.getId())',
            type : 'DELETE',
            success : function(result) {
                window.location.replace('@controllers.gui.routes.Home.home()');
            },
            error : function(err) {
                showError(err.responseText);
            }
        });
    });
});

$('#studyToolbar').on('click', '#cloneStudy', function() {
    $.ajax({
        url : '@controllers.gui.routes.Studies.cloneStudy(study.getId())',
        type : 'GET',
        success : function(response) {
            fillSidebar();
            var msg = 'Created clone "' + response.title + '". ' +
                '<a href="@{general.common.Common.getPlayHttpContext()}jatos/' + response.id + '">Go to this study.</a>';
            showInfo(msg, null, true);
        },
        error : function(err) {
            showError(err.responseText);
        }
    });
});

$('#studyToolbar').on('click', '#importComponentButton', function() {
    $('#importComponentBrowser').trigger("click");
});

$('#studyToolbar').on('change', '#importComponentBrowser', function() {
    var data = new FormData();
    var files = $('#importComponentBrowser').prop('files');
    $.each(files , function(index, value){
        data.append('@models.gui.ComponentProperties.COMPONENT', value);
    });
    $.ajax({
        url: '@controllers.gui.routes.ImportExport.importComponent(study.getId())',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: importComponentConfirm,
        error : function(err) {
            showError(err.responseText);
        }
    });
});

function importComponentConfirm(response) {
    if (response.componentExists) {
        var title = "Component already exists";
        var htmlText = "<p>It seems a component \"" + response.componentTitle
            + "\" already exists in this study.</p>"
            + "<p>Do you want to overwrite this component?</p>";
        askConfirmation(title, htmlText, 'Overwrite', 'btn-component', function() {
            postComponentImportConfirm();
        });
    } else {
        var title = "Create component from imported properties";
        var htmlText = "<p>You are about to create the component \""
            + response.componentTitle + "\".</p>"
            + "<p>Do you want to proceed?</p>";
        askConfirmation(title, htmlText, 'Create', 'btn-component', function() {
            postComponentImportConfirm();
        });
    }
}

function postComponentImportConfirm() {
    $.ajax({
        type: 'POST',
        url: '@controllers.gui.routes.ImportExport.importComponentConfirmed(study.getId())',
        success: function(result) {
            componentsTable.ajax.reload();
            showMessages(JSON.parse(result));
            fillSidebar();
        },
        error : function(err) {
            showError(err.responseText);
        }
    });
}

showStudyDescription();

function showStudyDescription() {
    var studyDescription = $('#studyDescription .text').text();
    // If empty hide
    if (!/\S/.test(studyDescription)) {
        $('#studyDescription').hide();
        return
    }

    var studyDescriptionHtml = new showdown.Converter().makeHtml(studyDescription);
    $('#studyDescription .text').html(studyDescriptionHtml);
    $('#studyDescription').show();

    var longDescription = $('#studyDescription .panel-body').innerHeight() > $('#studyDescription').height()
    if (longDescription) {
        $('#studyDescription .showAll').show();
        $('#studyDescription .showAll').addClass("gradient");
    } else {
        $('#studyDescription .showAll').hide();
    }
}

// Toggle study description with animation (https://css-tricks.com/text-fade-read-more/)
$("#studyDescription .showAll .button").on("click", function() {
    var button = $('#studyDescription .showAll .button');

    var expanded = $('#studyDescription').hasClass("expanded");
    if ($('#studyDescription').hasClass("expanded")) {
        $('#studyDescription').animate({
            "height": 120 // Same height in CSS
        });
        $('#studyDescription .showAll').addClass("gradient");
        button.text("Show more");

    } else {
        // Measure how tall inside should be by adding together heights of all inside paragraphs
        totalHeight = 0
        $('#studyDescription .text').each(function() {
            totalHeight += $(this).outerHeight();
        });

        $('#studyDescription').css({
            // Set height to prevent instant jumpdown when max height is removed
            "height": $('#studyDescription').height(),
            "max-height": 9999
        }).animate({
            "height": totalHeight + 70
        });

        // fade out read-more
        button.text("Show less");
        $('#studyDescription .showAll').removeClass("gradient");
    }

    $('#studyDescription').toggleClass("expanded")

    // Prevent jump-down
    return false;
});


</script>

}