Break out messagepane from room templates

3 files changed, 293 insertions, 340 deletions

diff --git a/template/messagepane.st b/template/messagepane.st
new file mode 100644
index 0000000..cb41edd
--- /dev/null
+++ b/template/messagepane.st
@@ -0,0 +1,79 @@
+<div id="messagePane">

+  $if(isadmin)$

+  <style>

+    #textbutton {

+    position: absolute;

+    left: 10px;

+    top: 0px;

+    background: lightblue;

+    z-index: 100000;

+    }

+  </style>

+  <div id="textbutton">

+    <span>show text?</span>

+    <input type="checkbox">

+  </div>

+  <script>

+    jQuery('#textbutton input').attr('checked', TextEnabled).change(setTextEnable);

+  </script>

+  $endif$

+

+  $if(user_nick)$

+  <div id="userList">

+    $users: { u |

+    <div class="username"><a href="/$u.nick$" target="_blank">

+        $u.score_ent$

+        $if(u.avatar)$

+        <img src="$u.avatar$" width="50" height="50">

+        $else$

+        <img src="/static/img/noinfo.png">

+        $endif$

+        $u.nick$</a><br>

+    </div>

+    }$

+  </div>$endif$

+  <div id="favbox" style="display: hidden"></div>

+  <div id="messageList">

+    $messages: { m |

+    <div class="msgDiv oldmsg dump $if(m.favorited)$favorite$endif$ $if(m.is_image)$contains-image$endif$" id="message-$m.message_id$" nick="$m.nick$" style="display: none">

+      <span class="nick">

+        <b><a href="$domain$/$m.nick$" target="_blank">$m.nick$</a></b>

+        $if(m.favorited)$

+        <img src="/static/img/thumbs/chatheartover.gif" class="chat-thumb" onclick="Tag.favorite(this)">

+        $else$

+        <img src="/static/img/thumbs/smallheart.gif" class="chat-thumb" onclick="Tag.favorite(this)">

+        $endif$

+      </span>

+      <span class="content">$m.content$</span>

+    </div>

+    }$

+    <hr />

+  </div>

+

+  $if(user_nick)$

+  <div id="msgInputDiv">

+    <div id="msginputrapper">

+      <input id="msgInput" class="msgInput" type="input" />

+    </div>   

+    <input id="msgSubmit" type="submit" value="Send"/>

+    <input id="upload" value="Upload" type="submit">

+    <input id="webcam-button-upload" value="Webcam" type="submit">

+    <input id="webcam-button-snap" value="Send Pic" type="submit" class="invisible blink">  

+    <button id="palette-button"><img src="/static/img/palette.gif"></button>

+  </div>

+  <div id="effects-msg" class="invisible">click on your face for effects!</div>

+</div>

+$else$

+<div id="msgInputDiv">

+  <div id="msginputrapper">  <input id="msgInput" class="msgInput" type="input" />    </div>   

+  <input id="msgSubmit" type="submit" value="Send" onClick="showAlert();"/>

+  <input id="upload" value="Upload" type="submit" onClick="showAlert();">

+  <input id="webcam-button-upload" value="Webcam" type="submit" onClick="showAlert();">

+  <input id="webcam-button-snap" value="Send Pic" type="submit" class="invisible blink"onClick="showAlert();">  

+  <button id="palette-button"><img src="/static/img/palette.gif"  onClick="showAlert();"></button>

+</div>

+<div id="effects-msg" class="invisible">click on your face for effects!</div>

+</div>

+$endif$

+</div>

+</div>

