$(document).ready(function()
{
//IE用にPNG対応
$(document).pngFix();
var header = [];
var abstract = [];
var floor_img = [];
//パレットエリアを隠す
$("#palette").css("display","none");
//パレットエリア内のid名がfloorから始まるdivを選択
var select = '#palette>div[id^="floor"]';
//h1要素を配列に格納
$(select).find('h1').each(function()
{
header.push('' + $(this).html() + '
');
});
//abstractクラスの要素を配列に格納
$(select).find('.abstract').each(function()
{
abstract.push('' + $(this).html() + '
');
});
//floor_imgクラスの要素を配列に格納
$(select).find('.floor_img').each(function()
{
floor_img.push('' + $(this).html() + '
');
});
//キャンバスを初期化
$("#canvas").html(header[0] + abstract[0] + floor_img[0]);
//左ナビゲーションエリアのクリックイベント
$(".ctrl").click(function()
{
var detail = [];
$("#canvas").height("550px");
//押されたボタンのid属性を取得
var id = $(this).attr("id");
var temp = (5 - id) + 1;
//パレットエリア内のfloor*からdetailクラス内のdl要素を配列に格納
$('#palette > div[id="floor' + temp +'"]').find('.detail > dl').each(function()
{
detail.push('' + $(this).html() + '
');
});
//HTMLバッファを初期化
var buffer = header[id] + abstract[id];
//フロアー図のHTMLをバッファに追加
for(var i = 1; i < floor_img.length; i++) {
buffer += floor_img[i];
}
//各サムネイルの絶対座標を設定してバッファに追加
buffer += config_thumb((5-id)+1);
//キャンバス内にHTMLを設定（表示しない）
$("#canvas").css("display","none").html(buffer)
//フロアー図を配置
var index = 0;
$("#canvas>.floor_img").each(function()
{
var top = 150 + index * 25;
var opacity;
if(id == index + 1) {
opacity = 1.0;
}else {
opacity = 0.1;
}
$(this)
.css("opacity",opacity)
.css("position","absolute")
.css("top",top)
.css("right","0");
index++;
});
//キャンバス内のHTMLを表示
$("#canvas").fadeIn();
//サムネイルのホバーイベント
$("#canvas > .thumb_nail").hover(function(e)
{
//サムネイルの位置番号を取得
var index = $(".thumb_nail").index(this);
//位置番号に対応する詳細を出現させる
$("body").append("![]("+ this.src +")
" + detail[index] + "