<!-- 表示領域 -->
<div id="twitter_novel_area" style="width:100%"></div>

<script type="text/javascript">
var head=document.getElementsByTagName('head');

//専用スタールシートの読み込み
var css_url='http://api.dwm.me/twitter/twitter_novel_viewer.css';
var css=document.createElement('link');

css.setAttribute('type','text/css');
css.setAttribute('rel','stylesheet');
css.setAttribute('href',css_url);

head[0].appendChild(css);

//JavaScriptの読み込み
var js_url='http://api.dwm.me/twitter/twitter_novel_viewer.js';
var script=document.createElement('script');

script.setAttribute('type','text/javascript');
script.setAttribute('src',js_url);

head[0].appendChild(script);
</script>

//データ並び替え関数 詳細は「JavaScriptで表の並び替え」参照
var swap=function(id){
	var table=document.getElementById(id);
	if(!table){return;}

	var tr=table.getElementsByTagName('tr');
	var min=0,max=tr.length-1;

	while(min<max){
		var td_min=tr[min].getElementsByTagName('td');
		var td_max=tr[max].getElementsByTagName('td');
		var tmp1=td_min[0].innerHTML;
		var tmp2=td_min[1].innerHTML;
		var tmp3=td_min[2].innerHTML;
		td_min[0].innerHTML=td_max[0].innerHTML;
		td_min[1].innerHTML=td_max[1].innerHTML;
		td_min[2].innerHTML=td_max[2].innerHTML;
		td_max[0].innerHTML=tmp1;
		td_max[1].innerHTML=tmp2;
		td_max[2].innerHTML=tmp3;
		min++;
		max--;
	}
}

var twitter_novel_viewer_properties=null;

//コールバック関数
var twitter_novel_viewer_callback=function(json){
	var results=json.results;
	var table=twitter_novel_viewer_properties.table;
	var url_base="https://twitter.com/#!/";
	var url_search="http://search.twitter.com/search?q=";

	if(!table){return;}

	//テーブルにデータを挿入
	for(var i=0;i<results.length;i++){
		var tr=document.createElement('TR');
		var td0=document.createElement('TD');
		var td1=document.createElement('TD');
		var td2=document.createElement('TD');

		td1.innerHTML='<a href="'
			+url_base+results[i].from_user
			+'" target="_blank"><img src="'
			+results[i].profile_image_url
			+'"/></a>';

		td2.innerHTML='<a href="'
			+url_base+results[i].from_user
			+'" target="_blank" class="name">'
			+decodeURIComponent(results[i].from_user_name)
			+'</a>&nbsp;<a href="'+url_base+results[i].from_user
			+'" target="_blank" class="screen_name">@'
			+results[i].from_user+'</a><br/>'
			+decodeURIComponent(results[i].text)
			.replace(/\\/g,'')
			.replace(/(https?:\/\/\S+)/g,
				'<a href="$1" target="_blank">$1</a>')
			.replace(/(#\S+)/g,function(arguments){
				return '<a href="'+url_search
					+encodeURIComponent(arguments[1])
					+'" target="_blank">'
					+arguments[1]+'</a>';
			})
			.replace(/@(\S+)/g,'<a href="'
			+url_base+'$1" target="_blank">@$1</a>')
			.replace(/つづく$/,'<em>つづく</em>');

		tr.appendChild(td0);
		tr.appendChild(td1);
		tr.appendChild(td2);

		table.appendChild(tr);
	}

	//もし次のページがあったら、
	//そのページを読み込んでページがなくなるまで再帰
	if(json.next_page){
		twitter_novel_viewer_properties.jsonp.parentNode
			.removeChild(twitter_novel_viewer_properties.jsonp);

		twitter_novel_viewer_properties.jsonp
			=document.createElement('script');
		twitter_novel_viewer_properties
			.jsonp.setAttribute('type','text/javascript');
		twitter_novel_viewer_properties
			.jsonp.setAttribute('src',
				twitter_novel_viewer_properties
				.rest_url+json.next_page
				+'&callback=twitter_novel_viewer_callback');

		var head=document.getElementsByTagName('head');
		head[0].appendChild(twitter_novel_viewer_properties.jsonp);
	}else{
		//次のページがなくなったら、
		//テーブルのいちばん左のカラムに番号を割り当て
		var tr=table.getElementsByTagName('tr');

		for(var i=0;i<tr.length;i++){
			tr[i].getElementsByTagName('td')[0]
				.innerHTML=tr.length-i;
		}
	}
}

function twitter_novel_viewer(properties){
	if(!properties
		||!properties.id
		||!properties.rest_url
		||!properties.query
		||!properties.callback){return null;}

	var elem=document.getElementById(properties.id);
	var head=document.getElementsByTagName('head');

	if(!elem||!head.length){return null;}

	//検索クエリー作成
	twitter_novel_viewer_properties
		={'page':0,'rpp':15,'rest_url':properties.rest_url};

	twitter_novel_viewer_properties.rest=properties.rest_url
		+'?q='+encodeURIComponent(properties.query)
		+'&callback='+properties.callback;

	if(properties.rpp){
		twitter_novel_viewer_properties.rpp=properties.rpp;
		twitter_novel_viewer_properties.rest
			+='&rpp='+properties.rpp;
	}

	if(properties.result_type
		&&properties.result_type.match(/^(recent|popular|mixed)$/)){
		twitter_novel_viewer_properties.rest
			+='&result_type='+properties.result_type;
	}

	if(properties.sincs_id&&properties.since_id.match(/^[0-9]{18}$/)){
		twitter_novel_viewer_properties.rest
			+='&since_id='+properties.since_id;
	}

	//書き込み用表テーブルの<ベースを作成
	var table=document.createElement('TABLE');
	var tbody=document.createElement('TBODY');
	var caption=document.createElement('CAPTION');

	table.setAttribute('id','twitter_novel_viewer');
	table.setAttribute('style','width:100%');

	caption.setAttribute('style','width:100%;text-align:center');
	caption.innerHTML
		='Twitter愛のリレー小説<br/>'
			+'<span>「セルヴーズの雨傘」</span>';

	table.appendChild(caption);
	table.appendChild(tbody);

	elem.innerHTML='<p style="text-align:right">'
		+'<input type="button" value="古いのを上にする" '
		+'onclick="swap(\'twitter_novel_viewer\');'
		+'this.value=this.value==\'古いのを上にする\''
		+'?\'新しいのを上にする\':\'古いのを上にする\';"/>'
		+'</p>';

	elem.appendChild(table);

	twitter_novel_viewer_properties.table=tbody;

	//JSONPを要求するためヘッダにscriptタグ挿入
	twitter_novel_viewer_properties.jsonp
		=document.createElement('script');
	twitter_novel_viewer_properties
		.jsonp.setAttribute('type','text/javascript');
	twitter_novel_viewer_properties
		.jsonp.setAttribute('src',
			twitter_novel_viewer_properties.rest+'&page=1');

	head[0].appendChild(twitter_novel_viewer_properties.jsonp);
}

//クエリ作成用データ
var properties={
	'id':'twitter_novel_area',
	'rest_url':'http://search.twitter.com/search.json',
	'query':'from:Tom3suteki OR from:welcome2ourshop -RT つづく',
	'callback':'twitter_novel_viewer_callback',
	'rpp':100,
	'result_type':'recent',
	'since_id':'200851367760363520',
	'css_href':'http://in/twitter_novel_viewer.css'
}

twitter_novel_viewer(properties);