Use rooms/ subdirectory for templates; add per-room templates

author: Scott Ostler <scottbot9000@gmail.com> 2010-08-23 20:00:49 -0400
committer: Scott Ostler <scottbot9000@gmail.com> 2010-08-23 20:00:49 -0400
commit: a70175759c5761f7aa4280280afa44fcb3f85c3b (patch)
tree: b0902ed6de678cae1a0e64517d8066da64a953f5 /template/rooms
parent: 178bce3e5937d1a4fe17e4bf57e2737aaa483668 (diff)
3 files changed, 785 insertions, 0 deletions
diff --git a/template/rooms/butt.st b/template/rooms/butt.st
new file mode 100644
index 0000000..e97390e
--- /dev/null
+++ b/template/rooms/butt.st
@@ -0,0 +1,302 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
+<html> 
+<head> 
+<title>dump.fm image vortex</title>
+<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
+<script type="text/javascript" src="/static/js/pichat.butt.js"></script>
+<script type="text/javascript" src="/static/js/jquery-ui-1.8.effects.min.js"></script>
+<script type="text/javascript" src="/static/js/sha1.js"></script>
+<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
+<link rel="stylesheet" type="text/css" href="/static/css/header.css">
+$if(!user_nick)$
+<link href="/static/form_login/front.css" media="screen, projection" rel="stylesheet" type="text/css">
+$endif$
+
+$if(isadmin)$
+<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"
+      type="text/css" media="all" />
+<link rel="stylesheet" href="/static/css/admin.css"
+      type="text/css" media="all" />
+<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"
+        type="text/javascript"></script>
+<script src="/static/js/admin.js"
+        type="text/javascript"></script>
+$endif$
+$if(!user_avatar)$
+  <link rel="stylesheet" type="text/css" href="/static/css/dumpnewuser.css">
+$endif$
+  <link rel="stylesheet" type="text/css" href="/static/css/dump.css">
+  <script type="text/javascript" src="/static/webcam/webcam.js"></script>
+  <script type="text/javascript" src="/static/js/tooltip.js"></script>
+  <script type="text/javascript" src="/static/js/away.js"></script>
+  <script type="text/javascript" src="/static/js/ajaxupload.js"></script>
+$if(user_nick)$
+  <script type="text/javascript" src="/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) {
+      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()}
+    } 
+  </script>
+
+<style type="text/css"> 
+	html { 
+		overflow: hidden; 
+	} 
+	body { 
+		margin: 0px; 
+		padding: 0px; 
+		background: #111; 
+		position: absolute; 
+		width: 100%; 
+		height: 100%; 
+
+		cursor: crosshair; 
+	} 
+	#canvas { 
+		position:absolute; 
+		left: 0%; 
+		top: 0%; 
+		width: 100%; 
+		height: 100%; 
+		background:#EEF2FF url(/static/img/fade-blue.png) top center repeat-x;
+		overflow: hidden; 
+	} 
+	#canvas img { 
+		position: absolute; 
+		background: #666; 
+		overflow: hidden; 
+		cursor: pointer; 
+		left: 100%; 
+		border-color: #000; 
+		border-style: solid; 
+		border-width: 1px; 
+		-ms-interpolation-mode:nearest-neighbor; 
+	} 
+	#canvas span { 
+		position: absolute; 
+		color: #9C9; 
+		font-family: 'courier new', typewriter, matrix, monospace; 
+		font-size: 0px; 
+		white-space: nowrap; 
+		left: -1000px; 
+		background: #010; 
+		filter: alpha(opacity=90); 
+		opacity: 0.9; 
+	} 
+</style> 
+<script type="text/javascript"> 
+// ================================================== 
+// script realized by G�rard Ferrandez - June 2006 
+// http://www.dhteumeuleu.com 
+// ================================================== 
+ 
+id = function(o) { return document.getElementById(o); } 
+px = function (x) {	return ''.concat(Math.round(x), 'px'); } 
+ 
+////////////////////////////////////////////////////////////////////////////// 
+function resize() {	gf.resize(); } 
+onresize = resize; 
+ 
+document.onmousemove = function(e) 
+{ 
+	if(window.event) e=window.event; 
+	gf.xm = (e.x || e.clientX) - gf.nx - gf.nw * .5; 
+	gf.ym = (e.y || e.clientY) - gf.ny - gf.nh * .5; 
+} 
+ 
+////////////////////////////////////////////////////////////////////////////// 
+var gf = { 
+	O    : [], 
+	cont : 0, 
+	N    : 0, 
+	S    : 0, 
+	img  : 0, 
+	spa  : 0, 
+	xm   : 0, 
+	ym   : 0, 
+	nx   : 0, 
+	ny   : 0, 
+	nw   : 0, 
+	nh   : 0, 
+	cx   : 0, 
+	cy   : 0, 
+	zoom : 1, 
+	x    : 0, 
+	y    : 0, 
+	z    : -40000, 
+	xt   : 0, 
+	yt   : 0, 
+	zt   : 0, 
+////////////////////////////////////////////////////////////////////////////// 
+	resize : function () 
+	{ 
+		var o   = id('canvas'); 
+		gf.nx   = o.offsetLeft; 
+		gf.ny   = o.offsetTop; 
+		gf.nw   = o.offsetWidth; 
+		gf.nh   = o.offsetHeight; 
+		gf.zoom = gf.nh / 700; 
+	}, 
+ 
+	CObj : function (n) 
+	{ 
+		this.n                = n; 
+		this.x                = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; 
+		this.y                = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; 
+		this.z                = Math.round(n * (10000 / gf.N)); 
+		this.w                = gf.img[n].width; 
+		this.h                = gf.img[n].height; 
+		this.oxt              = gf.spa[n]; 
+		this.oxs              = this.oxt.style; 
+		this.txt              = gf.spa[n].innerHTML; 
+		this.oxt.innerHTML    = ""; 
+		this.obj              = gf.img[n]; 
+		this.obs              = this.obj.style; 
+		this.obj.parent       = this; 
+		this.obj.onclick      = function() { this.parent.click(); } 
+		this.obj.ondrag       = function() { return false; } 
+		this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z); 
+		this.F                = false; 
+		this.CF               = 100; 
+		this.sto              = []; 
+ 
+		this.anim = function() 
+		{ 
+			var f = 700 + this.z - gf.z; 
+			if (f > 0) 
+			{ 
+				var d               = 1000 / f; 
+				var X               = gf.nw * .5 + ((this.x - gf.x - gf.cx) * d); 
+				var Y               = gf.nh * .5 + ((this.y - gf.y - gf.cy) * d); 
+				var W               = d * this.w * gf.zoom; 
+				var H               = d * this.h * gf.zoom; 
+				this.obs.left       = px(X - W * .5); 
+				this.obs.top        = px(Y - H * .5); 
+				this.obs.width      = px(W); 
+				this.obs.height     = px(H); 
+				this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible"; 
+				this.oxs.left       = px(X - W * .5); 
+				this.oxs.top        = px(Y + H * .5); 
+				if((gf.zt - gf.z) < 20) 
+				{ 
+					if(!this.F) 
+					{ 
+						this.F            = true; 
+						this.CF           = Math.random() * 200; 
+						this.oxs.fontSize = px(1 + d * 20 * gf.zoom); 
+						var T             = ""; 
+						var tn            = this.txt.length; 
+						for(var i = 0; i < tn; i++) 
+						{ 
+							T = T.concat(this.txt.charAt(i)); 
+							this.sto[i] = setTimeout('gf.O['.concat(n, '].oxt.innerHTML = "', T.concat("_"), '";'), Math.round(f / 4) + 32 * i); 
+						} 
+					} 
+				} 
+				else 
+				{ 
+					this.F = false; 
+					this.oxt.innerHTML = ""; 
+				} 
+			} 
+			else 
+			{ 
+				this.x  = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; 
+				this.y  = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; 
+				this.z += 10000; 
+				this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z); 
+			} 
+		} 
+ 
+		this.cto = function() 
+		{ 
+			var i = this.txt.length; 
+			while (i--) clearTimeout(this.sto[i]); 
+		} 
+ 
+		this.click = function() 
+		{ 
+			var i = gf.N; 
+			while (i--) gf.O[i].cto(); 
+			if(gf.S != this) 
+			{ 
+				gf.xt = this.x; 
+				gf.yt = this.y; 
+				gf.zt = this.z; 
+				gf.S  = this; 
+			} 
+			else 
+			{ 
+				gf.S   = 0; 
+				gf.zt += 1600; 
+			} 
+		} 
+	}, 
+ 
+	init : function () 
+	{ 
+		gf.cx   = gf.nw / 2; 
+		gf.cy   = gf.nh / 2; 
+		gf.cont = id("canvas"); 
+		gf.img  = id("canvas").getElementsByTagName("img"); 
+		gf.spa  = id("canvas").getElementsByTagName("span"); 
+		gf.N    = gf.img.length; 
+		for (var i = 0; i < gf.N; i++) gf.O[i] = new gf.CObj(i); 
+		gf.run(); 
+		gf.O[0].click(); 
+	}, 
+ 
+	run : function () 
+	{ 
+		gf.cx += (gf.xm - gf.cx) * .1; 
+		gf.cy += (gf.ym - gf.cy) * .1; 
+		gf.x  += (gf.xt - gf.x)  * .05; 
+		gf.y  += (gf.yt - gf.y)  * .05; 
+		gf.z  += (gf.zt - gf.z)  * .05; 
+		var i = gf.N; 
+		while (i--) gf.O[i].anim(); 
+		setTimeout(gf.run, 16); 
+	} 
+} 
+ 
+onload = function() { 
+	resize(); 
+	gf.init(); 
+} 
+ 
+</script> 
+</head> 
+ 
+<body> 
+ 
+<div id="canvas"> 
+$messages: { m |
+<img src="$m.content$"><span>$m.nick$</span> 
+ }$
+
+
+</div> 
+
+<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 --> 
+<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#ccc"></span></span></span> 
+<script type="text/javascript">m00=document.getElementById("canvas").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script> 
+<!-- end of images_loading_bar code --> 
+ 
+</body> 
+</html>
diff --git a/template/rooms/chat.st b/template/rooms/chat.st
new file mode 100644
index 0000000..f4c4162
--- /dev/null
+++ b/template/rooms/chat.st
@@ -0,0 +1,192 @@
+<!--/*
+
+     _____          ___           ___           ___         ___         ___     
+    /  /::\        /__/\         /__/\         /  /\       /  /\       /__/\    
+   /  /:/\:\       \  \:\       |  |::\       /  /::\     /  /:/_     |  |::\   
+  /  /:/  \:\       \  \:\      |  |:|:\     /  /:/\:\   /  /:/ /\    |  |:|:\  
+ /__/:/ \__\:|  ___  \  \:\   __|__|:|\:\   /  /:/~/:/  /  /:/ /:/  __|__|:|\:\ 
+ \  \:\ /  /:/ /__/\  \__\:\ /__/::::| \:\ /__/:/ /:/  /__/:/ /:/  /__/::::| \:\
+  \  \:\  /:/  \  \:\ /  /:/ \  \:\~~\__\/ \  \:\/:/   \  \:\/:/   \  \:\~~\__\/
+   \  \:\/:/    \  \:\  /:/   \  \:\        \  \::/     \  \::/     \  \:\      
+    \  \::/      \  \:\/:/     \  \:\        \  \:\      \  \:\      \  \:\     
+     \__\/        \  \::/       \  \:\        \  \:\      \  \:\      \  \:\    
+                   \__\/         \__\/         \__\/       \__\/       \__\/    
+
+(c)2010 dump.fm -->
+
+<html>
+<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$;
+    var Version = $version$;
+$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) {
+      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(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)$
+
+<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$
+
+
+  <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>        
+    </div>
+  </div>
+  <div id="palette"><div id="palette-thumbs"></div></div>
+  <div id="footerc">
+              $footer()$
+  </div>
+$preload()$
+</body>
+</html>
diff --git a/template/rooms/vortex.st b/template/rooms/vortex.st
new file mode 100644
index 0000000..c15c890
--- /dev/null
+++ b/template/rooms/vortex.st
@@ -0,0 +1,291 @@
+
+<html> 
+<head> 
+<title>dump.fm image vortex</title>
+
+
+
+
+  <script>
+    jQuery(document).ready(initChat);
+    var Nick = $json_user_nick$;
+    var Room = $json_room_key$;
+    var Timestamp = $timestamp$;
+
+
+  </script>
+
+<style type="text/css"> 
+ 
+ 
+	 
+	html { 
+		overflow: hidden; 
+	} 
+	body { 
+		margin: 0px; 
+		padding: 0px; 
+		background: #111; 
+		position: absolute; 
+		width: 100%; 
+		height: 100%; 
+		background:#f0f9ff url(/static/img/fade-blue.png) top left repeat-x fixed;
+		cursor: crosshair; 
+	} 
+	#canvas { 
+		position:absolute; 
+		left: 0%; 
+		top: 0%; 
+		width: 100%; 
+		height: 100%; 
+		overflow: hidden; 
+	} 
+	#canvas img { 
+		position: absolute; 
+		background: #666; 
+		overflow: hidden; 
+		cursor: pointer; 
+		left: 100%; 
+		border-color: #000; 
+		border-style: solid; 
+		border-width: 1px; 
+		-ms-interpolation-mode:nearest-neighbor; 
+	} 
+	#canvas span { 
+		position: absolute; 
+		color: #9C9; 
+		font-family: 'courier new', typewriter, matrix, monospace; 
+		font-size: 0px; 
+		white-space: nowrap; 
+		left: -1000px; 
+		background: #010; 
+		filter: alpha(opacity=90); 
+		opacity: 0.9; 
+	} 
+#infotxt{
+font-family: 'courier new', typewriter, matrix, monospace; 
+line-height:16px;
+background-image:url(/static/img/bg.dither.gif);
+width:230px;
+
+padding:10px;
+padding-bottom:14px;
+font-size:12px;
+    border-bottom-right-radius:100px;
+    -webkit-border-bottom-right-radius:100px;
+    -moz-border-radius-bottomright:100px;
+}
+.returnlink{
+text-decoration:none;
+	font-family: Arial, Helvetica, sans-serif;
+	color:#f0e;
+}
+.returnlink a:hover{
+text-decoration:none;
+	font-family: Arial, Helvetica, sans-serif;
+	color:blue;
+}
+
+</style> 
+<script type="text/javascript"> 
+id = function(o) { return document.getElementById(o); } 
+px = function (x) {	return ''.concat(Math.round(x), 'px'); } 
+ 
+////////////////////////////////////////////////////////////////////////////// 
+function resize() {	gf.resize(); } 
+onresize = resize; 
+ 
+document.onmousemove = function(e) 
+{ 
+	if(window.event) e=window.event; 
+	gf.xm = (e.x || e.clientX) - gf.nx - gf.nw * .5; 
+	gf.ym = (e.y || e.clientY) - gf.ny - gf.nh * .5; 
+} 
+ 
+////////////////////////////////////////////////////////////////////////////// 
+var gf = { 
+	O    : [], 
+	cont : 0, 
+	N    : 0, 
+	S    : 0, 
+	img  : 0, 
+	spa  : 0, 
+	xm   : 0, 
+	ym   : 0, 
+	nx   : 0, 
+	ny   : 0, 
+	nw   : 0, 
+	nh   : 0, 
+	cx   : 0, 
+	cy   : 0, 
+	zoom : 1, 
+	x    : 0, 
+	y    : 0, 
+	z    : -40000, 
+	xt   : 0, 
+	yt   : 0, 
+	zt   : 0, 
+////////////////////////////////////////////////////////////////////////////// 
+	resize : function () 
+	{ 
+		var o   = id('canvas'); 
+		gf.nx   = o.offsetLeft; 
+		gf.ny   = o.offsetTop; 
+		gf.nw   = o.offsetWidth; 
+		gf.nh   = o.offsetHeight; 
+		gf.zoom = gf.nh / 700; 
+	}, 
+ 
+	CObj : function (n) 
+	{ 
+		this.n                = n; 
+		this.x                = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; 
+		this.y                = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; 
+		this.z                = Math.round(n * (10000 / gf.N)); 
+		this.w                = gf.img[n].width; 
+		this.h                = gf.img[n].height; 
+		this.oxt              = gf.spa[n]; 
+		this.oxs              = this.oxt.style; 
+		this.txt              = gf.spa[n].innerHTML; 
+		this.oxt.innerHTML    = ""; 
+		this.obj              = gf.img[n]; 
+		this.obs              = this.obj.style; 
+		this.obj.parent       = this; 
+		this.obj.onclick      = function() { this.parent.click(); } 
+		this.obj.ondrag       = function() { return false; } 
+		this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z); 
+		this.F                = false; 
+		this.CF               = 100; 
+		this.sto              = []; 
+ 
+		this.anim = function() 
+		{ 
+			var f = 700 + this.z - gf.z; 
+			if (f > 0) 
+			{ 
+				var d               = 1000 / f; 
+				var X               = gf.nw * .5 + ((this.x - gf.x - gf.cx) * d); 
+				var Y               = gf.nh * .5 + ((this.y - gf.y - gf.cy) * d); 
+				var W               = d * this.w * gf.zoom; 
+				var H               = d * this.h * gf.zoom; 
+				this.obs.left       = px(X - W * .5); 
+				this.obs.top        = px(Y - H * .5); 
+				this.obs.width      = px(W); 
+				this.obs.height     = px(H); 
+				this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible"; 
+				this.oxs.left       = px(X - W * .5); 
+				this.oxs.top        = px(Y + H * .5); 
+				if((gf.zt - gf.z) < 20) 
+				{ 
+					if(!this.F) 
+					{ 
+						this.F            = true; 
+						this.CF           = Math.random() * 200; 
+						this.oxs.fontSize = px(1 + d * 20 * gf.zoom); 
+						var T             = ""; 
+						var tn            = this.txt.length; 
+						for(var i = 0; i < tn; i++) 
+						{ 
+							T = T.concat(this.txt.charAt(i)); 
+							this.sto[i] = setTimeout('gf.O['.concat(n, '].oxt.innerHTML = "', T.concat("_"), '";'), Math.round(f / 4) + 32 * i); 
+						} 
+					} 
+				} 
+				else 
+				{ 
+					this.F = false; 
+					this.oxt.innerHTML = ""; 
+				} 
+			} 
+			else 
+			{ 
+				this.x  = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; 
+				this.y  = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; 
+				this.z += 10000; 
+				this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z); 
+			} 
+		} 
+ 
+		this.cto = function() 
+		{ 
+			var i = this.txt.length; 
+			while (i--) clearTimeout(this.sto[i]); 
+		} 
+ 
+		this.click = function() 
+		{ 
+			var i = gf.N; 
+			while (i--) gf.O[i].cto(); 
+			if(gf.S != this) 
+			{ 
+				gf.xt = this.x; 
+				gf.yt = this.y; 
+				gf.zt = this.z; 
+				gf.S  = this; 
+			} 
+			else 
+			{ 
+				gf.S   = 0; 
+				gf.zt += 1600; 
+			} 
+		} 
+	}, 
+ 
+	init : function () 
+	{ 
+		gf.cx   = gf.nw / 2; 
+		gf.cy   = gf.nh / 2; 
+		gf.cont = id("canvas"); 
+		gf.img  = id("canvas").getElementsByTagName("img"); 
+		gf.spa  = id("canvas").getElementsByTagName("span"); 
+		gf.N    = gf.img.length; 
+		for (var i = 0; i < gf.N; i++) gf.O[i] = new gf.CObj(i); 
+		gf.run(); 
+		gf.O[0].click(); 
+	}, 
+ 
+	run : function () 
+	{ 
+		gf.cx += (gf.xm - gf.cx) * .1; 
+		gf.cy += (gf.ym - gf.cy) * .1; 
+		gf.x  += (gf.xt - gf.x)  * .05; 
+		gf.y  += (gf.yt - gf.y)  * .05; 
+		gf.z  += (gf.zt - gf.z)  * .05; 
+		var i = gf.N; 
+		while (i--) gf.O[i].anim(); 
+		setTimeout(gf.run, 16); 
+	} 
+} 
+ 
+onload = function() { 
+	resize(); 
+	gf.init(); 
+} 
+ 
+</script> 
+</head> 
+ 
+<body> 
+ 
+<div id="canvas"> 
+$messages: { m |
+<img src="$m.content$"><span>$m.nick$</span> 
+ }$
+
+<div id="infotxt">dump.fm image vortex<br><br>Real-Time Visualization of whats being dumped now.<br><br><a href="http://dump.fm" class="returnlink"> Return Home</a><br><br>
+   <div id="likebutton">
+              <iframe src="http://www.facebook.com/widgets/like.php?href=http://dump.fm/chat/vortex"
+        scrolling="no" frameborder="0"
+        style="border:none; width:170px; height:80px"></iframe>
+              </div>
+</div> 
+
+
+</div> 
+
+<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#ccc"></span></span></span> 
+<script type="text/javascript">m00=document.getElementById("canvas").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script> 
+
+ 
+</body> 
+</html>
author	Scott Ostler <scottbot9000@gmail.com>	2010-08-23 20:00:49 -0400
committer	Scott Ostler <scottbot9000@gmail.com>	2010-08-23 20:00:49 -0400
commit	a70175759c5761f7aa4280280afa44fcb3f85c3b (patch)
tree	b0902ed6de678cae1a0e64517d8066da64a953f5 /template/rooms
parent	178bce3e5937d1a4fe17e4bf57e2737aaa483668 (diff)