var _VMLRenderingEngineIncluded=0;

function _drawing_gradient_colorstop(p,r,g,b) {
  this._p=p;
  this._r=r;
  this._g=g;
  this._b=b;
  
  return this;
}

function _drawing_linearGradient(drawing, x1, y1, x2, y2) {
  this._drawing = drawing;
  this._x1 = x1;
  this._y1 = y1;
  this._x2 = x2;
  this._y2 = y2;
  
  if (drawing.mode=='canvas') {
    this._innerobject = drawing._context.createLinearGradient(x1, y1, x2, y2);
    this.addColorStop = function (pos,r,g,b) {
      this._innerobject.addColorStop(pos, 'rgb('+r+','+g+','+b+')');
    }
  } else if (drawing.mode=='vml') {
    this._colorstops=new Array();
    
    this.addColorStop = function (pos,r,g,b) {
      this._colorstops[this._colorstops.length]=new _drawing_gradient_colorstop(pos,r,g,b);
    }

    this._getVMLfill=function () {
      if (!this._colorstops.length) { return ''; }
      
      var firststop=this._colorstops[0];
      var laststop=this._colorstops[0];
      var colors='';
      
      for (var i=0;i<this._colorstops.length;i++) {
        if (firststop._p>this._colorstops[i]._p) { firststop = this._colorstops[i]; }
        if (laststop._p<this._colorstops[i]._p) { laststop = this._colorstops[i]; }
        if (this._colorstops[i]._p!=0 && this._colorstops[i]._p!=1) {
          if (colors) { colors+=', '; }
          colors+=(this._colorstops[i]._p*100)+'% rgb('+this._colorstops[i]._r+','+this._colorstops[i]._g+','+this._colorstops[i]._b+')';
        }
      }

      var dx = (this._x2-this._x1);
      var dy = (this._y2-this._y1);
      var angle = (180+Math.floor(Math.atan2(dx,dy)/Math.PI*180)) % 360;

      var fill='';
      fill+='<v:fill opacity="'+(this._drawing._fillopacity1*this._drawing._globalAlpha)+'" ';
      fill+='color="rgb('+firststop._r+','+firststop._g+','+firststop._b+')" ';
      fill+='angle="'+angle+'" type="gradient" method="linear" color2="rgb('+laststop._r+','+laststop._g+','+laststop._b+')" ';
      if (colors) { fill+='colors="'+colors+'"'; }
      fill+=' />';

      return fill;
    }
    this._getVMLstroke=function () {
      if (!this._colorstops.length) { return ''; }
      
      var firststop=this._colorstops[0];
      
      for (var i=0;i<this._colorstops.length;i++) {
        if (firststop._p>this._colorstops[i]._p) { firststop = this._colorstops[i]; }
      }
      var end=this._drawing._lineCap;
      if (end=='butt') {
        end = 'flat';
      }
      //strokes in VML don't do gradients - we'll just use the first color found.
      var stroke='';
      stroke+='<v:stroke opacity="'+(this._drawing._strokeopacity1*this._drawing._globalAlpha)+'" weight="'+this._drawing._lineWidth+'" endcap="'+end+'" joinstyle="'+this._drawing._lineJoin+'" miterLimit="'+this._drawing._miterLimit+'" ';
      stroke+='color="rgb('+firststop._r+','+firststop._g+','+firststop._b+')" ';
      stroke+=' />';

      return stroke;
    }
  }

  return this;
}

