// JavaScript Document

/*
window.onload = function () {
	newMark();
	addMagnifier();
}
*/

/* ----------------------------------------------------------------------
 . イベントリスナユーティリティ
---------------------------------------------------------------------- */

// イベントリスナの登録と削除
function addListener(element, type, listener) {
  if(element.addEventListener) {
	// W3C DOMのイベントモデルを利用可能な場合
	element.addEventListener(type, listener, false);
  } else if(element.attachEvent) {
	// Internet Explorerの場合
	element.attachEvent('on' + type, listener);
  }
}

function removeListener(element, type, listener){
  if(element.removeEventListener) {
	// W3C DOMのイベントモデルを利用可能な場合
	element.removeEventListener(type, listener, false);
  } else if(element.attachEvent) {
	// Internet Explorerの場合
	element.detachEvent('on' + type, listener);
  }
}



/* ----------------------------------------------------------------------
 4. フィードリンクの表示
---------------------------------------------------------------------- */

// イベントの登録
addListener(window, 'load', feeds);


// 初期設定
// ----------------------------------------------------------------------

// フィードアイコンの設定（ アイコンファイルへのパス / width / height / title属性 ）
var feedIconPath = "http://170thanniversary.yosikawaya.com/images/feeds.png";
var feedIconWidth = 38;
var feedIconHight = 20;
var feedIconTitle = "フィードのリンクを表示します";

// クローズアイコンの設定（ アイコンファイルへのパス / width / height ）
var closeIconPath = "http://170thanniversary.yosikawaya.com/images/close.gif";
var closeIconWidth = 14;
var closeIconHight = 14;

// XHTMLに指定した、idを設定
var feedsId ="feeds";				// 全体のボックス
var feedpanelId ="feed_panel";		// 表示・非表示を切り替えるボックス
var feedlistId ="feed_list";		// フィードリストのボックス（リスト以外でも可）

// ＊パスは、絶対パスかルート相対パスを使用する（相対パスを使用する場合は、HTMLからの相対パス）
// idとして、「feed-icon」・「feed-close」・「feed-icon-img」・「button_feed-close」を使用しています。

// サンプルXHTML
/*
<div id="feeds">
<div id="feed_panel">
<ul id="feed_list">
<li id="feed-rss10"><a href="http://www.example.net/index.rdf">RSS 1.0</a></li>
<li id="feed-rss20"><a href="http://www.example.net/rss.xml">RSS 2.0</a></li>
<li id="feed-atom"><a href="http://www.example.net/atom.xml">ATOM</a></li>
</ul>
<p id="feeds-explanation">RSS・ATOMフィードはサイトの更新をリアルタイムに通知してくれる便利なツールです。</p>
</div>
</div>
*/

// サンプルCSS
/*
#feeds {
	position: absolute;		必ず指定してください。（relativeでも可）
	right: 5px;
}
.top #feeds {
	top: 370px;
}
.notTop #feeds {
	top: 270px;
}
#feed_panel {
	font-size: 0.86em;
	top: 25px;
	left: -162px;
	border: solid 1px #999;
	background-color: #F6F6F6;
	padding: 10px;
	width: 180px;
}
#feed_panel ul {
	border-bottom: 1px dotted #999;
	padding-bottom: 0.4em;
	margin-bottom: 0.8em;
}
#feed_panel ul li {
	margin-bottom: 0.4em;
}
#feed_panel ul li a {
	text-decoration: none;
}
#feed_panel ul li a:hover {
	text-decoration: underline;
}
#feeds-explanation {
	line-height: 1.6em;
}
#feed-close {
	text-align: right;
}

*/

// ----------------------------------------------------------------------

