Code
<html>
<head>
<style>
.irc {
  font-family: 'Courier New', Courier, monospace;
  border: 2px double;
  background-color: #ffffff;
  margin: 10px 0;
  box-shadow: 3px 5px #d9d9d9;
}
 
.table-1c {
    text-align: left;
    width: 50px;
    vertical-align: top;
}
.table-2c {
    text-align: right;
    width: 150px;
    vertical-align: top;
}
.table-3c {
    text-align: left;
    width: 600px;
}
</style>
</head>
 
<body>
 
<script src="http://photoshop-techniques.wikidot.com/local--files/admin:_sandboxx/jquery-1.10.2.js"></script>
 
<script>
$(function(){
     $("#includedContent").load("/admin:_sandboxx1-2/code/1"); 
   });
</script>
 
<div class="container" id="userChat1" style="border: 2px solid #dedede;background-color: #f1f1f1;border-radius: 7px;padding: 10px; margin: 10px 0; overflow: auto">
  <span class="time-left" style="color: #999;margin-right: 10px">Name</span><span class="message" id="enterMessage1" style="color: #999;margin-right: 10px">Please enter your message below:</span><span class="time-left" id="userReceived1" style="color: #009933;margin-right: 10px">Message sent and received.</span>
  <p></p>
  <textarea type="text" id="inputBox" disabled style="resize: none; width: 400; height: 60; margin: 10px; float: left"></textarea>
</div>
 
<div class="container" id="response1" style="border: 2px solid #dedede;background-color: #f1f1f1;border-radius: 7px;padding: 10px; margin: 10px 0">
  <span class="time-left" style="color: #aaa;margin-right: 10px">11:00</span><span class="username" style="color: #aaa;margin-down:10px">TimeTravel_0</span>
  <p>Response</p>
</div>
 
<div class="container" id="chat1" style="border: 2px solid #dedede;background-color: #f1f1f1;border-radius: 7px;padding: 10px; margin: 10px 0">
  <span class="time-left" style="color: #aaa;margin-right: 10px">11:00</span><span class="username" style="color: #aaa;margin-down:10px">TimeTravel_0</span>
  <p>Hello. How are you today?</p>
</div>
 
<div class="container darker" id="chat2" style="border: 2px solid #dedede;border-color: #ccc;background-color: #ddd;border-radius: 7px;padding: 10px; margin: 10px 0">
  <span class="time-left" style="color: #999;margin-right: 10px">11:01</span><span class="username" style="color: #999">Alex</span>
  <p>Hey! I'm fine. Thanks for asking!</p>
</div>
 
<div class="irc">
<table class="irc-table">
<tr>
  <tr>
    <td class="table-1c">22:19</td>
    <td class="table-2c">TimeTravel_0:</td>
    <td>Message</td>
  </tr>
  <tr>
    <td class="table-1c">22:20</td>
    <td class="table-2c">G°:</td>
    <td>Message2 Message Message Message Message Message</td>
  </tr>
  <tr>
    <td class="table-1c">22:20</td>
    <td class="table-2c">Name:</td>
    <td class="table-3c" id="c1">Message3 Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message Message</td>
  </tr>
</table>
</div>
 
<table>
  <tr>
    <td>WWW</td>
    <td id="WWW-CC">1</td>
    <td id="WWW-SCP">2</td>
    <td id="WWW-WWW">/</td>
  </tr>
</table>
 
<div id="includedContent"></div>
 
<table style="margin: 0 auto 0 auto; padding: 0;">
  <tr>
    <td>
      <input id="goi1" type="text" class="input empty" value="GoI 1" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"> <input id="goi2" type="text" class="input empty" value="GoI 2" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"> <button onclick="goiFunction()" class="button">See relation</button>
    </td>
  </tr>
</table>
 
<div id="c2" class="output"></div>
<div id="c3" class="output"></div>
 
<script>
$("#response1").hide(1);
$("#userReceived1").hide(1);
$("#chat1").hide(1);
$("#chat2").hide(1);
$("#chat1").delay(3000).fadeIn(200);
$("#chat2").delay(6000).fadeIn(200);
 
var box = document.getElementById("inputBox");
        var textToGhostType = "Oh noe my text is being typed D:D:D:";
        var i=0;
        window.onkeyup = function(e)
        {
            if(box.innerHTML==textToGhostType)
            {
                $("#enterMessage1").hide(1);
                $("#userReceived1").fadeIn(200);
                $("#response1").delay(3000).fadeIn(200);
            }
            if(i<textToGhostType.length)
                box.innerHTML+=textToGhostType[i++];
        }
 
function goiFunction() {
var input1 = $('#goi1').val();
var input2 = $('#goi2').val();
var fullInput = "#" + input1 + "-" + input2;
var fullInput2 = "#" + input2 + "-" + input1;
 
var myText = $(fullInput).text();
var myText2 = $(fullInput2).text();
 
var myDiv = document.getElementById("c2");
var myDiv2 = document.getElementById("c3");
 
myDiv.innerHTML = myText;
myDiv2.innerHTML = myText2;
}
 
</script>
 
</body>
</html>