<div class="terminal-window">
    <section class="terminal">
        <div class="history"></div>$ <span class="prompt"></span><span class="typed-cursor"></span>
    </section>
    <div class="terminal-data pablo-run-output">
        <br><span class="command gray">finger rudolph && catimg pic.jpg</span><br>
        <br><span class="green">name &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp; = Rudolph Pienaar<br>workplace &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; = Boston Children's Hospital<br>academic title &nbsp; &nbsp; = Assistant Professor in Radiology <br>professional title = Technical Director of FNNDSC<br>education &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= PhD in Biomedical Engineering<br>email &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= rudolph.pienaar@childrens.harvard.edu<br>work location&nbsp; &nbsp; &nbsp; = Landmark Center, 6th Floor East, LM6551.2</span><br><br>
        <br>

  </div>
</div>

body {
  background: #222222;
}


.terminal-window {
  text-align: left;
  width: 1100px;
  height: 700px;
  border-radius: 10px;
  margin: auto;
  position: relative;
}

.terminal-window header {
  background: #E0E8F0;
  height: 30px;
  border-radius: 8px 8px 0 0;
  padding-left: 10px;
}

.terminal-window header .button {
  width: 12px;
  height: 12px;
  margin: 10px 4px 0 0;
  display: inline-block;
  border-radius: 8px;
}

.terminal-window header .button.green {
  background: #3BB662;
}

.terminal-window header .button.yellow {
  background: #E5C30F;
}

.terminal-window header .button.red {
  background: #E75448;
}

.terminal-window section.terminal {
  color: white;
  font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
  font-size: 22pt;
  font-weight: 900;
  background: #000000;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 0;
  overflow: auto;
}

.terminal-window section.terminal .typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.terminal-data { display: none; }
.terminal-window .gray { color: gray; }
.terminal-window .green { color: green;}
.terminal-window .magenta {}

(function($) {

  $.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };
  
  $.fn.pablo = function() {
    
    return this.each( function() {
      
      var $this = $(this);      
      var $prompt = $this.find('.prompt');
      var $cursor = $this.find('.typed-cursor');
      var $terminal = $this.find('.terminal');
      var command = $this.find('.command').text();
      var $history = $this.find('.history');
      var history = $history.html();
      var output = $this.find('.pablo-run-output').html();
      var data = [{
        action: 'type',
        // clear: true,
        strings: [command],
        output: output
      }];
            
      function runCommands(data, pos) {
        
        if(! $this.isInViewport()) {
          return;
        }

        if($this.hasClass('animated')) {
          return;
        } else {
          $this.addClass('animated');
        }
        
        var script = data[pos];
        if (script.clear === true) {
          $history.html('');
        }
        
        switch (script.action) {
          case 'type':

            $prompt.removeData();
            $cursor.text('');
            $prompt.typed({
              strings: script.strings,
              typeSpeed: 30,
              callback: function() {
                history = typeof history !== 'undefined' ? [history] : [];
                history.push('$ ' + $prompt.text());
                if (script.output) {
                  history.push(script.output);
                  $prompt.html('');
                  $history.html(history.join('<br>'));
                }

                $terminal.scrollTop($terminal.height());

                pos++;
                if (pos < data.length) {
                  setTimeout(function() {
                    runScripts(data, pos);
                  }, script.postDelay || 1000);
                }
              }
            });
            break;
          case 'view':

            break;
        }
      }
      
      $(window).on('scroll resize', function() {
        runCommands(data, 0);
      }).trigger('resize');
        
    })
  }

}(jQuery));

$('.terminal-window').pablo();