<div id="twitter-ticker">
 
<!-- Контейнер для заголовка и иконки -->
<div id="top-bar">
<div id="twitIcon"><img src="img/womtec.png" width="64" height="64" alt="Twitter" /></div>
<h2 class="tut">Твитты</h2>
</div>
 
<!-- Контейнер с картиной загрузки, которая исчезает после загрузки твиттов -->
<div id="tweet-container">
<img id="loading" src="img/loading.gif" width="16" height="11" alt="Loading" />
</div>
 
<!-- Контейнер для вывода твиттов -->
<div id="scroll"></div>
 
</div>

body, h2, p, ul, li, ol { margin:0; padding:0; }
body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; font-size:13px; background:url(img/top.jpg) repeat-x #474269; }
p { padding-top:7px; }
 
a,a:visited { color:#00bbff; text-decoration:none; outline:none; }
a:hover { text-decoration:underline; }
 
h2.tut { color:#fff; font-size:16px; text-transform:uppercase; padding:12px 0 0 58px; }
 
#main { text-align:center; width:420px; margin:40px auto; }
#twitter-ticker { width:200px; height:300px; color:#666; display:none; text-align:left; margin:40px auto 20px; background:url(img/slick.png) no-repeat #f5f5f5; }
#tweet-container { height:230px; width:auto; overflow:hidden; }
#twiticon { position:absolute; top:-25px; left:-10px; width:64px; height:64px; }
#top-bar { height:45px; border-bottom:1px solid white; position:relative; margin-bottom:8px; background:url(img/topbar.png) repeat-x; }
#loading { margin:100px 95px; }
 
.tweet { border:1px solid #f0f0f0; width:auto; overflow:hidden; margin:8px 8px 0; padding:5px; background:url(img/transparent.png); }
.tweet:first-child { margin-top:0; }
.tweet .avatar,.tweet .user,.tweet .time { float:left; }
.tweet .time { display:block; width:70%; font-size:13px; color:#aaa; white-space:nowrap; }
.tweet .avatar img { width:36px; height:36px; border:1px solid #eee; margin:0 5px 5px 0; }
.tweet .txt { clear:both; }
.tweet .user { font-weight:bold; }

<!--[if lt IE 7]>
<style type="text/css">
div.tweet { background:none; border:none; }
div#twitIcon { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/womtec.png, sizingMethod=crop); }
div#twitIcon img { display:none; }
</style>
< ![endif]-->

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="scroll/scroll.css" />
 
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="scroll/jquery.mousewheel.js"></script>
<script type="text/javascript" src="scroll/jScrollPane.js"></script>
 
<script type="text/javascript" src="script.js"></script>

var tweetUsers = ['womtec','GoogleRussia'];
var buildString = "";
 
$(document).ready(function() {
	$('#twitter-ticker').slideDown('slow');
	for(var i=0;i < tweetUsers.length;i++) {
		if(i!=0) buildString+='+OR+';
		buildString+='from:'+tweetUsers[i];
	}
	var fileref = document.createElement('script');	
	fileref.setAttribute("type","text/javascript");
	fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=20");
	document.getElementsByTagName("head")[0].appendChild(fileref);
});
 
function TweetTick(ob) {
	var container=$('#tweet-container');
	container.html('');	
	$(ob.results).each(function(el) {
	var str = '	<div class="tweet">\
			<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
			<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\
			<div class="time">'+relativeTime(this.created_at)+'</div>\
			<div class="txt">'+formatTwitString(this.text)+'</div>\
			';
	container.append(str);	
	});	
	container.jScrollPane();
}
 
function formatTwitString(str) {
	str=' '+str;
	str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
	str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
	str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
	return str;
}
 
function relativeTime(pastTime) {	
	var origStamp = Date.parse(pastTime);
	var curDate = new Date();
	var currentStamp = curDate.getTime();	
	var difference = parseInt((currentStamp - origStamp)/1000);
	if(difference < 0) return false;
	if(difference <= 5) return "Just now";
	if(difference <= 20) return "Seconds ago";
	if(difference <= 60) return "A minute ago";
	if(difference < 3600) return parseInt(difference/60)+" minutes ago";
	if(difference <= 1.5*3600) return "One hour ago";
	if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago";
	if(difference < 1.5*24*3600) return "One day ago";	
	var dateArr = pastTime.split(' ');
	return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}