function Drawing(id, width, height, style) {
  this._id = id;
  this._width = width;
  this._height = height;
  this.mode = '';
  
  this.end= _drawing_End;
  this.fillStyle = _drawing_fillStyle;
  this.fillStyleA = _drawing_fillStyleA;
  this.strokeStyle = _drawing_strokeStyle;
  this.strokeStyleA = _drawing_strokeStyleA;
  this.setGlobalAlpha=_drawing_setGlobalAlpha;
  this.setLineWidth=_drawing_setLineWidth;
  this.setLineCap=_drawing_setLineCap;
  this.setLineJoin=_drawing_setLineJoin;
  this.setMiterLimit=_drawing_setMiterLimit;
  this.setFillStyleObject=_drawing_fillStyleObject;
  this.setStrokeStyleObject=_drawing_strokeStyleObject;

  this.fillRect = _drawing_fillRect;
  this.strokeRect = _drawing_strokeRect;
  this.clearRect = _drawing_clearRect;
  this.beginPath = _drawing_beginPath;
  this.moveTo = _drawing_moveTo;
  this.lineTo = _drawing_lineTo;
  this.closePath = _drawing_closePath;
  this.fill = _drawing_fill;
  this.stroke = _drawing_stroke;
  this.arc = _drawing_arc;
  this.quadraticCurveTo=_drawing_quadraticCurveTo;
  this.bezierCurveTo=_drawing_bezierCurveTo;
  this.circle=_drawing_circle;
  this.createLinearGradient=_drawing_createLinearGradient;

  
  document.getElementById(id).innerHTML = '<canvas class="drawinglibcanvas" width="'+width+'" height="'+height+'" style="'+style+'"></canvas>';
  this._canvas = document.getElementById(id).getElementsByTagName("canvas")[0]; 

  if (this._canvas && this._canvas.getContext) {
    this.mode = 'canvas';
    this._context = this._canvas.getContext('2d');
  } else {
    this.mode = 'vml';
    
    if (this._canvas) { this._canvas.parentNode.removeChild(this._canvas);  }

    if (!_VMLRenderingEngineIncluded) {
/*
      document.getElementById(id).innerHTML = 
          '<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>'+
          '<object id="VMLRender" codebase="vgx.dll" classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E" style="display:none;"></object>'+
          '<div class="drawinglibcanvas" style="width: '+width+'px; height: '+height+'px; '+style+'"></div>';
*/
        try {
            var vml, style;
            // declare namespace //
            //document.namespaces.add('v');
            // add object tag //
            vml = document.createElement('object');
            vml.id = 'VMLRender';
            vml.codebase = 'vgx.dll';
            vml.classid = 'CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E';
            document.body.appendChild(vml);
            // associate VML behavior with the VML namespace //
            style = document.createStyleSheet();
        } catch (e) { }
        
      _VMLRenderingEngineIncluded=1;
    }
//     else {
      document.getElementById(id).innerHTML = '<div class="drawinglibcanvas" style="width: '+width+'px; height: '+height+'px; '+style+'"></div>';

    this._div = document.getElementById(id).getElementsByTagName("div")[0];

    //assume VML on IE
    this._strokecolor = 'rgb(0,0,0)';
    this._addfill = _drawing_addvmlfill;
    this._addstroke = _drawing_addvmlstroke;

    this._xml = '<v:group coordsize="'+width+','+height+'" style="width: '+width+'px; height: '+height+'px; position: absolute;">';
    
    this._xmltail = '</v:group>';
  } 

  this.fillStyle(0,0,0);
  this.strokeStyle(0,0,0);
  this.setGlobalAlpha(1.0);
  this.setLineWidth(1.0);
  this.setLineCap('butt');
  this.setLineJoin('miter');
  this.setMiterLimit(10.0);
  
  return this;
}
function _drawing_createLinearGradient(x1,y1,x2,y2) {
  return new _drawing_linearGradient(this,x1,y1,x2,y2);
}
function _drawing_fillStyle(r,g,b) {
  if (this.mode=='canvas') {
    this._context.fillStyle = "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")"; 
  } else {
    this._filltype = 'solid';
    this._fillcolor1 = "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")";
    this._fillopacity1 = 1.0;
  }
}
function _drawing_fillStyleA(r,g,b,a) {
  if (this.mode=='canvas') {
    this._context.fillStyle = "rgba(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ", " + Math.floor(a) + ")"; 
  } else {
    this._filltype = 'solid';
    this._fillcolor1 = "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")";
    this._fillopacity1 = a;
  }
}
function _drawing_setGlobalAlpha(a) {
  if (this.mode=='canvas') {
    this._context.globalAlpha = Math.floor(a); 
  } else {
    this._globalAlpha = Math.floor(a);
  }
}
function _drawing_setLineWidth(width) {
  if (this.mode=='canvas') {
    this._context.lineWidth = width; 
  } else {
    this._lineWidth = width;
  }
}
//type - butt, round, square
function _drawing_setLineCap(type) {
  if (this.mode=='canvas') {
    this._context.lineCap = type; 
  } else {
    this._lineCap = type;
  }
}
//type - round, bevel, miter
function _drawing_setLineJoin(type) {
  if (this.mode=='canvas') {
    this._context.lineJoin = type; 
  } else {
    this._lineJoin = type;
  }
}
function _drawing_setMiterLimit(dist) {
  if (this.mode=='canvas') {
    this._context.miterLimit = dist; 
  } else {
    this._miterLimit = dist;
  }
}
function _drawing_fillStyleObject(fil) {
  if (this.mode=='canvas') {
    this._context.fillStyle = fil._innerobject;
  } else {
    this._filltype = 'object';
    this._fillobject = fil;
  }
}
function _drawing_strokeStyleObject(fil) {
  if (this.mode=='canvas') {
    this._context.strokeStyle = fil._innerobject;
  } else {
    this._stroketype = 'object';
    this._strokeobject = fil;
  }
}

