shashi/tickr.html

## tickr.html
<html>
<head>

<title>Identi.ca &raquo Real-Timeline</title>

<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<!--Main Script-->
<script>
$(document).ready( function() {
	jQuery.getJSON("http://identi.ca/api/statuses/public_timeline.json?callback=?" ,
	function(timel) {
		var last=timel[0].id;
		timel.reverse();
		$(timel).each(function (ntc,da){loadlis(da);});
		updayt(last);
	});
});

function updayt(lst) {
	jQuery.getJSON("http://identi.ca/api/statuses/public_timeline.json?since_id="+lst+"&callback=?",
	function(timl) {
		if(timl!=""){
			lst=timl[0].id;
			timl.reverse();
			$(timl).each(function (ntc,da) {loadlis(da);});
		}
	setTimeout(function () {updayt(lst);},1000);
	});
}

function loadlis(da) {
	var txt='';
	var link='';
	var tends=[' ',':',',','!','(',')','.','?'];
	var protocols = [['http://','http://',[' ']],
			['https://','https://',[' ']],
			['@','http://identi.ca/',tends],
			['#','http://identi.ca/tag/',tends],
			['!', 'http://identi.ca/group/',tends]];
	var links = [];
	for (var i=0;i<protocols.length;i++) {
		var p=0;
		while (da.text.indexOf(protocols[i][0],p)>=0) {
			var s=da.text.indexOf(protocols[i][0],p);
			var ends=protocols[i][2];
			var e,f;
			for(var j=0;j<ends.length;j++) {
				f=da.text.indexOf(ends[j],s+1);
				if (j==0) e=da.text.length;
				if (f > -1 && f < e) e=f;
			}
			if (e<0) e=da.text.length;
			if(s+1<e) {
				link=da.text.substring(s,e);
				links.push([link,'<a href="'+link.replace(protocols[i][0],protocols[i][1]) +'">'+link+'</a>']);
			}
			p=e;
		} //while
	} //for
	for (var i=0;i<links.length;i++) da.text=da.text.replace(links[i][0],links[i][1]);
	var e=$("<li><div class='meta'><img class='ppl' src='http://identi.ca/"+da.user.screen_name+"/avatar/24'/><br/>"+"<a href='http://identi.ca/"+da.user.screen_name+"'>"+da.user.screen_name+"</a><small><br/>at "+da.created_at.split(" ")[3] +"</small></div> <span class='txt'>" +
		da.text+"</span><p class='clr'></p></li>");
	e.prependTo(".timeline").hide().slideDown(1000);
	$(".timeline li:eq(15)").remove();
	$(".timeline li:eq(14)").css({border:"none"});
}

function pst(){
}
</script>
<style>
.clr{
clear:both;
}
.ppl {
height:24px;
width:24px;
border:solid 1px #999;
}
.meta{
width:96px;
margin-right:20px;
float:left;
color:#777;
text-align:right;
}
body {
font-family:'Trebuchet MS';
background-color:black;
}
.timeline, textarea, input, .foot{
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
}
.timeline li:hover{
background:#f9f9f9;
}
.timeline{
background-color:white;
margin:40px;
padding:40px;
}
.input{
text-align:right;
margin:0px 20px -80px 0px;
}
.txt {
display:block;
}
li {
list-style:none;
margin:0px auto;
padding:8px;
padding-right: 20%;
border-bottom:1px dashed #ccc;
}
.send {
margin:-10px 10px;
padding-top:8px;
}
a{
color:#999;
}
.foot {
margin:-20px 40px 10px 40px;
padding:5px;
font-size:11px;
background: #333;
color:#aaa;
}
.tickr{
margin:29px 50px;
font-size:40px;
position:absolute;
color:white;
}
.desc{
font-size:13px;
font-style:italic;
}
</style>
</head>
<body>
<div class='tickr'>tickr <span class='desc'>&raquo; the real identi.ca</span></div>

<div class="input">
<form id="form_notice" action="http://identi.ca/notice/new" method="post">
<textarea id="txt" id="notice_data-text" name="status_textarea" rows="5" cols="22"></textarea><br/>
<a class='lnk' href="http://identi.ca/main/login" target="_blank">login</a><input type="button" value="Post" class="send" onClick=''></input></form></div>
<ul class="timeline"></ul>

<div class="foot">&copy; <a href="http://identi.ca/g0">@g0</a> &amp; <a href="http://identi.ca/manco">@manco</a> ;) <a href="http://creativecommons.org/licenses/by/3.0/">CCA 3.0</a> | <a href="http://gist.github.com/99165">source</a></div>