diff --git a/template/rooms/VIP.st b/template/rooms/VIP.st
index 2feb579..54bf72a 100644
--- a/template/rooms/VIP.st
+++ b/template/rooms/VIP.st
@@ -1,198 +1,132 @@
 <!--/*
 
-     _____          ___           ___           ___         ___         ___     
-    /  /::\        /__/\         /__/\         /  /\       /  /\       /__/\    
+   _____          ___           ___           ___         ___         ___     
+   /  /::\        /__/\         /__/\         /  /\       /  /\       /__/\    
    /  /:/\:\       \  \:\       |  |::\       /  /::\     /  /:/_     |  |::\   
-  /  /:/  \:\       \  \:\      |  |:|:\     /  /:/\:\   /  /:/ /\    |  |:|:\  
- /__/:/ \__\:|  ___  \  \:\   __|__|:|\:\   /  /:/~/:/  /  /:/ /:/  __|__|:|\:\ 
- \  \:\ /  /:/ /__/\  \__\:\ /__/::::| \:\ /__/:/ /:/  /__/:/ /:/  /__/::::| \:\
-  \  \:\  /:/  \  \:\ /  /:/ \  \:\~~\__\/ \  \:\/:/   \  \:\/:/   \  \:\~~\__\/
+   /  /:/  \:\       \  \:\      |  |:|:\     /  /:/\:\   /  /:/ /\    |  |:|:\  
+   /__/:/ \__\:|  ___  \  \:\   __|__|:|\:\   /  /:/~/:/  /  /:/ /:/  __|__|:|\:\ 
+   \  \:\ /  /:/ /__/\  \__\:\ /__/::::| \:\ /__/:/ /:/  /__/:/ /:/  /__/::::| \:\
+   \  \:\  /:/  \  \:\ /  /:/ \  \:\~~\__\/ \  \:\/:/   \  \:\/:/   \  \:\~~\__\/
    \  \:\/:/    \  \:\  /:/   \  \:\        \  \::/     \  \::/     \  \:\      
-    \  \::/      \  \:\/:/     \  \:\        \  \:\      \  \:\      \  \:\     
-     \__\/        \  \::/       \  \:\        \  \:\      \  \:\      \  \:\    
-                   \__\/         \__\/         \__\/       \__\/       \__\/    
+   \  \::/      \  \:\/:/     \  \:\        \  \:\      \  \:\      \  \:\     
+   \__\/        \  \::/       \  \:\        \  \:\      \  \:\      \  \:\    
+   \__\/         \__\/         \__\/       \__\/       \__\/    
 
-(c)2010 dump.fm -->
+   (c)2010 dump.fm -->
 
 <html>
-<head>
-$head()$
-  <title>VIP BALLER ROOM</title>
+  <head>
+    $head()$
+    <title>$roomname$ dump.fm</title>
 
-  <script type="text/javascript" src="$domain$/static/js/invalid_domains.js"></script>
-  <script type="text/javascript" src="$domain$/static/webcam/webcam.js"></script>
-  <script type="text/javascript" src="$domain$/static/js/ajaxupload.js"></script>
-$if(user_nick)$
-  <script type="text/javascript" src="$domain$/json/$user_nick$/favorites"></script>
-$endif$
-  <script>
-    jQuery(document).ready(initChat);
-    var Nick = $json_user_nick$;
-    var Room = $json_room_key$;
-    var Timestamp = $timestamp$;
-$if(isadmin)$
-    var IsAdmin = true;
-$else$
-    var IsAdmin = false;
-$endif$
-    if (Nick) {
+    <script type="text/javascript" src="$domain$/static/js/invalid_domains.js"></script>
+    <script type="text/javascript" src="$domain$/static/webcam/webcam.js"></script>
+    <script type="text/javascript" src="$domain$/static/js/ajaxupload.js"></script>
+    $if(user_nick)$
+    <script type="text/javascript" src="$domain$/json/$user_nick$/favorites"></script>
+    $endif$
+    <script>
+      jQuery(document).ready(initChat);
+      var Nick = $json_user_nick$;
+      var Room = $json_room_key$;
+      var Timestamp = $timestamp$;
+      $if(isadmin)$
+      var IsAdmin = true;
+      $else$
+      var IsAdmin = false;
+      $endif$
+      if (Nick) {
       jQuery(document).ready(function() { setupUpload('upload', Room); });
-    }
-    function showAlert() { alert('MUST LOGIN'); }
-    var newwindow;
-    function pop(url) {
+      }
+      function showAlert() { alert('MUST LOGIN'); }
+      var newwindow;
+      function pop(url) {
       newwindow=window.open(url,'name','height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0');
       if (window.focus) {newwindow.focus()}
-    }
-    jQuery(Away.startTitleUpdater);
-    jQuery(initChatMsgs);
-    $if(user_nick)$ //
+      }
+      jQuery(Away.startTitleUpdater);
+      jQuery(initChatMsgs);
+      $if(user_nick)$ //
+      $else$
+      function showAlert() {
+      alert('Join dump.fm @ http://dump.fm/register');
+      }
+
+      $endif$
+    </script>
+    <style>
+      #chat-wrapper {
+      position: absolute;
+      z-index: 1000000;
+      right: 100px;
+      bottom: 100px;
+      height: 40px;
+      width: 300px;
+      };
+    </style>
+  </head>
+  <body>
+    $if(dis)$
+    $banner_dis()$
     $else$
-    function showAlert() {
-	alert('Join dump.fm @ http://dump.fm/register');
-	}
+    $banner()$
+    $if(!user_nick)$
+    <div id="dis_welcome">
+      <center>
+        <img src="$domain$/static/img/dumppixellarge3.png">
+        <div id="midtxt">dump.fm lets you <i>talk with pictures!</i> Paste an image url, upload,  or snap a pic right from your webcam. Talk to friends, fav images, and keep track of the pix you love.
+          <br><br>
+          <span id="signintxt">
+            you already have an account, <strong><a href="http://dump.fm/login" class="signin">sign in</a></strong>. If not, <strong><a href="http://dump.fm/register">register</a></strong>!
+          </span>
+      </center>
+      </div>
+    </div>
 
-$endif$
-  </script>
-  <style>
-    #chat-wrapper {
-        position: absolute;
-        z-index: 1000000;
-        right: 100px;
-        bottom: 100px;
-       height: 40px;
-       width: 300px;
-    };
-  </style>
-</head>
-<body>
-$if(dis)$
-  $banner_dis()$
-$else$
-  $banner()$
-  $if(!user_nick)$
+    <link href="/static/css/pages.css" rel="stylesheet" type="text/css" media="screen" />
+    <link href="/static/css/header.css" rel="stylesheet" type="text/css" media="screen" /> 
+    <script type="text/javascript" src="/static/js/win.js"></script>
+    <script type="text/javascript">
+      var topZ = 7;
+      CreateDropdownWindow('', '500px', true, 'dis_welcome', 300, 70);
+    </script>
+    <style>
+      .divDragTitle {
+      left:50%!important;
+      margin-left: -250px!important;
+      }
+      .divDragContent {
+      z-index:666;
+      left:50%!important;
+      margin-left: -250px!important;
 
-<div id="dis_content" name="content"> 
-		<p>
-			If you already have an account, <strong><a href="http://dump.fm/login" class="signin">sign in</a></strong>. If not, <strong><a href="http://dump.fm/register">register now</a></strong>.
-		</p>
-</div>
-<div id="dis_welcome"><center>
-	      <a href="/"><img src="$domain$/static/img/dumppixellarge3.png"></a>
-	     
-	      <div id="midtxt"><a href="/">dump.fm</a> lets you <i>talk with pictures!</i> Paste an image url, upload,  or snap a pic right from your webcam. Talk to friends, fav images, and keep track of the pix you love!
-	      </div>
-	      </center>
-</div>
-  <link href="/static/css/pages.css" rel="stylesheet" type="text/css" media="screen" />
-  <link href="/static/css/header.css" rel="stylesheet" type="text/css" media="screen" /> 
-  <script type="text/javascript" src="/static/js/win.js"></script> 
-<script type="text/javascript">
-	var topZ = 7;
-	CreateDropdownWindow('', '500px', true, 'dis_welcome', 300, 70); 
-</script>
-$endif$
-$endif$
+      }
+    </style>
+    $endif$
+    $endif$
 
 
-  <div id="chatrap">
+    <div id="chatrap">
       <div id="dcontent">
         <div id="messagetabs"></div>
-        <div id="rapper">
-        </div>
-  
-        <div id="messagePane">
- 
-
-$if(user_nick)$  <div id="userList">
-            $users: { u |
-            <div class="username"><a href="/$u.nick$" target="_blank">
-                $u.score_ent$
-                $if(u.avatar)$
-                <img src="$u.avatar$" width="50" height="50">
-                $else$
-                <img src="/static/img/noinfo.png">
-                $endif$
-                $u.nick$</a><br>
-            </div>
-            }$
-	  </div>$endif$
-          <div id="favbox" style="display: hidden"></div>
-          <div id="messageList">
-$messages: { m |
-            <div class="msgDiv oldmsg dump $if(m.favorited)$favorite$endif$" id="message-$m.message_id$" nick="$m.nick$">
-              <span class="nick">
-                <b><a href="$domain$/$m.nick$" target="_blank">$m.nick$</a></b>
-  $if(m.favorited)$
-    <img src="/static/img/thumbs/chatheartover.gif" class="chat-thumb" onclick="Tag.favorite(this)">
-  $else$
-    <img src="/static/img/thumbs/smallheart.gif" class="chat-thumb" onclick="Tag.favorite(this)">
-  $endif$ 
-              </span>
-            <span class="content">$m.content$</span>
-            </div>
-}$
-            <hr />
-          </div>        
-
-          $if(user_nick)$
-          <div id="msgInputDiv">
-              <div id="msginputrapper">  <input id="msgInput" class="msgInput" type="input" />    </div>   
-                <input id="msgSubmit" type="submit" value="Send"/>
-   
-                <input id="upload" value="Upload" type="submit">
-                <input id="webcam-button-upload" value="Webcam" type="submit">
-                <input id="webcam-button-snap" value="Send Pic" type="submit" class="invisible blink">  
-                             <button id="palette-button"><img src="/static/img/palette.gif"></button>
-              </div><div id="effects-msg"class="invisible">click on your face for effects!</div>
-          </div>
-$else$
-          <div id="msgInputDiv">
-              <div id="msginputrapper">  <input id="msgInput" class="msgInput" type="input" />    </div>   
-                <input id="msgSubmit" type="submit" value="Send" onClick="showAlert();"/>
-   
-                <input id="upload" value="Upload" type="submit" onClick="showAlert();">
-                <input id="webcam-button-upload" value="Webcam" type="submit" onClick="showAlert();">
-                <input id="webcam-button-snap" value="Send Pic" type="submit" class="invisible blink"onClick="showAlert();">  
-                             <button id="palette-button"><img src="/static/img/palette.gif"  onClick="showAlert();"></button>
-              </div><div id="effects-msg"class="invisible">click on your face for effects!</div>
-          </div>
-          $endif$
-          $if(isadmin)$
-<div id="tinychat" style="display:none;">
-<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="785" height="800" id="tinyembed" align="top">
-<param name="allowScriptAccess" value="sameDomain" />
-<param name="allowFullScreen" value="true" />
-<param name="movie" value="http://tinychat.com/tinyembed.swf" />
-
-<param name="menu" value="false" />
-<param name="quality" value="high" />
-<param name="scale" value="50%" />
-
-<param name="salign" value="t" />
-<param name="wmode" value="transparent" />
-<param name="flashvars" value="roomVar=idontgetit" />
-
-<embed src="http://tinychat.com/tinyembed.swf" menu="false" quality="high" scale="noscale" salign="t" wmode="transparent" FlashVars="roomVar=anyroomsname" width="785" height="800" name="tinyembed" align="top" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
-</object>
-</div>
-$endif$
-        </div>
-      </div>        
+          $messagepane()$
+      </div>
+    </div>
+    <div id="palette">
+      <div id="palette-thumbs"></div>
+    </div>
+    <div id="footerc">
+      $footer()$
     </div>
-  </div>
-  <div id="palette"><div id="palette-thumbs"></div></div>
-  <div id="footerc">
-              $footer()$
-  </div>
-$preload()$
+    $preload()$
+    <div id="vipinfo" style="position: absolute; z-index: 100000; right: 50; bottom: 75;">
+      <h1>Welcome to the cool club</h1>
+      <ul>
+        <li><a href="/roomlist">Rooms</a></li>
+        <li><a href="/mutes">Mutes</a></li>
+      </ul>
+    </div>
+  </body>
+</html>
 
-<div id="vipinfo" style="position: absolute; z-index: 100000; right: 50; bottom: 75;">
-    <h1>Welcome to the cool club</h1>
-    <ul><li><a href="/roomlist">Rooms</href></li>
-        <li><a href="/mutes">Mutes</href></li>
-     </ul>
-</div>
 
-</body>
-</html>
diff --git a/template/rooms/chat.st b/template/rooms/chat.st
index 81045e4..cf2d64a 100644
--- a/template/rooms/chat.st
+++ b/template/rooms/chat.st
@@ -1,183 +1,123 @@
 <!--/*
 
-     _____          ___           ___           ___         ___         ___     
-    /  /::\        /__/\         /__/\         /  /\       /  /\       /__/\    
+   _____          ___           ___           ___         ___         ___     
+   /  /::\        /__/\         /__/\         /  /\       /  /\       /__/\    
    /  /:/\:\       \  \:\       |  |::\       /  /::\     /  /:/_     |  |::\   
-  /  /:/  \:\       \  \:\      |  |:|:\     /  /:/\:\   /  /:/ /\    |  |:|:\  
- /__/:/ \__\:|  ___  \  \:\   __|__|:|\:\   /  /:/~/:/  /  /:/ /:/  __|__|:|\:\ 
- \  \:\ /  /:/ /__/\  \__\:\ /__/::::| \:\ /__/:/ /:/  /__/:/ /:/  /__/::::| \:\
-  \  \:\  /:/  \  \:\ /  /:/ \  \:\~~\__\/ \  \:\/:/   \  \:\/:/   \  \:\~~\__\/
+   /  /:/  \:\       \  \:\      |  |:|:\     /  /:/\:\   /  /:/ /\    |  |:|:\  
+   /__/:/ \__\:|  ___  \  \:\   __|__|:|\:\   /  /:/~/:/  /  /:/ /:/  __|__|:|\:\ 
+   \  \:\ /  /:/ /__/\  \__\:\ /__/::::| \:\ /__/:/ /:/  /__/:/ /:/  /__/::::| \:\
+   \  \:\  /:/  \  \:\ /  /:/ \  \:\~~\__\/ \  \:\/:/   \  \:\/:/   \  \:\~~\__\/
    \  \:\/:/    \  \:\  /:/   \  \:\        \  \::/     \  \::/     \  \:\      
-    \  \::/      \  \:\/:/     \  \:\        \  \:\      \  \:\      \  \:\     
-     \__\/        \  \::/       \  \:\        \  \:\      \  \:\      \  \:\    
-                   \__\/         \__\/         \__\/       \__\/       \__\/    
+   \  \::/      \  \:\/:/     \  \:\        \  \:\      \  \:\      \  \:\     
+   \__\/        \  \::/       \  \:\        \  \:\      \  \:\      \  \:\    
+   \__\/         \__\/         \__\/       \__\/       \__\/    
 
-(c)2010 dump.fm -->
+   (c)2010 dump.fm -->
 
 <html>
-<head>
-$head()$
-  <title>$roomname$ dump.fm</title>
+  <head>
+    $head()$
+    <title>$roomname$ dump.fm</title>
 
-  <script type="text/javascript" src="$domain$/static/js/invalid_domains.js"></script>
-  <script type="text/javascript" src="$domain$/static/webcam/webcam.js"></script>
-  <script type="text/javascript" src="$domain$/static/js/ajaxupload.js"></script>
-$if(user_nick)$
-  <script type="text/javascript" src="$domain$/json/$user_nick$/favorites"></script>
-$endif$
-  <script>
-    jQuery(document).ready(initChat);
-    var Nick = $json_user_nick$;
-    var Room = $json_room_key$;
-    var Timestamp = $timestamp$;
-$if(isadmin)$
-    var IsAdmin = true;
-$else$
-    var IsAdmin = false;
-$endif$
-    if (Nick) {
+    <script type="text/javascript" src="$domain$/static/js/invalid_domains.js"></script>
+    <script type="text/javascript" src="$domain$/static/webcam/webcam.js"></script>
+    <script type="text/javascript" src="$domain$/static/js/ajaxupload.js"></script>
+    $if(user_nick)$
+    <script type="text/javascript" src="$domain$/json/$user_nick$/favorites"></script>
+    $endif$
+    <script>
+      jQuery(document).ready(initChat);
+      var Nick = $json_user_nick$;
+      var Room = $json_room_key$;
+      var Timestamp = $timestamp$;
+      $if(isadmin)$
+      var IsAdmin = true;
+      $else$
+      var IsAdmin = false;
+      $endif$
+      if (Nick) {
       jQuery(document).ready(function() { setupUpload('upload', Room); });
-    }
-    function showAlert() { alert('MUST LOGIN'); }
-    var newwindow;
-    function pop(url) {
+      }
+      function showAlert() { alert('MUST LOGIN'); }
+      var newwindow;
+      function pop(url) {
       newwindow=window.open(url,'name','height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0');
       if (window.focus) {newwindow.focus()}
-    }
-    jQuery(Away.startTitleUpdater);
-    jQuery(initChatMsgs);
-    $if(user_nick)$ //
-    $else$
-    function showAlert() {
-	alert('Join dump.fm @ http://dump.fm/register');
-	}
-
-$endif$
-  </script>
-  <style>
-    #chat-wrapper {
-        position: absolute;
-        z-index: 1000000;
-        right: 100px;
-        bottom: 100px;
-       height: 40px;
-       width: 300px;
-    };
-  </style>
-</head>
-<body>
-$if(dis)$
-  $banner_dis()$
-$else$
-  $banner()$
-  $if(!user_nick)$
+      }
+      jQuery(Away.startTitleUpdater);
+      jQuery(initChatMsgs);
+      $if(user_nick)$ //
+      $else$
+      function showAlert() {
+      alert('Join dump.fm @ http://dump.fm/register');
+      }
 
-<div id="dis_welcome"><center>
-<img src="$domain$/static/img/dumppixellarge3.png">
-	     
-	      <div id="midtxt">dump.fm lets you <i>talk with pictures!</i> Paste an image url, upload,  or snap a pic right from your webcam. Talk to friends, fav images, and keep track of the pix you love.
-<br><br>
-<span id="signintxt">
-	      			If you already have an account, <strong><a href="http://dump.fm/login" class="signin">sign in</a></strong>. If not, <strong><a href="http://dump.fm/register">register</a></strong>!
-	    </span>  </center>	      </div>
-</div>
+      $endif$
+    </script>
+    <style>
+      #chat-wrapper {
+      position: absolute;
+      z-index: 1000000;
+      right: 100px;
+      bottom: 100px;
+      height: 40px;
+      width: 300px;
+      };
+    </style>
+  </head>
+  <body>
+    $if(dis)$
+    $banner_dis()$
+    $else$
+    $banner()$
+    $if(!user_nick)$
+    <div id="dis_welcome">
+      <center>
+        <img src="$domain$/static/img/dumppixellarge3.png">
+        <div id="midtxt">dump.fm lets you <i>talk with pictures!</i> Paste an image url, upload,  or snap a pic right from your webcam. Talk to friends, fav images, and keep track of the pix you love.
+          <br><br>
+          <span id="signintxt">
+            you already have an account, <strong><a href="http://dump.fm/login" class="signin">sign in</a></strong>. If not, <strong><a href="http://dump.fm/register">register</a></strong>!
+          </span>
+      </center>
+      </div>
+    </div>
 
-  <link href="/static/css/pages.css" rel="stylesheet" type="text/css" media="screen" />
-  <link href="/static/css/header.css" rel="stylesheet" type="text/css" media="screen" /> 
-  <script type="text/javascript" src="/static/js/win.js"></script> 
-<script type="text/javascript">
-	var topZ = 7;
-	CreateDropdownWindow('', '500px', true, 'dis_welcome', 300, 70); 
-</script>
-<style>
-.divDragTitle {
-	left:50%!important;	
-	margin-left: -250px!important;
-}
-.divDragContent {
-z-index:666;
-	left:50%!important;
-	margin-left: -250px!important;
+    <link href="/static/css/pages.css" rel="stylesheet" type="text/css" media="screen" />
+    <link href="/static/css/header.css" rel="stylesheet" type="text/css" media="screen" /> 
+    <script type="text/javascript" src="/static/js/win.js"></script>
+    <script type="text/javascript">
+      var topZ = 7;
+      CreateDropdownWindow('', '500px', true, 'dis_welcome', 300, 70);
+    </script>
+    <style>
+      .divDragTitle {
+      left:50%!important;
+      margin-left: -250px!important;
+      }
+      .divDragContent {
+      z-index:666;
+      left:50%!important;
+      margin-left: -250px!important;
 
-}
-</style>
-$endif$
-$endif$
+      }
+    </style>
+    $endif$
+    $endif$
 
 
-  <div id="chatrap">
- 
+    <div id="chatrap">
       <div id="dcontent">
         <div id="messagetabs"></div>
-        <div id="rapper">
-        </div>
-  
-        <div id="messagePane">
- 
-
-$if(user_nick)$  <div id="userList">
-            $users: { u |
-            <div class="username"><a href="/$u.nick$" target="_blank">
-                $u.score_ent$
-                $if(u.avatar)$
-                <img src="$u.avatar$" width="50" height="50">
-                $else$
-                <img src="/static/img/noinfo.png">
-                $endif$
-                $u.nick$</a><br>
-            </div>
-            }$
-	  </div>$endif$
-          <div id="favbox" style="display: hidden"></div>
-          <div id="messageList">
-$messages: { m |
-            <div class="msgDiv oldmsg dump $if(m.favorited)$favorite$endif$" id="message-$m.message_id$" nick="$m.nick$">
-              <span class="nick">
-                <b><a href="$domain$/$m.nick$" target="_blank">$m.nick$</a></b>
-  $if(m.favorited)$
-    <img src="/static/img/thumbs/chatheartover.gif" class="chat-thumb" onclick="Tag.favorite(this)">
-  $else$
-    <img src="/static/img/thumbs/smallheart.gif" class="chat-thumb" onclick="Tag.favorite(this)">
-  $endif$ 
-              </span>
-            <span class="content">$m.content$</span>
-            </div>
-}$
-            <hr />
-          </div>        
-
-          $if(user_nick)$
-          <div id="msgInputDiv">
-              <div id="msginputrapper">  <input id="msgInput" class="msgInput" type="input" />    </div>   
-                <input id="msgSubmit" type="submit" value="Send"/>
-   
-                <input id="upload" value="Upload" type="submit">
-                <input id="webcam-button-upload" value="Webcam" type="submit">
-                <input id="webcam-button-snap" value="Send Pic" type="submit" class="invisible blink">  
-                             <button id="palette-button"><img src="/static/img/palette.gif"></button>
-              </div><div id="effects-msg"class="invisible">click on your face for effects!</div>
-          </div>
-$else$
-          <div id="msgInputDiv">
-              <div id="msginputrapper">  <input id="msgInput" class="msgInput" type="input" />    </div>   
-                <input id="msgSubmit" type="submit" value="Send" onClick="showAlert();"/>
-   
-                <input id="upload" value="Upload" type="submit" onClick="showAlert();">
-                <input id="webcam-button-upload" value="Webcam" type="submit" onClick="showAlert();">
-                <input id="webcam-button-snap" value="Send Pic" type="submit" class="invisible blink"onClick="showAlert();">  
-                             <button id="palette-button"><img src="/static/img/palette.gif"  onClick="showAlert();"></button>
-              </div><div id="effects-msg"class="invisible">click on your face for effects!</div>
-          </div>
-          $endif$
-
-        </div>
-      </div>        
+          $messagepane()$
+      </div>
+    </div>
+    <div id="palette">
+      <div id="palette-thumbs"></div>
+    </div>
+    <div id="footerc">
+      $footer()$
     </div>
-  </div>
-  <div id="palette"><div id="palette-thumbs"></div></div>
-  <div id="footerc">
-              $footer()$
-  </div>
-$preload()$
-</body>
+    $preload()$
+  </body>
 </html>