function feeds() {

	if(document.getElementById(feedsId)) {

		var feedsNode = document.getElementById(feedsId);
		var panelNode = document.getElementById(feedpanelId);
		var listNode = document.getElementById(feedlistId);
	
	//	feedsNode.style.position = "relative";
		panelNode.style.position = "absolute";
		panelNode.style.display = "none";
		panelNode.style.zIndex = "920";
	
	
		var feedIconNode = document.createElement("div");
		feedIconNode.id = "feed-icon";
		feedsNode.insertBefore(feedIconNode, panelNode);
		feedIconNode.innerHTML = "<img src=" + feedIconPath + " width=" + feedIconWidth + " height=" + feedIconHight + " id=\"feed-icon-img\" alt=\"Feeds Icon\" title=" + feedIconTitle + " />";
	
		feedIconNode.style.display = "inline";
	
		var closeNode = document.createElement("div");
		panelNode.insertBefore(closeNode, listNode);
	//	panelNode.appendChild(cbNode);
		closeNode.id = "feed-close";
		closeNode.innerHTML = "<img src=" + closeIconPath + " width=" + closeIconWidth + " height=" + closeIconHight + " alt=\"閉じる\" id=\"button_feed-close\" title=\"閉じる\" />";
	
	//	document.getElementById("feed-close").style.textAlign = "right";
	
	
		if(document.all) {
			feedIconNode.style.cursor = "hand";
			closeNode.style.cursor = "hand";
		}
		else {
			feedIconNode.style.cursor = "pointer";
			closeNode.style.cursor = "pointer";
		}
	
		closeNode.style.cursor = "hand";
	
		document.getElementById("feed-icon-img").onclick = function() {
			if(panelNode.style.display == "none") {
				panelNode.style.display = "block";
				panelNode.style.zIndex = "920";
			}
			else {
				panelNode.style.display = "none";
			}
		}
	
		document.getElementById("button_feed-close").onclick = function() {
			panelNode.style.display = "none";
		}

	}


}


/* ----------------------------------------------------------------------
 2. class共通化イベントリスナユーティリティ
---------------------------------------------------------------------- */

 // getAttribute / setAttribute で使うclassを統一
if(document.documentElement.getAttribute("style") == document.documentElement.style) {
	var unityClass = "className";
}
else {
	var unityClass = "class";
}

/*
	classStr = ogj.getAttribute("className");	// IE7以下
	classStr = ogj.getAttribute("class");		// IE7以下以外

と、するところを

	classStr = ogj.getAttribute(unityClass);	// 共通

のように指定できる。
*/



/* ----------------------------------------------------------------------
 1. 「lightbox」を設定したイメージに拡大鏡のイメージを重ねて配置する
---------------------------------------------------------------------- */

// 初期設定
// ----------------------------------------------------------------------

var imgFile = "/images/magnifier.gif";	// 拡大鏡のイメージファイル
var altText = "ZOOM IN";				// 拡大鏡イメージの代替文字
var wSize = "22";						// 拡大鏡イメージの幅
var hSize = "22";						// 拡大鏡イメージの高さ
var topPosition = "8px";				// 拡大鏡イメージの上端からの位置
var leftPosition = "8px";				// 拡大鏡イメージの左端からの位置
var magplus = "/images/magplus.cur";		// カーソルイメージファイル

// ----------------------------------------------------------------------

function addMagnifier(scopeId) {

	if(document.getElementsByTagName) {

		if(scopeId) {
			var items = document.getElementById(scopeId).getElementsByTagName('a')
		}
		else {
			var items = document.getElementsByTagName('a')
		}

		for(var i=0; i<items.length; i++) {
			var itemRel = items[i].getAttribute("rel");
			if(itemRel) {
				if(itemRel.match("lightbox")) {

					items[i].style.position = "relative";
					try{
						items[i].style.display = "inline-block";
					}
					catch(e){
						// style.display 未対応ブラウザでは、未処理
					}
					try{
						items[i].style.cursor = "url(" + magplus + "), pointer";
					}
					catch(e){
						// style.cursor 未対応ブラウザでは、未処理
					}

					var imgTag = document.createElement("img");

					imgTag.setAttribute("src",imgFile);
					imgTag.setAttribute("alt",altText);
					imgTag.setAttribute("width",wSize);
					imgTag.setAttribute("height",hSize);
					items[i].insertBefore(imgTag,items[i].firstChild);
					imgTag.style.position = "absolute";
					imgTag.style.top = topPosition;
					imgTag.style.left = leftPosition;

				}
			}
		}

	}

}


