// メイン処理。
$(function(){

	// 変数設定等。
	var data = null;			// 検索データ。
	var fade_speed = 500;		// 共通フェード速度(ミリ秒)。
	var start_lag = 50;			// 初回の表示タイミング(ミリ秒)。
	var photo_alpha = 0.2;		// 写真の透過率(0.0～1.0)。
	var hover_alpha = 0.5;		// 写真ホバーの透過率(0.0～1.0)。
	var hover_color = '#99f';	// 写真ホバーの色(#RRGGBB)。
	var mask_alpha = 0.7;		// マスクの透過率(0.0～1.0)。
	var adj = {'x':12, 'y':2};	// チップの表示調整(マウスポインタからの距離)。
	
	// 主要なパーツ。
	var area = $('<div id="area"></div>');
	var mask = $('<div id="mask"></div>');
	var detail = $('<div id="detail"><div class="inner"><h2></h2><div class="contents"></div></div></div>');
	
	// 詳細ウィンドウは非表示。後からサイズを設定することによりチラつきを防止。
	detail.fadeTo(1, 0, function(){ $(this).hide().addClass('detail_size'); });
	
	// マスクは非表示。幅と高さはウィンドウサイズに合わせる(ウィンドウのリサイズ時も対応)。
	mask.fadeTo(1, 0, function(){
		$(this).hide();
		$(window).resize((function(){
			var resize = function(){
				mask.css('width', $(document).width() + 'px');
				mask.css('height', $(document).height() + 'px');
			};
			resize();
			return resize;
		})());
	});
	
	// マスクのクリック処理。
	mask.click(function(){
		// クリックで詳細ウィンドウと共に非表示及び無効化。
		mask.fadeTo(fade_speed, 0, function(){ $(this).hide(); });
		detail.fadeTo(fade_speed, 0, function(){ $(this).hide(); });
	});
	
	// 詳細ウィンドウとマスクをbodyに追加する。
	$('body').prepend(detail);
	$('body').prepend(mask);
	
	// 検索データをダウンロードする。
	$.getJSON('enjoy_olivean.json', function(json){
		
		// ダウンロードしたJSONデータを保持する。
		data = json;
		
		for (var i = 0; i < data.item.length; i++)
		{
			// データを変数に設定。
			var item = data.item[i];
			
			// 写真の要素。
			var photo = $('<div id="photo' + item.id + '" class="photo" style="left:' + item.x + 'px;top:' + item.y + 'px;">'
				+ '<img src="./img/' + item.id + '.jpg" /></div>').hide();
			
			// 写真にデータを関連付ける。
			$.data(photo.get(0), 'item', item);
			
			// 写真のホバー処理。
			photo.hover(function(e){
				if ($(this).css("opacity") != 1) return;
				var m = $.data(this, 'item');
				
				$(this).css('background-color', hover_color);
				$(this).find('img').fadeTo('fast', hover_alpha);
				
				var tips = $('<div class="tips"><div class="inner">' + m.tips + '</div></div>').hide();
				$('body').append(tips);
				
				var xpos = e.clientX + adj.x;
				if ($(document).width() / 2 < e.clientX) xpos -= tips.width() + (adj.x * 2);
				tips.css('left', xpos + 'px').css('top', e.clientY + adj.y + 'px');
				tips.fadeIn('fast');
			},
			function(){
				// チップはロールアウトでフェードアウト。
				$('div.tips').fadeOut('fast',function(){ $(this).remove(); });
				// ホバーの色を元に戻す。
				$(this).find('img').fadeTo('fast', 1.0, function(){
					$(this).parent().css('background-color', '#fff');
				});
			});
			
			// 写真のクリック処理。
			photo.click(function(){
				if ($(this).css("opacity") != 1) return;
				var m = $.data(this, 'item');
				
				detail.find('h2').text(m.title);
				detail.find('div.contents').load('./html/' + m.id + '.html');
				detail.css('left', ($(document).width()-detail.width())/2 );
				detail.css('top', ($(document).height()-detail.height())/2 );
				
				mask.show().fadeTo(fade_speed, mask_alpha, function(){
					detail.show().fadeTo(fade_speed, 1.0);
				});
			});
			
			// 写真のマウス移動処理。
			photo.mousemove(function(e){
				// チップをマウスに追従させる。
				var xpos = e.clientX + adj.x;
				if ($(document).width() / 2 < e.clientX) xpos -= $('div.tips').width() + (adj.x * 2);
				$('div.tips').css('left', xpos + 'px').css('top', e.clientY + adj.y + 'px');
			});
			
			// 写真を表示エリアに追加。
			setTimeout((function(){
				var m = photo;
				return function(){
					area.append(m.addClass('cursor_pointer').fadeIn(fade_speed));
				};
			})(), start_lag * i);
		}
		
		// 表示エリアをEnjoyオリビアンに追加。
		$('div#enjoy_olivean').append(area);
	});
	
	// メニューボタン。
	$('ul#enjoy_olivean_menu li a').each(function(){
		$(this).click(function(){
			// メニューIDの下1桁を写真の種別とする。
			var kind = $(this).parent().attr('id');
			kind = kind.substr(kind.length - 1, 1);
			
			for (var i = 0; i < data.item.length; i++)
			{
				var item = data.item[i];
				var kinds = item.kind.split(",");
				
				if (kind == "0" || $.inArray(kind, kinds) >= 0){
					$('div#photo' + item.id).addClass('cursor_pointer').fadeTo(fade_speed, 1);
				}else{
					$('div#photo' + item.id).removeClass('cursor_pointer').fadeTo(fade_speed, photo_alpha);
				}
			}
		});
	});
});