$(function () {
	
	// データを挿入するBox
	var targetBox = $("div#recipeCol");

	// 挿入するBoxを空に。
	targetBox.empty();

	// 読み込むJSONファイル
	var URL = "/recipe/recipe.js";

	$.getJSON(URL, function (data) {

		var DATA = '';
		var el = data.items;
		var n = Math.floor(Math.random() * el.length);
		
		// jsonから取得する各データ
		var recipeName = el[n].recipeName;
		var recipeLink = el[n].recipeLink;
		var recipeImage = el[n].recipeImage;
		var recipeDescription = el[n].recipeDescription;


		DATA += '<h3 class="indexHeading02"><span><a href="' + recipeLink + '">' + recipeName + '</a></span></h3>';
		DATA += '<div class="recipeData"><div class="recipeTxt"><p class="mt0">' + recipeDescription + '</p>';
		DATA += '<p class="mt5"><a href="' + recipeLink + '"><img src="/images/index_bt02.gif" alt="レシピ詳細を見る" width="149" height="31" class="rollover" /></a></p></div>';
		DATA += '<div class="recipeImage"><a href="' + recipeLink + '"><img src="' + recipeImage + '" alt="' + recipeName + '" width="148" height="129" /></a></div></div>';

		targetBox.html(DATA);
		
		// json読み込み後のロールオーバー処理
		new RolloverImages( 'rollover', 'on' );
	});
});


/* sample HTML code
<div id="recipeCol">
	<h3 class="indexHeading02"><span><a href="DUMMY">レシピ名が入ります</a></span></h3>
	<div class="recipeInfo">
		<div class="recipeTxt">
			<p class="mt0">レシピの説明文が入ります。</p>
			<p class="aC mt5"><a href="DUMMY"><img src="/images/index_bt02.gif" alt="レシピ詳細を見る" width="149" height="31" /></a></p>
		</div>
		<div class="recipeImage"><a href="DUMMY"><img src="/format/DUMMY/DUMMY_ph01.jpg" alt="" width="148" height="129" /></a></div>
	</div>
</div> */