devhawk/gist:592045

## gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .twitter_user
        {
            font-weight: bold;
        }
        #tweets
        {
            width: 600px;
        }
        .tweet
        {
            margin: 5px 0px;
        }
        .profile_image
        {
            float: left;
        }

        .profile_image img
        {
            margin-right: 5px;
        }

        .tweet_info
        {
            clear: both;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="test">
    </div>
    <div id="tweets">
    </div>

    <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.tmpl.js"></script>
    <script id="clientTemplate" type="text/x-jquery-tmpl">
        <div class="tweet" twitterstatusid="${id}" twitteruserid="${user.id}">
            <div class="profile_image">
                <img width=48 height=48 src="${user.profile_image_url}"></img>
            </div>
            <div class="tweet_text">
                <a class="twitter_user" href="http://twitter.com/${user.screen_name}">@${user.screen_name}</a>
                {{html proctext(text)}}
            </div>
            <div class="tweet_info">
                <a href="http://twitter.com/${user.screen_name}/status/${id}">
                    ${proctime(created_at)}
                </a>
                via {{html procsource(source)}}
                {{if (in_reply_to_status_id != null)}}
                    in reply to
                    <a href="http://twitter.com/${in_reply_to_screen_name}/status/${in_reply_to_status_id}">
                        ${in_reply_to_screen_name}
                    </a>
                {{/if}}
            </div>
        </div>
    </script>
    <script type="text/javascript">
        //jQuery function to replicate IE's outerHTML property
        jQuery.fn.outerHTML = function () {
            return $('<div>').append(this.eq(0).clone()).html();
        };

        //helper functions to render tweet time (aka: x seconds ago, y days ago, etc)
        var K = function () { var a = navigator.userAgent; return { ie: a.match(/MSIE\s([^;]*)/)} } ();
        var proctime = function (a) { var b = new Date(); var c = new Date(a); if (K.ie) { c = Date.parse(a.replace(/( \+)/, ' UTC$1')) } var d = b - c; var e = 1000, minute = e * 60, hour = minute * 60, day = hour * 24, week = day * 7; if (isNaN(d) || d < 0) { return "" } if (d < e * 7) { return "right now" } if (d < minute) { return Math.floor(d / e) + " seconds ago" } if (d < minute * 2) { return "about 1 minute ago" } if (d < hour) { return Math.floor(d / minute) + " minutes ago" } if (d < hour * 2) { return "about 1 hour ago" } if (d < day) { return Math.floor(d / hour) + " hours ago" } if (d > day && d < day * 2) { return "yesterday" } if (d < day * 365) { return Math.floor(d / day) + " days ago" } else { return "over a year ago" } };

        function proctext(text) {
            text = text.replace(/(http:\/\/\S*)/g, "<a href='$1' target='_blank' rel='nofollow'>$1</a>");
            text = text.replace(/@(\w+)/g, "<a href='http://twitter.com/$1' target='_blank' rel='nofollow'>@$1</a>");
            text = text.replace(/#(\w+)/g, "<a href='http://twitter.com/search?q=%23$1' target='_blank' rel='nofollow'>#$1</a>");
            return text;
        }

        //helper function to add target and nofollow attributes to tweet source
        function procsource(source) {
            if (source.search("<a ") == -1)
                return source;
            return $(source).attr("target", "_blank").attr("rel", "nofollow").outerHTML();
        };
    </script>
    <script src="Scripts/rx.js" type="text/javascript"></script>
    <script src="Scripts/rx.jQuery.js" type="text/javascript"></script>
    <script src="Scripts/rx.html.js" type="text/javascript"></script>
    <script type="text/javascript">
        function mycallback(data) {
//            alert(data);
            window.mydata = data;
        }

        $(function () {
            var callback_function = "mycallback",
                api_url = "http://api.twitter.com/1/statuses/home_timeline.json?callback=" + callback_function;

            Rx.Observable.Timer(0, 5000)
                .Select(function () {
                    if (window.since_id === undefined) {
                        return api_url;
                    }
                    else {
                        return api_url + "&since_id=" + window.since_id;
                    }
                })
            //                .Do(function (url) { alert(url); })
                .Select(function (url) {
                    return "/Home/GetOauthSignedUrl?url=" + escape(url);
                })
                .SelectMany(function (url) {
                    return Rx.Observable.XmlHttpRequest(url);
                })
                .Select(function (next) { return next.responseText; })
            //                .Do(function (url) { alert(url); })
                .SelectMany(function (url) { return $.getScriptAsObservable(url); })
                .SelectMany(function () { return Rx.Observable.FromArray(window.mydata.reverse()); })
                .Do(function (tweet) {
                    var since_id = window.since_id || 0;
                    if (tweet.id > since_id) {
                        window.since_id = tweet.id;
                    }
                })
                .Select(function (tweet) { return $("#clientTemplate").tmpl(tweet); })
                .Subscribe(function (tweet) {
                    tweet.hide().prependTo("#tweets").slideDown();
                });
        });

    </script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	<style>
	.twitter_user
	{
	font-weight: bold;
	}
	#tweets
	{
	width: 600px;
	}
	.tweet
	{
	margin: 5px 0px;
	}
	.profile_image
	{
	float: left;
	}

	.profile_image img
	{
	margin-right: 5px;
	}

	.tweet_info
	{
	clear: both;
	text-align: right;
	}
	</style>
	</head>
	<body>
	<div id="test">
	</div>
	<div id="tweets">
	</div>

	<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
	<script src="/Scripts/jquery.tmpl.js"></script>
	<script id="clientTemplate" type="text/x-jquery-tmpl">
	<div class="tweet" twitterstatusid="${id}" twitteruserid="${user.id}">
	<div class="profile_image">
	<img width=48 height=48 src="${user.profile_image_url}"></img>
	</div>
	<div class="tweet_text">
	<a class="twitter_user" href="http://twitter.com/${user.screen_name}">@${user.screen_name}</a>
	{{html proctext(text)}}
	</div>
	<div class="tweet_info">
	<a href="http://twitter.com/${user.screen_name}/status/${id}">
	${proctime(created_at)}
	</a>
	via {{html procsource(source)}}
	{{if (in_reply_to_status_id != null)}}
	in reply to
	<a href="http://twitter.com/${in_reply_to_screen_name}/status/${in_reply_to_status_id}">
	${in_reply_to_screen_name}
	</a>
	{{/if}}
	</div>
	</div>
	</script>
	<script type="text/javascript">
	//jQuery function to replicate IE's outerHTML property
	jQuery.fn.outerHTML = function () {
	return $('<div>').append(this.eq(0).clone()).html();
	};

	//helper functions to render tweet time (aka: x seconds ago, y days ago, etc)
	var K = function () { var a = navigator.userAgent; return { ie: a.match(/MSIE\s([^;]*)/)} } ();
	var proctime = function (a) { var b = new Date(); var c = new Date(a); if (K.ie) { c = Date.parse(a.replace(/( \+)/, ' UTC$1')) } var d = b - c; var e = 1000, minute = e * 60, hour = minute * 60, day = hour * 24, week = day * 7; if (isNaN(d) \|\| d < 0) { return "" } if (d < e * 7) { return "right now" } if (d < minute) { return Math.floor(d / e) + " seconds ago" } if (d < minute * 2) { return "about 1 minute ago" } if (d < hour) { return Math.floor(d / minute) + " minutes ago" } if (d < hour * 2) { return "about 1 hour ago" } if (d < day) { return Math.floor(d / hour) + " hours ago" } if (d > day && d < day * 2) { return "yesterday" } if (d < day * 365) { return Math.floor(d / day) + " days ago" } else { return "over a year ago" } };

	function proctext(text) {
	text = text.replace(/(http:\/\/\S*)/g, "<a href='$1' target='_blank' rel='nofollow'>$1</a>");
	text = text.replace(/@(\w+)/g, "<a href='http://twitter.com/$1' target='_blank' rel='nofollow'>@$1</a>");
	text = text.replace(/#(\w+)/g, "<a href='http://twitter.com/search?q=%23$1' target='_blank' rel='nofollow'>#$1</a>");
	return text;
	}

	//helper function to add target and nofollow attributes to tweet source
	function procsource(source) {
	if (source.search("<a ") == -1)
	return source;
	return $(source).attr("target", "_blank").attr("rel", "nofollow").outerHTML();
	};
	</script>
	<script src="Scripts/rx.js" type="text/javascript"></script>
	<script src="Scripts/rx.jQuery.js" type="text/javascript"></script>
	<script src="Scripts/rx.html.js" type="text/javascript"></script>
	<script type="text/javascript">
	function mycallback(data) {
	// alert(data);
	window.mydata = data;
	}

	$(function () {
	var callback_function = "mycallback",
	api_url = "http://api.twitter.com/1/statuses/home_timeline.json?callback=" + callback_function;

	Rx.Observable.Timer(0, 5000)
	.Select(function () {
	if (window.since_id === undefined) {
	return api_url;
	}
	else {
	return api_url + "&since_id=" + window.since_id;
	}
	})
	// .Do(function (url) { alert(url); })
	.Select(function (url) {
	return "/Home/GetOauthSignedUrl?url=" + escape(url);
	})
	.SelectMany(function (url) {
	return Rx.Observable.XmlHttpRequest(url);
	})
	.Select(function (next) { return next.responseText; })
	// .Do(function (url) { alert(url); })
	.SelectMany(function (url) { return $.getScriptAsObservable(url); })
	.SelectMany(function () { return Rx.Observable.FromArray(window.mydata.reverse()); })
	.Do(function (tweet) {
	var since_id = window.since_id \|\| 0;
	if (tweet.id > since_id) {
	window.since_id = tweet.id;
	}
	})
	.Select(function (tweet) { return $("#clientTemplate").tmpl(tweet); })
	.Subscribe(function (tweet) {
	tweet.hide().prependTo("#tweets").slideDown();
	});
	});

	</script>
	</body>
	</html>