/**
 * swimg by ikegami@adbit.jp
 * 
 * ナビゲーションリンクのマウスオーバーに連動して他の領域の画像を切替えるスクリプト
 * ナビゲーション自信のマウスオーバー画像切替えも行い、全ての画像は先読みする。
 * 要jQuery1.4+
 * 
 * ＜初期設定＞
 * swimgSettingsに連動して書き換える要素のcssセレクタと
 * ファイル名のフォーマットを以下の書式で指定してください。
 * [セレクタ, フォーマット]
 *
 * フォーマットにはIDの連番を挿入する箇所に「%s」と記述します。
 * 例)img/common/main-title-%s.gif
 *
 * ＜IDのルール＞
 * 切り替えトリガーとなるメニューのリンク要素には以下のルールでIDを設定します。
 * swimg-(数字)
 * 例)swimg-1
 *
 * ここで指定する数値は連動して切り替える際の画像ファイル名に影響します。
 *
 * ＜Currentを指定＞
 * ページを開いたときに初期画像をすぐに変更するには該当するリンクに以下のクラスを追加してください
 * swimg-current
 * このクラス指定があると自動的にそのリンクをマウスオーバーしたように振る舞います
 */
jQuery(function($){
	var swimgSettings = [
		['img.swimg-title', '/img/common/main-title-%s.gif'],
		['img.swimg-top', '/img/common/top-image%s.jpg']
	];
	
	// swimg切り替え対象の元画像を記憶させておく
	$.each(swimgSettings, function(){
		var sl = this[0];
		var _this = $(sl);
		
		// 元画像を記憶
		_this.data('org', _this.attr('src'));
	});
	
	$('#gnav ul li a').each(function(){
		var _this = $(this);
		// numを記憶
		var num = _this.attr('id').replace(/[^0-9]/g, '');
		_this.data('num', num);
		
		// preload
		$.each(swimgSettings, function(){
			var fm = this[1];
			$('<img>').attr('src', fm.replace('%s', num));
		});
		
		// current
		if (_this.is('.swimg-current')) {
			// swimg切り替え対象の元画像を書き換える
			$.each(swimgSettings, function(){
				var sl = this[0];
				var fm = this[1];
				var src = fm.replace('%s', num);
				
				$(sl)
					.data('org', src) // 元画像を書き換え
					.attr('src', src) // 画像をすぐに切り替え
				;
			});
				
			// 自身の画像切替
			var _img = $('img', this);
			_img.attr('src', _img.attr('src').replace('.gif', '_over.gif'));
		}
		else {
			_this.mouseover(function(){
				var num = $(this).data('num');
				if (!num.length) return; // numがなければ抜ける
				
				// swimg
				$.each(swimgSettings, function(){
					var sl = this[0];
					var fm = this[1];
					
					$(sl).attr('src', fm.replace('%s', num));
				});
				
				// 自身の画像切替
				var _img = $('img', this);
				_img.attr('src', _img.attr('src').replace('.gif', '_over.gif'));
			})
			.mouseout(function(){
				// swimg
				$.each(swimgSettings, function(){
					var sl = this[0];
					var _this = $(sl);
					
					_this.attr('src', _this.data('org'));
				});
				
				// 自身の画像切替
				var _img = $('img', this);
				_img.attr('src', _img.attr('src').replace('_over.gif', '.gif'));
			});
		}
	});
});