function TypePreview(width, height, fontsize, fontcolor, bgcolor, alpha, radius) {
	//Member data
	this.width = width;
	this.height = height;
	this.fontsize = fontsize;
	this.fontcolor = fontcolor;
	this.bgcolor = bgcolor;
	this.alpha = alpha;
	this.mainNode = null;
	this.hTimer = null;
	this.hiddenSpeedRate = 20; //alpha rate
	this.hiddenSpeedTime = 30; //timer speed
	this.alphaTimer = null;
	this.latastAlpha = alpha;
	this.radius = radius;
	//Member method
	this.showWithText = showPreviewText;
	this.showWithHTML = showPreviewHTML;
	this.hidePreview = hidePreview;
	this.hidePreviewCore = hidePreviewCore;
	//this.hidePreviewFromArray = hidePreviewArray;
	//init method
	this.setupLayer = setupLayer;
	if(!Function.prototype.__TypePreview) {
		Function.prototype.__TypePreview = new Array();
	}
	this.arrayIndex = -1;
	
	var alphaRate = alpha / 100;
	var agentValue = navigator.userAgent.toLowerCase();
	var majorVersion = parseInt(navigator.appVersion);
	var minorVersion = parseFloat(navigator.appVersion);
	this.isIE  = agentValue.indexOf("msie") > 0;
	this.isFirefox = agentValue.indexOf("firefox") > 0;

	this.mainNode = document.createElement("div");
	var mainStyle = document.createAttribute("style");
	if(this.isIE) {
		this.hiddenSpeedRate = 30; //IE is too slow!!
		this.mainNode.setAttributeNode(mainStyle);
		this.mainNode.style.cssText = 'visibility:hidden;position:absolute;width:'+this.width+'px;height:'+this.height+'px;left:0px;top:0px;filter:alpha(opacity='+alpha+');-moz-opacity:'+alphaRate+';opacity:'+alphaRate+';';
	}else{
		mainStyle.value = 'visibility:hidden;position:absolute;width:'+this.width+'px;height:'+this.height+'px;left:0px;top:0px;filter:alpha(opacity='+alpha+');-moz-opacity:'+alphaRate+';opacity:'+alphaRate+';';
		this.mainNode.setAttributeNode(mainStyle);
	}
	document.body.appendChild(this.mainNode);	
	this.setupLayer();
	this.arrayIndex = Function.prototype.__TypePreview.length;
	Function.prototype.__TypePreview[this.arrayIndex] = this;
}

function setupLayer() {
	var canvasNode = document.createElement("canvas");
	var canvasNodeWidth = document.createAttribute("width");
	canvasNodeWidth.value = this.width;
	canvasNode.setAttributeNode(canvasNodeWidth);
	var canvasNodeHeight = document.createAttribute("height");
	canvasNodeHeight.value = this.height;
	canvasNode.setAttributeNode(canvasNodeHeight);
	this.mainNode.appendChild(canvasNode);
	if(this.isIE) {
		canvasNode = G_vmlCanvasManager.initElement(canvasNode);
	}
	var x = this.radius;
	var y = 0;
	var lineX = this.width - (this.radius * 2);
	var lineY = this.height - (this.radius * 2);
	var context = canvasNode.getContext('2d');
	context.beginPath();
	context.moveTo(x,y);
	x = x + lineX;
	context.lineTo(x,y);
	x = x + this.radius;
	y = y + this.radius;
	context.bezierCurveTo(x,y-this.radius,x,y-this.radius,x,y);
	y = y + lineX;
	context.lineTo(x,y);
	x = x - this.radius;
	y = y + this.radius;
	context.bezierCurveTo(x+this.radius,y,x+this.radius,y,x,y);
	x = x - lineX;
	context.lineTo(x,y);
	x = x - this.radius;
	y = y - this.radius;
	context.bezierCurveTo(x,y+this.radius,x,y+this.radius,x,y);
	y = y - lineY;
	context.lineTo(x,y);
	x = x + this.radius;
	y = y - this.radius;
	context.bezierCurveTo(x-this.radius,y,x-this.radius,y,x,y);

	context.fillStyle = this.bgcolor;
	context.fill();
//	this.latastAlpha = this.alpha;
//	var alphaRate = this.latastAlpha / 100;
//	this.mainNode.style.filter = 'alpha(opacity='+this.latastAlpha+')';
//	this.mainNode.style.MozOpacity = alphaRate;
//	this.mainNode.style.opacity = alphaRate;
}