/* ----------------------------------------------------------------------
 2. 新着マークの表示（classを追加）
-------------------------------------------------------------------------

指定されたidの要素内の指定されたタグに指定形式のclassが与えられていれば、新着か判断し、新着であれば指定のclassを同要素に追加する。

	class="update__2008-01-01"


ブラウザの動作状況

	Windows
		○ Internet Explorer 5.0
		○ Internet Explorer 5.5
		○ Internet Explorer 6
		○ Internet Explorer 7
		○ Internet Explorer 8
		○ Safari 3
		○ Opera 9.27 
	Mac
		○ Safari 3
		○ Internet Explorer 5.23
		○ Opera 9.25 

---------------------------------------------------------------------- */


// 初期設定
// ----------------------------------------------------------------------

// 新着として扱う日数
var recent = 7;

// 日付データに付加する文字列
var attachedStr = "update__";		// 日付形式: 2008-01-01 例: update__2008-01-01

// 新着の情報に追加するクラスネーム
var addClass = "newItem";

// ----------------------------------------------------------------------

var currentDate = new Date().getTime();

function newMark(scopeId,targetTag) {

	if(document.getElementsByTagName) {
		
		var items = document.getElementById(scopeId).getElementsByTagName(targetTag);
		
		for(var i=0; i < items.length; i++) {

			if(items[i].getAttribute("class")) {
				var itemClasss = items[i].getAttribute("class");
			}
			else {
				var itemClasss = items[i].getAttribute("className");
			}

			if(itemClasss) {
				if(itemClasss.match(attachedStr)) {
					var itemClass = itemClasss.split(" ");
					var updateTime;
					for (j=0; j<itemClass.length; j++) {
						if(itemClass[j].match(attachedStr)) {
							updateStrs = itemClass[j].split("__");
							updateTime = updateStrs[1];
						}
					}
					var times = updateTime.split("-");
					var entryDate = new Date(times[0], times[1]-1, times[2], 0, 0, 0).getTime();
					var passDay = Math.floor((currentDate - entryDate) / (24 * 60 * 60 * 1000));
					if(recent >= passDay) {

						if(items[i].setAttribute("class",itemClasss + " " + addClass)) {
							items[i].setAttribute("class",itemClasss + " " + addClass);
						}
						else {
							items[i].setAttribute("className",itemClasss + " " + addClass);
						}

					}
				}
			}

		}

	}

}


/* ----------------------------------------------------------------------
 8. 文字サイズの変更ボタンを追加する
---------------------------------------------------------------------- */

/*

＜スクリプトの概要＞

下記の内容が、初期設定「changeTarget」で指定のボックスの最後のノードとして挿入されます。
CSSで適当な場所に表示してください。
onclickイベントは、「li」に設定されます。適宜、display/widthプロパティー等を設定してください。

	<div id="size-changer">
	<ul>
	<li id="初期設定で指定のid">初期設定で指定のイメージ</li>
	<li id="初期設定で指定のid">初期設定で指定のイメージ</li>
	 ↓
	</ul>
	</div>

選択された文字サイズのボタン（li）には、初期設定「addValue」で指定のclassが設定されます。

*/

// イベントの登録
addListener(window, 'load', textSizeChanger);


// 初期設定
// ----------------------------------------------------------------------

// 文字サイズを変更する対象ブロックのid
var changeTarget ="exclude-footer";

