$(function($) {

	var DATA_PATH = '/responsive/data/system_info.xml';
	var COLORS = {
		'balck': '#000',
		'red': '#e20019'
	};

	function prepareSystemInfo() {
		$.ajax(DATA_PATH, {
				dataType: 'xml',
				cache: false
		}).done(function(data) {
			try {
				var $data = $(data);
				var $systemInfoArea = $('#systemInfoArea');
				var $infos = $data.find('info');
				if (!$infos.length) {
					// 掲載情報が無い場合はエリア非表示
					$systemInfoArea.css('display', 'none');
					return;
				}

				// 掲載情報内容表示エリア
				var $systemInfos = $systemInfoArea.find('[data-systeminfo-item="infos"]');

				// テンプレート
				var $template = $systemInfoArea.find('[data-systeminfo-item="info"]');

				// 掲載情報を生成
				$infos.each(function () {
					var $systemInfoData = $(this);
					var $systemInfo = $template.clone();

					$systemInfo.css('color', getColor($systemInfoData.find('color').text()));
					$systemInfo.find('[data-systeminfo-item="date"]').html($systemInfoData.find('date').text());
					$systemInfo.find('[data-systeminfo-item="detail"]').html($systemInfoData.find('detail').text());

					$systemInfos.append($systemInfo);
				});

				// テンプレートを削除
				$template.remove();

				// エリアを表示
				$systemInfoArea.css('display', '');
			} catch (e) {
				// 例外発生時は明示的にエリア非表示
				$('#systemInfoArea').css('display', 'none');
			}
		});
	}

	function getColor(color) {
		return (typeof COLORS[color] === 'undefined') ? '' : COLORS[color];
	}

	prepareSystemInfo()

});