diff options
Diffstat (limited to 'template/rooms/vortex.st')
| -rw-r--r-- | template/rooms/vortex.st | 291 |
1 files changed, 291 insertions, 0 deletions
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> |