if ((!window.CanvasRenderingContext2D) && (/MSIE/.test(navigator.userAgent))) {
(function () {
var m = Math;
var mr = m.round;
var ms = m.sin;
var mc = m.cos;
var Z = 10;
var Z2 = Z / 2;
var G_vmlCanvasManager_ = {
init: function (opt_doc) {
var doc = opt_doc || document;
if (/MSIE/.test(navigator.userAgent) && !window.opera) {
var self = this;
doc.attachEvent("onreadystatechange", function () {
self.init_(doc);
});
}
},
init_: function (doc) {
if (doc.readyState == "complete") {
if (!doc.namespaces["g_vml_"]) {
doc.namespaces.add("g_vml_", "urn:schemas-microsoft-com:vml");
}
var ss = doc.createStyleSheet();
ss.cssText = "canvas{display:inline-block;overflow:hidden;" +
"text-align:left;width:300px;height:150px}" +
"g_vml_\\:*{behavior:url(#default#VML)}";
var els = doc.getElementsByTagName("canvas");
for (var i = 0; i < els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
}
},
fixElement_: function (el) {
var outerHTML = el.outerHTML;
var newEl = el.ownerDocument.createElement(outerHTML);
if (outerHTML.slice(-2) != "/>") {
var tagName = "/" + el.tagName;
var ns;
while ((ns = el.nextSibling) && ns.tagName != tagName) {
ns.removeNode();
}
if (ns) {
ns.removeNode();
}
}
el.parentNode.replaceChild(newEl, el);
return newEl;
},
initElement: function (el) {
el = this.fixElement_(el);
el.getContext = function () {
if (this.context_) {
return this.context_;
}
return this.context_ = new CanvasRenderingContext2D_(this);
};
el.attachEvent('onpropertychange', onPropertyChange);
el.attachEvent('onresize', onResize);
var attrs = el.attributes;
if (attrs.width && attrs.width.specified) {
el.style.width = attrs.width.nodeValue + "px";
} else {
el.width = el.clientWidth;
}
if (attrs.height && attrs.height.specified) {
el.style.height = attrs.height.nodeValue + "px";
} else {
el.height = el.clientHeight;
}
return el;
}
};
function onPropertyChange(e) {
var el = e.srcElement;
switch (e.propertyName) {
case 'width':
el.style.width = el.attributes.width.nodeValue + "px";
el.getContext().clearRect();
break;
case 'height':
el.style.height = el.attributes.height.nodeValue + "px";
el.getContext().clearRect();
break;
}
}
function onResize(e) {
var el = e.srcElement;
if (el.firstChild) {
el.firstChild.style.width = el.clientWidth + 'px';
el.firstChild.style.height = el.clientHeight + 'px';
}
}
G_vmlCanvasManager_.init();
var dec2hex = [];
for (var i = 0; i < 16; i++) {
for (var j = 0; j < 16; j++) {
dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
}
}
function createMatrixIdentity() {
return [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
];
}
function matrixMultiply(m1, m2) {
var result = createMatrixIdentity();
for (var x = 0; x < 3; x++) {
for (var y = 0; y < 3; y++) {
var sum = 0;
for (var z = 0; z < 3; z++) {
sum += m1[x][z] * m2[z][y];
}
result[x][y] = sum;
}
}
return result;
}
/*********************************************************
Modified(test) 23 July,2008 samurai-logic.com
**********************************************************/
function matrixMultiply2(m1, m2) {
var result = createMatrixIdentity();
result[0][0]=eval(m1[0][0]*m2[0][0])+eval(m1[1][0]*m2[0][1]);//a1*a2+c1*b2
result[0][1]=eval(m1[0][1]*m2[0][0])+eval(m1[1][1]*m2[0][1]);//b1*a2+d1*b2
result[0][2]=0;
result[1][0]=eval(m1[0][0]*m2[1][0])+eval(m1[1][0]*m2[1][1]);//a1*c2+c1*d2
result[1][1]=eval(m1[0][1]*m2[1][0])+eval(m1[1][1]*m2[1][1]);//b1*c2+d1*d2
result[1][2]=0;
result[2][0]=eval(m1[0][0]*m2[2][0])+eval(m1[1][0]*m2[2][1]);//+eval(m1[2][0]);//a1*e2+c1*f2+e1
result[2][1]=eval(m1[0][1]*m2[2][0])+eval(m1[1][1]*m2[2][1]);//+eval(m1[2][1]);//b1*e2+d1*f2+f1
result[2][2]=1;
return result;
}
function copyState(o1, o2) {
o2.fillStyle = o1.fillStyle;
o2.lineCap = o1.lineCap;
o2.lineJoin = o1.lineJoin;
o2.lineWidth = o1.lineWidth;
o2.miterLimit = o1.miterLimit;
o2.shadowBlur = o1.shadowBlur;
o2.shadowColor = o1.shadowColor;
o2.shadowOffsetX = o1.shadowOffsetX;
o2.shadowOffsetY = o1.shadowOffsetY;
o2.strokeStyle = o1.strokeStyle;
o2.arcScaleX_ = o1.arcScaleX_;
o2.arcScaleY_ = o1.arcScaleY_;
}
function processStyle(styleString) {
var str, alpha = 1;
styleString = String(styleString);
if (styleString.substring(0, 3) == "rgb") {
var start = styleString.indexOf("(", 3);
var end = styleString.indexOf(")", start + 1);
var guts = styleString.substring(start + 1, end).split(",");
str = "#";
for (var i = 0; i < 3; i++) {
str += dec2hex[Number(guts[i])];
}
if ((guts.length == 4) && (styleString.substr(3, 1) == "a")) {
alpha = guts[3];
}
} else {
str = styleString;
}
return [str, alpha];
}
function processLineCap(lineCap) {
switch (lineCap) {
case "butt":
return "flat";
case "round":
return "round";
case "square":
default:
return "square";
}
}
function CanvasRenderingContext2D_(surfaceElement) {
this.m_ = createMatrixIdentity();
this.mStack_ = [];
this.aStack_ = [];
this.currentPath_ = [];
this.strokeStyle = "#000";
this.fillStyle = "#000";
this.lineWidth = 1;
this.lineJoin = "miter";
this.lineCap = "butt";
this.miterLimit = Z * 1;
this.globalAlpha = 1;
this.canvas = surfaceElement;
var el = surfaceElement.ownerDocument.createElement('div');
el.style.width = surfaceElement.clientWidth + 'px';
el.style.height = surfaceElement.clientHeight + 'px';
el.style.overflow = 'hidden';
el.style.position = 'absolute';
surfaceElement.appendChild(el);
this.element_ = el;
this.arcScaleX_ = 1;
this.arcScaleY_ = 1;
};
var contextPrototype = CanvasRenderingContext2D_.prototype;
contextPrototype.clearRect = function() {
this.element_.innerHTML = "";
this.currentPath_ = [];
};
contextPrototype.beginPath = function() {
this.currentPath_ = [];
};
contextPrototype.moveTo = function(aX, aY) {
this.currentPath_.push({type: "moveTo", x: aX, y: aY});
this.currentX_ = aX;
this.currentY_ = aY;
};
contextPrototype.lineTo = function(aX, aY) {
this.currentPath_.push({type: "lineTo", x: aX, y: aY});
this.currentX_ = aX;
this.currentY_ = aY;
};
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
aCP2x, aCP2y,
aX, aY) {
this.currentPath_.push({type: "bezierCurveTo",
cp1x: aCP1x,
cp1y: aCP1y,
cp2x: aCP2x,
cp2y: aCP2y,
x: aX,
y: aY});
this.currentX_ = aX;
this.currentY_ = aY;
};
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
var cp1x = this.currentX_ + 2.0 / 3.0 * (aCPx - this.currentX_);
var cp1y = this.currentY_ + 2.0 / 3.0 * (aCPy - this.currentY_);
var cp2x = cp1x + (aX - this.currentX_) / 3.0;
var cp2y = cp1y + (aY - this.currentY_) / 3.0;
this.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, aX, aY);
};
contextPrototype.arc = function(aX, aY, aRadius,
aStartAngle, aEndAngle, aClockwise) {
aRadius *= Z;
var arcType = aClockwise ? "at" : "wa";
var xStart = aX + (mc(aStartAngle) * aRadius) - Z2;
var yStart = aY + (ms(aStartAngle) * aRadius) - Z2;
var xEnd = aX + (mc(aEndAngle) * aRadius) - Z2;
var yEnd = aY + (ms(aEndAngle) * aRadius) - Z2;
if (xStart == xEnd && !aClockwise) {
xStart += 0.125;
}
this.currentPath_.push({type: arcType,
x: aX,
y: aY,
radius: aRadius,
xStart: xStart,
yStart: yStart,
xEnd: xEnd,
yEnd: yEnd});
};
contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
};
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
// Will destroy any existing path (same as FF behaviour)
this.beginPath();
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
this.stroke();
};
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
// Will destroy any existing path (same as FF behaviour)
this.beginPath();
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
this.fill();
};
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
var gradient = new CanvasGradient_("gradient");
return gradient;
};
contextPrototype.createRadialGradient = function(aX0, aY0,
aR0, aX1,
aY1, aR1) {
var gradient = new CanvasGradient_("gradientradial");
gradient.radius1_ = aR0;
gradient.radius2_ = aR1;
gradient.focus_.x = aX0;
gradient.focus_.y = aY0;
return gradient;
};
contextPrototype.drawImage = function (image, var_args) {
var dx, dy, dw, dh, sx, sy, sw, sh;
var oldRuntimeWidth = image.runtimeStyle.width;
var oldRuntimeHeight = image.runtimeStyle.height;
image.runtimeStyle.width = 'auto';
image.runtimeStyle.height = 'auto';
var w = image.width;
var h = image.height;
image.runtimeStyle.width = oldRuntimeWidth;
image.runtimeStyle.height = oldRuntimeHeight;
if (arguments.length == 3) {
dx = arguments[1];
dy = arguments[2];
sx = sy = 0;
sw = dw = w;
sh = dh = h;
} else if (arguments.length == 5) {
dx = arguments[1];
dy = arguments[2];
dw = arguments[3];
dh = arguments[4];
sx = sy = 0;
sw = w;
sh = h;
} else if (arguments.length == 9) {
sx = arguments[1];
sy = arguments[2];
sw = arguments[3];
sh = arguments[4];
dx = arguments[5];
dy = arguments[6];
dw = arguments[7];
dh = arguments[8];
} else {
throw "Invalid number of arguments";
}
var d = this.getCoords_(dx, dy);
var w2 = sw / 2;
var h2 = sh / 2;
var vmlStr = [];
var W = 10;
var H = 10;
vmlStr.push(' ' ,
'',
'');
this.element_.insertAdjacentHTML("BeforeEnd",
vmlStr.join(""));
};
contextPrototype.stroke = function(aFill) {
var lineStr = [];
var lineOpen = false;
var a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
var color = a[0];
var opacity = a[1] * this.globalAlpha;
var W = 10;
var H = 10;
lineStr.push(' max.x) {
max.x = c.x;
}
if (min.y == null || c.y < min.y) {
min.y = c.y;
}
if (max.y == null || c.y > max.y) {
max.y = c.y;
}
}
}
lineStr.push(' ">');
if (typeof this.fillStyle == "object") {
var focus = {x: "50%", y: "50%"};
var width = (max.x - min.x);
var height = (max.y - min.y);
var dimension = (width > height) ? width : height;
focus.x = mr((this.fillStyle.focus_.x / width) * 100 + 50) + "%";
focus.y = mr((this.fillStyle.focus_.y / height) * 100 + 50) + "%";
var colors = [];
if (this.fillStyle.type_ == "gradientradial") {
var inside = (this.fillStyle.radius1_ / dimension * 100);
var expansion = (this.fillStyle.radius2_ / dimension * 100) - inside;
} else {
var inside = 0;
var expansion = 100;
}
var insidecolor = {offset: null, color: null};
var outsidecolor = {offset: null, color: null};
this.fillStyle.colors_.sort(function (cs1, cs2) {
return cs1.offset - cs2.offset;
});
for (var i = 0; i < this.fillStyle.colors_.length; i++) {
var fs = this.fillStyle.colors_[i];
colors.push( (fs.offset * expansion) + inside, "% ", fs.color, ",");
if (fs.offset > insidecolor.offset || insidecolor.offset == null) {
insidecolor.offset = fs.offset;
insidecolor.color = fs.color;
}
if (fs.offset < outsidecolor.offset || outsidecolor.offset == null) {
outsidecolor.offset = fs.offset;
outsidecolor.color = fs.color;
}
}
colors.pop();
lineStr.push('');
} else if (aFill) {
lineStr.push('');
} else {
lineStr.push(
''
);
}
lineStr.push("");
this.element_.insertAdjacentHTML("beforeEnd", lineStr.join(""));
this.currentPath_ = [];
};
contextPrototype.fill = function() {
this.stroke(true);
}
contextPrototype.closePath = function() {
this.currentPath_.push({type: "close"});
};
/**
* @private
*/
contextPrototype.getCoords_ = function(aX, aY) {
return {
x: Z * (aX * this.m_[0][0] + aY * this.m_[1][0] + this.m_[2][0]) - Z2,
y: Z * (aX * this.m_[0][1] + aY * this.m_[1][1] + this.m_[2][1]) - Z2
}
};
contextPrototype.save = function() {
var o = {};
copyState(this, o);
this.aStack_.push(o);
this.mStack_.push(this.m_);
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
};
contextPrototype.restore = function() {
copyState(this.aStack_.pop(), this);
this.m_ = this.mStack_.pop();
};
/*******************************************************
Add "setmatrix" attribute 23 July,2008 samurai-logic.com
********************************************************/
contextPrototype.setmatrix = function(aM,bM,cM,dM,eM,fM) {
var m1 = [
[aM, bM, 0],
[cM, dM, 0],
[eM, fM, 1]
];
var m2 = [
[1, 0, 0],
[0, 1, 0],
[eM, fM, 1]
];
this.m_ = m1;//matrixMultiply(m1,m2);
}
contextPrototype.translate = function(aX, aY) {
var m1 = [
[1, 0, 0],
[0, 1, 0],
[aX, aY, 1]
];
this.m_ = matrixMultiply(m1, this.m_);
};
contextPrototype.rotate = function(aRot) {
var c = mc(aRot);
var s = ms(aRot);
var m1 = [
[c, s, 0],
[-s, c, 0],
[0, 0, 1]
];
this.m_ = matrixMultiply(m1, this.m_);
};
contextPrototype.scale = function(aX, aY) {
this.arcScaleX_ *= aX;
this.arcScaleY_ *= aY;
var m1 = [
[aX, 0, 0],
[0, aY, 0],
[0, 0, 1]
];
this.m_ = matrixMultiply(m1, this.m_);
};
contextPrototype.clip = function() {
};
contextPrototype.arcTo = function() {
};
contextPrototype.createPattern = function() {
return new CanvasPattern_;
};
function CanvasGradient_(aType) {
this.type_ = aType;
this.radius1_ = 0;
this.radius2_ = 0;
this.colors_ = [];
this.focus_ = {x: 0, y: 0};
}
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
aColor = processStyle(aColor);
this.colors_.push({offset: 1-aOffset, color: aColor});
};
function CanvasPattern_() {}
G_vmlCanvasManager = G_vmlCanvasManager_;
CanvasRenderingContext2D = CanvasRenderingContext2D_;
CanvasGradient = CanvasGradient_;
CanvasPattern = CanvasPattern_;
})();
} // if
var H=100;
var H2=100; //height of textarea function1,2,3 tt[4] to tt[6]
var T=134; //top of textarea function1,2,3 tt[4] to tt[6]
var up=0; // up is zIndex of layer which is currently shown
var zi=6; // zi is zIndex of layer
var tt=["A","B","C","D","E","F","G"];
var ll=["lay1","lay2","lay3","lay4","lay5","lay6","lay7"];
var tb=["tb1","tb2","tb3","tb4","tb5","tb6","tb7"];
var gpi=["tit","pi1","pi2","pi3","pi4","pi5","pi6","pi7","pi8","pi9","pi10","pi11","pi12"];
var gbar=["tit","bar1","bar2","bar3","bar4","bar5","bar6","bar7","bar8","bar9","bar10",
"bar11","bar12","bar13","bar14","bar15","bar16","bar17","bar18","bar19","bar20",
"bar21","bar22","bar23","bar24","bar25","bar26","bar27","bar28","bar29","bar30",
"bar31","bar32","bar33","bar34","bar35","bar36","bar37","bar38","bar39","bar40",
"bar41","bar42","bar43","bar44","bar45","bar46","bar47","bar48","bar49","bar50",
"grid1","grid2","grid3","grid4"];
data1=new Array();
data2=new Array();
data3=new Array();
function $s(id){ /* this function will select textarea when ondblclick event */
var el=$id(id);
el.select();
}
function $id(id){
var element = document.getElementById(id);
return element = (!element) ? $info(id,"D") : element;
}
function $info(id,out){
var el=$id(out);
el.value='"'+id+'" not found.';
$cc(4);
}
function $cc_A(n){
for (var i=0;i<4;i++){
var tx=$id(tt[i]);
var ly=$id(ll[i]);
if (window.attachEvent && !window.opera){
ly.style.cssText = "height:"+H+"px; width:265px;";
tx.style.cssText = "height:"+H+"px; width:265px;";
}else{
ly.setAttribute("style", "height:"+H+"px; width:265px;");
tx.setAttribute("style", "height:"+H+"px; width:265px;");
}
}
for (var i=4;i<7;i++){
var tx=$id(tt[i]);
var ly=$id(ll[i]);
if (window.attachEvent && !window.opera){
ly.style.cssText = "height:"+H2+"px; top:"+T+"px; width:265px;";
tx.style.cssText = "height:"+H2+"px; top:"+T+"px; width:265px;";
}else{
ly.setAttribute("style", "height:"+H2+"px; top:"+T+"px; width:265px;");
tx.setAttribute("style", "height:"+H2+"px; top:"+T+"px; width:265px;");
}
}
}
var tempH,tempT,tempH2;
function $cc(n) { /* this fucntion change layer when tab is clicked */
// for Google Chrome and Safari (movable textarea)
// if (/Chrome/.test(navigator.userAgent) || (/Safari/.test(navigator.userAgent))) $cc_A(n);
var layn=$id(ll[n-1]);
var tabn=$id(tb[n-1]);
var el=$id(tt[n-1]);
//if (eval(n) == up) {el.focus(); return;}
layn.style.zIndex=zi+1;
tabn.style.zIndex=zi+1;
up=n; zi+=5;
el.focus();
}
/* this function change font-size of all textarea tt["A" to "G"] */
function $fs(fs) {
//var fs=$id("fs").value;
for (i=0;i=100+spn || flag==true) return;
flag=true;
timer=setInterval("$mv(4,spn)",10);
}
/*************************************/
function $mv(x,xx){
if (lmt==xx) {
T=eval(H+34+ht);
clearInterval(timer); if (x>=0) H+=60; else H-=60;
flag=false;
delete ttt; delete ff; delete fs;
ht=0;lmt=0;return;
}
var ff=$id("ff").value;
var fs=$id("fs").value;
var ttt=0; /* this var ttt will ajust layer height */
if (H==160) ttt=-120; /* adjust height and top */
if (H==40) ttt=120;
ht=lmt+x;
H2=eval(H-ht+ttt);
for (var i=4;i<7;i++){
var tx=$id(tt[i]);
var ly=$id(ll[i]);
if (window.attachEvent && !window.opera){
ly.style.cssText = "height:"+H2+"px; top:"+eval(H+34+ht)+"px;";
tx.style.cssText = "height:"+H2+"px; top:"+eval(H+34+ht)+"px;font-size:"+fs+";font-family:"+ff+";";
}else{
ly.setAttribute("style", "height:"+H2+"px; top:"+eval(H+34+ht)+"px;z-index:"+eval(7-i)+";");
tx.setAttribute("style", "height:"+H2+"px; top:"+eval(H+34+ht)+"px;z-index:"+eval(7-i)+";font-size:"+fs+";font-family:"+ff+";");
}
}
for (var i=0;i<4;i++){
var tx=$id(tt[i]);
var ly=$id(ll[i]);
if (window.attachEvent && !window.opera){
ly.style.cssText = "height:"+eval(H+ht)+"px;";
tx.style.cssText = "height:"+eval(H+ht)+"px;font-size:"+fs+";font-family:"+ff+";";
}else{
ly.setAttribute("style", "height:"+eval(H+ht)+"px;z-index:"+eval(4-i)+";");
tx.setAttribute("style", "height:"+eval(H+ht)+"px;z-index:"+eval(4-i)+";font-size:"+fs+";font-family:"+ff+";");
}
}
lmt+=x; /* x = 3 */
}
/********************************** Tool Box animation *****************************/
var grow=false; // grow is "true" at first position
var add=0;
var span=0;
var tW=0;
var tH=0;
var tT=0;
var tL=0;
var dif=0;
function $tool(id,ht,wt){
if(flag==true) return;
flag=true;
//grow=true==>laybox is opened
if(grow==true) {mv=5;tW=wt*2;tH=wt;tT=298-wt;tL=262-wt*2;span=wt;
temp2=$id("slct"); document.body.removeChild(temp2);
temp2=$id("slct2"); document.body.removeChild(temp2);
temp2=$id("tools"); document.body.removeChild(temp2);
}
else {mv=-5;tW=0;tH=0;tT=298;tL=262;span=-wt;}
nm=new String(id);
if (window.attachEvent && !window.opera) {
if(grow==true) {tW=wt*2+5; tH=wt+5; tT=298-wt; tL=262-wt*2;}
else {tT=284; tL=262; tW=5;tH=20;}
}
toolbox=setInterval("$toolAnimation(nm,mv,span)",12);
}
dts=["data1","data2","data3"];
tool=["strip tags","escape html","unescape html","escape string","unescape string","create table"];
function $toolAnimation(id,x,z){ /* x=width y=height z=span */
if (lmt==z) { /* limit increase by x(mv) each call untill it rearch z(span) */
clearInterval(toolbox);
var temp=$id("boxbutton");
if (x>0) {
grow=false; temp.value="Open";
}else {grow=true; temp.value="Close";
var el = document.createElement("select");
el.setAttribute("id","slct");
el.setAttribute("title","select data");
document.body.appendChild(el);
for (var i=0;i<=dts.length-1;i++){
var op=document.createElement("option");
op.setAttribute("value",dts[i]);
op.innerHTML=dts[i];
el.appendChild(op);
}
var el2 = document.createElement("select");
el2.setAttribute("id","slct2");
el2.setAttribute("title","select command from menu");
document.body.appendChild(el2);
for (var i=0;i<=tool.length-1;i++){
var op2=document.createElement("option");
op2.setAttribute("value",tool[i]);
op2.innerHTML=tool[i];
el2.appendChild(op2);
}
var el3 = document.createElement("button");
el3.setAttribute("id","tools");
el3.setAttribute("title","execute command");
el3.setAttribute("value","execute");el3.innerHTML="execute";
document.body.appendChild(el3);
el3.onclick=function(){$TOOL();}
}
delete temp;
flag=false;
add=0;lmt=0;dif=0;return;
}
var el=$id(id);
add=lmt+x;
/************* Width & Height & TOP & LEFT ***********/
if(add<=-42) dif=add+42;
else if(add>=0) dif=add/1.45-90;//dif=add/1.5-90;
if (window.attachEvent && !window.opera && add<=-28) dif=add+28;
if (window.attachEvent && !window.opera && add>=0) dif=add/1.20-90;
if (window.attachEvent && !window.opera){
el.style.cssText = "width:"+eval(tW-add*2)+"px; height:"+eval(tH-(add-dif))+"px;top:"+eval(tT+add-dif)+"px;left:"+eval(tL+add*2)+"px;";
}else{
el.setAttribute("style", "width:"+eval(tW-add*2)+"px; height:"+eval(tH-(add-dif))+"px;top:"+eval(tT+add-dif)+"px;left:"+eval(tL+add*2)+"px;");
}
lmt+=x;
}
/****************** $TOOL ********************************/
/* tool[]
0:"strip tags" 1:"escape html" 2:"unescape html"
3:"escape string"4:"unescape string" 5:"create table"
*/
function $TOOL(){
var dt = $id("slct").value;
var exc=$id("slct2").value;
var D=$id("D");
//alert(dt+":"+exc);
if (exc==tool[5]) $r(dt.replace(/a/g,""));
switch(dt){
case dts[0]: var str=$id("A").value; var data=data1; break;
case dts[1]: var str=$id("B").value; var data=data2; break;
case dts[2]: var str=$id("C").value; var data=data3; break;
default: break;
}
if (str=="" || str==null) {D.value='no data : '+dt; $cc(4); return;}
switch(exc){
case tool[0]: D.value=str.replace(/<\/?[^>]+>/gi," ").replace(/\n\s*/g,"\n").replace(/^\s+|\s+$|\s+(?!\S)/g,""); $cc(4); break;
case tool[1]: D.value=str.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'"); $cc(4); break;
case tool[2]: D.value=str.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,'"').replace(/('|'(\;?))/g,"'"); $cc(4); break;
case tool[3]: D.value=escape(str); $cc(4); break;
case tool[4]: D.value=unescape(str); $cc(4); break;
case tool[5]: var str="
";
for(var i=0; i";
str+="\n";
}
str+="
"; D.value=str; $cc(4); break;
default: break;
}
delete str; delete dt; delete D; delete exc;
}
/****************** $r read data ************************/
function $r(dt){
reg=/\d\,\d{3}/g; /* test number */
switch(dt){
case "dt1":
var sortData=$id("A").value;
if(sortData=="") break;
var sortData=fmd(sortData);
data1=sortData.split("\n");
for(var i=0; i 'data1[', 'data2[', 'data3[' */
function $e(){
//var FUNC = $id("FC").value;
var STR_STR=$Get();
regCvs=/\s*ctx\./; // regExp of "ctx"
var isCvs=false; // if isCvs=true, it's canvas expression also zindex=true in case remove canvas
//if (/\$\C\(/.test(STR_STR)==false){
if (STR_STR.search(regCvs)>=0) { // if "ctx." is found
clearInterval(timeSet);
clearInterval(daySet);
clearInterval(ieSet);
var id=document.getElementById("cvs");
if(id) document.body.removeChild(id);
$cvs();
zindex=true;
isCvs=true;
}
Rg1 = /\s*DATA1/;
Rg2 = /\s*DATA2/;
Rg3 = /\s*DATA3/;
STR_STR=STR_STR.replace(Rg1,'var DATA1=$id("A").value; DATA1');
STR_STR=STR_STR.replace(Rg2,'var DATA2=$id("B").value; DATA2');
STR_STR=STR_STR.replace(Rg3,'var DATA3=$id("C").value; DATA3');
if (isCvs==true) {
var DDDD=$id("D");
try{ eval(STR_STR); } catch(e) {DDDD.value="error:"+e; $cc(4); }
STR_STR=null; delete Rg1; delete Rg2; delete Rg3;
return;
}
//}
/* if ctx. then execute canvas and return */
var DDDD=$id("D");
try{ var ans=eval(STR_STR); }
catch(e) {DDDD.value="error:"+e; $cc(4); delete STR_STR; delete regCvs; delete DDDD; return;}
if (ans!='') $cc(4);
DDDD.value=eval(STR_STR);
delete STR_STR; delete regCvs; delete DDDD;
}
/*********************** Canvas ******************************************/
var zindex=false;
var _pi=0;
var ctx;
var Time=false;
var img = new Image();
img.src="http://www.samurai-logic.com/gadget/img/omega.png";
function $cvs(){ /* this function create canvas area and set "ctx" as canvas element */
//if (flag==true) return;
var id=document.getElementById("cvs");
//if (id) {return;}
if (id) ctx=null; //cannot delete ctx, ctx=null
var el = document.createElement('canvas');
el.setAttribute('id', 'cvs');
el.setAttribute('width', 269);
el.setAttribute('height', 150);
document.body.appendChild(el);
if (window.attachEvent && !window.opera){
G_vmlCanvasManager.initElement(document.getElementById('cvs'));
}
ctx=document.getElementById("cvs").getContext("2d");
}
function $draw(){
//var ctx=$id("cvs").getContext("2d");
$cvs();
//ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.moveTo(37, 3);
if (window.attachEvent && !window.opera){
ctx.lineTo(265, 3);
ctx.lineTo(265, 120);
}else{
ctx.lineTo(295, 3);
ctx.lineTo(295, 120);
}
ctx.lineTo(37, 120);
ctx.closePath();
ctx.fill();
ctx.save();
}
/*********** remonve canvas ********/
function $rem2(){_pi=0; $rem(); init(); }
function $rem(){
if (Time==true){ //if clock moving
clearInterval(timeSet);//clear before removeChild
clearInterval(daySet);
//if (/MSIE/.test(navigator.userAgent))
clearInterval(ieSet);
var id=document.getElementById("day");
if(id) document.body.removeChild(id); //remove day
var id=document.getElementById("cvs");
if(id) {document.body.removeChild(id);}//else{$info("data","D"); init();}
id=null;
}
if (zindex==false) return;//zindex==false --> same graph and don't need to remove
if (gtype==0){
for (var i=0;i clock is ticking
//if (/MSIE/.test(navigator.userAgent))
ieSet=setInterval($rem2,71500); //release memory
timeSet=setInterval(clock,1000);
}
function $day(){
var day = (new Date()).getDate();
if(!el) {
var el = document.createElement('div');
el.setAttribute('id', "day");
document.body.appendChild(el);
}
el.innerHTML=(day);
el=null;
}
var grid=false;/* this flag is for a number of gridline. true-->need to remove */
var first=false;
var isvt;
var gtype=3;
/* gtype=0 -> pi,
gtype=1 -> bar,
gtype=2 -> line */
/*****************************************************************
******************** canvas main function ************************
******************************************************************/
function $Graph(){
var DT=$id("DT").value;
var CH=$id("Chart").value;
var vh=$id("VH").value;
//if(DT="dt1") {$r("dt1"); alert(data1.length);}
/*** when vertical or horizontal is selected, reset _pi=0.***/
//if (gtype==3) first=true; /* first time */
if ((vh=="vt" && isvt==false)||(vh=="hz" && isvt==true)){ zindex=true;_pi=0;}
if (gtype==3){/*alert("first pass");*/ }
else if ((CH=="pi" && gtype!=0)||(CH=="bar" && gtype!=1)||(CH=="line" && gtype!=2)){ zindex=true;_pi=0;}
if (zindex==true || Time==true) $rem();
zindex=true;
_pi+=1;
var sum=0;
var k=0;
temp=new Array();
itm=new Array();
var colors=["#FF0000","#FFC0CB","#000080","#00FF00","#800000",
"#FFFF00","#FF1493","#7FFFD4","#4B0082","#008000",
"#E6E6FA","#2F4F4F","#FF8C00","#9ACD32","#FFD700",
"#D2691E","#4682B4","#008B8B","#AFEEEE","#9400D3"];
var colors2=["#00008B","#FF0000","#32CD32","#800000","#4B0082",
"#FF8C00","#3CB371","#B8860B","#0000CD","#FF00FF",
"#00FF7F","#A52A2A","#20B2AA","#FF6347","#9370DB",
"#8B4513","#483D8B","#FF1493","#7FFF00","#DC143C"];
var colors3=["#000080","#FF0000","#4B0082","#ff0000","#DC143C",
"#FF4500","#FF00FF","#00008B","#191970","#0000FF",
"#32CD32","#9400D3"];
/*****************************************************************
push integer to temp[]
push items to itm[] , and push title to itm[last]
*****************************************************************/
/*************** if 'horizontal' is selected ********************/
if (vh=="hz") {isvt=false; /* isvt is to remove canvas before, when it changes */
switch(DT){
case "dt1": $r("dt1");
if(data1.length<=1 || data1.length<=_pi) {
//$cc(1); $info("A"); /* $info write "no data"*/
_pi=0; zindex=false; return; /* initiate _pi & zindex before exit */
}
var tdata=data1[_pi].length;
//tdata=(tdata>21)? 21:tdata; /* lmt datas to push into array */
for (var i=0; i21)? 21:tdata;
for (var i=0; i21)? 21:tdata;
for (var i=0; i21)? 21:tdata;
for (var i=0; i21)? 21:tdata;
for (var i=0; i21)? 21:tdata;
for (var i=0; i0) {sum+=temp[h]; temp[x]=temp[h]; itm[x]=itm[h]; x++; } /* find sum and num of positive value */
var arc=-0.5*Math.PI;
ctx.translate(95,75);
ctx.strokeStyle = "#c0c0c0";
ctx.lineWidth = 0.2;
j=Math.floor(Math.random()*20);
/******************** for loop ***********************/
for (i=0; i=17) j=0;
j+=(a==0)? 3:a; /* add 1 or 3 */
if(typeof colors[j]=='undefined') j=1;
var l=temp[i]/sum*360*Math.PI/180+arc;
if (window.attachEvent && !window.opera){
ctx.fillStyle = colors[j];
}else{
ctx.globalAlpha = 0.9;
//ctx.shadowBlur = 50;
var Rgrad = ctx.createRadialGradient(0,0,20,0,0,105);
Rgrad.addColorStop(0,colors[j]);
Rgrad.addColorStop(1,"#fff");
/* Rgrad.addColorStop(1,"#333");
Rgrad.addColorStop(0.2,'rgba(255, 255, 255, 0.9)');#B0E0E6
*/
ctx.fillStyle = Rgrad;
}
ctx.beginPath();
ctx.moveTo(0,0);
ctx.arc(0,0,60,arc,l,false); /* pi graph */
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath(); /* reset style */
ctx.fillStyle = colors[j];
ctx.rect(70,-65+(i*15),6,6); /* rect */
ctx.fill();
ctx.stroke();
/******** title and content texts *************/
if (i11)? 11:l; /* loop max 11 times */
var l=220/x; //l=(l>20)? 20:l;
var max=temp[0];//alert(l);
var min=temp[0];
for (i=0;imax) max=temp[i];
if (temp[i] min(temp)=0.00 and divide with (max-min) --> max(temp)=1.00 */
/* ok, now max value=110 and range=0% to 100% */
var dif=max-min;
var mm=min/dif*92;
for (i=0;i=17) j=0;
j+=(a==0)? 3:a;
if(typeof colors2[j]=='undefined') j=1; /* just in case */
//ctx.fillStyle = colors2[j];//色ははっきりした色に固定させる(別配列)
/* low-high = 123px(3 to 123) left-right(37px to 267px) */
/* fillRect(x-start, y-start, width, height */
if (window.attachEvent && !window.opera){
ctx.fillStyle = colors2[j];
}else{
var Lgrad = ctx.createLinearGradient(0,0, 0,200); /* Lgrad is liner gradation*/
Lgrad.addColorStop(0,colors2[j]);
Lgrad.addColorStop(1,'#ffffff');
ctx.fillStyle = Lgrad;
}
if(min<0){
if(temp[i]+mm>0)
ctx.fillRect(45+(i*l),123-temp[i],15,temp[i]+mm);
else
ctx.fillRect(45+(i*l),123+mm,15,Math.abs(temp[i]+mm));/* safari bug when temp+mm<0 */
}else{
ctx.fillRect(45+(i*l),123-temp[i],15,temp[i]);
}
/******** title and content texts BAR *************/
if (i span of bars */
zz=-min; /* zz is */
ctx.strokeStyle="#000";
ctx.beginPath();
ctx.moveTo(37,123+mm);
ctx.lineTo(267,123+mm); /* mm=min/dif*92 --> length of minus bar */
ctx.closePath();
ctx.stroke(); /* draw zero line here */
}
for (i=51;i<=54;i++){
var gd = document.createElement('div');
gd.setAttribute('id', gbar[i]);
document.body.appendChild(gd);
gd.innerHTML=((max*(54-i)/3)-zz).toFixed(1);
}
grid=true; /* now grid number is shown, so need to remove to show next */
break;
case "line":gtype=2;
/****************** line graph **********************/
ctx.beginPath();
ctx.moveTo(37, 3);
ctx.strokeStyle = '#555';
ctx.fillStyle = 'white';
ctx.fillRect(37,3,230,123);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(37,30);
ctx.lineTo(267,30)
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(37,61);
ctx.lineTo(267,61)
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(37,92);
ctx.lineTo(267,92)
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(37,123);
ctx.lineTo(267,123)
ctx.closePath();
ctx.stroke();
var l=temp.length;
var x=(l>50)? 50:l;
var l=220/x;
var max=temp[0];
var min=temp[0];
for (i=0;imax) max=temp[i];
if (temp[i] min(temp)=0.00 and divide with dif(max-min) --> max(temp)=1.00 */
j=Math.floor(Math.random()*19);
// b=Math.random();
// a=eval(((b+2)/2*5).toFixed(0)%2);
// if (j>=8) j=2;
// j+=(a==0)? 2:a;
if(typeof colors3[j]=='undefined') j=1; /* just in case */
ctx.fillStyle = colors3[j];
ctx.strokeStyle = colors3[j]; /* use strong color */
ctx.lineWidth = 3;
/**-------------- start for loop * line graph *---------------**/
for (i=0;i=30 && i%5==0) {print=true;}
else if(x<=29 &&x>=15 && i%3==0){print=true;}
else if(x<=14){print=true;}
if(print==true){
var el = document.createElement('div');
el.setAttribute('id', gbar[i+1]);
if (window.attachEvent && !window.opera)
el.style.cssText = "left:"+eval(35+(i*l))+";";
else
el.setAttribute("style", "left:"+eval(35+(i*l))+";");
document.body.appendChild(el);
if (typeof itm[i]!="undefined") el.innerHTML=(itm[i]);
}/* if */
}/* for loop end */
var el = document.createElement('div');
el.setAttribute('id', gbar[0]);
document.body.appendChild(el);
if (typeof itm[itm.length-1]!="undefined") el.innerHTML=(itm[itm.length-1]);
for (i=51;i<=54;i++){
var gd = document.createElement('div');
gd.setAttribute('id', gbar[i]);
document.body.appendChild(gd);
gd.innerHTML=(max-(i-51)*dif/3).toFixed(1);
if(dif==0) {i+=2;max=0;}
}
grid=true; /* now grid number is shown, so need to remove to show next */
break;
default: alert("select type of graph!");
}/* switch end */
print=false;
delete temp; delete itm;
delete colors; delete colors2; delete colors3;
data1=null; data2=null; data3=null;
sum=null; dif=null; max=null; min=null;
}
onload=function show(){
var data=$id("smpl");
var data2=$id("smpl2");
var data3=$id("smpl3");
var el=$id("A");
var el2=$id("E");
var el3=$id("F");
el.value=data.value;
el2.value=data2.value;
el3.value=data3.value;
init();
}
function clock(){
var TIME = new Date();
var sec = TIME.getSeconds();
var min = TIME.getMinutes();
var hr = TIME.getHours();
hr = (hr>=12)? hr-12:hr;
// var ctx = document.getElementById('cvs').getContext('2d');
var lg = ctx.createLinearGradient(0,0, 0,150); /* Lgrad is liner gradation*/
lg.addColorStop(0,'#333');
lg.addColorStop(0.5,'#c0c0c0');
//lg.addColorStop(1,'#000000');
ctx.fillStyle = lg;
//ctx.fillStyle="#333";
ctx.fillRect(0,0,269,150);
// img.width="140"; img.height="140";
ctx.drawImage(img,15,5,140,140);
ctx.save();
ctx.translate(85,75);
ctx.scale(0.4,0.4);
ctx.rotate(-Math.PI/2+0.01);
ctx.strokeStyle = "#c0c0c0";
ctx.fillStyle = "#111";
//ctx.lineWidth = 4;
ctx.lineCap = "round";
ctx.save();
ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
if (window.attachEvent && !window.opera) ctx.lineWidth = 6;
else ctx.lineWidth = 13;
ctx.beginPath();
ctx.moveTo(8,0);
ctx.lineTo(91,0);
ctx.stroke();
if (window.attachEvent && !window.opera) ctx.lineWidth = 2;
else ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(90,0);
ctx.lineTo(97,0);
ctx.stroke();
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(15,0);
ctx.lineTo(82,0);
ctx.stroke();
ctx.restore();
ctx.strokeStyle = "#c0c0c0";
ctx.save();
ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec );
if (window.attachEvent && !window.opera) ctx.lineWidth = 4;
else ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(8,0);
ctx.lineTo(127,0);
ctx.stroke();
if (window.attachEvent && !window.opera) ctx.lineWidth = 1;
else ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(125,0);
ctx.lineTo(133,0);
ctx.stroke();
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(15,0);
ctx.lineTo(118,0);
ctx.stroke();
ctx.restore();
//excanvas has little problem
//if(window.attachEvent && !window.opera) {ctx.restore();return;}
ctx.save();
ctx.rotate(sec * Math.PI/30);
ctx.strokeStyle = "#c0c0c0";
ctx.fillStyle = "#fff";
if (window.attachEvent && !window.opera) ctx.lineWidth = 2;
else ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(135,0);
ctx.stroke();
if (window.attachEvent && !window.opera) ctx.lineWidth = 4;
else ctx.lineWidth = 9;
ctx.beginPath();
ctx.moveTo(-39,0);
ctx.lineTo(0,0);
ctx.stroke();
if (window.attachEvent && !window.opera) ctx.lineWidth = 2;
else ctx.lineWidth = 5;
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(90,0,2,0,Math.PI*2,true);
ctx.arc(95,0,5,0,Math.PI*2,true);
ctx.arc(100,0,4,0,Math.PI*2,true);
ctx.arc(105,0,2,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "#555";
ctx.beginPath();
ctx.arc(0,0,4,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
ctx.restore();//restore Date
}