# figure.rb $Revision: 2 $
# Copyright (C) 2006 Michitaka Ohno <elpeo@mars.dti.ne.jp>
# You can redistribute it and/or modify it under GPL2.

add_header_proc do
	<<-HTML
<script type="text/javascript"><!--
function tDiaryPoint(s){
	var a=s.split(/,/);
	this.x=parseInt(a[0]);
	this.y=parseInt(a[1]);
}
function tDiaryFigure(e){
	if(!e) return;
	e.style.position="relative";
	e.innerHTML="";
	this.container=e;
	if(document.namespaces&&document.namespaces.add){
		this.type=1;
		if(!document.namespaces.v){
			document.namespaces.add("v","urn:schemas-microsoft-com:vml");
			document.createStyleSheet().addRule("v\\\\:*","behavior: url(#default#VML);");
		}
	}else if(document.createElement("canvas").getContext){
		this.type=2;
		this.canvas=document.createElement("canvas");
		this.container.appendChild(this.canvas);
	}
	this.strokeColor="#0000FF";
	this.strokeOpacity=1.0;
	this.fillColor="#FFFF00";
	this.fillOpacity=0.5;
	this.lineWidth=1;
}
tDiaryFigure.prototype.setSize=function(w,h){
	this.container.style.width=w+"px";
	this.container.style.height=h+"px";
	if(this.canvas){
		this.container.removeChild(this.canvas);
		this.canvas.setAttribute("width",this.container.offsetWidth);
		this.canvas.setAttribute("height",this.container.offsetHeight);
		this.container.appendChild(this.canvas);
	}
};
tDiaryFigure.prototype.drawLine=function(p){
	if(!this.type) return;
	if(this.type==1){
		var polyline=document.createElement("v:polyline");
		if(!this.lineWidth||!this.strokeOpacity) polyline.stroked=false;
		polyline.filled=false;
		var points=new Array();
		for(var i=0;i<p.length;i++){
			points.push(p[i].x);
			points.push(p[i].y);
		}
		polyline.points=points.join(",");
		this.container.appendChild(polyline);
    	var stroke=document.createElement("v:stroke");
	    stroke.weight=this.lineWidth+"px";
	    stroke.color=this.strokeColor;
		stroke.opacity=this.strokeOpacity;
    	stroke.endcap="round";
    	stroke.joinstyle="round";
		polyline.appendChild(stroke);
	}else if(this.type==2){
		var ctx=this.canvas.getContext("2d");
		ctx.strokeStyle=this.strokeColor;
		ctx.lineWidth=this.lineWidth;
		ctx.lineCap="round";
		ctx.lineJoin="round";
		if(this.lineWidth&&this.strokeOpacity){
			ctx.globalAlpha=this.strokeOpacity;
			ctx.beginPath();
			ctx.moveTo(p[0].x,p[0].y);
			for(var i=1;i<p.length;i++){
				ctx.lineTo(p[i].x,p[i].y);
			}
			ctx.stroke();
		}
	}
};
tDiaryFigure.prototype.drawArea=function(p){
	if(!this.type) return;
	if(this.type==1){
		var polyline=document.createElement("v:polyline");
		if(!this.lineWidth||!this.strokeOpacity) polyline.stroked=false;
		if(!this.fillOpacity) polyline.filled=false;
		var points=new Array();
		for(var i=0;i<p.length;i++){
			points.push(p[i].x);
			points.push(p[i].y);
		}
		if(p[0].x!=p[p.length-1].x||p[0].y!=p[p.length-1].y){
			points.push(p[0].x);
			points.push(p[0].y);
		}
		polyline.points=points.join(",");
		this.container.appendChild(polyline);
    	var fill=document.createElement("v:fill");
		fill.color=this.fillColor;
		fill.opacity=this.fillOpacity;
		polyline.appendChild(fill);
    	var stroke=document.createElement("v:stroke");
	    stroke.weight=this.lineWidth+"px";
	    stroke.color=this.strokeColor;
		stroke.opacity=this.strokeOpacity;
    	stroke.endcap="round";
    	stroke.joinstyle="round";
		polyline.appendChild(stroke);
	}else if(this.type==2){
		var ctx=this.canvas.getContext("2d");
		ctx.strokeStyle=this.strokeColor;
		ctx.fillStyle=this.fillColor;
		ctx.lineWidth=this.lineWidth;
		ctx.lineCap="round";
		ctx.lineJoin="round";
		if(this.fillOpacity){
			ctx.globalAlpha=this.fillOpacity;
			ctx.beginPath();
			ctx.moveTo(p[0].x,p[0].y);
			for(var i=1;i<p.length;i++){
				ctx.lineTo(p[i].x,p[i].y);
			}
			ctx.closePath();
			ctx.fill();
		}
		if(this.lineWidth&&this.strokeOpacity){
			ctx.globalAlpha=this.strokeOpacity;
			ctx.beginPath();
			ctx.moveTo(p[0].x,p[0].y);
			for(var i=1;i<p.length;i++){
				ctx.lineTo(p[i].x,p[i].y);
			}
			ctx.closePath();
			ctx.stroke();
		}
	}
};
tDiaryFigure.prototype.drawCircle=function(p,r){
	if(!this.type) return;
	if(this.type==1){
		var oval=document.createElement("v:oval");
		if(!this.lineWidth||!this.strokeOpacity) oval.stroked=false;
		if(!this.fillOpacity) oval.filled=false;
		oval.style.position="absolute";
		oval.style.top=(p.y-r)+"px";
		oval.style.left=(p.x-r)+"px";
		oval.style.width=(r*2)+"px";
		oval.style.height=(r*2)+"px";
		this.container.appendChild(oval);
    	var fill=document.createElement("v:fill");
	    fill.color=this.fillColor;
		fill.opacity=this.fillOpacity;
		oval.appendChild(fill);
    	var stroke=document.createElement("v:stroke");
	    stroke.weight=this.lineWidth+"px";
	    stroke.color=this.strokeColor;
		stroke.opacity=this.strokeOpacity;
    	stroke.endcap="round";
    	stroke.joinstyle="round";
		oval.appendChild(stroke);
	}else if(this.type==2){
		var ctx=this.canvas.getContext("2d");
		ctx.strokeStyle=this.strokeColor;
		ctx.fillStyle=this.fillColor;
		ctx.lineWidth=this.lineWidth;
		ctx.lineCap="round";
		ctx.lineJoin="round";
		if(this.fillOpacity){
			ctx.globalAlpha=this.fillOpacity;
			ctx.beginPath();
			ctx.moveTo(p.x+r,p.y);
			ctx.arc(p.x,p.y,r,0,Math.PI*2,true);
			ctx.fill();
		}
		if(this.lineWidth&&this.strokeOpacity){
			ctx.globalAlpha=this.strokeOpacity;
			ctx.beginPath();
			ctx.moveTo(p.x+r,p.y);
			ctx.arc(p.x,p.y,r,0,Math.PI*2,true);
			ctx.stroke();
		}
	}
};
tDiaryFigure.prototype.parse=function(s){
	if(s.match(/^#/)) return;
	var a=s.split(/\\s+/);
	if(a[0]=="Size"){
		var b=a[1].split(/,/);
		this.setSize(parseInt(b[0]),parseInt(b[1]));
	}else if(a[0]=="StrokeColor"){
		this.strokeColor=a[1];
	}else if(a[0]=="StrokeOpacity"){
		this.strokeOpacity=parseFloat(a[1]);
	}else if(a[0]=="FillColor"){
		this.fillColor=a[1];
	}else if(a[0]=="FillOpacity"){
		this.fillOpacity=parseFloat(a[1]);
	}else if(a[0]=="LineWidth"){
		this.lineWidth=parseInt(a[1]);
	}else if(a[0]=="Line"){
		var p=new Array();i
		for(var i=1;i<a.length;i++){	
			p.push(new tDiaryPoint(a[i]));
		}
		this.drawLine(p);
	}else if(a[0]=="Area"){
		var p=new Array();i
		for(var i=1;i<a.length;i++){	
			p.push(new tDiaryPoint(a[i]));
		}
		this.drawArea(p);
	}else if(a[0]=="Circle"){
		this.drawCircle(new tDiaryPoint(a[1]),parseInt(a[2]));
	}
};
tDiaryFigure.init=function(){
	var a=document.getElementsByTagName("div");
	for(var i=0;i<a.length;i++){
		if(a[i].className!="tdiary-figure") continue;
		var fig=a[i].innerHTML;
		var tf=new tDiaryFigure(a[i]);
		var b=fig.split(/\\s*;\\s*/);
		for(var j=0;j<b.length;j++){
			tf.parse(b[j]);
		}
	}
};
if(window.addEventListener){
	window.addEventListener('load',tDiaryFigure.init,false);
}else if(window.attachEvent){
	window.attachEvent('onload',tDiaryFigure.init);
}else{
	window.onload=tDiaryFigure.init;
}
// --></script>
	HTML
end

def figure( s )
	%Q[<div class="tdiary-figure">#{s}</div>]
end