function _drawing_strokeStyle(r,g,b) {
  if (this.mode=='canvas') {
    this._context.strokeStyle = "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")"; 
  } else {
    this._stroketype = 'solid';
    this._strokecolor1 = "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")";
    this._strokeopacity1 = 1.0;
  }
}
function _drawing_strokeStyleA(r,g,b,a) {
  if (this.mode=='canvas') {
    this._context.strokeStyle = "rgba(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ", " + Math.floor(a) + ")"; 
  } else {
    this._filltype = 'solid';
    this._strokecolor1 = "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")";
    this._strokeopacity1 = a;
  }
}
function _drawing_addvmlfill() {
    this._xml+='<v:fill opacity="'+(this._fillopacity1*this._globalAlpha)+'" ';
    if (this._filltype == 'solid') {
      this._xml+='color="'+this._fillcolor1+'" />';
    } else if (this._filltype == 'object') {
      this._xml+=this._fillobject._getVMLfill();
    }
}
function _drawing_addvmlstroke() {
    if (this._stroketype == 'solid') {
      var end=this._lineCap;
      if (end=='butt') {
        end = 'flat';
      }
      this._xml+='<v:stroke opacity="'+(this._strokeopacity1*this._globalAlpha)+'" weight="'+this._lineWidth+'" endcap="'+end+'" joinstyle="'+this._lineJoin+'" miterLimit="'+this._miterLimit+'" ';
      this._xml+='color="'+this._strokecolor1+'" ';
      this._xml+=' />';
    } else if (this._stroketype == 'object') {
      this._xml+=this._strokeobject._getVMLstroke();
    }
}
function _drawing_fillRect(l,t,w,h) {
  if (this.mode=='canvas') {
    this._context.fillRect(l,t,w,h); 
  } else if (this.mode =='vml') {
    this._xml+='<v:rect style="width: '+w+'; height: '+h+'; left: '+l+'; top: '+t+'; position: absolute;">';
    this._addfill();
    this._xml+='<v:stroke on="false" />'
    this._xml+='</v:rect>';
  }
}
function _drawing_strokeRect(l,t,w,h) {
  if (this.mode=='canvas') {
    this._context.strokeRect(l,t,w,h); 
  } else if (this.mode =='vml') {
    this._xml+='<v:rect style="width: '+w+'; height: '+h+'; left: '+l+'; top: '+t+'; position: absolute;">';
    this._xml+='<v:fill on="false" />'
    this._addstroke();
    this._xml+='</v:rect>';
  }
}
function _drawing_clearRect(l,t,w,h) {
  if (this.mode=='canvas') {
    this._context.clearRect(l,t,w,h); 
  } else if (this.mode =='vml') {
    this._xml+='<v:rect style="width: '+w+'; height: '+h+'; left: '+l+'; top: '+t+'; position: absolute;" fillcolor="white"></v:rect>';
  }
}
function _drawing_End() {
  if (this.mode=='vml') {
    this._div.innerHTML = this._xml + this._xmltail;
  }
}
function _drawing_beginPath() {
  if (this.mode=='canvas') {
    this._context.beginPath();
  } else if (this.mode=='vml') {
    this._path='';
  }
}
function _drawing_moveTo(x,y) {
  if (this.mode=='canvas') {
    this._context.moveTo(x,y);
  } else if (this.mode='vml') {
    this._path+='m'+Math.round(x)+','+Math.round(y)+' ';
  }
}
function _drawing_lineTo(x,y) {
  if (this.mode=='canvas') {
    this._context.lineTo(x,y);
  } else if (this.mode='vml') {
    this._path+='l'+Math.round(x)+','+Math.round(y)+' ';
  }
}
function _drawing_closePath() {
  if (this.mode=='canvas') {
    this._context.closePath();
  } else if (this.mode='vml') {
    this._path+='x';
  }
}
function _drawing_circle(x,y,radius) {
    if (this.mode=='canvas') {
      this._context.arc(x,y,radius,0,Math.PI*2,anticlockwise);
    } else if (this.mode='vml') {
      var svecx,svecy,evecx,evecy;

      svecx = Math.round(x+radius*Math.cos(0));
      svecy = Math.round(y+radius*Math.sin(0));
      evecx = Math.round(x+radius*Math.cos(Math.PI));
      evecy = Math.round(y+radius*Math.sin(Math.PI));

      this._path+='at'+Math.round(x-radius)+','+Math.round(y-radius)+','+Math.round(x+radius)+','+Math.round(y+radius)+','+Math.round(svecx)+','+Math.round(svecy)+','+Math.round(evecx)+','+Math.round(evecy)+' ';
      this._path+='wr'+Math.round(x-radius)+','+Math.round(y-radius)+','+Math.round(x+radius)+','+Math.round(y+radius)+','+Math.round(svecx)+','+Math.round(svecy)+','+Math.round(evecx)+','+Math.round(evecy)+' ';
   }
}
function _drawing_arc(x,y,radius,startangle,endangle,anticlockwise) {
  if (this.mode=='canvas') {
    this._context.arc(x,y,radius,startangle,endangle,anticlockwise);
  } else if (this.mode='vml') {
    var svecx,svecy,evecx,evecy;
    var com;
    
    if (anticlockwise) { 
      com='at';
    } else {
      com='wa';
    }

    svecx = Math.round(x+radius*Math.cos(startangle));
    svecy = Math.round(y+radius*Math.sin(startangle));
    evecx = Math.round(x+radius*Math.cos(endangle));
    evecy = Math.round(y+radius*Math.sin(endangle));

    this._path+=com+Math.round(x-radius)+','+Math.round(y-radius)+','+Math.round(x+radius)+','+Math.round(y+radius)+','+Math.round(svecx)+','+Math.round(svecy)+','+Math.round(evecx)+','+Math.round(evecy)+' ';
 }
}
function _drawing_quadraticCurveTo(cp1x,cp1y,x,y) {
  if (this.mode=='canvas') {
    this._context.quadraticCurveTo(cp1x,cp1y,x,y);
  } else if (this.mode='vml') {
    this._path+='qb'+Math.round(cp1x)+','+Math.round(cp1y)+','+Math.round(x)+','+Math.round(y)+' ';
  }
}
function _drawing_bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) {
  if (this.mode=='canvas') {
    this._context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
  } else if (this.mode='vml') {
    this._path+='c'+Math.round(cp1x)+','+Math.round(cp1y)+','+Math.round(cp2x)+','+Math.round(cp2y)+','+Math.round(x)+','+Math.round(y)+' ';
  }
}
function _drawing_fill() {
  if (this.mode=='canvas') {
    this._context.fill();
  } else if (this.mode=='vml' && this._path) {
    this._xml+='<v:shape path="'+this._path+'e" coordorigin="0,0" coordsize="'+this._width+','+this._height+'" style="left: 0px; top: 0px; width: '+this._width+'px; height: '+this._height+'px; position: absolute;">';
    this._addfill();
    this._xml+='<v:stroke on="false" />'
    this._xml+='</v:shape>';
  }
}
function _drawing_stroke() {
  if (this.mode=='canvas') {
    this._context.stroke();
  } else if (this.mode=='vml' && this._path) {
    this._xml+='<v:shape path="'+this._path+'e" coordorigin="0,0" coordsize="'+this._width+','+this._height+'" style="left: 0px; top: 0px; width: '+this._width+'px; height: '+this._height+'px; position: absolute;">';
    this._xml+='<v:fill on="false" />'
    this._addstroke();
    this._xml+='</v:shape>';
  }
}