// 変更ボタンをマークアップするli要素のidとボタンのimageタグ（id Tab image Tab font-size）
var buttons = [
"change_small	<img src=\"http://170thanniversary.yosikawaya.com/js/font-size_changeer/images/down.gif\" width=\"20\" height=\"20\" alt=\"小さめの文字\" title=\"小さめの文字\" />	12px",
"change_middle	<img src=\"http://170thanniversary.yosikawaya.com/js/font-size_changeer/images/regular.gif\" width=\"20\" height=\"20\" alt=\"普通の文字\" title=\"普通の文字\" />	14px",
"change_large	<img src=\"http://170thanniversary.yosikawaya.com/js/font-size_changeer/images/up.gif\" width=\"20\" height=\"20\" alt=\"大きめの文字\" title=\"大きめの文字\" />	16px"
]

// 初期状態のボタンのid
var defaultButton ="change_middle";

// 選択されているボタンに追加するclass
var addValue = "currentButton";

// ----------------------------------------------------------------------

// 連想配列（キー:id　値:フォントサイズ）
var size = new Array();

// 挿入するボタンリストのXHTMLを生成
var buttonsHtml = "<ul class=\"clearfix\">";
for(var i=0; i<buttons.length; i++) {
	var datas = buttons[i].split("\t");
	buttonsHtml += "<li id=\"" + datas[0] + "\">" + datas[1] + "</li>";
}
buttonsHtml += "</ul>";

// メインの関数
function textSizeChanger() {

	// ボタンを挿入
	var changeTargetNode = document.getElementById(changeTarget);
	var changerNode = document.createElement("div");
	changerNode.id = "size-changer";
	changeTargetNode.appendChild(changerNode);
	document.getElementById("size-changer").innerHTML = buttonsHtml;

	// クッキーの値を取得
	var selectSize = getCookie("fontsize");

	// クッキーの値で文字サイズをセット
	if(selectSize) {

		for(var i=0; i<buttons.length; i++) {
			var datas = buttons[i].split("\t");
			if(datas[0] == selectSize) {
				document.getElementById(changeTarget).style.fontSize = datas[2];
				document.getElementById(datas[0]).setAttribute(unityClass, addValue);
			}
		}
		
	}
	else {
		selectSize = defaultButton;
		document.getElementById(defaultButton).setAttribute(unityClass, addValue);
	}

	// 挿入したボタンにイベントを設定
	for(var i=0; i<buttons.length; i++) {
		var datas = buttons[i].split("\t");
		size[datas[0]] = datas[2];
		document.getElementById(datas[0]).onclick = function () {
			document.getElementById(changeTarget).style.fontSize =size[this.id];
			setCookie("fontsize", this.id);
//			addClass_textSizeChanger(this.id);
			addClass(this.id);
		}

		if(document.all) {
			document.getElementById(datas[0]).style.cursor = "hand";
		}
		else {
			document.getElementById(datas[0]).style.cursor = "pointer";
		}
		
	}

	// 選択されたサイズのボタンにクラスをセット
	var addClass = function (id) {
	
		for(var i=0; i<buttons.length; i++) {
			var datas = buttons[i].split("\t");
			if(datas[0] == id) {
				if(!document.getElementById(datas[0]).getAttribute(unityClass)) {
					document.getElementById(datas[0]).setAttribute(unityClass, addValue);
				}
			}
			else {
				document.getElementById(datas[0]).removeAttribute(unityClass);
			}
			
		}
	
	}

}

/* ----------------------------------------------------------------------
 9. 「cookie」の処理
---------------------------------------------------------------------- */
// cookieの保存
function setCookie(name, value, expires, domain, path, secure) {
    var cookieStr = name + "=" + encodeURIComponent(value);
    cookieStr += expires ? " ;expires=" + expires.toGMTString() : "";
    cookieStr += domain ? " ;domain=" + domain : "";
    cookieStr += path ? " ;path=" + path : "";
    cookieStr += secure ? " ;secure" : "";
    document.cookie = cookieStr;
}

// cookieの読み込み
function getCookie(name) {
    var i, cookies, value;
    cookies = document.cookie.split("; ");
    for (i = 0; i < cookies.length; i++) {
         value = cookies[i].split("=");
         if (value[0] == name) {
             return decodeURIComponent(value[1]);
         }
    }
    return null;
}