//クリックしたアイコンをメイン画像に差し替え、下部アイコンを左から時系列順に並べる
function switchDiaryItem(id) {
	var mainItem    = document.getElementById('diary_0');
	var clickedItem = document.getElementById(id);
	var tempItems = new Array();
	
	//はるみDIARYの全てのアイテムを順に取得する
	var items = getSortedDiaryItems();
	
	//テンポラリにクリックされたアイコンの情報を移す
	tempItems[0] = new Object();
	tempItems[0].diary_id          = clickedItem.getAttribute('diary_id');
	tempItems[0].diary_image       = clickedItem.getAttribute('diary_image');
	tempItems[0].diary_squareimage = clickedItem.getAttribute('diary_squareimage');
	tempItems[0].diary_title       = clickedItem.getAttribute('diary_title');
	tempItems[0].diary_description = clickedItem.getAttribute('diary_description');
	tempItems[0].diary_date        = clickedItem.getAttribute('diary_date');
	
	//テンポラリにクリックされた以外のアイコンの情報を移す
	for(i = 1; i < 5; i++) {
		var item = new Object();
		tempItems[i] = new Object();
		
		do {
			item = items.shift();
		} while(item.diary_id == tempItems[0].diary_id);
		
		tempItems[i].diary_id          = item.diary_id;
		tempItems[i].diary_image       = item.diary_image;
		tempItems[i].diary_squareimage = item.diary_squareimage;
		tempItems[i].diary_title       = item.diary_title;
		tempItems[i].diary_description = item.diary_description;
		tempItems[i].diary_date        = item.diary_date;
	}
	
	//メイン画像にクリックされたアイコンを表示する
	document.getElementById('diary_0_anchor').href           = tempItems[0].diary_image;
	mainItem.src                                             = tempItems[0].diary_image;
	mainItem.alt                                             = tempItems[0].diary_title;
	mainItem.setAttribute('diary_id',                          tempItems[0].diary_id);
	mainItem.setAttribute('diary_image',                       tempItems[0].diary_image);
	mainItem.setAttribute('diary_squareimage',                 tempItems[0].diary_squareimage);
	mainItem.setAttribute('diary_title',                       tempItems[0].diary_title);
	mainItem.setAttribute('diary_description',                 tempItems[0].diary_description);
	mainItem.setAttribute('diary_date',                        tempItems[0].diary_date);
	document.getElementById('diary_0_title').innerHTML       = tempItems[0].diary_title;
	document.getElementById('diary_0_description').innerHTML = tempItems[0].diary_description;
	document.getElementById('diary_0_date').innerHTML        = tempItems[0].diary_date;
	
	//サブアイコンにクリックされたアイコン以外のアイテムを表示する
	for(i = 1; i < 5; i++) {
		var targetItem = document.getElementById('diary_' + i);
		
		targetItem.src                             = tempItems[i].diary_squareimage;
		targetItem.alt                             = tempItems[i].diary_title;
		targetItem.setAttribute('diary_id',          tempItems[i].diary_id);
		targetItem.setAttribute('diary_image',       tempItems[i].diary_image);
		targetItem.setAttribute('diary_squareimage', tempItems[i].diary_squareimage);
		targetItem.setAttribute('diary_title',       tempItems[i].diary_title);
		targetItem.setAttribute('diary_description', tempItems[i].diary_description);
		targetItem.setAttribute('diary_date',        tempItems[i].diary_date);
	}
}

//はるみDIARYのアイテムを取得し、時系列順に並べる
function getSortedDiaryItems() {
	var i;
	var items = new Array(5);
	var tempItem = new Object();
	
	//はるみDIARYアイテムを読み込む
	for(i = 0; i < 5; i++) {
		items[i] = new Object();
		tempItem = document.getElementById('diary_' + i);
		
		items[i].diary_id          = tempItem.getAttribute('diary_id');
		items[i].diary_image       = tempItem.getAttribute('diary_image');
		items[i].diary_squareimage = tempItem.getAttribute('diary_squareimage');
		items[i].diary_title       = tempItem.getAttribute('diary_title');
		items[i].diary_description = tempItem.getAttribute('diary_description');
		items[i].diary_date        = tempItem.getAttribute('diary_date');
	}
	
	//diary_idで順にソートする
	items.sort(function (a, b) {return a.diary_id - b.diary_id; });
	
	return items;
}

//ページを読み込んだら画像のプリロードを行うハンドラ
window.onload = function () {
	preloadDiaryImages();
}

//画像のプリロードを行う
function preloadDiaryImages() {
	var images = new Array();
	var squareImages = new Array();
	for(i = 0; i < 5; i++) {
		images[i]       = new Image();
		squareImages[i] = new Image();
		
		images[i].src       = document.getElementById('diary_' + i).getAttribute('diary_image');
		squareImages[i].src = document.getElementById('diary_' + i).getAttribute('diary_squareimage');
		
	}
}