1
if(!document.createElement("canvas").getContext){(function(){var ab=Math;var n=ab.round;var l=ab.sin;var A=ab.cos;var H=ab.abs;var N=ab.sqrt;var d=10;var f=d/2;var z=+navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];function y(){return this.context_||(this.context_=new D(this))}var t=Array.prototype.slice;function g(j,m,p){var i=t.call(arguments,2);return function(){return j.apply(m,i.concat(t.call(arguments)))}}function af(i){return String(i).replace(/&/g,"&").replace(/"/g,""")}function Y(m,j,i){if(!m.namespaces[j]){m.namespaces.add(j,i,"#default#VML")}}function R(j){Y(j,"g_vml_","urn:schemas-microsoft-com:vml");Y(j,"g_o_","urn:schemas-microsoft-com:office:office");if(!j.styleSheets.ex_canvas_){var i=j.createStyleSheet();i.owningElement.id="ex_canvas_";i.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}"}}R(document);var e={init:function(i){var j=i||document;j.createElement("canvas");j.attachEvent("onreadystatechange",g(this.init_,this,j))},init_:function(p){var m=p.getElementsByTagName("canvas");for(var j=0;j<m.length;j++){this.initElement(m[j])}},initElement:function(j){if(!j.getContext){j.getContext=y;R(j.ownerDocument);j.innerHTML="";j.attachEvent("onpropertychange",x);j.attachEvent("onresize",W);var i=j.attributes;if(i.width&&i.width.specified){j.style.width=i.width.nodeValue+"px"}else{j.width=j.clientWidth}if(i.height&&i.height.specified){j.style.height=i.height.nodeValue+"px"}else{j.height=j.clientHeight}}return j},uninitElement:function(j){if(j.getContext){var i=j.getContext();delete i.element_;delete i.canvas;j.innerHTML="";j.context_=null;j.getContext=null;j.detachEvent("onpropertychange",x);j.detachEvent("onresize",W)}}};function x(j){var i=j.srcElement;switch(j.propertyName){case"width":i.getContext().clearRect();i.style.width=i.attributes.width.nodeValue+"px";i.firstChild.style.width=i.clientWidth+"px";break;case"height":i.getContext().clearRect();i.style.height=i.attributes.height.nodeValue+"px";i.firstChild.style.height=i.clientHeight+"px";break}}function W(j){var i=j.srcElement;if(i.firstChild){i.firstChild.style.width=i.clientWidth+"px";i.firstChild.style.height=i.clientHeight+"px"}}e.init();var k=[];for(var ae=0;ae<16;ae++){for(var ad=0;ad<16;ad++){k[ae*16+ad]=ae.toString(16)+ad.toString(16)}}function B(){return[[1,0,0],[0,1,0],[0,0,1]]}function J(p,m){var j=B();for(var i=0;i<3;i++){for(var ah=0;ah<3;ah++){var Z=0;for(var ag=0;ag<3;ag++){Z+=p[i][ag]*m[ag][ah]}j[i][ah]=Z}}return j}function v(j,i){i.fillStyle=j.fillStyle;i.lineCap=j.lineCap;i.lineJoin=j.lineJoin;i.lineWidth=j.lineWidth;i.miterLimit=j.miterLimit;i.shadowBlur=j.shadowBlur;i.shadowColor=j.shadowColor;i.shadowOffsetX=j.shadowOffsetX;i.shadowOffsetY=j.shadowOffsetY;i.strokeStyle=j.strokeStyle;i.globalAlpha=j.globalAlpha;i.font=j.font;i.textAlign=j.textAlign;i.textBaseline=j.textBaseline;i.arcScaleX_=j.arcScaleX_;i.arcScaleY_=j.arcScaleY_;i.lineScale_=j.lineScale_}var b={aliceblue:"#F0F8FF",antiquewhite:"#FAEBD7",aquamarine:"#7FFFD4",azure:"#F0FFFF",beige:"#F5F5DC",bisque:"#FFE4C4",black:"#000000",blanchedalmond:"#FFEBCD",blueviolet:"#8A2BE2",brown:"#A52A2A",burlywood:"#DEB887",cadetblue:"#5F9EA0",chartreuse:"#7FFF00",chocolate:"#D2691E",coral:"#FF7F50",cornflowerblue:"#6495ED",cornsilk:"#FFF8DC",crimson:"#DC143C",cyan:"#00FFFF",darkblue:"#00008B",darkcyan:"#008B8B",darkgoldenrod:"#B8860B",darkgray:"#A9A9A9",darkgreen:"#006400",darkgrey:"#A9A9A9",darkkhaki:"#BDB76B",darkmagenta:"#8B008B",darkolivegreen:"#556B2F",darkorange:"#FF8C00",darkorchid:"#9932CC",darkred:"#8B0000",darksalmon:"#E9967A",darkseagreen:"#8FBC8F",darkslateblue:"#483D8B",darkslategray:"#2F4F4F",darkslategrey:"#2F4F4F",darkturquoise:"#00CED1",darkviolet:"#9400D3",deeppink:"#FF1493",deepskyblue:"#00BFFF",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1E90FF",firebrick:"#B22222",floralwhite:"#FFFAF0",forestgreen:"#228B22",gainsboro:"#DCDCDC",ghostwhite:"#F8F8FF",gold:"#FFD700",goldenrod:"#DAA520",grey:"#808080",greenyellow:"#ADFF2F",honeydew:"#F0FFF0",hotpink:"#FF69B4",indianred:"#CD5C5C",indigo:"#4B0082",ivory:"#FFFFF0",khaki:"#F0E68C",lavender:"#E6E6FA",lavenderblush:"#FFF0F5",lawngreen:"#7CFC00",lemonchiffon:"#FFFACD",lightblue:"#ADD8E6",lightcoral:"#F08080",lightcyan:"#E0FFFF",lightgoldenrodyellow:"#FAFAD2",lightgreen:"#90EE90",lightgrey:"#D3D3D3",lightpink:"#FFB6C1",lightsalmon:"#FFA07A",lightseagreen:"#20B2AA",lightskyblue:"#87CEFA",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#B0C4DE",lightyellow:"#FFFFE0",limegreen:"#32CD32",linen:"#FAF0E6",magenta:"#FF00FF",mediumaquamarine:"#66CDAA",mediumblue:"#0000CD",mediumorchid:"#BA55D3",mediumpurple:"#9370DB",mediumseagreen:"#3CB371",mediumslateblue:"#7B68EE",mediumspringgreen:"#00FA9A",mediumturquoise:"#48D1CC",mediumvioletred:"#C71585",midnightblue:"#191970",mintcream:"#F5FFFA",mistyrose:"#FFE4E1",moccasin:"#FFE4B5",navajowhite:"#FFDEAD",oldlace:"#FDF5E6",olivedrab:"#6B8E23",orange:"#FFA500",orangered:"#FF4500",orchid:"#DA70D6",palegoldenrod:"#EEE8AA",palegreen:"#98FB98",paleturquoise:"#AFEEEE",palevioletred:"#DB7093",papayawhip:"#FFEFD5",peachpuff:"#FFDAB9",peru:"#CD853F",pink:"#FFC0CB",plum:"#DDA0DD",powderblue:"#B0E0E6",rosybrown:"#BC8F8F",royalblue:"#4169E1",saddlebrown:"#8B4513",salmon:"#FA8072",sandybrown:"#F4A460",seagreen:"#2E8B57",seashell:"#FFF5EE",sienna:"#A0522D",skyblue:"#87CEEB",slateblue:"#6A5ACD",slategray:"#708090",slategrey:"#708090",snow:"#FFFAFA",springgreen:"#00FF7F",steelblue:"#4682B4",tan:"#D2B48C",thistle:"#D8BFD8",tomato:"#FF6347",turquoise:"#40E0D0",violet:"#EE82EE",wheat:"#F5DEB3",whitesmoke:"#F5F5F5",yellowgreen:"#9ACD32"};function M(j){var p=j.indexOf("(",3);var i=j.indexOf(")",p+1);var m=j.substring(p+1,i).split(",");if(m.length!=4||j.charAt(3)!="a"){m[3]=1}return m}function c(i){return parseFloat(i)/100}function r(j,m,i){return Math.min(i,Math.max(m,j))}function I(ag){var i,ai,aj,ah,ak,Z;ah=parseFloat(ag[0])/360%360;if(ah<0){ah++}ak=r(c(ag[1]),0,1);Z=r(c(ag[2]),0,1);if(ak==0){i=ai=aj=Z}else{var j=Z<0.5?Z*(1+ak):Z+ak-Z*ak;var m=2*Z-j;i=a(m,j,ah+1/3);ai=a(m,j,ah);aj=a(m,j,ah-1/3)}return"#"+k[Math.floor(i*255)]+k[Math.floor(ai*255)]+k[Math.floor(aj*255)]}function a(j,i,m){if(m<0){m++}if(m>1){m--}if(6*m<1){return j+(i-j)*6*m}else{if(2*m<1){return i}else{if(3*m<2){return j+(i-j)*(2/3-m)*6}else{return j}}}}var C={};function F(j){if(j in C){return C[j]}var ag,Z=1;j=String(j);if(j.charAt(0)=="#"){ag=j}else{if(/^rgb/.test(j)){var p=M(j);var ag="#",ah;for(var m=0;m<3;m++){if(p[m].indexOf("%")!=-1){ah=Math.floor(c(p[m])*255)}else{ah=+p[m]}ag+=k[r(ah,0,255)]}Z=+p[3]}else{if(/^hsl/.test(j)){var p=M(j);ag=I(p);Z=p[3]}else{ag=b[j]||j}}}return C[j]={color:ag,alpha:Z}}var o={style:"normal",variant:"normal",weight:"normal",size:10,family:"sans-serif"};var L={};function E(i){if(L[i]){return L[i]}var p=document.createElement("div");var m=p.style;try{m.font=i}catch(j){}return L[i]={style:m.fontStyle||o.style,variant:m.fontVariant||o.variant,weight:m.fontWeight||o.weight,size:m.fontSize||o.size,family:m.fontFamily||o.family}}function u(m,j){var i={};for(var ah in m){i[ah]=m[ah]}var ag=parseFloat(j.currentStyle.fontSize),Z=parseFloat(m.size);if(typeof m.size=="number"){i.size=m.size}else{if(m.size.indexOf("px")!=-1){i.size=Z}else{if(m.size.indexOf("em")!=-1){i.size=ag*Z}else{if(m.size.indexOf("%")!=-1){i.size=(ag/100)*Z}else{if(m.size.indexOf("pt")!=-1){i.size=Z/0.75}else{i.size=ag}}}}}i.size*=0.981;i.family="'"+i.family.replace(/(\'|\")/g,"").replace(/\s*,\s*/g,"', '")+"'";return i}function ac(i){return i.style+" "+i.variant+" "+i.weight+" "+i.size+"px "+i.family}var s={butt:"flat",round:"round"};function S(i){return s[i]||"square"}function D(i){this.m_=B();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=d*1;this.globalAlpha=1;this.font="10px sans-serif";this.textAlign="left";this.textBaseline="alphabetic";this.canvas=i;var m="width:"+i.clientWidth+"px;height:"+i.clientHeight+"px;overflow:hidden;position:absolute";var j=i.ownerDocument.createElement("div");j.style.cssText=m;i.appendChild(j);var p=j.cloneNode(false);p.style.backgroundColor="red";p.style.filter="alpha(opacity=0)";i.appendChild(p);this.element_=j;this.arcScaleX_=1;this.arcScaleY_=1;this.lineScale_=1}var q=D.prototype;q.clearRect=function(){if(this.textMeasureEl_){this.textMeasureEl_.removeNode(true);this.textMeasureEl_=null}this.element_.innerHTML=""};q.beginPath=function(){this.currentPath_=[]};q.moveTo=function(j,i){var m=V(this,j,i);this.currentPath_.push({type:"moveTo",x:m.x,y:m.y});this.currentX_=m.x;this.currentY_=m.y};q.lineTo=function(j,i){var m=V(this,j,i);this.currentPath_.push({type:"lineTo",x:m.x,y:m.y});this.currentX_=m.x;this.currentY_=m.y};q.bezierCurveTo=function(m,j,ak,aj,ai,ag){var i=V(this,ai,ag);var ah=V(this,m,j);var Z=V(this,ak,aj);K(this,ah,Z,i)};function K(i,Z,m,j){i.currentPath_.push({type:"bezierCurveTo",cp1x:Z.x,cp1y:Z.y,cp2x:m.x,cp2y:m.y,x:j.x,y:j.y});i.currentX_=j.x;i.currentY_=j.y}q.quadraticCurveTo=function(ai,m,j,i){var ah=V(this,ai,m);var ag=V(this,j,i);var aj={x:this.currentX_+2/3*(ah.x-this.currentX_),y:this.currentY_+2/3*(ah.y-this.currentY_)};var Z={x:aj.x+(ag.x-this.currentX_)/3,y:aj.y+(ag.y-this.currentY_)/3};K(this,aj,Z,ag)};q.arc=function(al,aj,ak,ag,j,m){ak*=d;var ap=m?"at":"wa";var am=al+A(ag)*ak-f;var ao=aj+l(ag)*ak-f;var i=al+A(j)*ak-f;var an=aj+l(j)*ak-f;if(am==i&&!m){am+=0.125}var Z=V(this,al,aj);var ai=V(this,am,ao);var ah=V(this,i,an);this.currentPath_.push({type:ap,x:Z.x,y:Z.y,radius:ak,xStart:ai.x,yStart:ai.y,xEnd:ah.x,yEnd:ah.y})};q.rect=function(m,j,i,p){this.moveTo(m,j);this.lineTo(m+i,j);this.lineTo(m+i,j+p);this.lineTo(m,j+p);this.closePath()};q.strokeRect=function(m,j,i,p){var Z=this.currentPath_;this.beginPath();this.moveTo(m,j);this.lineTo(m+i,j);this.lineTo(m+i,j+p);this.lineTo(m,j+p);this.closePath();this.stroke();this.currentPath_=Z};q.fillRect=function(m,j,i,p){var Z=this.currentPath_;this.beginPath();this.moveTo(m,j);this.lineTo(m+i,j);this.lineTo(m+i,j+p);this.lineTo(m,j+p);this.closePath();this.fill();this.currentPath_=Z};q.createLinearGradient=function(j,p,i,m){var Z=new U("gradient");Z.x0_=j;Z.y0_=p;Z.x1_=i;Z.y1_=m;return Z};q.createRadialGradient=function(p,ag,m,j,Z,i){var ah=new U("gradientradial");ah.x0_=p;ah.y0_=ag;ah.r0_=m;ah.x1_=j;ah.y1_=Z;ah.r1_=i;return ah};q.drawImage=function(aq,m){var aj,ah,al,ay,ao,am,at,aA;var ak=aq.runtimeStyle.width;var ap=aq.runtimeStyle.height;aq.runtimeStyle.width="auto";aq.runtimeStyle.height="auto";var ai=aq.width;var aw=aq.height;aq.runtimeStyle.width=ak;aq.runtimeStyle.height=ap;if(arguments.length==3){aj=arguments[1];ah=arguments[2];ao=am=0;at=al=ai;aA=ay=aw}else{if(arguments.length==5){aj=arguments[1];ah=arguments[2];al=arguments[3];ay=arguments[4];ao=am=0;at=ai;aA=aw}else{if(arguments.length==9){ao=arguments[1];am=arguments[2];at=arguments[3];aA=arguments[4];aj=arguments[5];ah=arguments[6];al=arguments[7];ay=arguments[8]}else{throw Error("Invalid number of arguments")}}}var az=V(this,aj,ah);var p=at/2;var j=aA/2;var ax=[];var i=10;var ag=10;ax.push(" <g_vml_:group",' coordsize="',d*i,",",d*ag,'"',' coordorigin="0,0"',' style="width:',i,"px;height:",ag,"px;position:absolute;");if(this.m_[0][0]!=1||this.m_[0][1]||this.m_[1][1]!=1||this.m_[1][0]){var Z=[];Z.push("M11=",this.m_[0][0],",","M12=",this.m_[1][0],",","M21=",this.m_[0][1],",","M22=",this.m_[1][1],",","Dx=",n(az.x/d),",","Dy=",n(az.y/d),"");var av=az;var au=V(this,aj+al,ah);var ar=V(this,aj,ah+ay);var an=V(this,aj+al,ah+ay);av.x=ab.max(av.x,au.x,ar.x,an.x);av.y=ab.max(av.y,au.y,ar.y,an.y);ax.push("padding:0 ",n(av.x/d),"px ",n(av.y/d),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",Z.join(""),", sizingmethod='clip');")}else{ax.push("top:",n(az.y/d),"px;left:",n(az.x/d),"px;")}ax.push(' ">','<g_vml_:image src="',aq.src,'"',' style="width:',d*al,"px;"," height:",d*ay,'px"',' cropleft="',ao/ai,'"',' croptop="',am/aw,'"',' cropright="',(ai-ao-at)/ai,'"',' cropbottom="',(aw-am-aA)/aw,'"'," />","</g_vml_:group>");this.element_.insertAdjacentHTML("BeforeEnd",ax.join(""))};q.stroke=function(al){var aj=[];var Z=false;var m=10;var am=10;aj.push("<g_vml_:shape",' filled="',!!al,'"',' style="position:absolute;width:',m,"px;height:",am,'px;"',' coordorigin="0,0"',' coordsize="',d*m,",",d*am,'"',' stroked="',!al,'"',' path="');var an=false;var ag={x:null,y:null};var ak={x:null,y:null};for(var ah=0;ah<this.currentPath_.length;ah++){var j=this.currentPath_[ah];var ai;switch(j.type){case"moveTo":ai=j;aj.push(" m ",n(j.x),",",n(j.y));break;case"lineTo":aj.push(" l ",n(j.x),",",n(j.y));break;case"close":aj.push(" x ");j=null;break;case"bezierCurveTo":aj.push(" c ",n(j.cp1x),",",n(j.cp1y),",",n(j.cp2x),",",n(j.cp2y),",",n(j.x),",",n(j.y));break;case"at":case"wa":aj.push(" ",j.type," ",n(j.x-this.arcScaleX_*j.radius),",",n(j.y-this.arcScaleY_*j.radius)," ",n(j.x+this.arcScaleX_*j.radius),",",n(j.y+this.arcScaleY_*j.radius)," ",n(j.xStart),",",n(j.yStart)," ",n(j.xEnd),",",n(j.yEnd));break}if(j){if(ag.x==null||j.x<ag.x){ag.x=j.x}if(ak.x==null||j.x>ak.x){ak.x=j.x}if(ag.y==null||j.y<ag.y){ag.y=j.y}if(ak.y==null||j.y>ak.y){ak.y=j.y}}}aj.push(' ">');if(!al){w(this,aj)}else{G(this,aj,ag,ak)}aj.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",aj.join(""))};function w(m,ag){var j=F(m.strokeStyle);var p=j.color;var Z=j.alpha*m.globalAlpha;var i=m.lineScale_*m.lineWidth;if(i<1){Z*=i}ag.push("<g_vml_:stroke",' opacity="',Z,'"',' joinstyle="',m.lineJoin,'"',' miterlimit="',m.miterLimit,'"',' endcap="',S(m.lineCap),'"',' weight="',i,'px"',' color="',p,'" />')}function G(aq,ai,aK,ar){var aj=aq.fillStyle;var aB=aq.arcScaleX_;var aA=aq.arcScaleY_;var j=ar.x-aK.x;var p=ar.y-aK.y;if(aj instanceof U){var an=0;var aF={x:0,y:0};var ax=0;var am=1;if(aj.type_=="gradient"){var al=aj.x0_/aB;var m=aj.y0_/aA;var ak=aj.x1_/aB;var aM=aj.y1_/aA;var aJ=V(aq,al,m);var aI=V(aq,ak,aM);var ag=aI.x-aJ.x;var Z=aI.y-aJ.y;an=Math.atan2(ag,Z)*180/Math.PI;if(an<0){an+=360}if(an<0.000001){an=0}}else{var aJ=V(aq,aj.x0_,aj.y0_);aF={x:(aJ.x-aK.x)/j,y:(aJ.y-aK.y)/p};j/=aB*d;p/=aA*d;var aD=ab.max(j,p);ax=2*aj.r0_/aD;am=2*aj.r1_/aD-ax}var av=aj.colors_;av.sort(function(aN,i){return aN.offset-i.offset});var ap=av.length;var au=av[0].color;var at=av[ap-1].color;var az=av[0].alpha*aq.globalAlpha;var ay=av[ap-1].alpha*aq.globalAlpha;var aE=[];for(var aH=0;aH<ap;aH++){var ao=av[aH];aE.push(ao.offset*am+ax+" "+ao.color)}ai.push('<g_vml_:fill type="',aj.type_,'"',' method="none" focus="100%"',' color="',au,'"',' color2="',at,'"',' colors="',aE.join(","),'"',' opacity="',ay,'"',' g_o_:opacity2="',az,'"',' angle="',an,'"',' focusposition="',aF.x,",",aF.y,'" />')}else{if(aj instanceof T){if(j&&p){var ah=-aK.x;var aC=-aK.y;ai.push("<g_vml_:fill",' position="',ah/j*aB*aB,",",aC/p*aA*aA,'"',' type="tile"',' src="',aj.src_,'" />')}}else{var aL=F(aq.fillStyle);var aw=aL.color;var aG=aL.alpha*aq.globalAlpha;ai.push('<g_vml_:fill color="',aw,'" opacity="',aG,'" />')}}}q.fill=function(){this.stroke(true)};q.closePath=function(){this.currentPath_.push({type:"close"})};function V(j,Z,p){var i=j.m_;return{x:d*(Z*i[0][0]+p*i[1][0]+i[2][0])-f,y:d*(Z*i[0][1]+p*i[1][1]+i[2][1])-f}}q.save=function(){var i={};v(this,i);this.aStack_.push(i);this.mStack_.push(this.m_);this.m_=J(B(),this.m_)};q.restore=function(){if(this.aStack_.length){v(this.aStack_.pop(),this);this.m_=this.mStack_.pop()}};function h(i){return isFinite(i[0][0])&&isFinite(i[0][1])&&isFinite(i[1][0])&&isFinite(i[1][1])&&isFinite(i[2][0])&&isFinite(i[2][1])}function aa(j,i,p){if(!h(i)){return}j.m_=i;if(p){var Z=i[0][0]*i[1][1]-i[0][1]*i[1][0];j.lineScale_=N(H(Z))}}q.translate=function(m,j){var i=[[1,0,0],[0,1,0],[m,j,1]];aa(this,J(i,this.m_),false)};q.rotate=function(j){var p=A(j);var m=l(j);var i=[[p,m,0],[-m,p,0],[0,0,1]];aa(this,J(i,this.m_),false)};q.scale=function(m,j){this.arcScaleX_*=m;this.arcScaleY_*=j;var i=[[m,0,0],[0,j,0],[0,0,1]];aa(this,J(i,this.m_),true)};q.transform=function(Z,p,ah,ag,j,i){var m=[[Z,p,0],[ah,ag,0],[j,i,1]];aa(this,J(m,this.m_),true)};q.setTransform=function(ag,Z,ai,ah,p,j){var i=[[ag,Z,0],[ai,ah,0],[p,j,1]];aa(this,i,true)};q.drawText_=function(am,ak,aj,ap,ai){var ao=this.m_,at=1000,j=0,ar=at,ah={x:0,y:0},ag=[];var i=u(E(this.font),this.element_);var p=ac(i);var au=this.element_.currentStyle;var Z=this.textAlign.toLowerCase();switch(Z){case"left":case"center":case"right":break;case"end":Z=au.direction=="ltr"?"right":"left";break;case"start":Z=au.direction=="rtl"?"right":"left";break;default:Z="left"}switch(this.textBaseline){case"hanging":case"top":ah.y=i.size/1.75;break;case"middle":break;default:case null:case"alphabetic":case"ideographic":case"bottom":ah.y=-i.size/2.25;break}switch(Z){case"right":j=at;ar=0.05;break;case"center":j=ar=at/2;break}var aq=V(this,ak+ah.x,aj+ah.y);ag.push('<g_vml_:line from="',-j,' 0" to="',ar,' 0.05" ',' coordsize="100 100" coordorigin="0 0"',' filled="',!ai,'" stroked="',!!ai,'" style="position:absolute;width:1px;height:1px;">');if(ai){w(this,ag)}else{G(this,ag,{x:-j,y:0},{x:ar,y:i.size})}var an=ao[0][0].toFixed(3)+","+ao[1][0].toFixed(3)+","+ao[0][1].toFixed(3)+","+ao[1][1].toFixed(3)+",0,0";var al=n(aq.x/d+1-ao[0][0])+","+n(aq.y/d-2*ao[1][0]);ag.push('<g_vml_:skew on="t" matrix="',an,'" ',' offset="',al,'" origin="',j,' 0" />','<g_vml_:path textpathok="true" />','<g_vml_:textpath on="true" string="',af(am),'" style="v-text-align:',Z,";font:",af(p),'" /></g_vml_:line>');this.element_.insertAdjacentHTML("beforeEnd",ag.join(""))};q.fillText=function(m,i,p,j){this.drawText_(m,i,p,j,false)};q.strokeText=function(m,i,p,j){this.drawText_(m,i,p,j,true)};q.measureText=function(m){if(!this.textMeasureEl_){var i='<span style="position:absolute;top:-20000px;left:0;padding:0;margin:0;border:none;white-space:pre;"></span>';this.element_.insertAdjacentHTML("beforeEnd",i);this.textMeasureEl_=this.element_.lastChild}var j=this.element_.ownerDocument;this.textMeasureEl_.innerHTML="";this.textMeasureEl_.style.font=this.font;this.textMeasureEl_.appendChild(j.createTextNode(m));return{width:this.textMeasureEl_.offsetWidth}};q.clip=function(){};q.arcTo=function(){};q.createPattern=function(j,i){return new T(j,i)};function U(i){this.type_=i;this.x0_=0;this.y0_=0;this.r0_=0;this.x1_=0;this.y1_=0;this.r1_=0;this.colors_=[]}U.prototype.addColorStop=function(j,i){i=F(i);this.colors_.push({offset:j,color:i.color,alpha:i.alpha})};function T(j,i){Q(j);switch(i){case"repeat":case null:case"":this.repetition_="repeat";break;case"repeat-x":case"repeat-y":case"no-repeat":this.repetition_=i;break;default:O("SYNTAX_ERR")}this.src_=j.src;this.width_=j.width;this.height_=j.height}function O(i){throw new P(i)}function Q(i){if(!i||i.nodeType!=1||i.tagName!="IMG"){O("TYPE_MISMATCH_ERR")}if(i.readyState!="complete"){O("INVALID_STATE_ERR")}}function P(i){this.code=this[i];this.message=i+": DOM Exception "+this.code}var X=P.prototype=new Error;X.INDEX_SIZE_ERR=1;X.DOMSTRING_SIZE_ERR=2;X.HIERARCHY_REQUEST_ERR=3;X.WRONG_DOCUMENT_ERR=4;X.INVALID_CHARACTER_ERR=5;X.NO_DATA_ALLOWED_ERR=6;X.NO_MODIFICATION_ALLOWED_ERR=7;X.NOT_FOUND_ERR=8;X.NOT_SUPPORTED_ERR=9;X.INUSE_ATTRIBUTE_ERR=10;X.INVALID_STATE_ERR=11;X.SYNTAX_ERR=12;X.INVALID_MODIFICATION_ERR=13;X.NAMESPACE_ERR=14;X.INVALID_ACCESS_ERR=15;X.VALIDATION_ERR=16;X.TYPE_MISMATCH_ERR=17;G_vmlCanvasManager=e;CanvasRenderingContext2D=D;CanvasGradient=U;CanvasPattern=T;DOMException=P;G_vmlCanvasManager._version=888})()};
b'\\ No newline at end of file'
1
// Memory Leaks patch from http://explorercanvas.googlecode.com/svn/trunk/
3
// ------------------------------------------------------------------
4
// Copyright 2006 Google Inc.
6
// Licensed under the Apache License, Version 2.0 (the "License");
7
// you may not use this file except in compliance with the License.
8
// You may obtain a copy of the License at
10
// http://www.apache.org/licenses/LICENSE-2.0
12
// Unless required by applicable law or agreed to in writing, software
13
// distributed under the License is distributed on an "AS IS" BASIS,
14
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
// See the License for the specific language governing permissions and
16
// limitations under the License.
21
// * Patterns only support repeat.
22
// * Radial gradient are not implemented. The VML version of these look very
23
// different from the canvas one.
24
// * Clipping paths are not implemented.
25
// * Coordsize. The width and height attribute have higher priority than the
26
// width and height style values which isn't correct.
27
// * Painting mode isn't implemented.
28
// * Canvas width/height should is using content-box by default. IE in
29
// Quirks mode will draw the canvas using border-box. Either change your
31
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
32
// or use Box Sizing Behavior from WebFX
33
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
34
// * Non uniform scaling does not correctly scale strokes.
35
// * Optimize. There is always room for speed improvements.
37
// Only add this code if we do not already have a canvas implementation
38
if (!document.createElement('canvas').getContext) {
42
// alias some functions to make (compiled) code shorter
50
// this is used for sub pixel precision
54
var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
57
* This funtion is assigned to the <canvas> elements as element.getContext().
59
* @return {CanvasRenderingContext2D_}
61
function getContext() {
62
return this.context_ ||
63
(this.context_ = new CanvasRenderingContext2D_(this));
66
var slice = Array.prototype.slice;
69
* Binds a function to an object. The returned function will always use the
70
* passed in {@code obj} as {@code this}.
74
* g = bind(f, obj, a, b)
75
* g(c, d) // will do f.call(obj, a, b, c, d)
77
* @param {Function} f The function to bind the object to
78
* @param {Object} obj The object that should act as this when the function
80
* @param {*} var_args Rest arguments that will be used as the initial
81
* arguments when the function is called
82
* @return {Function} A new function that has bound this
84
function bind(f, obj, var_args) {
85
var a = slice.call(arguments, 2);
87
return f.apply(obj, a.concat(slice.call(arguments)));
91
function encodeHtmlAttribute(s) {
92
return String(s).replace(/&/g, '&').replace(/"/g, '"');
95
function addNamespace(doc, prefix, urn) {
96
if (!doc.namespaces[prefix]) {
97
doc.namespaces.add(prefix, urn, '#default#VML');
101
function addNamespacesAndStylesheet(doc) {
102
addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
103
addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
105
// Setup default CSS. Only add one style sheet per document
106
if (!doc.styleSheets['ex_canvas_']) {
107
var ss = doc.createStyleSheet();
108
ss.owningElement.id = 'ex_canvas_';
109
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
110
// default size is 300x150 in Gecko and Opera
111
'text-align:left;width:300px;height:150px}';
115
// Add namespaces and stylesheet at startup.
116
addNamespacesAndStylesheet(document);
118
var G_vmlCanvasManager_ = {
119
init: function(opt_doc) {
120
var doc = opt_doc || document;
121
// Create a dummy element so that IE will allow canvas elements to be
123
doc.createElement('canvas');
124
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
127
init_: function(doc) {
128
// find all canvas elements
129
var els = doc.getElementsByTagName('canvas');
130
for (var i = 0; i < els.length; i++) {
131
this.initElement(els[i]);
136
* Public initializes a canvas element so that it can be used as canvas
137
* element from now on. This is called automatically before the page is
138
* loaded but if you are creating elements using createElement you need to
139
* make sure this is called on the element.
140
* @param {HTMLElement} el The canvas element to initialize.
141
* @return {HTMLElement} the element that was created.
143
initElement: function(el) {
144
if (!el.getContext) {
145
el.getContext = getContext;
147
// Add namespaces and stylesheet to document of the element.
148
addNamespacesAndStylesheet(el.ownerDocument);
150
// Remove fallback content. There is no way to hide text nodes so we
151
// just remove all childNodes. We could hide all elements and remove
152
// text nodes but who really cares about the fallback content.
155
// do not use inline function because that will leak memory
156
el.attachEvent('onpropertychange', onPropertyChange);
157
el.attachEvent('onresize', onResize);
159
var attrs = el.attributes;
160
if (attrs.width && attrs.width.specified) {
161
// TODO: use runtimeStyle and coordsize
162
// el.getContext().setWidth_(attrs.width.nodeValue);
163
el.style.width = attrs.width.nodeValue + 'px';
165
el.width = el.clientWidth;
167
if (attrs.height && attrs.height.specified) {
168
// TODO: use runtimeStyle and coordsize
169
// el.getContext().setHeight_(attrs.height.nodeValue);
170
el.style.height = attrs.height.nodeValue + 'px';
172
el.height = el.clientHeight;
174
//el.getContext().setCoordsize_()
179
// Memory Leaks patch : see http://code.google.com/p/explorercanvas/issues/detail?id=82
180
uninitElement: function(el){
182
var ctx = el.getContext();
188
el.getContext = null;
189
el.detachEvent("onpropertychange", onPropertyChange);
190
el.detachEvent("onresize", onResize);
195
function onPropertyChange(e) {
196
var el = e.srcElement;
198
switch (e.propertyName) {
200
el.getContext().clearRect();
201
el.style.width = el.attributes.width.nodeValue + 'px';
202
// In IE8 this does not trigger onresize.
203
el.firstChild.style.width = el.clientWidth + 'px';
206
el.getContext().clearRect();
207
el.style.height = el.attributes.height.nodeValue + 'px';
208
el.firstChild.style.height = el.clientHeight + 'px';
213
function onResize(e) {
214
var el = e.srcElement;
216
el.firstChild.style.width = el.clientWidth + 'px';
217
el.firstChild.style.height = el.clientHeight + 'px';
221
G_vmlCanvasManager_.init();
223
// precompute "00" to "FF"
225
for (var i = 0; i < 16; i++) {
226
for (var j = 0; j < 16; j++) {
227
decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
231
function createMatrixIdentity() {
239
function matrixMultiply(m1, m2) {
240
var result = createMatrixIdentity();
242
for (var x = 0; x < 3; x++) {
243
for (var y = 0; y < 3; y++) {
246
for (var z = 0; z < 3; z++) {
247
sum += m1[x][z] * m2[z][y];
256
function copyState(o1, o2) {
257
o2.fillStyle = o1.fillStyle;
258
o2.lineCap = o1.lineCap;
259
o2.lineJoin = o1.lineJoin;
260
o2.lineWidth = o1.lineWidth;
261
o2.miterLimit = o1.miterLimit;
262
o2.shadowBlur = o1.shadowBlur;
263
o2.shadowColor = o1.shadowColor;
264
o2.shadowOffsetX = o1.shadowOffsetX;
265
o2.shadowOffsetY = o1.shadowOffsetY;
266
o2.strokeStyle = o1.strokeStyle;
267
o2.globalAlpha = o1.globalAlpha;
269
o2.textAlign = o1.textAlign;
270
o2.textBaseline = o1.textBaseline;
271
o2.arcScaleX_ = o1.arcScaleX_;
272
o2.arcScaleY_ = o1.arcScaleY_;
273
o2.lineScale_ = o1.lineScale_;
277
aliceblue: '#F0F8FF',
278
antiquewhite: '#FAEBD7',
279
aquamarine: '#7FFFD4',
284
blanchedalmond: '#FFEBCD',
285
blueviolet: '#8A2BE2',
287
burlywood: '#DEB887',
288
cadetblue: '#5F9EA0',
289
chartreuse: '#7FFF00',
290
chocolate: '#D2691E',
292
cornflowerblue: '#6495ED',
298
darkgoldenrod: '#B8860B',
300
darkgreen: '#006400',
302
darkkhaki: '#BDB76B',
303
darkmagenta: '#8B008B',
304
darkolivegreen: '#556B2F',
305
darkorange: '#FF8C00',
306
darkorchid: '#9932CC',
308
darksalmon: '#E9967A',
309
darkseagreen: '#8FBC8F',
310
darkslateblue: '#483D8B',
311
darkslategray: '#2F4F4F',
312
darkslategrey: '#2F4F4F',
313
darkturquoise: '#00CED1',
314
darkviolet: '#9400D3',
316
deepskyblue: '#00BFFF',
319
dodgerblue: '#1E90FF',
320
firebrick: '#B22222',
321
floralwhite: '#FFFAF0',
322
forestgreen: '#228B22',
323
gainsboro: '#DCDCDC',
324
ghostwhite: '#F8F8FF',
326
goldenrod: '#DAA520',
328
greenyellow: '#ADFF2F',
331
indianred: '#CD5C5C',
336
lavenderblush: '#FFF0F5',
337
lawngreen: '#7CFC00',
338
lemonchiffon: '#FFFACD',
339
lightblue: '#ADD8E6',
340
lightcoral: '#F08080',
341
lightcyan: '#E0FFFF',
342
lightgoldenrodyellow: '#FAFAD2',
343
lightgreen: '#90EE90',
344
lightgrey: '#D3D3D3',
345
lightpink: '#FFB6C1',
346
lightsalmon: '#FFA07A',
347
lightseagreen: '#20B2AA',
348
lightskyblue: '#87CEFA',
349
lightslategray: '#778899',
350
lightslategrey: '#778899',
351
lightsteelblue: '#B0C4DE',
352
lightyellow: '#FFFFE0',
353
limegreen: '#32CD32',
356
mediumaquamarine: '#66CDAA',
357
mediumblue: '#0000CD',
358
mediumorchid: '#BA55D3',
359
mediumpurple: '#9370DB',
360
mediumseagreen: '#3CB371',
361
mediumslateblue: '#7B68EE',
362
mediumspringgreen: '#00FA9A',
363
mediumturquoise: '#48D1CC',
364
mediumvioletred: '#C71585',
365
midnightblue: '#191970',
366
mintcream: '#F5FFFA',
367
mistyrose: '#FFE4E1',
369
navajowhite: '#FFDEAD',
371
olivedrab: '#6B8E23',
373
orangered: '#FF4500',
375
palegoldenrod: '#EEE8AA',
376
palegreen: '#98FB98',
377
paleturquoise: '#AFEEEE',
378
palevioletred: '#DB7093',
379
papayawhip: '#FFEFD5',
380
peachpuff: '#FFDAB9',
384
powderblue: '#B0E0E6',
385
rosybrown: '#BC8F8F',
386
royalblue: '#4169E1',
387
saddlebrown: '#8B4513',
389
sandybrown: '#F4A460',
394
slateblue: '#6A5ACD',
395
slategray: '#708090',
396
slategrey: '#708090',
398
springgreen: '#00FF7F',
399
steelblue: '#4682B4',
403
turquoise: '#40E0D0',
406
whitesmoke: '#F5F5F5',
407
yellowgreen: '#9ACD32'
411
function getRgbHslContent(styleString) {
412
var start = styleString.indexOf('(', 3);
413
var end = styleString.indexOf(')', start + 1);
414
var parts = styleString.substring(start + 1, end).split(',');
415
// add alpha if needed
416
if (parts.length != 4 || styleString.charAt(3) != 'a') {
422
function percent(s) {
423
return parseFloat(s) / 100;
426
function clamp(v, min, max) {
427
return Math.min(max, Math.max(min, v));
430
function hslToRgb(parts){
431
var r, g, b, h, s, l;
432
h = parseFloat(parts[0]) / 360 % 360;
435
s = clamp(percent(parts[1]), 0, 1);
436
l = clamp(percent(parts[2]), 0, 1);
438
r = g = b = l; // achromatic
440
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
442
r = hueToRgb(p, q, h + 1 / 3);
443
g = hueToRgb(p, q, h);
444
b = hueToRgb(p, q, h - 1 / 3);
447
return '#' + decToHex[Math.floor(r * 255)] +
448
decToHex[Math.floor(g * 255)] +
449
decToHex[Math.floor(b * 255)];
452
function hueToRgb(m1, m2, h) {
459
return m1 + (m2 - m1) * 6 * h;
463
return m1 + (m2 - m1) * (2 / 3 - h) * 6;
468
var processStyleCache = {};
470
function processStyle(styleString) {
471
if (styleString in processStyleCache) {
472
return processStyleCache[styleString];
477
styleString = String(styleString);
478
if (styleString.charAt(0) == '#') {
480
} else if (/^rgb/.test(styleString)) {
481
var parts = getRgbHslContent(styleString);
483
for (var i = 0; i < 3; i++) {
484
if (parts[i].indexOf('%') != -1) {
485
n = Math.floor(percent(parts[i]) * 255);
489
str += decToHex[clamp(n, 0, 255)];
492
} else if (/^hsl/.test(styleString)) {
493
var parts = getRgbHslContent(styleString);
494
str = hslToRgb(parts);
497
str = colorData[styleString] || styleString;
499
return processStyleCache[styleString] = {color: str, alpha: alpha};
502
var DEFAULT_STYLE = {
510
// Internal text style cache
511
var fontStyleCache = {};
513
function processFontStyle(styleString) {
514
if (fontStyleCache[styleString]) {
515
return fontStyleCache[styleString];
518
var el = document.createElement('div');
519
var style = el.style;
521
style.font = styleString;
523
// Ignore failures to set to invalid font.
526
return fontStyleCache[styleString] = {
527
style: style.fontStyle || DEFAULT_STYLE.style,
528
variant: style.fontVariant || DEFAULT_STYLE.variant,
529
weight: style.fontWeight || DEFAULT_STYLE.weight,
530
size: style.fontSize || DEFAULT_STYLE.size,
531
family: style.fontFamily || DEFAULT_STYLE.family
535
function getComputedStyle(style, element) {
536
var computedStyle = {};
538
for (var p in style) {
539
computedStyle[p] = style[p];
543
var canvasFontSize = parseFloat(element.currentStyle.fontSize),
544
fontSize = parseFloat(style.size);
546
if (typeof style.size == 'number') {
547
computedStyle.size = style.size;
548
} else if (style.size.indexOf('px') != -1) {
549
computedStyle.size = fontSize;
550
} else if (style.size.indexOf('em') != -1) {
551
computedStyle.size = canvasFontSize * fontSize;
552
} else if(style.size.indexOf('%') != -1) {
553
computedStyle.size = (canvasFontSize / 100) * fontSize;
554
} else if (style.size.indexOf('pt') != -1) {
555
computedStyle.size = fontSize / .75;
557
computedStyle.size = canvasFontSize;
560
// Different scaling between normal text and VML text. This was found using
561
// trial and error to get the same size as non VML text.
562
computedStyle.size *= 0.981;
564
// Fix for VML handling of bare font family names. Add a '' around font family names.
565
computedStyle.family = "'" + computedStyle.family.replace(/(\'|\")/g,'').replace(/\s*,\s*/g, "', '") + "'";
567
return computedStyle;
570
function buildStyle(style) {
571
return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
572
style.size + 'px ' + style.family;
580
function processLineCap(lineCap) {
581
return lineCapMap[lineCap] || 'square';
585
* This class implements CanvasRenderingContext2D interface as described by
587
* @param {HTMLElement} canvasElement The element that the 2D context should
590
function CanvasRenderingContext2D_(canvasElement) {
591
this.m_ = createMatrixIdentity();
595
this.currentPath_ = [];
597
// Canvas context properties
598
this.strokeStyle = '#000';
599
this.fillStyle = '#000';
602
this.lineJoin = 'miter';
603
this.lineCap = 'butt';
604
this.miterLimit = Z * 1;
605
this.globalAlpha = 1;
606
this.font = '10px sans-serif';
607
this.textAlign = 'left';
608
this.textBaseline = 'alphabetic';
609
this.canvas = canvasElement;
611
var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
612
canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
613
var el = canvasElement.ownerDocument.createElement('div');
614
el.style.cssText = cssText;
615
canvasElement.appendChild(el);
617
var overlayEl = el.cloneNode(false);
618
// Use a non transparent background.
619
overlayEl.style.backgroundColor = 'red';
620
overlayEl.style.filter = 'alpha(opacity=0)';
621
canvasElement.appendChild(overlayEl);
629
var contextPrototype = CanvasRenderingContext2D_.prototype;
630
contextPrototype.clearRect = function() {
631
if (this.textMeasureEl_) {
632
this.textMeasureEl_.removeNode(true);
633
this.textMeasureEl_ = null;
635
this.element_.innerHTML = '';
638
contextPrototype.beginPath = function() {
639
// TODO: Branch current matrix so that save/restore has no effect
640
// as per safari docs.
641
this.currentPath_ = [];
644
contextPrototype.moveTo = function(aX, aY) {
645
var p = getCoords(this, aX, aY);
646
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
647
this.currentX_ = p.x;
648
this.currentY_ = p.y;
651
contextPrototype.lineTo = function(aX, aY) {
652
var p = getCoords(this, aX, aY);
653
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
655
this.currentX_ = p.x;
656
this.currentY_ = p.y;
659
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
662
var p = getCoords(this, aX, aY);
663
var cp1 = getCoords(this, aCP1x, aCP1y);
664
var cp2 = getCoords(this, aCP2x, aCP2y);
665
bezierCurveTo(this, cp1, cp2, p);
668
// Helper function that takes the already fixed cordinates.
669
function bezierCurveTo(self, cp1, cp2, p) {
670
self.currentPath_.push({
671
type: 'bezierCurveTo',
679
self.currentX_ = p.x;
680
self.currentY_ = p.y;
683
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
684
// the following is lifted almost directly from
685
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
687
var cp = getCoords(this, aCPx, aCPy);
688
var p = getCoords(this, aX, aY);
691
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
692
y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
695
x: cp1.x + (p.x - this.currentX_) / 3.0,
696
y: cp1.y + (p.y - this.currentY_) / 3.0
699
bezierCurveTo(this, cp1, cp2, p);
702
contextPrototype.arc = function(aX, aY, aRadius,
703
aStartAngle, aEndAngle, aClockwise) {
705
var arcType = aClockwise ? 'at' : 'wa';
707
var xStart = aX + mc(aStartAngle) * aRadius - Z2;
708
var yStart = aY + ms(aStartAngle) * aRadius - Z2;
710
var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
711
var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
713
// IE won't render arches drawn counter clockwise if xStart == xEnd.
714
if (xStart == xEnd && !aClockwise) {
715
xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
716
// that can be represented in binary
719
var p = getCoords(this, aX, aY);
720
var pStart = getCoords(this, xStart, yStart);
721
var pEnd = getCoords(this, xEnd, yEnd);
723
this.currentPath_.push({type: arcType,
734
contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
736
this.lineTo(aX + aWidth, aY);
737
this.lineTo(aX + aWidth, aY + aHeight);
738
this.lineTo(aX, aY + aHeight);
742
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
743
var oldPath = this.currentPath_;
747
this.lineTo(aX + aWidth, aY);
748
this.lineTo(aX + aWidth, aY + aHeight);
749
this.lineTo(aX, aY + aHeight);
753
this.currentPath_ = oldPath;
756
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
757
var oldPath = this.currentPath_;
761
this.lineTo(aX + aWidth, aY);
762
this.lineTo(aX + aWidth, aY + aHeight);
763
this.lineTo(aX, aY + aHeight);
767
this.currentPath_ = oldPath;
770
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
771
var gradient = new CanvasGradient_('gradient');
779
contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
781
var gradient = new CanvasGradient_('gradientradial');
791
contextPrototype.drawImage = function(image, var_args) {
792
var dx, dy, dw, dh, sx, sy, sw, sh;
794
// to find the original width we overide the width and height
795
var oldRuntimeWidth = image.runtimeStyle.width;
796
var oldRuntimeHeight = image.runtimeStyle.height;
797
image.runtimeStyle.width = 'auto';
798
image.runtimeStyle.height = 'auto';
800
// get the original size
802
var h = image.height;
804
// and remove overides
805
image.runtimeStyle.width = oldRuntimeWidth;
806
image.runtimeStyle.height = oldRuntimeHeight;
808
if (arguments.length == 3) {
814
} else if (arguments.length == 5) {
822
} else if (arguments.length == 9) {
832
throw Error('Invalid number of arguments');
835
var d = getCoords(this, dx, dy);
845
// For some reason that I've now forgotten, using divs didn't work
846
vmlStr.push(' <g_vml_:group',
847
' coordsize="', Z * W, ',', Z * H, '"',
848
' coordorigin="0,0"' ,
849
' style="width:', W, 'px;height:', H, 'px;position:absolute;');
851
// If filters are necessary (rotation exists), create them
852
// filters are bog-slow, so only create them if abbsolutely necessary
853
// The following check doesn't account for skews (which don't exist
854
// in the canvas spec (yet) anyway.
856
if (this.m_[0][0] != 1 || this.m_[0][1] ||
857
this.m_[1][1] != 1 || this.m_[1][0]) {
860
// Note the 12/21 reversal
861
filter.push('M11=', this.m_[0][0], ',',
862
'M12=', this.m_[1][0], ',',
863
'M21=', this.m_[0][1], ',',
864
'M22=', this.m_[1][1], ',',
865
'Dx=', mr(d.x / Z), ',',
866
'Dy=', mr(d.y / Z), '');
868
// Bounding box calculation (need to minimize displayed area so that
869
// filters don't waste time on unused pixels.
871
var c2 = getCoords(this, dx + dw, dy);
872
var c3 = getCoords(this, dx, dy + dh);
873
var c4 = getCoords(this, dx + dw, dy + dh);
875
max.x = m.max(max.x, c2.x, c3.x, c4.x);
876
max.y = m.max(max.y, c2.y, c3.y, c4.y);
878
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
879
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
880
filter.join(''), ", sizingmethod='clip');");
883
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
887
'<g_vml_:image src="', image.src, '"',
888
' style="width:', Z * dw, 'px;',
889
' height:', Z * dh, 'px"',
890
' cropleft="', sx / w, '"',
891
' croptop="', sy / h, '"',
892
' cropright="', (w - sx - sw) / w, '"',
893
' cropbottom="', (h - sy - sh) / h, '"',
897
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
900
contextPrototype.stroke = function(aFill) {
902
var lineOpen = false;
907
lineStr.push('<g_vml_:shape',
908
' filled="', !!aFill, '"',
909
' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
910
' coordorigin="0,0"',
911
' coordsize="', Z * W, ',', Z * H, '"',
912
' stroked="', !aFill, '"',
916
var min = {x: null, y: null};
917
var max = {x: null, y: null};
919
for (var i = 0; i < this.currentPath_.length; i++) {
920
var p = this.currentPath_[i];
926
lineStr.push(' m ', mr(p.x), ',', mr(p.y));
929
lineStr.push(' l ', mr(p.x), ',', mr(p.y));
935
case 'bezierCurveTo':
937
mr(p.cp1x), ',', mr(p.cp1y), ',',
938
mr(p.cp2x), ',', mr(p.cp2y), ',',
939
mr(p.x), ',', mr(p.y));
943
lineStr.push(' ', p.type, ' ',
944
mr(p.x - this.arcScaleX_ * p.radius), ',',
945
mr(p.y - this.arcScaleY_ * p.radius), ' ',
946
mr(p.x + this.arcScaleX_ * p.radius), ',',
947
mr(p.y + this.arcScaleY_ * p.radius), ' ',
948
mr(p.xStart), ',', mr(p.yStart), ' ',
949
mr(p.xEnd), ',', mr(p.yEnd));
954
// TODO: Following is broken for curves due to
955
// move to proper paths.
957
// Figure out dimensions so we can do gradient fills
960
if (min.x == null || p.x < min.x) {
963
if (max.x == null || p.x > max.x) {
966
if (min.y == null || p.y < min.y) {
969
if (max.y == null || p.y > max.y) {
977
appendStroke(this, lineStr);
979
appendFill(this, lineStr, min, max);
982
lineStr.push('</g_vml_:shape>');
984
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
987
function appendStroke(ctx, lineStr) {
988
var a = processStyle(ctx.strokeStyle);
990
var opacity = a.alpha * ctx.globalAlpha;
991
var lineWidth = ctx.lineScale_ * ctx.lineWidth;
993
// VML cannot correctly render a line if the width is less than 1px.
994
// In that case, we dilute the color to make the line look thinner.
996
opacity *= lineWidth;
1001
' opacity="', opacity, '"',
1002
' joinstyle="', ctx.lineJoin, '"',
1003
' miterlimit="', ctx.miterLimit, '"',
1004
' endcap="', processLineCap(ctx.lineCap), '"',
1005
' weight="', lineWidth, 'px"',
1006
' color="', color, '" />'
1010
function appendFill(ctx, lineStr, min, max) {
1011
var fillStyle = ctx.fillStyle;
1012
var arcScaleX = ctx.arcScaleX_;
1013
var arcScaleY = ctx.arcScaleY_;
1014
var width = max.x - min.x;
1015
var height = max.y - min.y;
1016
if (fillStyle instanceof CanvasGradient_) {
1017
// TODO: Gradients transformed with the transformation matrix.
1019
var focus = {x: 0, y: 0};
1021
// additional offset
1023
// scale factor for offset
1026
if (fillStyle.type_ == 'gradient') {
1027
var x0 = fillStyle.x0_ / arcScaleX;
1028
var y0 = fillStyle.y0_ / arcScaleY;
1029
var x1 = fillStyle.x1_ / arcScaleX;
1030
var y1 = fillStyle.y1_ / arcScaleY;
1031
var p0 = getCoords(ctx, x0, y0);
1032
var p1 = getCoords(ctx, x1, y1);
1033
var dx = p1.x - p0.x;
1034
var dy = p1.y - p0.y;
1035
angle = Math.atan2(dx, dy) * 180 / Math.PI;
1037
// The angle should be a non-negative number.
1042
// Very small angles produce an unexpected result because they are
1043
// converted to a scientific notation string.
1048
var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
1050
x: (p0.x - min.x) / width,
1051
y: (p0.y - min.y) / height
1054
width /= arcScaleX * Z;
1055
height /= arcScaleY * Z;
1056
var dimension = m.max(width, height);
1057
shift = 2 * fillStyle.r0_ / dimension;
1058
expansion = 2 * fillStyle.r1_ / dimension - shift;
1061
// We need to sort the color stops in ascending order by offset,
1062
// otherwise IE won't interpret it correctly.
1063
var stops = fillStyle.colors_;
1064
stops.sort(function(cs1, cs2) {
1065
return cs1.offset - cs2.offset;
1068
var length = stops.length;
1069
var color1 = stops[0].color;
1070
var color2 = stops[length - 1].color;
1071
var opacity1 = stops[0].alpha * ctx.globalAlpha;
1072
var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
1075
for (var i = 0; i < length; i++) {
1076
var stop = stops[i];
1077
colors.push(stop.offset * expansion + shift + ' ' + stop.color);
1080
// When colors attribute is used, the meanings of opacity and o:opacity2
1082
lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
1083
' method="none" focus="100%"',
1084
' color="', color1, '"',
1085
' color2="', color2, '"',
1086
' colors="', colors.join(','), '"',
1087
' opacity="', opacity2, '"',
1088
' g_o_:opacity2="', opacity1, '"',
1089
' angle="', angle, '"',
1090
' focusposition="', focus.x, ',', focus.y, '" />');
1091
} else if (fillStyle instanceof CanvasPattern_) {
1092
if (width && height) {
1093
var deltaLeft = -min.x;
1094
var deltaTop = -min.y;
1095
lineStr.push('<g_vml_:fill',
1097
deltaLeft / width * arcScaleX * arcScaleX, ',',
1098
deltaTop / height * arcScaleY * arcScaleY, '"',
1100
// TODO: Figure out the correct size to fit the scale.
1101
//' size="', w, 'px ', h, 'px"',
1102
' src="', fillStyle.src_, '" />');
1105
var a = processStyle(ctx.fillStyle);
1106
var color = a.color;
1107
var opacity = a.alpha * ctx.globalAlpha;
1108
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
1113
contextPrototype.fill = function() {
1117
contextPrototype.closePath = function() {
1118
this.currentPath_.push({type: 'close'});
1121
function getCoords(ctx, aX, aY) {
1124
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
1125
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
1129
contextPrototype.save = function() {
1132
this.aStack_.push(o);
1133
this.mStack_.push(this.m_);
1134
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
1137
contextPrototype.restore = function() {
1138
if (this.aStack_.length) {
1139
copyState(this.aStack_.pop(), this);
1140
this.m_ = this.mStack_.pop();
1144
function matrixIsFinite(m) {
1145
return isFinite(m[0][0]) && isFinite(m[0][1]) &&
1146
isFinite(m[1][0]) && isFinite(m[1][1]) &&
1147
isFinite(m[2][0]) && isFinite(m[2][1]);
1150
function setM(ctx, m, updateLineScale) {
1151
if (!matrixIsFinite(m)) {
1156
if (updateLineScale) {
1157
// Get the line scale.
1158
// Determinant of this.m_ means how much the area is enlarged by the
1159
// transformation. So its square root can be used as a scale factor
1161
var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
1162
ctx.lineScale_ = sqrt(abs(det));
1166
contextPrototype.translate = function(aX, aY) {
1173
setM(this, matrixMultiply(m1, this.m_), false);
1176
contextPrototype.rotate = function(aRot) {
1186
setM(this, matrixMultiply(m1, this.m_), false);
1189
contextPrototype.scale = function(aX, aY) {
1190
this.arcScaleX_ *= aX;
1191
this.arcScaleY_ *= aY;
1198
setM(this, matrixMultiply(m1, this.m_), true);
1201
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
1208
setM(this, matrixMultiply(m1, this.m_), true);
1211
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
1218
setM(this, m, true);
1222
* The text drawing function.
1223
* The maxWidth argument isn't taken in account, since no browser supports
1226
contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
1231
offset = {x: 0, y: 0},
1234
var fontStyle = getComputedStyle(processFontStyle(this.font), this.element_);
1236
var fontStyleString = buildStyle(fontStyle);
1238
var elementStyle = this.element_.currentStyle;
1239
var textAlign = this.textAlign.toLowerCase();
1240
switch (textAlign) {
1246
textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
1249
textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
1255
// 1.75 is an arbitrary number, as there is no info about the text baseline
1256
switch (this.textBaseline) {
1259
offset.y = fontStyle.size / 1.75;
1268
offset.y = -fontStyle.size / 2.25;
1278
left = right = delta / 2;
1282
var d = getCoords(this, x + offset.x, y + offset.y);
1284
lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
1285
' coordsize="100 100" coordorigin="0 0"',
1286
' filled="', !stroke, '" stroked="', !!stroke,
1287
'" style="position:absolute;width:1px;height:1px;">');
1290
appendStroke(this, lineStr);
1292
// TODO: Fix the min and max params.
1293
appendFill(this, lineStr, {x: -left, y: 0},
1294
{x: right, y: fontStyle.size});
1297
var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
1298
m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
1300
var skewOffset = mr(d.x / Z + 1 - m[0][0]) + ',' + mr(d.y / Z - 2 * m[1][0]);
1303
lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
1304
' offset="', skewOffset, '" origin="', left ,' 0" />',
1305
'<g_vml_:path textpathok="true" />',
1306
'<g_vml_:textpath on="true" string="',
1307
encodeHtmlAttribute(text),
1308
'" style="v-text-align:', textAlign,
1309
';font:', encodeHtmlAttribute(fontStyleString),
1310
'" /></g_vml_:line>');
1312
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
1315
contextPrototype.fillText = function(text, x, y, maxWidth) {
1316
this.drawText_(text, x, y, maxWidth, false);
1319
contextPrototype.strokeText = function(text, x, y, maxWidth) {
1320
this.drawText_(text, x, y, maxWidth, true);
1323
contextPrototype.measureText = function(text) {
1324
if (!this.textMeasureEl_) {
1325
var s = '<span style="position:absolute;' +
1326
'top:-20000px;left:0;padding:0;margin:0;border:none;' +
1327
'white-space:pre;"></span>';
1328
this.element_.insertAdjacentHTML('beforeEnd', s);
1329
this.textMeasureEl_ = this.element_.lastChild;
1331
var doc = this.element_.ownerDocument;
1332
this.textMeasureEl_.innerHTML = '';
1333
this.textMeasureEl_.style.font = this.font;
1334
// Don't use innerHTML or innerText because they allow markup/whitespace.
1335
this.textMeasureEl_.appendChild(doc.createTextNode(text));
1336
return {width: this.textMeasureEl_.offsetWidth};
1339
/******** STUBS ********/
1340
contextPrototype.clip = function() {
1344
contextPrototype.arcTo = function() {
1348
contextPrototype.createPattern = function(image, repetition) {
1349
return new CanvasPattern_(image, repetition);
1352
// Gradient / Pattern Stubs
1353
function CanvasGradient_(aType) {
1364
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
1365
aColor = processStyle(aColor);
1366
this.colors_.push({offset: aOffset,
1367
color: aColor.color,
1368
alpha: aColor.alpha});
1371
function CanvasPattern_(image, repetition) {
1372
assertImageIsValid(image);
1373
switch (repetition) {
1377
this.repetition_ = 'repeat';
1382
this.repetition_ = repetition;
1385
throwException('SYNTAX_ERR');
1388
this.src_ = image.src;
1389
this.width_ = image.width;
1390
this.height_ = image.height;
1393
function throwException(s) {
1394
throw new DOMException_(s);
1397
function assertImageIsValid(img) {
1398
if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
1399
throwException('TYPE_MISMATCH_ERR');
1401
if (img.readyState != 'complete') {
1402
throwException('INVALID_STATE_ERR');
1406
function DOMException_(s) {
1407
this.code = this[s];
1408
this.message = s +': DOM Exception ' + this.code;
1410
var p = DOMException_.prototype = new Error;
1411
p.INDEX_SIZE_ERR = 1;
1412
p.DOMSTRING_SIZE_ERR = 2;
1413
p.HIERARCHY_REQUEST_ERR = 3;
1414
p.WRONG_DOCUMENT_ERR = 4;
1415
p.INVALID_CHARACTER_ERR = 5;
1416
p.NO_DATA_ALLOWED_ERR = 6;
1417
p.NO_MODIFICATION_ALLOWED_ERR = 7;
1418
p.NOT_FOUND_ERR = 8;
1419
p.NOT_SUPPORTED_ERR = 9;
1420
p.INUSE_ATTRIBUTE_ERR = 10;
1421
p.INVALID_STATE_ERR = 11;
1423
p.INVALID_MODIFICATION_ERR = 13;
1424
p.NAMESPACE_ERR = 14;
1425
p.INVALID_ACCESS_ERR = 15;
1426
p.VALIDATION_ERR = 16;
1427
p.TYPE_MISMATCH_ERR = 17;
1430
G_vmlCanvasManager = G_vmlCanvasManager_;
1431
CanvasRenderingContext2D = CanvasRenderingContext2D_;
1432
CanvasGradient = CanvasGradient_;
1433
CanvasPattern = CanvasPattern_;
1434
DOMException = DOMException_;
1435
G_vmlCanvasManager._version = 888;