// --------------------------------------------------------------------
// Author  : mashimonator
// Create  : 2009/02/04
// Update  : 2009/02/04
// Description : テキストボックスにウォーターマークを表示する
// --------------------------------------------------------------------

var watermark = {

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

		targetTag : 'span',            // 対象の要素名
		targetCls : 'watermark',       // 対象の要素のクラス名
		replaceCls : 'watermarkText'   // 対象の要素の置換クラス名

	},

	//-----------------------------------------
	// main処理
	//-----------------------------------------
	main : function(e) {

		if ( e.type == 'load' ) {

			var elements = watermark.getTargetElements(watermark.conf.targetTag, watermark.conf.targetCls);

			for (var i = 0; i < elements.length; i++) {

				// ターゲット要素
				var element = elements[i];

				// クラス名を置き換え
				element.className = element.className.replace(watermark.conf.targetCls, watermark.conf.replaceCls);

				// ターゲットのinputを取得
				var targetInputId = element.className.replace(watermark.conf.replaceCls, '').replace(/ /, '');
				var input = document.getElementById(targetInputId);

				// ターゲットのinputの位置を取得してspanに設定
				var pos = watermark.getElementPosition(input);
				element.style.top = (pos.top + 2) + 'px';
				element.style.left = pos.left + 'px';

				// イベントに追加
				try {
					input.addEventListener('focus', watermark.main, false);
					input.addEventListener('blur', watermark.main, false);
				} catch (e) {
					input.attachEvent('onfocus', watermark.main);
					input.attachEvent('onblur', watermark.main);
				}

				// 表示切り替え
				if ( input.value == '' ) {
					element.style.display = 'block';
				} else {
					element.style.display = 'none';
				}

			}

		} else {

			var targetInput = e.srcElement || e.target;
			var elements = watermark.getTargetElements(watermark.conf.targetTag, watermark.conf.replaceCls);
			var element;

			for (var i = 0; i < elements.length; i++) {
				if ( elements[i].className.match(targetInput.id) ) {
					element = elements[i];
					break;
				}
			}

			if (e.type == 'focus') {
				if (element.parentNode) {
					// 非表示
					element.style.display = 'none';
				}
			} else {
				if (targetInput.value == '') {
					// 表示
					element.style.display = 'block';
				}
			}

		}

	},

	//-----------------------------------------
	// 対象要素のポジション取得
	//-----------------------------------------
	getElementPosition : function(element) {

		var offsetTrail = (typeof element == 'string') ? doc.getElementById(element): element;
		var x = 0; var y = 0;

		while (offsetTrail) {
			x += offsetTrail.offsetLeft;
			y += offsetTrail.offsetTop;
			offsetTrail = offsetTrail.offsetParent;
		}

		if (navigator.userAgent.indexOf('Mac') != -1 && typeof doc.body.leftMargin != 'undefined') {
			x += doc.body.leftMargin;
			y += doc.body.topMargin;
		}

		return ({ 'left': x, 'top': y });

	},

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

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

		for (var i = 0; i < targetElements.length; i++) {
			if (targetElements[i].className.match(cls)) {
				elements[elements.length] = targetElements[i];
			}
		}

		return elements;

	},

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

}

watermark.addLoadEvent();