Pasted

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="upload/ace.js" type="text/javascript" charset="utf-8"></script>
  <title>Editor</title>
  <style type="text/css" media="screen">
    body {
        overflow: hidden;
    }
    #sidebar {
        margin: 0;
        font-family: arial;
        position: absolute;
        left: 0;
        right: 90%;
        top: 0;
        bottom: 0;
        background-color: #111;
        color: #DDD;
    }
    #sidebar input, #sidebar button{
        display: block;
    }
    #editorhead {
        margin: 0;
        padding: 0 10px;
        position: absolute;
        top: 0;
        height: 30px;
        line-height: 30px;
        left: 10%;
        right: 0;
        background-color: #222;
        font-family: arial;
        color: #FFF;
    }
    #sign-out {
        margin: 0;
        padding: 0 10px;
        position: absolute;
        top: 0;
        right: 0;
    }
    #editor { 
        margin: 0;
        position: absolute;
        top: 30px;
        bottom: 0;
        left: 10%;
        right: 0;
    }
  </style>
</head>
<body>
<?php
if (isset($_SESSION["LoggedIn"]) && $_SESSION["LoggedIn"]) {
?>
<div id="sidebar">
<?php
    echo 'File dialog: <br>';
    $files = scandir(getcwd());
    echo '<form method="post" id="fileselector">';
    foreach( $files as $file ){
        if ($file == "index.php") continue;
        if(substr($file, 0, 1) == "." || substr($file, 0, 1) == ".." || is_dir(getcwd() . "/" . $file))
        {
            continue;
        }
        echo '<button type="submit" value="' . $file . '" name="filetoopen">';
        echo $file;
        echo '</button>';
    }
    echo '</form>';
    
    echo '</p>';
    echo 'File actions: <br>';
    echo '<input type="hidden" value="'.$default.'" id="currentfile">';
    echo '<button type="submit" id="file-save">Save</button><br>';
    echo '<button type="submit" id="file-saveas">Save As</button><br>';
    echo '<button type="submit" id="file-new">New</button><br>';
    echo '<button type="submit" id="file-delete">Delete</button><br>';
 
    echo 'Theme: ';
    echo "<select id='theme' size='1'>";
    echo "<option value='ambiance'>Ambiance Dark</option>";
    echo "<option value='chaos'>Chaos Dark</option>";
    echo "<option value='cobalt'>Cobalt Dark</option>";
    echo "<option value='kr_theme'>krTheme Dark</option>";
    echo "<option value='monokai' selected>Monokai Dark</option>";
    echo "<option value='merbivore'>Merbivore Dark</option>";
    echo "<option value='mono_industrial'>Mono Industrial Dark</option>";
    echo "<option value='terminal'>Terminal Dark</option>";
    echo "<option value='twilight'>Twilight Dark</option>";
    echo "<option value='vibrant_ink'>Vibrant Ink Dark</option>";
    echo "<option value='xcode'>XCode Bright</option>";
    echo "<option value='kuroir'>Kuroir Bright</option>";
    echo "<option value='eclipse'>Eclipse Bright</option>";
    echo "<option value='clouds'>Clouds Bright</option>";
    echo "<option value='dawn'>Dawn Bright</option>";
    echo "</select>";
 
    echo '<br>Font size: ';
    echo "<select id='fontsize' size='1'>";
    echo "<option value='8px'>8px</option>";
    echo "<option value='9px'>9px</option>";
    echo "<option value='10px'>10px</option>";
    echo "<option value='11px'>11px</option>";
    echo "<option value='12px' selected>12px</option>";
    echo "<option value='13px'>13px</option>";
    echo "<option value='14px'>14px</option>";
    echo "<option value='15px'>15px</option>";
    echo "<option value='16px'>16px</option>";
    echo "<option value='17px'>17px</option>";
    echo "<option value='18px'>18px</option>";
    echo "<option value='19px'>19px</option>";
    echo "<option value='20px'>20px</option>";
    echo "</select>";
 
    echo '<br>Split: ';
    echo "<select id='split' size='1'>";
    echo "<option value='none'>None</option>";
    echo "<option value='below'>Below</option>";
    echo "<option value='beside'>Beside</option>";
    echo "</select>";
?>
</div>
 
<div id="editorhead">
    <span id="filename">Loading...</span>
    <span id="codelanguage"></span>
</div>
<form method="post">
    <button type="submit" name="event" value="sign-out" id="sign-out">Sign out</button>
</form>
    
<pre id="editor" style="width: 90%">
</pre>
    
<script>
var editor = ace.edit('editor');
editor.setTheme('ace/theme/twilight');
//editor.getSession().setMode('ace/mode/php');
    document.addEventListener("keydown", function(e) {
        if (e.keyCode == 115 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey )) {
            e.preventDefault();
            var filename = $('#currentfile').val();
                save(filename);
        }
 
    }, false);
    document.addEventListener("keydown", function(e) {
        if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey ) && e.shiftKey) {
            e.preventDefault();
            var filename = prompt("Save file as:","name.format");
            if (filename != null){
                save(filename);
            }
        }
    }, false);
    document.addEventListener("keydown", function(e) {
        if (e.keyCode == 110 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
            e.preventDefault();
            var filename = prompt("Please enter the filename","name.format");
            if (filename != null){
                create(filename);
            }
        }
    }, false);
