// ====================================================================================================
//
// Author  : metaphhase
// Create  : 2009/01/17
// Update  : 2009/01/26
// Description : 擬似的にIEのruby要素を再現する
//
// ====================================================================================================

// Loadが終わるまで非表示にする
// ----------------------------------------
document.write('<style type="text/css">');
document.write('p.rubyBtnChange {display:none;}');
document.write('</style>');
// ----------------------------------------

var ruby = {

	//-----------------------------------------
	// 設定値
	//-----------------------------------------
	conf : {

		rubyClassName : 'ruby',                      // 対象とするクラス名
		rubyElemName : 'span',                       // 対象とする要素名
		rp : ['（','）'],                            // ルビの内容を囲む記号
		currentVal : 0,                              // 初期表示設定(0:表示されて開始/1:非表示で開始)
		initFlag : 0,                                // 初期処理の判定フラグ(Cookieで保持するときに使用)
		rubyOffFlag : 'rubyoff',                     // ルビをOFFにするときのフラグ(Cookieで保持するときに使用)
		
		btnInsertElemName : 'p',                     // ruby表示切り替えボタンを挿入する要素名
		btnInsertElemClassName : 'rubyBtnChange',    // ruby表示切り替えボタンを挿入する要素のクラス名
		
		btnElemName : 'img',                         // ruby表示切り替えボタンの要素名(input,imgなど)
		btnClassNameOff : 'rubyButtonOff',           // ruby表示切り替えボタンに付加するクラス名
		btnClassNameOn : 'rubyButtonOn',             // ruby表示切り替えボタンに付加するクラス名
		btnAttribute : 'src',                        // 値を変更する属性名
		
		btnAtrDispValueOff : '/kids/animals/img/ruby_off_a.gif',    // ruby表示時の値(はずすボタン)
		btnAtrDispValueOn : '/kids/animals/img/ruby_on.gif',    // ruby表示時の値(つけるボタン)
		btnAtrHideValueOff : '/kids/animals/img/ruby_off.gif',  // ruby非表示時の値(はずすボタン)
		btnAtrHideValueOn : '/kids/animals/img/ruby_on_a.gif',      // ruby非表示時の値(つけるボタン)
		
		// 挿入するボタンのテンプレ(初期状態で挿入したい内容で記載する)
		btnTemplateOff : '<img class="rubyButtonOff" src="/kids/animals/img/ruby_off_a.gif" alt="よみがなをはずす" width="78" height="33">',
		btnTemplateOn : '<img class="rubyButtonOn" src="/kids/animals/img/ruby_on.gif" alt="よみがなをつける" width="78" height="33">'

	},

	//-----------------------------------------
	// load時の初期処理
	//-----------------------------------------
	init : function() {

		// Cookieの取得
		flag = GetCookie(ruby.conf.rubyOffFlag);

		// Cookieの値で初期値を変える
		if(flag == 1){
			ruby.conf.currentVal = 1;
		} else {
			ruby.conf.currentVal = 0;
		}
	},

	//-----------------------------------------
	// Main処理(rubyの表示切り替え)
	//-----------------------------------------
	change : function() {

		var cb = new checkbrowser();
		var elements = ruby.getTargetElements(ruby.conf.rubyElemName, ruby.conf.rubyClassName, ruby.conf.currentVal);
		var elements2 = ruby.getTargetElements(ruby.conf.rubyElemName, ruby.conf.rubyClassName+" slvzr-first-child", ruby.conf.currentVal);
		var elements3 = ruby.getTargetElements(ruby.conf.rubyElemName, ruby.conf.rubyClassName+" slvzr-242 slvzr-243 slvzr-244 slvzr-245 slvzr-262", ruby.conf.currentVal);
		var div = document.getElementById('kidsContentsRuby');
		var div2 = document.getElementById('topicPath');

		// load時の処理
		if( ruby.conf.initFlag == 0 ){
			// onload イベントハンドラに追加すると、ブラウザによって、changeとinitが呼ばれる順番が違うのでここに追加
			ruby.init();
			ruby.conf.initFlag = 1;
		}

		// 初期表示設定によって切り替え
		if (ruby.conf.currentVal == 0) {
			ruby.disp(elements, ruby.conf.rubyClassName, ruby.conf.rp, cb.browserSName);
			ruby.disp(elements2, ruby.conf.rubyClassName, ruby.conf.rp, cb.browserSName);
			ruby.disp(elements3, ruby.conf.rubyClassName, ruby.conf.rp, cb.browserSName);
			

			if (div) {
				div.className = 'rubyStyle';
			}
			if (div2) {
				div2.className = 'rubyStyle';
			}
			// ボタン表示切り替え
			ruby.insertButton();
			ruby.changeButton();
			// rubyの状態を切り替え
			ruby.conf.currentVal = 1;
			// Cookieの削除
			DelCookie(ruby.conf.rubyOffFlag);
		} else {
			ruby.hide(elements, ruby.conf.rubyClassName, ruby.conf.rp, cb.browserSName);
			ruby.hide(elements2, ruby.conf.rubyClassName, ruby.conf.rp, cb.browserSName);
			ruby.hide(elements3, ruby.conf.rubyClassName, ruby.conf.rp, cb.browserSName);

			if (div) {
				div.className = 'normalStyle';
			}
			if (div2) {
				div2.className = 'normalStyle';
			}
			// ボタン表示切り替え
			ruby.insertButton();
			ruby.changeButton();
			// rubyの状態を切り替え
			ruby.conf.currentVal = 0;
			// Cookieのセット
			SetCookie(ruby.conf.rubyOffFlag,1);
		}

	},

	//-----------------------------------------
	// 表示
	//-----------------------------------------
	disp : function(elements, cls, rp, browser) {

		var rubyLengthClassName = Array('one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen');
		
		for (var i = 0; i < elements.length; i++) {
			
			var element = elements[i];
			var str = element.innerHTML;
			
			if (browser == "IE") {
				// for IE
				str = str.replace(/<SPAN class=rp>/g, '');
				str = str.replace(/<\/SPAN>/g, '');
			} else {
				str = str.replace('<span class=\"rp\">', '', 'i');
				str = str.replace('</span>', '', 'i');
			}
			
			if (str) {
				var ruby;
				var txt = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
				if ( str.match('CO2') ) {
					ruby = Array(
						'<span class=\"rb\">',
						str.substr(0, str.indexOf(rp[0])),
						'</span><span class=\"rp\">' + rp[0] + '</span><span class=\"rt alpha02\">',
						str.substr(str.indexOf(rp[0]) + 1, str.length - str.indexOf(rp[0]) - 2),
						'</span><span class=\"rp\">' + rp[1] + '</span>'
					);
				} else if ( txt.indexOf(str.charAt(0),0) >= 0 ) {
					ruby = Array(
						'<span class=\"rb\">',
						str.substr(0, str.indexOf(rp[0])),
						'</span><span class=\"rp\">' + rp[0] + '</span><span class=\"rt alpha\">',
						str.substr(str.indexOf(rp[0]) + 1, str.length - str.indexOf(rp[0]) - 2),
						'</span><span class=\"rp\">' + rp[1] + '</span>'
					);
				} else {
					ruby = Array(
						'<span class=\"rb\">',
						str.substr(0, str.indexOf(rp[0])),
						'</span><span class=\"rp\">' + rp[0] + '</span><span class=\"rt\">',
						str.substr(str.indexOf(rp[0]) + 1, str.length - str.indexOf(rp[0]) - 2),
						'</span><span class=\"rp\">' + rp[1] + '</span>'
					);
				}
				element.innerHTML = ruby.join('');
				element.className = cls + ' ' + rubyLengthClassName[str.indexOf(rp[0]) - 1];
			}
			
		}



	},

	//-----------------------------------------
	// a要素内のアンダーライン対策
	//-----------------------------------------
	aTagChange : function() {
		var atags = document.getElementsByTagName('a');
		for (var i = 0; i < atags.length; i++) {
			var atag = atags[i];
			if ( atag.innerHTML.match('class=ruby') || atag.innerHTML.match('class="ruby') ) {
				atag.className += ' nounderline';
			} else {
				atag.className += ' underline';
			}
		}
	},

	//-----------------------------------------
	// 非表示
	//-----------------------------------------
	hide : function(elements, cls, rp, browser) {
		
		for (var i = 0; i < elements.length; i++) {
			
			var element = elements[i];
			var str = element.innerHTML;
			
			if (browser == "IE") {
				// for IE
				str = str.replace(/> /g, '>');
				str = str.replace(/<SPAN class=rb>/g, '');
				str = str.replace(/<\/SPAN><SPAN class=rp>/g, '');
				str = str.replace(/<\/SPAN><SPAN class=rt>/g, '');
				str = str.replace(/<\/SPAN><SPAN class=rt alpha>/g, '');
				str = str.replace(/<\/SPAN><SPAN class=rt alpha02>/g, '');
				str = str.replace('</SPAN><SPAN class=\"rt\">', '');
				str = str.replace('</SPAN><SPAN class=\"rt alpha\">', '');
				str = str.replace('</SPAN><SPAN class=\"rt alpha02\">', '');
				str = str.replace(/<\/SPAN>/g, '');
			} else {
				str = str.replace(/[\n\r]/g, '');
				str = str.replace('<span class=\"rb\">', '', 'i');
				str = str.replace('</span><span class=\"rp\">' + rp[0] + '</span><span class=\"rt\">', rp[0], 'i');
				str = str.replace('</span><span class=\"rp\">' + rp[0] + '</span><span class=\"rt alpha\">', rp[0], 'i');
				str = str.replace('</span><span class=\"rp\">' + rp[0] + '</span><span class=\"rt alpha02\">', rp[0], 'i');
				str = str.replace('</span><span class=\"rp\">' + rp[1] + '</span>', rp[1], 'i');
			}
			
			var ruby = Array(
					str.substr(0, str.indexOf(rp[0])),
					'<span class=\"rp\">'+ rp[0],
					str.substr(str.indexOf(rp[0]) + 1, str.length - str.indexOf(rp[0]) - 2),
					rp[1] + '</span>'
			);
			
			str = ruby.join('');
			
			element.innerHTML = str;
			element.className = cls;
			
		}

	},

	//-----------------------------------------
	// ターゲットタグを取得する
	//-----------------------------------------
	getTargetElements : function(tag, cls, mode) {

		var elements = new Array();
		var targetElements = document.getElementsByTagName(tag);

		if (mode == 0) {
			
			// 表示用
			for (var i = 0; i < targetElements.length; i++) {
				if (targetElements[i].className == cls) {
					elements[elements.length] = targetElements[i];
				}
			}
			
		} else {
			
			// 非表示用
			for (var i = 0; i < targetElements.length; i++) {
				if (targetElements[i].className.match(cls)) {
					elements[elements.length] = targetElements[i];
				}
			}
			
		}

		return elements;

	},

	//-----------------------------------------
	// ボタンの挿入
	//-----------------------------------------
	insertButton : function() {
		var elements = new Array();
		var targetElements = document.getElementsByTagName(ruby.conf.btnInsertElemName);

		for (var i = 0; i < targetElements.length; i++) {
			if ( targetElements[i].className == ruby.conf.btnInsertElemClassName ) {
				if ( !targetElements[i].innerHTML.match('class="' + ruby.conf.btnInsertElemClassNameOff + '"') && !targetElements[i].innerHTML.match('class="' + ruby.conf.btnInsertElemClassNameOn + '"') ) {
					targetElements[i].innerHTML = ruby.conf.btnTemplateOff + ruby.conf.btnTemplateOn;
					targetElements[i].style.display = 'block';
				}
			}
		}

	},

	//-----------------------------------------
	// ボタンの表示切り替え
	//-----------------------------------------
	changeButton : function() {
		var elements = new Array();
		var targetElements = document.getElementsByTagName(ruby.conf.btnElemName);

		for (var i = 0; i < targetElements.length; i++) {
			if ( targetElements[i].className == ruby.conf.btnClassNameOff ) {
				if (ruby.conf.currentVal == 0) {
					targetElements[i].setAttribute(ruby.conf.btnAttribute, ruby.conf.btnAtrDispValueOff);
					targetElements[i].onclick = ruby.change;
					targetElements[i].style.cursor = 'pointer';
				} else {
					targetElements[i].setAttribute(ruby.conf.btnAttribute, ruby.conf.btnAtrHideValueOff);
					targetElements[i].onclick = '';
					targetElements[i].style.cursor = 'auto';
				}
			} else if ( targetElements[i].className == ruby.conf.btnClassNameOn ) {
				if (ruby.conf.currentVal == 0) {
					targetElements[i].setAttribute(ruby.conf.btnAttribute, ruby.conf.btnAtrDispValueOn);
					targetElements[i].onclick = '';
					targetElements[i].style.cursor = 'auto';
				} else {
					targetElements[i].setAttribute(ruby.conf.btnAttribute, ruby.conf.btnAtrHideValueOn);
					targetElements[i].onclick = ruby.change;
					targetElements[i].style.cursor = 'pointer';
				}
			}
		}

	},

	//-----------------------------------------
	// Loadイベントに追加
	//-----------------------------------------
	addLoadEvent : function() {
		try {
			window.addEventListener('load', this.change, false);
			window.addEventListener('load', this.aTagChange, false);
		} catch (e) {
			window.attachEvent('onload', this.change);
			window.attachEvent('onload', this.aTagChange);
		}
	}

}