function showPreviewText(x, y, innerText, timeout) {
	var textLayer = document.createElement("div");
	var textStyle = document.createAttribute("style");
	var textNode = document.createTextNode(innerText);
	var width = this.width - 16;
	var height = this.height * 0.9 - 5;
	if(this.isIE) {
		textLayer.setAttributeNode(textStyle);
		textLayer.style.cssText = 'position:absolute;width:'+width+'px;height:'+height+'px;left:8px;top:8px;font-size:'+this.fontsize+'px;color:'+this.fontcolor+';';
	}else{
		textStyle.value = 'position:absolute;width:'+width+'px;height:'+height+'px;left:8px;top:8px;font-size:'+this.fontsize+'px;color:'+this.fontcolor+';';
		textLayer.setAttributeNode(textStyle);
	}
	textLayer.appendChild(textNode);
	this.mainNode.appendChild(textLayer);
	this.mainNode.style.top = y+'px';
	this.mainNode.style.left = x+'px';
	this.mainNode.style.visibility = 'visible';
	if(timeout && timeout > 0 && this.hTimer == null) {
		this.hTimer = setInterval("Function.prototype.__TypePreview["+this.arrayIndex+"].hidePreview()", timeout);
	}
}

function showPreviewHTML(x, y, innerHTML, timeout) {
//	if(this.alphaTimer != null) {
//		while(this.mainNode.childNodes.length > 0) {
//			this.mainNode.removeChild(this.mainNode.childNodes[0]);
//		}
//		clearInterval(this.alphaTimer);
//		this.alphaTimer = null;
//		if(this.hTimer != null) {
//			this.hTimer = null;
//		}
//		this.setupLayer();
//	}
	var textLayer = document.createElement("div");
	var textStyle = document.createAttribute("style");
	var width = this.width - 16;
	var height = this.height * 0.9 - 5;
	if(this.isIE) {
		textLayer.setAttributeNode(textStyle);
		textLayer.style.cssText = 'position:absolute;width:'+width+'px;height:'+height+'px;left:8px;top:8px;font-size:'+this.fontsize+'px;color:'+this.fontcolor+';';
	}else{
		textStyle.value = 'position:absolute;width:'+width+'px;height:'+height+'px;left:8px;top:8px;font-size:'+this.fontsize+'px;color:'+this.fontcolor+';';
		textLayer.setAttributeNode(textStyle);
	}
	textLayer.innerHTML = innerHTML;
	this.mainNode.appendChild(textLayer);
	this.mainNode.style.top = y+'px';
	this.mainNode.style.left = x+'px';
	this.mainNode.style.visibility = 'visible';
	if(timeout && timeout > 0 && this.hTimer == null) {
		this.hTimer = setInterval("Function.prototype.__TypePreview["+this.arrayIndex+"].hidePreview()", timeout);
	}
}

function hidePreview() {
	if(this.hTimer != null) {
		clearInterval(this.hTimer);
	}
//	if(this.alphaTimer == null) {
//		this.alphaTimer = setInterval("Function.prototype.__TypePreview["+this.arrayIndex+"].hidePreviewCore()", this.hiddenSpeedTime);
//	}
	//NO TIMER
	this.hidePreviewCore()
}

function hidePreviewCore() {
//	if(this.latastAlpha > this.hiddenSpeedRate) {
//		this.latastAlpha -= this.hiddenSpeedRate;
//		var alphaRate = this.latastAlpha / 100;
//		this.mainNode.style.filter = 'alpha(opacity='+this.latastAlpha+')';
//		this.mainNode.style.MozOpacity = alphaRate;
//		this.mainNode.style.opacity = alphaRate;
//	}else{
		this.mainNode.style.visibility = 'hidden';
		while(this.mainNode.childNodes.length > 0) {
			this.mainNode.removeChild(this.mainNode.childNodes[0]);
		}
//		clearInterval(this.alphaTimer);
//		this.alphaTimer = null;
		if(this.hTimer != null) {
			this.hTimer = null;
		}
//		this.setupLayer();
//	}
	//NO TIMER
	this.mainNode.style.visibility = 'hidden';
	this.setupLayer();
}

