// サムネイルをクリックしたときの処理
function controlDetailBlock(){

    // サムネイルがなければ実行しない
    if($('#thumbsblock').length < 1){ return; }

    // サムネイルをhoverしたとき
    $('#thumbsblock .thumb-post').hover(
	function(){ $(this).addClass('select'); },
	function(){ $(this).removeClass('select'); }
    );

    // サムネイルをクリックしたとき
    $('#thumbsblock .thumb-post').click(function(){ 
	$('#thumbsblock .thumb-post.selected').removeClass('selected');
	$(this).addClass('selected');
	var post_id = $(this).attr('id').match(/^post-(\d*)$/)[1];
	detailBlockModel.buildHtml(post_id);
	$('#detailblock').fadeOut(600, function(){
	    $('#detailblock').replaceWith(detailBlockModel.html);
	    $('#detailblock').fadeIn(600);
	});
    });
}

// 閉じるボタンをクリックしたとき
function onclickCloseButton(event){
    $('#thumbsblock .thumb-post.selected').removeClass('selected');
    $('#detailblock').fadeOut(600);
}

// データモデル
var postDataModel = {
    // ID検索
    findById: function(id) {
	return $.grep(post_extras, function(val){
	    return id == val.id;
	})[0];
    }
}

var detailBlockModel = {

    html: {},

    buildHtml: function(id) {
	var post = postDataModel.findById(id);
	if( post === undefined ) return '';
	// closebutton
	var closebutton = $('<p class="closebutton clearfix ui-corner-all"><span class="ui-icon ui-icon-closethick"></span></p>').click(function(event){
	    onclickCloseButton(event);
	});
	// title
	var title = '<h2 class="posttitle">' + post['title'] + '</h2>';
	// link
	var link = '<p class="link">&gt;&gt;　<a href="' +  post['url'] + '">詳しくみる</a></p>';
	// htmlを作る
	this.html = $('<div id="detailblock" class="ui-corner-all"></div>').append(closebutton).append(title).append(link);
	this.html.attr('style','border:1px solid #ccc;padding:15px;background-color:#fff;');
	// photo
	if( post['image']['meduim_src'] !== undefined && post['image']['meduim_src'] !== null){
	    var photo = '<p class="meduim"><img src="' + post['image']['meduim_src'][0] + '"/></p>';
	    this.html.append(photo);
	}
    }
    
}