curious electric home

http://return-true.com/2011/04/jquery-typewriter-revisited/ and http://terminal.jcubic.pl/

by dirkk0

HTML

<script src="http://terminal.jcubic.pl/js/jquery.terminal-0.4.6.min.js"></script>
<link rel="stylesheet" href="http://terminal.jcubic.pl/css/jquery.terminal.css">
<div id="term"></div>
<div class="container">
    <textarea rows="5" cols="20" id="t1" class="textarea1"></textarea>
</div>
<ul id="caption" class="caption">
    <li>This was a triumph.</li>
    <li>I'm making a note here: HUGE SUCCESS.</li>
    <li>It's hard to overstate my satisfaction.</li>
    <li>Aperture Science:</li>
    <li>We do what we must because we can.</li>
    <li>For the good of all of us</li>
    <li>Except the ones who are dead.</li>
    <li>But there's no sense crying over every mistake</li>
    <li>You just keep on trying till you run out of cake</li>
    <li>And the science gets done and you make a neat gun</li>
    <li>For the people who are still alive.</li>
    <li>I'm not even angry.</li>
    <li>I'm being so sincere right now.</li>
    <li>Even though you broke my heart and killed me.</li>
    <li>And tore me to pieces.</li>
    <li>And threw every piece into a fire.</li>
    <li>As they burned it hurt because</li>
    <li>I was so happy for you.</li>
    <li>Now these points of data make a beautiful line</li>
    <li>And we're out of beta we're releasing on time.</li>
    <li>So I'm GLaD I got burned think of all the things we learned</li>
    <li>For the people who are still alive.</li>
    <li>Go ahead and leave me.</li>
    <li>I think I prefer to stay inside.</li>
    <li>Maybe you'll find someone else to help you.</li>
    <li>Maybe Black Mesa -</li>
    <li>THAT WAS A JOKE. HA HA, FAT CHANCE.</li>
    <li>Anyway, this cake is great:</li>
    <li>It's so delicious and moist.</li>
    <li>Look at me still talking when there's science to do.</li>
    <li>When I look out there it makes me GLaD I'm not you.</li>
    <li>I've experiments to run there is research to be done</li>
    <li>On the people who are still alive</li>
    <li>And believe me I am still alive.</li>
   ...

CSS

body {
    -webkit-text-size-adjust:none;
    background-color: #004400;
    height:100%;
}
#term {
    border: 1px outset;
    opacity: 0.0;
    // display: none;
    // position: absolut;
    // float: left;
    top: 20px;
    width: 300px;
    height: 60px;
    // background-color: #ff0000;
}
.textarea1 {
    background:transparent;
    font-family:Monospace, Courier;
    font-size:12pt;
    color:#98FB98;
    // line-height:10em;
    // position: absolut;
    top:10px;
    left:10px;
    width: 100%;
    height: 100%;
    border:2px white;
    outline: None;
    // float: left;
}
.container {
    position:absolute;
    top:35%;
    left:10%;
    display:block;
    width: 100%;
    height: 100%;
    // border: 3px solid #f7c;
}
.caption {
    display: none;
}

JavaScript

var mode;
mode = 0;

function toggleConsole() {
    if (mode == 0) {
        $('#term').terminal(function (command, term) {
            console.log('ok');
            if (command == 'help') {
                term.echo("The only command for the moment. More to come soon.");
                // term.disable();
            } else {
                term.echo('unknown command');
            }
        }, {
            greetings: 'Welcome to the machine.',
            prompt: '>',
            name: 'test'
        });
        mode = -1;
    }

    term = $('#term').terminal()

    term.resume();

    if (mode == -1) {
        $('#term').animate({
            width: 300,
            opacity: 1
        }, 500);
        mode = 1
    } else if (mode == 1) {
        $('#term').animate({
            width: 0,
            opacity: 0
        }, 500, function () {
            term.pause()
        });
        mode = -1;
    }

    // console.log(term.paused());
    /*
        $('#term').animate({
            width: 'toggle',
            opacity: 'toggle'
        }, 500);
        */
}

// toggleConsole();
$(document.documentElement).keydown(function (e) {

    // console.log(e.charCode);
    // console.log(e.keyCode);
    if (e.keyCode == 27) {
        toggleConsole();

    }
});


$(function () {
    var ch = 0;
    var item = 0;
    var items = $('#caption li').length;
    var time = 10000; // wait 10 seconds in the beginning
    
    t1.focus();

    function tickInterval() {
        if (item < items) {
            var text = $('#caption li:eq(' + item + ')').text();
            type(text);
            text = null;
            var tick = setTimeout(tickInterval, time);
        } else {
            clearTimeout(tick);
        }
    }

    function type(text) {
        time = 58;
        $('.textarea1').html(text.substr(0, ch++));
        if (ch > text.length) {
            item++;
            ch = 0;
            time = 3000;
        }
    }

    var tick = setTimeout(tickInterval,...