editor.on('input', function() {
    currentValue = editor.getValue();
        
    if (savedValue != currentValue) {
        if ($('#filename').text().indexOf('*') == -1) {
            $('#filename').append('*');
            $('#filename').css('color', 'gold');
        }
    }
    else { 
        filename = $('#filename').text().replace('*', '');
        $('#filename').text(filename)
        $('#filename').css('color', '#FFF');
    }
});
</script>
 
 
<script>
$(document).ready(function(){ //after the document loaded
    var defaultfile = $('#currentfile').val(); //load default file for edit
    open(defaultfile);
 
    $(document).on('change', '#theme', function(e){
        e.preventDefault();
        editor.setTheme('ace/theme/' + $(this).val());
    });
 
    $(document).on('change', '#fontsize', function(e){
        e.preventDefault();
        var filename = $(this).val();
        document.getElementById('editor').style.fontSize=filename;
    });
 
    /* Open file event */
    $(document).on('click', '#fileselector button', function(e){
        e.preventDefault(); //prevent the form submit, so the page won't reload
        var filename = $(this).val(); //reads the file name, from the button's value
        open(filename);
    });
    
    /* Save file event */
    $(document).on('click', '#file-save', function(e){
        e.preventDefault();
        
        var filename = $('#currentfile').val();
        save(filename);
    });
 
    /* Save As file events */
    $(document).on('click', '#file-saveas', function(e){
        e.preventDefault();
        
        var filename = prompt("Save file as:","name.format");
        if (filename != null){
            save(filename);
        }
    });
    
    /* New file event */
    $(document).on('click', '#file-new', function(e){
        var filename = prompt("Please enter the filename","name.format");
        if (filename != null){
            create(filename);
        }
    });
    
    /* Delete file event */
    $(document).on('click', '#file-delete', function(e){
        var remove = confirm("WARNING!\nYou will delete the current file!");
        if (remove){
            var filename = $('#currentfile').val();
            unlink(filename);
        }
    });
 
    /* Keycodes */
    /*$(window).keypress(function(e) {
        console.log("Pressed key: " + e.which);
        console.log("Shift: " + e.shiftKey);
        console.log("Control: " + e.ctrlKey);
        
        if (e.which == 115 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey )) { //CTRL+S event
            e.preventDefault();
            var filename = $('#currentfile').val();
            save(filename);
        }
        if (e.which == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey ) && e.shiftKey) { //CTRL+SHIFT+S event
            e.preventDefault();
            var filename = prompt("Save file as:","name.format");
            if (filename != null){
                save(filename);
            }
            return false;
        }
        if (e.which == 110 && e.ctrlKey) { //CTRL+N event
            e.preventDefault();
            var filename = prompt("Please enter the filename","name.format");
            if (filename != null){
                create(filename);
            }
        }
    });*/
    
 
 
});
 
function open(filename) {
    $('#editor').css('opacity', 0.9);
    $('#filename').text('Loading...');
    
    $.post('ajax/file_getcontent.php', {filename: filename}, function(data){ //sends a post request to the file, and that will return it's own code in (to the 'data' variable)
        editor.setValue(data, -1); //sets the editors value, to the new one
        savedValue = data;
        
        var frags = filename.split(".");
        var format = frags[frags.length - 1];
        
        //C/C++
        var language = 'none';
        if (format == 'c' || format == 'cpp' || format == 'h') {
            editor.getSession().setMode('ace/mode/c_cpp');
            language = 'C or C++';
        }
        //HTML/PHP
        if (format == 'php' || format == 'html' || format == 'htm') {
            editor.getSession().setMode('ace/mode/php');
            language = 'PHP, HTML';
        }
        //JavaScript
        if (format == 'js') {
            editor.getSession().setMode('ace/mode/javascript');
            language = 'JavaScript';
        }
        
        if (language != 'none') {
            $('#codelanguage').text("("+language+")");
        }
        else {
            $('#codelanguage').text("(can't recognize)");
            editor.getSession().setUseWorker(false);
        }
        
        $('#filename').text(filename);
        $('#currentfile').val(filename);
        $('#editor').css('opacity', 1);
    });
}
function save(filename) {
    var filecontent = editor.getValue();
        
    $.post('ajax/file_save.php', {filename: filename, filecontent: filecontent}, function(data){
        editor.setValue(filecontent, 1); //sets the editors value, to the new one
        
        if (data) {
            $('#filesave').text('Saved!!!');
            savedValue = filecontent;
            setTimeout(function(){
                $('#filesave').text('Save');
            }, 2000);
        } else alert(data);
    });
}
function create(filename) {
    $.post('ajax/file_create.php', {filename: filename}, function(data){
        editor.setValue('');
        
        if (data) {
            $('#currentfile').val(filename);
            $('#filename').text(filename);
            $('#fileselector').append('<button type="submit" value="'+filename+'" name="filetoopen">'+filename+'</button>');
        } else alert(data);
    });
}
function unlink(filename) {
    $.post('ajax/file_unlink.php', {filename: filename}, function(data){
        editor.setValue('');
        
        if (data) {
            $('#currentfile').val(filename);
            $('#filename').text(filename);
            $('button[value="'+filename+'"]').remove();
        } else alert(data);
    });
}
</script>
<?php
}
else {
?>
    <form method="post">
        <input type="password" name="password" placeholder="password">
        <button type="submit" name="event" value="sign-in">Sign In</button>
    </form>
<?php
}
?>
</body>
</html>