ruby.addLoadEvent();

var checkbrowser = function() {

	// ブラウザ
	this.browserName = '';     // [String]  ブラウザ名
	this.browserSName = '';    // [String]  ブラウザ名(略)
	this.browserMVersion = 0;  // [Int]     ブラウザメジャーバージョン
	this.browserVersion = 0;   // [Float]   ブラウザバージョン
	// ------
	this.ie = false;           // [Boolean] InternetExplorerである場合はtrue
	this.macie = false;        // [Boolean] MacIEであれば true
	this.firefox = false;      // [Boolean] Firefoxであれば true
	this.safari = false;       // [Boolean] Safariであれば true
	this.opera = false;        // [Boolean] Operaであれば true
	this.netscape = false;     // [Boolean] Netscapeであれば true
	this.gchrome = false;      // [Boolean] Google Chromeであれば true

	// エンジン
	this.engineName = '';      // [String]  エンジン名
	this.engineVersion = 0;    // [Float]   エンジンバージョン
	// ------
	this.webkit = false;       // [Boolean] Webkitエンジンを使用していれば true
	this.gecko = false;        // [Boolean] Geckoエンジンを使用していれば true
	this.presto = false;       // [Boolean] Prestoエンジンを使用していれば true
	this.trident = false;      // [Boolean] Tridentエンジンを使用していれば true
	this.tasman = false;       // [Boolean] Tasmanエンジンを使用していれば true

	var constBrowser = new Array('MSIE','Firefox','Opera','Safari','Chrome','Netscape');
	var constSBrowser = new Array('IE','FF','OP','SF','GC','NS');
	var constEngine = new Array('Gecko','WebKit','Presto','Trident','Tasman');

	var uaString = navigator.userAgent;

	var i;

	// ブラウザ取得
	for (i=0; i<constBrowser.length; i++) {
		if ( uaString.match(constBrowser[i]) ) {
			if ( constBrowser[i] == 'MSIE' ) {
				if ( uaString.match('Windows NT') ) {
					this.ie = true;
					this.trident = true;
					this.engineName = 'Trident';
				} else {
					this.macie = true;
					this.tasman = true;
					this.engineName = 'Tasman';
				}
				this.browserName = 'Internet Explorer';
				this.browserSName = constSBrowser[i];
				break;
			} else if ( constBrowser[i] == 'Safari' ) {
				if ( uaString.match('Chrome') ) {
					this.browserName = 'Google Chrome';
					this.browserSName = 'GC';
					this.gchrome = true;
				} else {
					this.browserName = constBrowser[i];
					this.browserSName = constSBrowser[i];
					this.safari = true;
				}
				break;
			} else if ( constBrowser[i] == 'Chrome' ) {
				this.browserName = 'Google Chrome';
				this.browserSName = constSBrowser[i];
				this.gchrome = true;
				break;
			} else  {
				if ( constBrowser[i] == 'Firefox' ) {
					this.firefox = true;
				} else if ( constBrowser[i] == 'Opera' ) {
					this.opera = true;
				} else if ( constBrowser[i] == 'Netscape' ) {
					this.netscape = true;
				}
				this.browserName = constBrowser[i];
				this.browserSName = constSBrowser[i];
				break;
			}
		}
	}

	// ブラウザバージョン取得
	var str = '';
	uaString = uaString + ' ';
	if ( this.browserSName == 'IE' ) {
		str = uaString.substring(uaString.indexOf(this.browserSName), uaString.length);
		str = str.substring(0, str.indexOf(';'));
		str = str.substring(str.indexOf(' ') + 1, str.length);
	} else if ( this.browserSName == 'SF' ) {
		str = uaString.substring(uaString.indexOf('Version'), uaString.length);
		str = str.substring(0, str.indexOf(' '));
		str = str.substring(str.indexOf('/') + 1, str.length);
	} else if ( this.browserSName == 'GC' ) {
		str = uaString.substring(uaString.indexOf('Chrome'), uaString.length);
		str = str.substring(0, str.indexOf(' '));
		str = str.substring(str.indexOf('/') + 1, str.length);
	} else {
		str = uaString.substring(uaString.indexOf(this.browserName), uaString.length);
		str = str.substring(0, str.indexOf(' '));
		str = str.substring(str.indexOf('/') + 1, str.length);
	}
	var result = new Array();
	var ary = str.split('.');
	for (i=0; i<ary.length; i++) {
		if (i == 0) {
			result[0] = ary[i];
			result[1] = ary[i];
		} else if (i == 1) {
			result[1] = result[1] + '.' + ary[i];
			break;
		}
	}
	this.browserMVersion = parseInt(result[0]);
	this.browserVersion =  parseFloat(result[1]);


	// エンジン取得
	if ( this.browserSName != 'IE' ) {
		for (i=0; i<constEngine.length; i++) {
			if ( uaString.match(constEngine[i]) ) {
				if ( constEngine[i] == 'Gecko' ) {
					if ( uaString.match('WebKit') ) {
						this.engineName = 'WebKit';
						this.webkit = true;
					} else {
						this.engineName = constEngine[i];
						this.gecko = true;
					}
				} else {
					if ( constEngine[i] == 'WebKit' ) {
						this.webkit = true;
					} else if ( constEngine[i] == 'Presto' ) {
						this.presto = true;
					}
					this.engineName = constEngine[i];
				}
				break;
			}
		}
	}

	// エンジンバージョン取得
	str = '';
	if ( this.browserSName != 'IE' ) {

		uaString = uaString + ' ';
		if ( this.engineName == 'Gecko' ) {
			str = uaString.substring(uaString.indexOf('rv:'), uaString.length);
			str = str.substring(0, str.indexOf(')'));
			str = str.replace(/^rv:/,'');
		} else {
			str = uaString.substring(uaString.indexOf(this.engineName), uaString.length);
			str = str.substring(0, str.indexOf(' '));
			str = str.substring(str.indexOf('/') + 1, str.length);
		}

		result = new Array();
		ary = str.split('.');
		for (i=0; i<ary.length; i++) {
			if (i == 0) {
				result[0] = ary[i];
			} else if (i == 1) {
				result[0] = result[0] + '.' + ary[i];
				break;
			}
		}

		this.engineVersion =  parseFloat(result[0]);

	} else if ( uaString.match('Trident') ) {

		str = uaString.substring(uaString.indexOf(this.engineName), uaString.length);
		str = str.substring(0, str.indexOf(';'));
		str = str.substring(str.indexOf('/') + 1, str.length);

		result = new Array();
		ary = str.split('.');
		for (i=0; i<ary.length; i++) {
			if (i == 0) {
				result[0] = ary[i];
			} else if (i == 1) {
				result[0] = result[0] + '.' + ary[i];
				break;
			}
		}

		this.engineVersion =  parseFloat(result[0]);

	}

}