<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="expires" content="Friday 24 October 1997 09:30 GMT">
<title>Chrisoft::Blog</title>
<link rel=stylesheet href='../common.css' type='text/css'>
<link rel=stylesheet href='extras.css' type='text/css'>
<style type="text/css">
div#button
{
display:table;
position:fixed;
top:50%;
margin-top:-3.5em;
width:4em;
height:7em;
text-align:center;
font-weight:bold;
background-color:rgba(255,204,255,0.5);
color:#EE8899;
}
div#button:hover
{
background-color:rgba(255,220,255,0.7);
color:#FF66CC;
}
</style>
<script type="text/javascript">
var titles=[],dates=[],links=[],elems=[],oldelems=[],xs=[],ys=[];
var numPost=5;
var startIdx=0;
var dragging=null;
var xp=0,yp=0,xe=0,ye=0;
function chk(tx,ty)
{
for(var i=0;i<xs.length;++i)
if(Math.hypot(tx-xs[i],ty-ys[i])<100)return 1;
return 0;
}
function dragInit(e)
{
dragging=e;xe=xp-dragging.offsetLeft;ye=yp-dragging.offsetTop;
e.style.transition="none";
}
function onMove(e)
{
xp=document.all?window.event.clientX:e.pageX;
yp=document.all?window.event.clientY:e.pageY;
if(dragging!==null)
{
dragging.style.left=(xp-xe)+'px';
dragging.style.top=(yp-ye)+'px';
}
}
function initTile(obj,inv)
{
var t=0;
t=Math.random()*window.innerHeight;
obj.style.top=t.toString()+'px';
t=window.innerWidth+Math.random()*window.innerWidth*0.7+window.innerWidth*0.1;
if(inv==1)t-=2*window.innerWidth;
obj.style.left=t.toString()+'px';
t=Math.random()*360;
obj.style.transform='rotate('+t.toString()+'deg)';
}
function launchTileIn(obj)
{
var tx=0,ty=0;
obj.style.transition="all 0.5s ease-out";
do{
tx=Math.random()*window.innerHeight*0.35+window.innerHeight*0.35;
ty=Math.random()*window.innerWidth*0.6+window.innerWidth*0.1;
}while(chk(tx,ty)==1);
obj.style.top=tx.toString()+'px';
obj.style.left=ty.toString()+'px';
xs.push(tx);ys.push(ty);
tx=Math.random()*90-45;
obj.style.transform='rotate('+tx.toString()+'deg)';
}
function launchTileOut(obj,inv)
{
var t=0;
obj.style.transition="all 0.5s ease-in";
t=Math.random()*window.innerHeight;
obj.style.top=t.toString()+'px';
t=0-obj.offsetWidth-Math.random()*window.innerWidth;
if(inv==1)t=window.innerWidth-t;
obj.style.left=t.toString()+'px';
t=Math.random()*90-45;
obj.style.transform='rotate('+t.toString()+'deg)';
}
function createTile(id)
{
var e=document.createElement("table");
e.className="TText";
e.style.position="fixed";
e.style.cursor="move";
e.style.boxShadow="1px 1px 1px 1px #333333";
e.innerHTML="<tr><td><a href=\""+links[id]+"\">"+titles[id]+"</a></td></tr><tr><td>"+dates[id]+"</td></tr>";
e.onmousedown=function(){dragInit(e);return false;};
elems.push(e);
document.getElementsByTagName("body")[0].appendChild(e);
return e;
}
function createGroup(inv)
{
xs.length=ys.length=0;
for(var i=0;i<numPost;++i)
{
if(startIdx+i>=titles.length)break;
var e=createTile(startIdx+i);
initTile(e,inv);
}
setTimeout(
function(){for(var i=0;i<elems.length;++i)launchTileIn(elems[i]);}
,500);
}
function lastGroup()
{
if(startIdx-numPost<0)return;
oldelems=elems.slice(0);elems.length=0;
for(var i=0;i<oldelems.length;++i)launchTileOut(oldelems[i],1);
setTimeout(
function(){for(var i=0;i<oldelems.length;++i)oldelems[i].remove();}
,500);
startIdx-=numPost;
createGroup(1);
}
function nextGroup()
{
if(startIdx+numPost>=titles.length)return;
oldelems=elems.slice(0);elems.length=0;
for(var i=0;i<oldelems.length;++i)launchTileOut(oldelems[i],0);
setTimeout(
function(){for(var i=0;i<oldelems.length;++i)oldelems[i].remove();}
,500);
startIdx+=numPost;
createGroup(0);
}
function onWheel(e)
{
var wdelta=e.wheelDelta||-e.detail;
if(wdelta<0)nextGroup();
if(wdelta>0)lastGroup();
}
function init()
{
document.addEventListener("mousewheel",onWheel,false);
document.addEventListener("DOMMouseScroll",onWheel,false);
document.onmousemove=onMove;
document.onmouseup=function(){dragging=null;};
createGroup();
}
</script>
</head>
<body onload="init();">
<table border="0" style="width:70%;margin:auto;">
<tr>
<td class="CTitle" style="font-size:2em;" colspan="2">
<a href="../">Chrisoft</a>::Blog
</td>
</tr>
<tr>
<td class="TText" colspan="2" style="padding:10px;">
WARNING: You've entered the dangerous zone.<br>
I occasionally empty the trash in my brain here...<br>
Browse with care!<br>
Most posts are in Chinese...
</td>
</tr>
</table>
<div onmousedown="lastGroup();" id="button" style="left:0;">
<span style="display:table-cell;vertical-align:middle;"><</span>
</div>
<div onmousedown="nextGroup();" id="button" style="right:0;">
<span style="display:table-cell;vertical-align:middle;">></span>
</div>
<script type="text/javascript">
<?php
$files=scandir("/var/www/html/blog/content",1);
for($i=0,$c=count($files);$i<$c;$i++)
{
if(!(strstr($files[$i],"txt")))continue;
if(strstr($files[$i],"swp"))continue;
$fn=sprintf("/var/www/html/blog/content/%s",$files[$i]);
$handle=fopen($fn, "r");
$title="";$date="";
if($handle)
{
$title=fgets($handle,4096);
$date=fgets($handle,4096);
fclose($handle);
}
$title=substr($title,0,strlen($title)-1);
$date=substr($date,0,strlen($date)-1);
$cur=sprintf("links.push(\"./blogreader.php?p=%s\");titles.push(\"%s\");dates.push(\"%s\");\n",substr($files[$i],0,strlen($files[$i])-4),$title,$date);
echo $cur;
}
?>
</script>
</body>