</body>
</html>
	<html>
	<head>

	<title>Identi.ca &raquo Real-Timeline</title>

	<!--jQuery-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

	<!--Main Script-->
	<script>
	$(document).ready( function() {
	jQuery.getJSON("http://identi.ca/api/statuses/public_timeline.json?callback=?" ,
	function(timel) {
	var last=timel[0].id;
	timel.reverse();
	$(timel).each(function (ntc,da){loadlis(da);});
	updayt(last);
	});
	});

	function updayt(lst) {
	jQuery.getJSON("http://identi.ca/api/statuses/public_timeline.json?since_id="+lst+"&callback=?",
	function(timl) {
	if(timl!=""){
	lst=timl[0].id;
	timl.reverse();
	$(timl).each(function (ntc,da) {loadlis(da);});
	}
	setTimeout(function () {updayt(lst);},1000);
	});
	}

	function loadlis(da) {
	var txt='';
	var link='';
	var tends=[' ',':',',','!','(',')','.','?'];
	var protocols = [['http://','http://',[' ']],
	['https://','https://',[' ']],
	['@','http://identi.ca/',tends],
	['#','http://identi.ca/tag/',tends],
	['!', 'http://identi.ca/group/',tends]];
	var links = [];
	for (var i=0;i<protocols.length;i++) {
	var p=0;
	while (da.text.indexOf(protocols[i][0],p)>=0) {
	var s=da.text.indexOf(protocols[i][0],p);
	var ends=protocols[i][2];
	var e,f;
	for(var j=0;j<ends.length;j++) {
	f=da.text.indexOf(ends[j],s+1);
	if (j==0) e=da.text.length;
	if (f > -1 && f < e) e=f;
	}
	if (e<0) e=da.text.length;
	if(s+1<e) {
	link=da.text.substring(s,e);
	links.push([link,'<a href="'+link.replace(protocols[i][0],protocols[i][1]) +'">'+link+'</a>']);
	}
	p=e;
	} //while
	} //for
	for (var i=0;i<links.length;i++) da.text=da.text.replace(links[i][0],links[i][1]);
	var e=$("<li><div class='meta'><img class='ppl' src='http://identi.ca/"+da.user.screen_name+"/avatar/24'/><br/>"+"<a href='http://identi.ca/"+da.user.screen_name+"'>"+da.user.screen_name+"</a><small><br/>at "+da.created_at.split(" ")[3] +"</small></div> <span class='txt'>" +
	da.text+"</span><p class='clr'></p></li>");
	e.prependTo(".timeline").hide().slideDown(1000);
	$(".timeline li:eq(15)").remove();
	$(".timeline li:eq(14)").css({border:"none"});
	}

	function pst(){
	}
	</script>
	<style>
	.clr{
	clear:both;
	}
	.ppl {
	height:24px;
	width:24px;
	border:solid 1px #999;
	}
	.meta{
	width:96px;
	margin-right:20px;
	float:left;
	color:#777;
	text-align:right;
	}
	body {
	font-family:'Trebuchet MS';
	background-color:black;
	}
	.timeline, textarea, input, .foot{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
	}
	.timeline li:hover{
	background:#f9f9f9;
	}
	.timeline{
	background-color:white;
	margin:40px;
	padding:40px;
	}
	.input{
	text-align:right;
	margin:0px 20px -80px 0px;
	}
	.txt {
	display:block;
	}
	li {
	list-style:none;
	margin:0px auto;
	padding:8px;
	padding-right: 20%;
	border-bottom:1px dashed #ccc;
	}
	.send {
	margin:-10px 10px;
	padding-top:8px;
	}
	a{
	color:#999;
	}
	.foot {
	margin:-20px 40px 10px 40px;
	padding:5px;
	font-size:11px;
	background: #333;
	color:#aaa;
	}
	.tickr{
	margin:29px 50px;
	font-size:40px;
	position:absolute;
	color:white;
	}
	.desc{
	font-size:13px;
	font-style:italic;
	}
	</style>
	</head>
	<body>
	<div class='tickr'>tickr <span class='desc'>» the real identi.ca</span></div>

	<div class="input">
	<form id="form_notice" action="http://identi.ca/notice/new" method="post">
	<textarea id="txt" id="notice_data-text" name="status_textarea" rows="5" cols="22"></textarea><br/>
	<a class='lnk' href="http://identi.ca/main/login" target="_blank">login</a><input type="button" value="Post" class="send" onClick=''></input></form></div>
	<ul class="timeline"></ul>

	<div class="foot">© <a href="http://identi.ca/g0">@g0</a> & <a href="http://identi.ca/manco">@manco</a> ;) <a href="http://creativecommons.org/licenses/by/3.0/">CCA 3.0</a> \| <a href="http://gist.github.com/99165">source</a></div>

	</body>
	</html>