//会員が個人で持っているWebサイトにvideog.jpに投稿した記事を表示する小窓を作る。
//jqueryを利用しているので、jqueryを読み込めないとエラーになる。
//	json		json形式のデータ。内容はjson_list_2.phpで確認する。
//	return		ｊQueryで作ったhtmlのDOMツリーを	返す。
function post_list_widget(json){
	//headにcssを追加する。
	addVideogWidgetCSS();
	var $string = "";
	//とりあえずスタイル系のjsonデータを全部受け取る。
	var showScroll	= json.style.showScroll;
	var frameBack	= json.style.frameBack;
	var frameText	= json.style.frameText;
	var postBack	= json.style.postBack;
	var postText	= json.style.postText;
	var width 		= json.style.width;
	var totalHeight = json.style.height;
	var bodyHeight	= json.style.height;


	//Containerにstyle要素を付ける。
//	var $post_list_widget = $("#videog_post_list_widget").css("width", width + "px").css("height", totalHeight + "px").css("border-color","#"+frameBack);
	var $post_list_widget = $("#videog_post_list_widget").css("width", width + "px").css("border-color","#"+frameBack);

	//header生成開始
	//headerコンテナを生成して、style要素を付ける。
	var $header =$("<div/>").css("background-image", "url(http://videog.jp/img/widget-top.png)").css("color","#"+frameText).addClass("videog_post_list_frame");
	//ブログタイトルのdiv要素を生成する。
	var $blog_title = (json.user.blog_title) ? $("<div/>").text(json.user.blog_title) : $("<div/>") ;
	//ペンネームのdiv要素を生成する。
	var $penname = (json.user.penname) ? $("<div/>").text(json.user.penname).addClass("videog_post_list_frame_pname") : $("<div/>").text("videog Blog") ;

	//headerにブログタイトルとペンネームの要素をぶっ込む。これでheader完成
	$header.append($blog_title).append($penname);

	//Containerにheaderをぶっ込む。
	$post_list_widget.append($header);

	//body生成開始
	//bodyコンテナを生成して、style要素を付ける。
	var $body = $("<div/>").attr("id","videog_post_list_body").css("background-color", "#"+postBack).css("color","#"+postText).addClass("videog_post_list_bodyline");
	//スクロールバーを表示なら、style要素を付ける。
	if(showScroll == "true"){
		$body.css("overflow-y","scroll");
	}else{
		$body.css("overflow-y","hidden");
	}

	//json.post系の情報抽出と設定
	for(var i = 0; i < json.post.num; i++){
		var $post_container = $("<div/>").addClass("videog_post_list_post_container");
		//json.post[i].titleが空の場合はno titleを入れる
		var $post_title = (json.post[i].title) ? $("<div/>").text(json.post[i].title).addClass("videog_post_list_titletext") : $("<div/>").text("No Title ");
		var $post_anchor = $("<a/>").attr("href",'http://videog.jp/view.php?' + json.user.uid +'&v=' + json.post[i].vid).attr("target","_brank");
		//json.post[i].existsがfalseの場合はテキストメッセージの画像を使う
		var $post_image = (json.post[i].exists) ? $("<img/>").attr("src",'http://videog.jp/mobile/movie/' + json.user.uid + '/' + json.post[i].vid + '/s.jpg') : $("<img/>").attr("src",'http://videog.jp/img/noimage_s.png');
			//postの組み立てborder-bottom: 1px dotted #666;
		$post_anchor.append($post_image);
//		$post_container.append($post_title).append($post_anchor).append($("<hr/>").css("border-bottom", "")).css("display","none").addClass("videog_post_list_contline");
		$post_container.append($post_title).append($post_anchor).css("border-bottom", "1px dotted #666").css("display","none");
		$body.append($post_container);
	}

	//Containerにbodyをぶっ込む。heightが未設定だが今は我慢
	$post_list_widget.append($body);

	//bodyの中の最後のhrを非表示にする。
	//$("div:last-child > hr",$body).remove();icon-gray.png

	var $footer = $("<div/>").css("background-image", "url(http://videog.jp/img/widget-btm.png)").css("color","#"+frameText).addClass("videog_post_list_frame");
	var $mess = $("<div/>").text("Video and Picture Log System").addClass("videog_post_list_bottom");
	$footer.append($mess);
	//Containerにfooterをぶっ込む。
	$post_list_widget.append($footer);

	//bodyのheightを計算で求める
//	var bodyHeight = totalHeight - $header.outerHeight(true) - $footer.outerHeight(true) -6;

	$body.css("height", bodyHeight + "px");

	//時間差表示の処理開始
	var $containerList = $("#videog_post_list_widget .videog_post_list_post_container");
	var num = 0;
	var timer = 0;
	for(var i = $containerList.length -1 ; i >= 0; i--){
		timer = num * 5000 + 200;
		setTimeout('slideDownFunc("#videog_post_list_widget .videog_post_list_post_container",' + i + ')',timer);
		num++;
	}
}

function post_list_widget_error(){
	$("#videog_post_list_widget").append('<p>読み込み失敗<\/p>');
}

function addVideogWidgetCSS(){
	$("head").append($("<link/>").attr("href","http://videog.jp/widgets/css/pl_style.css").attr("media","screen").attr("rel","stylesheet").attr("type","text/css"));
}

//時間差表示の為のEffectスライドダウン関数
//この関数の中でjQueryオブジェクトを生成するとか、少々オカシな事をやっているが(ﾟεﾟ)ｷﾆｼﾅｲ!!
function slideDownFunc(selector, index){
	var $containerList = $(selector);
	var $obj = $($containerList[index]);
	$obj.slideDown(1000);

}