/***************************************
file Name: init.js
URI: http://blog.lunatic-code.net
Description: リストメニューの画像置き換え
Version: 1.0
Author: mick
Author URI: 
***************************************/

DIR = "http://www.magazine-hochi.com/img/navi/";	// 画像ディレクトリ
EXT = ".gif";	// 画像拡張子
flg = 0;		// 画像読み込みフラグ
debug=0;		// デバッグ


/* 初期化 */
$(function(){
	if(debug){$(document.body).append($('<div id="debug_info"></div>'));}
	listToImg("#gnavi");
});


/* 画像に置き換える */
function listToImg(id){
	flg = 0;
	var elm = [];
	var newElm = [];
	$(id+" li a").each(
		function(i){
		elm[i]=$(this);
	});

	$(elm).each(
		function(i){
			ct=$(elm[i]).parent().attr("id");
			url = DIR+ct+EXT;
			var p = [];
			p[i]=new Image();
			p[i].src=Math.random();		// IE Imageオブジェクトバグ対策
			p[i].src=url;
			var alt= $(elm[i]).text();
			$(elm[i]).empty();
			$("#debug_info").append($('<p>p['+i+'] width='+p[i].width+' height='+p[i].height+'</p>'));
			// 画像の縦横サイズが取得出来てなければ読み込む
			if(p[i].width==0 &&p[i].height==0){
				$(elm[i]).append($("<img>").attr("src",p[i].src).attr("alt",alt));	// 一旦縦横サイズなしで設定してやる
				p[i].onload = function(){
					p[i].onload = null;
					newElm[i]='<img src="'+p[i].src+'" width="'+p[i].width+'" height="'+p[i].height+'" alt="'+alt+'" />'	// 縦横サイズ取得したらバッファに入れる
					flg++;
					// 全て読み込みが終わったら、リストを一気に書き換える
					if(flg==$(id+" li a").length){
						$(elm).each(
							function(i){
								$(elm[i]).empty();
								$(elm[i]).append($(newElm[i]));
								$("#debug_info").append($('<p>newElm['+i+'] width='+$(newElm[i]).attr("width")+' height='+$(newElm[i]).attr("height")+'</p>'));
							}
						);
						$("#debug_info").append($("<p>画像ロード時 hover</p>"));
						// 全て書き換えたらhover処理呼び出し(画像ロード時)
						imghover("#gnavi");
					}
				}
			}else{			// 画像の縦横サイズが取得出来てれば、そのまま設定
				$(elm[i]).append($("<img>").attr("src",p[i].src).attr("width",p[i].width).attr("height",p[i].height).attr("alt",alt));
			}
		}
	);
	// 全て書き換えたらhover処理呼び出し(画像キャッシュロード時or縦横サイズ未取得時)
	if(flg==0&&elm[0].width!=0&&elm[0].height!=0){
		$("#debug_info").append($("<p>画像キャッシュロード時or縦横サイズ未取得時 hover</p>"));
		imghover("#gnavi");
	}
}

/* hover処理 */
function imghover(id){
	$("#debug_info").append($("<p>flg="+flg+" imghover実行</p>"));

	// リンク先ディレクトリチェック
	var uri = location.href.split('#')[0];
	var file= uri.substring(uri.lastIndexOf('/',uri.length)+1,uri.length);
	if(file.length>0){
		uri = uri.split(file)[0];
	}
	var elm = [];
	var gLinks=new Image();
	$(id+" li a img").each(
		function(i){
		elm[i]=$(this);
	});

	// アクティブなディレクトリのhover
	$(elm).each(
		function(i){
		gLinks.src = $(elm[i]).parent().attr("href");
		if(gLinks.src ==uri){
			$(this).attr("src",$(this).attr("src").replace(EXT, "_on"+EXT));
			$(this).parent().attr("class","active");
		}
	});

	// マウスオーバー処理
	$(id+" li a img").hover(
		function(){
			if($(this).parent().attr("class")!="active"){
				$(this).attr("src",$(this).attr("src").replace(EXT, "_on"+EXT));
			}
		},
		function(){
			if($(this).parent().attr("class")!="active"){
				$(this).attr("src",$(this).attr("src").replace("_on"+EXT, EXT));
			}
		}
	);
}