Tooltip = Class.create();
Tooltip.create = function(options) {
	var tooltip = new Tooltip(options);
	tooltip.loadResouces();
	Event.observe(window, 'load', function(event) {tooltip.onloadSetup(event); }, false);
	
	return (tooltip);
}
Tooltip.prototype = {
	initialize : function(options) {
		this.setOptions(options);
	},
	setOptions: function(options) {
		this.options = {
			tipResourceUri: '',
			targetClass: '',
			tipboxId: 'tipbox',
			keyStringId: 'keystring',
			tipStringId: 'tipstring',
			closeButtonId: 'closebutton',
			offsetTop: -80,
			offsetLeft: 15,
			customBox: null,
			method: 'get',
			requestHeaders: ['If-Modified-Since','Wed, 15 Nov 1995 00:00:00 GMT']
		}
		Object.extend(this.options, options || {});
	},
	loadResouces : function() {
		var tooltip = this;
		var options = {
			method         : tooltip.options.method,
			requestHeaders : tooltip.options.requestHeaders,
			onSuccess      : function(res) {
				tooltip.tipResources= eval('(' + res.responseText + ')');
			}
		};
		
		new Ajax.Request(this.options.tipResourceUri, options);
	},
	onloadSetup: function() {
		this.createTipBox();
		this.attachEvent();
	},
	attachEvent: function(event) {
		var targetWords = $$('.' + this.options.targetClass);
		var tooltip = this;
		
		for(var i=0; i<targetWords.length; i++) {
			var id = targetWords[i].getAttribute('id');
			
			if(id) {
				Element.setStyle($(id), {cursor : 'pointer'});
				targetWords[i].observe('mouseover', function(event) { tooltip.showTip(event); });
				Event.observe(tooltip.options.closeButtonId, 'click', function(event) { tooltip.hideTip(event); }, false);
			}
		}
	},
	createTipBox: function() {
		if (!this.options.customBox) {
			//tipox
			var box = document.createElement('div');
			box.id = this.options.tipboxId;
			box.style.zIndex = 1;
			box.style.visibility = 'hidden';
			box.style.position = 'absolute';
			box.style.display = 'block';
			box.style.top = '40';
			box.style.left = '0';
			box.style.width = '200px';
			box.style.padding = '10px';
			box.style.backgroundColor = '#ffffff';
			box.style.color = '#666666';
			box.style.borderWidth = '3px';
			box.style.borderStyle = 'solid';
			box.style.borderColor = '#ADD8E6';
			box.inlineHegiht = '1.2em';
			document.getElementsByTagName('body').item(0).appendChild(box);
			
			//inner content
			var keyStringElement = document.createElement('div');
			var tipStringElement = document.createElement('div');
			
			keyStringElement.id = this.options.keyStringId;
			tipStringElement.id = this.options.tipStringId;
			
			keyStringElement.style.color = '#999966';
			keyStringElement.style.fontWeight = 'bold';
			keyStringElement.style.fontSize = 'small';
			keyStringElement.style.backgroundColor = '#f5f5dc';
			keyStringElement.style.padding = '2px 8px 2px 8px';
			keyStringElement.style.textAlign = 'left';
			
			tipStringElement.style.fontSize = '12px';
			tipStringElement.style.padding = '8px';
			tipStringElement.style.textAlign = 'left';
			
			box.appendChild(keyStringElement);
			box.appendChild(tipStringElement);
			
			// close button
			var closeButtonElement = document.createElement('div');
			closeButtonElement.id = this.options.closeButtonId;
			closeButtonElement.style.backgroundColor = '#f5f5f5';
			closeButtonElement.style.paddibg = '2px 8px 2px 8px';
			closeButtonElement.style.textAlign = 'center';
			closeButtonElement.style.fontSize = 'x-small';
			closeButtonElement.style.cursor = 'pointer';
			closeButtonElement.innerHTML = '閉じる';
			box.appendChild(closeButtonElement);
			
			this.tipBox = box;
		}
		else {
			document.getElementsByTagName('body').item(0).appendChild(customBox);
			this.tipBox = this.options.customBox;
		}
	},
	showTip: function(event) {
		//Event.stop(event);
		var mouseX = Event.pointerX(event);
		var mouseY = Event.pointerY(event);
		var box = document.getElementById(this.options.tipboxId);
		
		var keyStringId = Event.element(event).id;
		var keyStringElement = document.getElementById(this.options.keyStringId);
		var tipStringElement = document.getElementById(this.options.tipStringId);
		keyStringElement.innerHTML = '読み方：' + this.tipResources[keyStringId].keyString;
		tipStringElement.innerHTML = '意味：' + this.tipResources[keyStringId].tip;
		
		box.style.visibility = 'visible';
		box.style.top = mouseY + this.options.offsetTop + 'px';
		box.style.left = mouseX + this.options.offsetLeft + 'px';
	},
	hideTip: function(event) {
		Event.stop(event);
		var box = document.getElementById('tipbox');
		box.style.visibility = 'hidden';
	},
	getWindowWidth : function() {
		return (self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0);
	},
	getWindowHeight : function() {
		return (self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0);
	},
	getDocumentWidth: function(){
		return Math.max(document.body.scrollWidth, this.getWindowWidth());
	},
	getDocumentHeight: function(){
		return Math.max(document.body.scrollHeight, this.getWindowHeight());
	}
}