rlm@46: //----------------------------------------------------------------------------
rlm@46: // VMLRENDERER 1.0
rlm@46: // VML Renderer For RichDraw
rlm@46: // Dependencies:
rlm@46: // History:
rlm@46: // 2006-04-05 | Created
rlm@46: // --------------------------------------------------------------------------*/
rlm@46: 
rlm@46: 
rlm@46: function VMLRenderer() {
rlm@46: 	this.base = AbstractRenderer;
rlm@46: }
rlm@46: 
rlm@46: 
rlm@46: VMLRenderer.prototype = new AbstractRenderer; 
rlm@46: 
rlm@46: VMLRenderer.prototype.bounds = function(shape) {
rlm@46:   var rect = new Object();
rlm@46:   rect['x'] = shape.offsetLeft;
rlm@46:   rect['y'] = shape.offsetTop;
rlm@46:   rect['width'] =  shape.offsetWidth;
rlm@46:   rect['height'] = shape.offsetHeight;
rlm@46:   return rect;
rlm@46: }
rlm@46: 
rlm@46: VMLRenderer.prototype.init = function(elem) 
rlm@46:  {
rlm@46:   this.container = elem;
rlm@46:   // this.container.style.overflow = 'hidden';
rlm@46:   this.container.unselectable = "on";
rlm@46:   // Add VML includes and namespace
rlm@46:   elem.ownerDocument.namespaces.add("v", "urn:schemas-microsoft-com:vml");
rlm@46:   var style = elem.ownerDocument.createStyleSheet();
rlm@46:   style.addRule('v\\:*', "behavior: url(#default#VML); display:inline-block");
rlm@46:   //NOT VML biewBox
rlm@46:   //http://blogs.msdn.com/ie/archive/2008/03/18/webbrowser-control-rendering-modes-in-ie8.aspx 
rlm@46: 
rlm@46:  } 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: var proporx=1;
rlm@46: var propory=1;
rlm@46: 
rlm@46: VMLRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {
rlm@46:   var tokens = viewBox.split(' '); 
rlm@46:        
rlm@46:   var margin=100; 
rlm@46:   var wFront=parseInt(document.getElementById('FRONT').style.width)
rlm@46:   var hFront=parseInt(document.getElementById('FRONT').style.height)
rlm@46:   var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;
rlm@46:   tokensCanvas= tC.split(' '); 
rlm@46: 
rlm@46:   var w=parseFloat(tokens[2]);
rlm@46:   var h=parseFloat(tokens[3]); 
rlm@46:   var wImage = w - parseFloat(tokens[0]);  
rlm@46:   var hImage = h - parseFloat(tokens[1]);
rlm@46:   var wCanvas = wFront;
rlm@46:   var hCanvas = hFront;
rlm@46:   proporImage = hImage / wImage; 
rlm@46:   proporCanvas = hCanvas / wCanvas; 
rlm@46: 
rlm@46:   document.title= initialFile +'     '+wImage+' x '+hImage;
rlm@46: 
rlm@46: 
rlm@46:   if(bgcolor != '')
rlm@46:    {
rlm@46:     this.container.style.backgroundColor=bgcolor;
rlm@46:    } else{
rlm@46:     this.container.style.backgroundColor="#ffffff";
rlm@46:    }
rlm@46: if(viewMode=='preview')
rlm@46:  {
rlm@46:   if(proporCanvas==proporImage)
rlm@46:    {
rlm@46:       this.container.style.width =wFront+'px';
rlm@46:       this.container.style.height =hFront+'px';
rlm@46:       this.container.style.left =0+'px' 
rlm@46:       this.container.style.top =0+'px' 
rlm@46:       canvasLeft = 0;
rlm@46:    canvasTop = 0; 
rlm@46:    canvasWidth =wFront ;
rlm@46:    canvasHeight = hFront; 
rlm@46:    zoominit1= 0+' '+0+' '+wFront+' '+hFront;
rlm@46:    zoominit = viewBox;
rlm@46:    zoominit2 = zoominit1;  
rlm@46:   
rlm@46:   
rlm@46:    proporx = 1;
rlm@46:    propory = 1;
rlm@46:    
rlm@46:    }
rlm@46:   if(proporCanvas<proporImage)
rlm@46:    {    
rlm@46:       var proportion= wFront/hFront;  
rlm@46:       //var image_proportion= width/height;
rlm@46:       var image_proportion= w/h;
rlm@46:       var W=hFront*image_proportion; 
rlm@46:       var leftover=(wFront-W)/2;
rlm@46:       
rlm@46:       this.container.style.width =W+'px';
rlm@46:       this.container.style.height =hFront+'px';
rlm@46:       this.container.style.left =leftover+'px' 
rlm@46:       this.container.style.top =0+'px' 
rlm@46:       //alert('Horizontal '+wFront+','+hFront+' '+image_proportion+' '+W+' '+leftover+' ____'+ this.container.style.width)
rlm@46:    canvasLeft = leftover;
rlm@46:    canvasTop = 0; 
rlm@46:    canvasWidth =W ;
rlm@46:    canvasHeight = hFront; 
rlm@46:    zoominit1= viewBox;//leftover+' '+0+' '+W+' '+hFront;
rlm@46:    zoominit1=0+' '+0+' '+W+' '+hFront;    
rlm@46:    zoominit = viewBox;
rlm@46:    zoominit2 = zoominit1;  
rlm@46:   
rlm@46:   
rlm@46:    proporx = W/w;
rlm@46:    propory = hFront/h;
rlm@46:    
rlm@46:  
rlm@46:     } 
rlm@46:   if(proporCanvas>proporImage)
rlm@46:    {    
rlm@46:       var proportion= hFront/wFront;  
rlm@46:       //var image_proportion= width/height;
rlm@46:       var image_proportion= h/w;
rlm@46:       var H=wFront*image_proportion; 
rlm@46:       var leftover=(hFront-H)/2;
rlm@46:       
rlm@46:       this.container.style.width =wFront+'px';
rlm@46:       this.container.style.height =H+'px';
rlm@46:       this.container.style.left =0+'px' 
rlm@46:       this.container.style.top =leftover+'px'   
rlm@46:       
rlm@46:    canvasLeft = 0;
rlm@46:    canvasTop = leftover; 
rlm@46:    canvasWidth = wFront;
rlm@46:    canvasHeight = H; 
rlm@46:    //zoominit1 = 0+' '+leftover+' '+wFront+' '+H;
rlm@46:    zoominit1 = 0+' '+0+' '+wFront+' '+H;    
rlm@46:    zoominit = viewBox;
rlm@46:    zoominit2 = viewBox;//zoominit1;  
rlm@46: 
rlm@46:    proporx = wFront/w;
rlm@46:    propory = H/h;
rlm@46:  
rlm@46:     }   
rlm@46:      // proporx = width/tokens[2];
rlm@46:      //propory = height/tokens[2];
rlm@46: 
rlm@46: 
rlm@46:    
rlm@46:   } 
rlm@46: if(viewMode=='canvas')
rlm@46:  {
rlm@46:    this.container.style.left = 0 + 'px';   
rlm@46:    this.container.style.top = 0 + 'px';                                 
rlm@46:    this.container.style.width = wFront + 'px';
rlm@46:    this.container.style.height = hFront + 'px';
rlm@46:    
rlm@46:    //  margins 10%    
rlm@46:    var percent=10;
rlm@46:    var percentX = wImage / percent; 
rlm@46:    var percentY = hImage / percent; 
rlm@46:    var cornerNEx = parseFloat(tokens[0])-percentX; 
rlm@46:    var cornerNEy = parseFloat(tokens[1])-percentY;
rlm@46:    var percentRectW=wImage + percentX*2;
rlm@46:    var percentRectH=hImage + percentY*2; 
rlm@46:  
rlm@46:    document.title= initialFile +'     '+wImage+' x '+hImage;
rlm@46:    // ajust proporImage to proporCanvas
rlm@46:   if(proporCanvas==proporImage)
rlm@46:    {  
rlm@46:       cornerNEx = parseFloat(tokens[0])-percentX
rlm@46:       cornerNEy = parseFloat(tokens[1])-percentY  
rlm@46:       var wi=percentRectW;
rlm@46:       var he=percentRectH;//hImage+percentY+addHimage; 
rlm@46:       zoominit=viewBox;
rlm@46:       zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;
rlm@46:       proporx =(w*(100-percent*2)/100)/w;
rlm@46:       propory =( h*(100-percent*2)/100)/h; 
rlm@46:       zoominit2=zoominit1; 
rlm@46:       tokensZoom=tokensCanvas;//viewBox.split(' '); ;//zoominit1.split(' '); 
rlm@46:       
rlm@46:    }
rlm@46: 
rlm@46:   if(proporCanvas<proporImage)
rlm@46:    {    
rlm@46:         
rlm@46:         // add to hImage
rlm@46:         var newWimage = percentRectW * ((wCanvas * percentRectH) / (hCanvas * percentRectW))  ;//newRectH *
rlm@46:         var diffImages=newWimage-w;
rlm@46:         cornerNEx = parseFloat(tokens[0]) - (diffImages / 2);
rlm@46:         var wi=newWimage;
rlm@46:         var he=percentRectH;//hImage+percentY+addHimage; 
rlm@46:         zoominit=viewBox;
rlm@46:         //zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
rlm@46:       //zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;
rlm@46:       proporx =wFront/wi;
rlm@46:       propory = wFront/wi; 
rlm@46:       var invPropor =wi/ wFront; 
rlm@46:      zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;
rlm@46:       zoominit2=zoominit1; 
rlm@46:       var tZ = (invPropor*cornerNEx) +' '+(invPropor*cornerNEy)+' '+wi+' '+he;
rlm@46: 
rlm@46:        
rlm@46:         tokensZoom=tokensCanvas;//tZ.split(' ');//viewBox.split(' '); ;//zoominit1.split(' ');  
rlm@46:      }
rlm@46:   if(proporCanvas>proporImage)
rlm@46:    {    
rlm@46:         // add to hImage
rlm@46:         var newHimage = percentRectH * ((hCanvas * percentRectW) / (wCanvas * percentRectH))  ;//newRectH *
rlm@46:         var diffImages=newHimage-h;
rlm@46:         cornerNEy = parseFloat(tokens[1]) - (diffImages / 2);
rlm@46:         var wi=percentRectW;
rlm@46:         var he=newHimage;//hImage+percentY+addHimage; 
rlm@46:         zoominit=viewBox;                                    
rlm@46:       proporx =wFront/wi;
rlm@46:       propory = wFront/wi; 
rlm@46:      
rlm@46:      zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;
rlm@46:      zoominit2=zoominit1; 
rlm@46:      tokensZoom=zoominit1.split(' '); 
rlm@46:  
rlm@46:    } 
rlm@46: 
rlm@46: 
rlm@46:   }
rlm@46: }
rlm@46: 
rlm@46: 
rlm@46: 
rlm@46: VMLRenderer.prototype.zoomFrame = function(zoom){ 
rlm@46:    myOPF.viewBox=zoom;  
rlm@46:    load(myOPF,c);
rlm@46:    document.getElementById("source").value=myOPF.toJSONString();
rlm@46: }
rlm@46: VMLRenderer.prototype.rectDoc = function(viewBox) {
rlm@46:      var tokens2 = zoominit2.split(' ');    
rlm@46:      var tokens = zoominit.split(' ');
rlm@46:   var shape = document.getElementById('rectDoc');
rlm@46:   if (shape) {
rlm@46:     this.remove(shape);
rlm@46:   } 
rlm@46:   var rect=this.container.ownerDocument.createElement('v:rect');
rlm@46:   rect.id='rectDoc';
rlm@46:   rect.style.position = 'absolute';
rlm@46:   rect.style.left =-parseInt(tokens2[0]); 
rlm@46:   rect.style.top = -parseInt(tokens2[1]);
rlm@46:   rect.style.width = parseInt(tokens[2]);
rlm@46:   rect.style.height = parseInt(tokens[3]);
rlm@46:   rect.setAttribute('filled', 'false');
rlm@46:    rect.setAttribute('stroked', 'true'); 
rlm@46:   rect.setAttribute('strokeweight', 2); 
rlm@46:   rect.setAttribute('strokecolor',"#ff0000"); 
rlm@46:    //this.container.appendChild(rect);
rlm@46:    //this.container.insertBefore(rect, this.container.firstChild );
rlm@46:   //alert(docx+' '+docy+' '+docw+' '+doch+' '+viewBox) 
rlm@46: }   
rlm@46: VMLRenderer.prototype.rectCanvas = function(docx,docy,docw,doch,viewBox) {
rlm@46:   
rlm@46:      var tokens = zoominit1.split(' ');    
rlm@46:   var shape = document.getElementById('rectCanvas');
rlm@46:   if (shape) {
rlm@46:     this.remove(shape);
rlm@46:   }
rlm@46:   
rlm@46:   var rect=this.container.ownerDocument.createElement('v:rect');
rlm@46:   rect.id='rectBackground'; 
rlm@46:   rect.style.position = 'absolute';
rlm@46:   rect.style.left = tokens[0] ;
rlm@46:   rect.style.top =tokens[1];
rlm@46:   rect.style.width=tokens[2];
rlm@46:   rect.style.height= tokens[3] ;  
rlm@46:   rect.setAttribute('filled', 'true');
rlm@46:   rect.setAttribute('fillcolor',"#666666"); 
rlm@46:   rect.setAttribute('stroked', 'false');  
rlm@46:   
rlm@46:    this.container.insertBefore(rect, this.container.firstChild );
rlm@46:   
rlm@46: }
rlm@46: 
rlm@46: VMLRenderer.prototype.removeAll = function(){
rlm@46: 	while (this.container.hasChildNodes()) {
rlm@46: 		this.container.removeChild(this.container.firstChild);
rlm@46: 	}
rlm@46: }   
rlm@46: 
rlm@46: function VMLviewBox(container,left,top,width,height){
rlm@46:   var tokens = zoominit2.split(' ');  
rlm@46:   left *= proporx;
rlm@46:   left = left - parseFloat(tokens[0]);
rlm@46:   top *= propory; 
rlm@46:   top = top - parseFloat(tokens[1]);   
rlm@46:   width *= proporx;
rlm@46:   height *= propory; 
rlm@46:   
rlm@46:   return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};
rlm@46: }   
rlm@46: function VMLviewBox1(container,left,top,width,height){
rlm@46:   var tokens = zoominit2.split(' ');  
rlm@46:   left *= proporx;
rlm@46:   left = left - parseFloat(tokens[0]);
rlm@46:   top *= propory; 
rlm@46:   top = top - parseFloat(tokens[1]);   
rlm@46:   width *= proporx;
rlm@46:   height *= propory; 
rlm@46:   
rlm@46:   return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};
rlm@46: }   
rlm@46: 
rlm@46: VMLRenderer.prototype.create = function(shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent) {
rlm@46:    var tokens = zoominit2.split(' ');  
rlm@46: 
rlm@46:    var zoom=VMLviewBox(this.container,left,top,width,height);
rlm@46:    
rlm@46:    left=zoom.x;  
rlm@46:    top=zoom.y;
rlm@46:    width=zoom.w;
rlm@46:    height=zoom.h;
rlm@46: 
rlm@46:    var zoom=VMLviewBox(this.container,left,top,textSize,textSize);
rlm@46:    //if(zoom.w<1){zoom.w=1}    
rlm@46:    if(zoom.y== undefined){left=0}
rlm@46:    if(zoom.x== undefined){top=0} 
rlm@46:    if(zoom.w== undefined){width=0}   
rlm@46:    if(zoom.h== undefined){height=0}
rlm@46:    textSize=zoom.h;  
rlm@46: 
rlm@46:    var zoom=VMLviewBox(this.container,left,top,lineWidth*2/3,lineWidth);
rlm@46:    //if(zoom.w<1){zoom.w=1}
rlm@46:    lineWidth=zoom.w;  
rlm@46:    var vml;
rlm@46:  var shap=1;
rlm@46:   if (shape == 'rect') { 
rlm@46:   
rlm@46:     vml = this.container.ownerDocument.createElement('v:rect');  
rlm@46:     vml.style.position = 'absolute';
rlm@46:     vml.style.left = left; 
rlm@46:     vml.style.top = top;
rlm@46:     vml.style.width = width;
rlm@46:     vml.style.height = height;
rlm@46:   }
rlm@46:   else if (shape == 'roundrect') {
rlm@46:             vml = this.container.ownerDocument.createElement('v:roundrect'); 
rlm@46:             vml.style.position = 'absolute';
rlm@46:             vml.style.left = left;
rlm@46:             vml.style.top = top;
rlm@46:             vml.style.width = width;    
rlm@46:             vml.style.height = height;
rlm@46:             vml.setAttribute('arcsize', '20%');   
rlm@46:             
rlm@46:   }
rlm@46:   else if (shape == 'ellipse') {
rlm@46:     vml = this.container.ownerDocument.createElement('v:oval');  
rlm@46:     vml.style.left = left;
rlm@46:     vml.style.top = top;
rlm@46:     vml.style.width = width; 
rlm@46:     vml.style.height = height;
rlm@46:     vml.style.position = 'absolute';
rlm@46:   }
rlm@46:   else if (shape == 'line') {  
rlm@46:     
rlm@46:     vml = this.container.ownerDocument.createElement('v:line'); 
rlm@46:     vml.setAttribute('from', left + 'px,' + top + 'px');
rlm@46:     vml.setAttribute('to', (left+width) + 'px,' + (top+height) + 'px');
rlm@46: 
rlm@46:   }   
rlm@46:   else if (shape == 'polyline') {
rlm@46:     vml = this.container.ownerDocument.createElement('v:polyline');
rlm@46:     vml.setAttribute("points", points); 
rlm@46:     
rlm@46:   }    
rlm@46:   else if (shape == 'path') 
rlm@46:    {   
rlm@46:     vml = this.container.ownerDocument.createElement('v:shape');  
rlm@46:     var tokens = zoominit1.split(' ');  
rlm@46:     var tokens1 = zoominit1.split(' ');         
rlm@46:     var tokens2 = zoominit2.split(' ');   
rlm@46:     tokens[0]=0;
rlm@46:     tokens[1]=0;
rlm@46:     var path=points;
rlm@46:     path=path.replace(/, /g, ','); 
rlm@46:     path=path.replace(/ ,/g, ',');
rlm@46:     var ps =path.split(" ")
rlm@46:     var pcc = "";
rlm@46:    
rlm@46:     var re = /^[-]?\d*\.?\d*$/; 
rlm@46:     var contArc=0; 
rlm@46:     var isArc=false;
rlm@46:     for(var i = 0; i < ps.length; i++)
rlm@46:     { 
rlm@46:      if(ps[i].indexOf(',')>0){  
rlm@46:       
rlm@46:        var point =ps[i].split(","); 
rlm@46:        var char1=point[0].substring(0,1); 
rlm@46:      
rlm@46:        if (!char1.match(re))        
rlm@46:         { 
rlm@46:            var num0prev= parseFloat(point[0].substring(1));
rlm@46:            var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));
rlm@46:            num0=zoom.x;  
rlm@46:    
rlm@46:            var text=char1;
rlm@46:         }else{ 
rlm@46:             var num0prev= parseFloat(point[0]);
rlm@46:             var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));
rlm@46:             num0=zoom.x;  
rlm@46:   
rlm@46:         }  
rlm@46:        point[1]= parseFloat(point[1]);  
rlm@46:        var zoom=VMLviewBox(this.container,0,point[1],parseInt(tokens2[2]),parseInt(tokens2[3]));
rlm@46:        point[1]=zoom.y;  
rlm@46:        var cx=num0+parseInt(tokens2[0]); 
rlm@46:        var cy=point[1]+parseInt(tokens2[1]);   
rlm@46:        pcc+=text+cx+','+cy+' ';
rlm@46:      }
rlm@46:       else
rlm@46:      {  
rlm@46:         pcc+=ps[i]+' ';
rlm@46:      }
rlm@46:    
rlm@46:     }
rlm@46:    ////////////////////   
rlm@46:     var thispath=pcc;
rlm@46:     thispath=thispath.replace(/M/g,'m');
rlm@46:     thispath=thispath.replace(/C/g,'c');  
rlm@46:     thispath=thispath.replace(/L/g,'l'); 
rlm@46:     thispath=thispath.replace(/z/g,'x');      
rlm@46:    
rlm@46:    //document.getElementById('source').value=points+'\r\n'+thispath +'\r\n'+'________'+'\r\n'
rlm@46:    var zoom=VMLviewBox(this.container,tokens[0],tokens[1],tokens[2],tokens[3]);
rlm@46:    
rlm@46:     vml.style.position="absolute";  
rlm@46:     vml.style.width= zoom.w+"px";
rlm@46:     vml.style.height=zoom.h+"px";
rlm@46:     vml.style.left=zoom.x+"px";  
rlm@46:     vml.style.top=zoom.y+"px";    
rlm@46:     vml.setAttribute('coordsize', zoom.w+','+zoom.h); 
rlm@46:  
rlm@46:     var path01 = this.container.ownerDocument.createElement('v:path');  
rlm@46:     path01.setAttribute("v", thispath+' e'); 
rlm@46:  
rlm@46:  
rlm@46:     
rlm@46:     vml.appendChild(path01)
rlm@46:     
rlm@46:    }
rlm@46:    
rlm@46:    else if (shape == 'controlpath')
rlm@46:    {
rlm@46:     
rlm@46:     vml = this.container.ownerDocument.createElement('v:shape');  
rlm@46:       vml.style.position="absolute";  
rlm@46:     vml.style.width= 700+"px";
rlm@46:     vml.style.height=500+"px";
rlm@46:     vml.style.left=left+"px";  
rlm@46:     vml.style.top=top+"px";  
rlm@46:     vml.setAttribute('coordsize', '700,500');   
rlm@46:      
rlm@46:     var path01 = this.container.ownerDocument.createElement('v:path');  
rlm@46:     path01.setAttribute('v', 'm '+left+','+top+' c'+(left+1)+','+(top+1)+' e ');  
rlm@46: 
rlm@46:      vml.appendChild(path01)
rlm@46:     } 
rlm@46:     else if (shape == 'image') {   
rlm@46:      var data =imageHref;//document.forms[0].option_text_message.value;
rlm@46:      vml = this.container.ownerDocument.createElement('v:image'); 
rlm@46:      vml.setAttribute('src',imageHref);
rlm@46:      vml.style.position="absolute";  
rlm@46:      vml.style.width=width+"px";
rlm@46:      vml.style.height=height+"px";
rlm@46:      vml.style.left=left+"px";  
rlm@46:      vml.style.top=top+"px";  
rlm@46:      vml.style.margin=0+"px";  
rlm@46:      vml.style.padding=0+"px";  
rlm@46:      if (fillColor != ''  || fillColor != 'none') {
rlm@46:        vml.setAttribute('filled', 'false');
rlm@46:        vml.setAttribute('fillcolor', fillColor);
rlm@46:      }
rlm@46:      else {
rlm@46:        vml.setAttribute('filled', 'false');
rlm@46:      }
rlm@46:     vml.setAttribute('strokeweight','0px');// parseFloat(lineWidth)+'px');
rlm@46:    vml.setAttribute('stroked', 'false');  
rlm@46:    vml.setAttribute('strokecolor','#000000');//lineColor);
rlm@46:    
rlm@46:    
rlm@46:     }
rlm@46:     
rlm@46:  else if (shape == 'text') 
rlm@46:   {   
rlm@46:    
rlm@46:     var data =textMessaje;
rlm@46:     vml = this.container.ownerDocument.createElement('v:shape');
rlm@46:     vml.style.position="absolute";  
rlm@46:     //vml.setAttribute('coordorigin',left+', '+top);
rlm@46:      //vml.style.coorsize= '';
rlm@46:      coordorigin="0, 0" 
rlm@46:      
rlm@46:      var ts=isNaN(textSize)
rlm@46:      if(ts==true){
rlm@46:      textSize=10;
rlm@46:      }
rlm@46:     vml.style.width= textSize+'px';//tokens[2]+'px'
rlm@46:     vml.style.height=textSize+'px';
rlm@46:     vml.style.left=(left+"px");  
rlm@46:     vml.style.top=(top-(textSize*1/4)+"px");  
rlm@46:     vml.style.margin=0+"px"; 
rlm@46:      vml.style.padding=0+"px";  
rlm@46:      vml.setAttribute('path','m '+0+' '+0+' r '+(textSize*data.length)+' '+0+' e'); 
rlm@46:      var textPathObj = this.container.ownerDocument.createElement("v:textpath");
rlm@46:      textPathObj.setAttribute('string', data); 
rlm@46:       textPathObj.setAttribute('fitshape','false'); 
rlm@46:      textPathObj.setAttribute('trim', 'false'); 
rlm@46:      textPathObj.setAttribute('fitpath', 'false');
rlm@46:      textPathObj.setAttribute('on','true');  
rlm@46:      textPathObj.style.fontFamily=textFamily;  
rlm@46:      textPathObj.style.fontSize=textSize+'px'; 
rlm@46:      textPathObj.setAttribute('vTextKern','true');  
rlm@46:      textPathObj.setAttribute('text-align','center');  
rlm@46:      
rlm@46:       var pathObj = this.container.ownerDocument.createElement("v:path");
rlm@46:      pathObj.setAttribute('textpathok', 'true');  
rlm@46:       vml.appendChild(textPathObj);  
rlm@46:      vml.appendChild(pathObj);  
rlm@46:     
rlm@46:     
rlm@46:   }    
rlm@46: 
rlm@46: 
rlm@46:     
rlm@46:  else if (shape == 'texto') 
rlm@46:   {  
rlm@46:     vml = this.container.ownerDocument.createElement('v:shape');
rlm@46:     vml.style.position="absolute";  
rlm@46:    
rlm@46:      vml.style.coordsize=1000+', '+1000;
rlm@46:     vml.style.width= 1000;
rlm@46:     vml.style.height=1000;
rlm@46:     vml.style.left=left;  
rlm@46:     vml.style.top=top-parseFloat(textSize);  
rlm@46:      
rlm@46:      vml.style.padding=0;  
rlm@46:     var textBox = this.container.ownerDocument.createElement("v:textbox");
rlm@46:      textBox.setAttribute('mso-rotate-with-shape',true)
rlm@46:      var divtext = this.container.ownerDocument.createElement("div");  
rlm@46:      divtext.style.coordorigin=0+', '+(0);      
rlm@46:      divtext.style.margin=0;   
rlm@46:      divtext.style.fontFamily=textFamily; 
rlm@46:      divtext.style.margin=0; 
rlm@46:      divtext.style.padding=0; 
rlm@46:      divtext.style.vRotateLetters=true;
rlm@46:      divtext.style.fontSize=parseFloat(textSize); 
rlm@46:     
rlm@46:      
rlm@46:            
rlm@46:     
rlm@46: 
rlm@46:      
rlm@46:     divtext.style.color=fillColor;
rlm@46:      
rlm@46:      
rlm@46:      
rlm@46:      
rlm@46:      
rlm@46:      //divtext.setAttribute('v-rotate-letters','true');
rlm@46:     if(transform.indexOf('rotate')>=0)
rlm@46:     {
rlm@46:      
rlm@46:       myRotate1=transform.split('rotate(');
rlm@46:       myRotate2=myRotate1[1].split(')');  
rlm@46:       myRotate3=myRotate2[0].split(',');  
rlm@46:      
rlm@46:       //divtext.setAttribute('mso-rotate',myRotate3[0]);
rlm@46:       //textBox.style.msoRotate= myRotate3[0];
rlm@46:       //textBox.style.centerX=myRotate3[1]; 
rlm@46:       //textBox.style.centerY=myRotate3[2];
rlm@46:       //vml.style.rotation= myRotate3[0];
rlm@46:       //vml.style.centerX=myRotate3[1]; 
rlm@46:       //vml.style.centerY=myRotate3[2];
rlm@46:         vml.setAttribute('rotation',myRotate3[0]+'Deg'); 
rlm@46:     }        
rlm@46: 
rlm@46:      divtext.innerHTML=textMessaje;
rlm@46:      textBox.appendChild(divtext);       
rlm@46:     
rlm@46:      vml.appendChild(textBox);  
rlm@46:     
rlm@46:   } 
rlm@46:     else if (shape == 'defs') {
rlm@46:    var vml; 
rlm@46:    
rlm@46:  } 
rlm@46:    
rlm@46:     else if (shape == 'group') {   
rlm@46:     vml = this.container.ownerDocument.createElement('v:group'); 
rlm@46:     vml.style.left=left+"px";  
rlm@46:     vml.style.top=top+"px";  
rlm@46:   }
rlm@46:  
rlm@46:   if(shape == 'zoom' || shape == 'defs') 
rlm@46:   {
rlm@46:         
rlm@46:   }else
rlm@46:   {   
rlm@46:     if(transform.indexOf('rotate')>=0)
rlm@46:     {
rlm@46:       myRotate1=transform.split('rotate(');
rlm@46:       myRotate2=myRotate1[1].split(')');  
rlm@46:       myRotate3=myRotate2[0].split(',');  
rlm@46:      
rlm@46:        vml.style.rotation= myRotate3[0]+'Deg';
rlm@46:        vml.style.centerX=myRotate3[1]; 
rlm@46:        vml.style.centerY=myRotate3[2];
rlm@46:        
rlm@46:     }                                     
rlm@46:        
rlm@46:         if(shape != 'image' )
rlm@46:          {      
rlm@46:             if (lineColor.length == 0){lineColor = 'none';} 
rlm@46:            if (fillColor.length == 0){fillColor = 'none';} 
rlm@46:            (fillColor!=''|| fillColor!=null )?vml.setAttribute('fillcolor', fillColor):vml.setAttribute('filled', 'true');
rlm@46: 
rlm@46:                     if (fillColor != ''  || fillColor != 'none' ) 
rlm@46:                     { 
rlm@46:                       vml.setAttribute('filled', 'true'); 
rlm@46:                       vml.setAttribute('fillcolor', fillColor); 
rlm@46:                       
rlm@46:                     }
rlm@46:                      else 
rlm@46:                     {
rlm@46:                       vml.setAttribute('filled', 'false');
rlm@46:                     }
rlm@46: 
rlm@46:          
rlm@46:                 if(lineWidth==0 || lineWidth=='none' || lineColor== 'none' )    
rlm@46:                 {
rlm@46:                   vml.setAttribute('stroked', 'false');  
rlm@46:                 }
rlm@46:                  else 
rlm@46:                 {  
rlm@46:                   //if(isNaN(lineColor)==false){alert('-'+lineColor+'-');lineColor='#000000';lineWidth=1;}
rlm@46:                   vml.setAttribute('stroked', 'true');
rlm@46:                   vml.setAttribute('strokecolor', lineColor);
rlm@46:                   vml.setAttribute('strokeweight', lineWidth);
rlm@46:                   var stroke = this.container.ownerDocument.createElement('v:stroke'); 
rlm@46:                   stroke.setAttribute("opacity", parseFloat(lineOpac));
rlm@46:                   vml.appendChild(stroke);
rlm@46:                   
rlm@46:                 }
rlm@46: 
rlm@46:                if (fillOpac != '') 
rlm@46:                 { 
rlm@46:                   if (fillOpac == 'none' || fillColor=='none'){fillOpac=0;}
rlm@46:                   var fill = this.container.ownerDocument.createElement('v:fill'); 
rlm@46:                   fill.setAttribute("opacity",parseFloat(fillOpac));  
rlm@46:                   //alert(fillOpac)
rlm@46:                   vml.appendChild(fill);
rlm@46:                 }
rlm@46:           }     
rlm@46:   } 
rlm@46:   if(parent==''){   
rlm@46:    if(vml){
rlm@46:    this.container.appendChild(vml);}
rlm@46:   }else{ 
rlm@46:     if(document.getElementById(parent)){ 
rlm@46:      var parentShape = document.getElementById(parent);
rlm@46:      if(vml||vml!=null ){ 
rlm@46:       parentShape.appendChild(vml);
rlm@46:      } 
rlm@46:     } 
rlm@46:   }  
rlm@46:    //var parentDoc = document.getElementById('mydraw');
rlm@46:    //parentDoc.appendChild(vml);
rlm@46:   return vml;
rlm@46: };   
rlm@46: 
rlm@46: VMLRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {
rlm@46:    var deltaX = toX - fromX;
rlm@46:    var deltaY = toY - fromY;  
rlm@46:   if (shape.tagName == 'rect' ) 
rlm@46:    { 
rlm@46:     
rlm@46:  
rlm@46:       if (deltaX < 0) {
rlm@46:          shape.style.left=toX + 'px';
rlm@46:          shape.style.width=-deltaX + 'px';
rlm@46:        }
rlm@46:         else
rlm@46:        {
rlm@46:          shape.style.width= deltaX + 'px';
rlm@46:        }
rlm@46:   
rlm@46:       if (deltaY < 0) 
rlm@46:        {
rlm@46:         shape.style.top=toY + 'px';
rlm@46:         shape.style.height=-deltaY + 'px';
rlm@46:        }
rlm@46:         else 
rlm@46:        {
rlm@46:         shape.style.height=deltaY + 'px';
rlm@46:        }
rlm@46:     }
rlm@46: }  
rlm@46: VMLRenderer.prototype.duplicate = function(shape) 
rlm@46:  {
rlm@46:    var vml;
rlm@46:    vml =shape.cloneNode(false);
rlm@46:    //vml.setAttribute('fillcolor', "#aa00aa");
rlm@46:    vml.setAttribute('filled', "false");
rlm@46:    this.container.appendChild(vml);
rlm@46:   return vml;
rlm@46:   
rlm@46:  };
rlm@46: VMLRenderer.prototype.querySelected = function(shape,centerx,centery,width,height)
rlm@46: { 
rlm@46:  var result = true;
rlm@46:   var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';
rlm@46: 
rlm@46:  //if(shape.getBBox && shape) 
rlm@46:   if( shapes.indexOf(' '+shape.tagName+',')>0)
rlm@46:   {
rlm@46:  
rlm@46:   var box =  this.bounds(shape);
rlm@46:  }else
rlm@46:  {
rlm@46:   return false;
rlm@46:  }
rlm@46:  var p1x = box.x;
rlm@46:   if(Math.abs(p1x-centerx)>width){result = false}
rlm@46:  
rlm@46:  var p1y = box.y;
rlm@46:  if(Math.abs(p1y-centery)>height){result = false}
rlm@46:  
rlm@46:  var p2x = box.x+box.width;
rlm@46:  if(Math.abs(p2x-centerx)>width){result = false}
rlm@46: 
rlm@46:  var p2y = box.y;
rlm@46:  if(Math.abs(p2y-centery)>height){result = false}
rlm@46:  
rlm@46:  var p3x = box.x+box.width;
rlm@46:  if(Math.abs(p3x-centerx)>width){result = false}
rlm@46: 
rlm@46:  var p3y = box.y+box.height;                    
rlm@46:  if(Math.abs(p3y-centery)>height){result = false}
rlm@46:   
rlm@46:  var p4x = box.x;
rlm@46: if(Math.abs(p4x-centerx)>width){result = false}
rlm@46:  
rlm@46:  var p4y = box.y+box.height;
rlm@46:  if(Math.abs(p4y-centery)>height){result = false}
rlm@46:  
rlm@46:  if(result)
rlm@46:   {
rlm@46:     return { 'in':result, 'cornersx': p1x+','+p2x+','+p3x+','+p4x+',' ,'cornersy': p1y+','+p2y+','+p3y+','+p4y+',' };
rlm@46:   }
rlm@46:    else
rlm@46:   { 
rlm@46:      return { 'in':result } 
rlm@46:   }
rlm@46: //center.distanceFrom(point1);
rlm@46:  
rlm@46: 
rlm@46: }
rlm@46: 
rlm@46: VMLRenderer.prototype.searchBoxes = function()
rlm@46: {  
rlm@46:  var base = this.container;
rlm@46: 
rlm@46:  var  NumNodes = base.childNodes.length;
rlm@46:  var chain= '';
rlm@46:  for(i = 0;i < NumNodes;i++)
rlm@46:   {       
rlm@46:      if (this.bounds(base.childNodes[i]))
rlm@46:       {
rlm@46:         chain+=base.childNodes[i].id + ';'
rlm@46:       }
rlm@46:   }
rlm@46:   chain+=''
rlm@46:   return chain;
rlm@46: 
rlm@46: }  
rlm@46: 
rlm@46: VMLRenderer.prototype.DrawBorder= function(numNode, targetElement )
rlm@46: {   
rlm@46:   var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';
rlm@46: 
rlm@46:  //if(shape.getBBox && shape) 
rlm@46:   if( shapes.indexOf(' '+targetElement.tagName+',')>0)
rlm@46:   {
rlm@46:    var bbox = this.bounds(targetElement);
rlm@46: 
rlm@46:    var outline = this.container.ownerDocument.createElement('v:rect');  
rlm@46:    outline.setAttribute('x', bbox.x - 2 );
rlm@46:    outline.setAttribute('y', bbox.y - 2 );
rlm@46:    outline.setAttribute('width',  bbox.width + 4 );
rlm@46:    outline.setAttribute('height', bbox.height + 4 );
rlm@46:    outline.setAttribute('stroke', '#ff00ff' );
rlm@46:    outline.setAttribute('fill', 'none' );
rlm@46:    outline.setAttribute('id', 'shapeBoxed'+numNode );
rlm@46: 
rlm@46:    targetElement.parentNode.insertBefore( outline, targetElement );
rlm@46:    return 'shapeBoxed'+numNode; 
rlm@46:   } 
rlm@46:    else 
rlm@46:   {
rlm@46:    return false
rlm@46:   }
rlm@46: }
rlm@46: 
rlm@46: 
rlm@46: VMLRenderer.prototype.getMarkup = function() { 
rlm@46:       
rlm@46:   //return this.container.parentNode.innerHTML;  
rlm@46:   return this.container.innerHTML;
rlm@46: }
rlm@46: 
rlm@46: VMLRenderer.prototype.remove = function(shape) {
rlm@46:   if(shape!=null){ shape.removeNode(true); }
rlm@46: } 
rlm@46: 
rlm@46: VMLRenderer.prototype.removeAll = function() {  
rlm@46:  while( this.container.hasChildNodes () ){
rlm@46:    this.container.removeChild( this.container.firstChild );
rlm@46:    //this.container.removeNode( this.container.firstChild );
rlm@46:  } 
rlm@46: }
rlm@46: 
rlm@46: VMLRenderer.prototype.editCommand = function(shape, cmd, value)
rlm@46: {
rlm@46:   if (shape != null) {
rlm@46:     if (cmd == 'fillcolor') {
rlm@46:       if (value == '' || value =='none')
rlm@46:         shape.style.fill='none';
rlm@46:       else
rlm@46:         shape.style.fill=value;
rlm@46:     }
rlm@46:     else if (cmd == 'linecolor') {
rlm@46:       if (value != '')
rlm@46:         shape.style.stroke=value;
rlm@46:       else
rlm@46:         shape.style.stroke='none';
rlm@46:     }
rlm@46:     else if (cmd == 'linewidth') { 
rlm@46:       if( value=='none' || value=='')
rlm@46:        {
rlm@46:         shape.style.strokeWidth=0;
rlm@46:        }else{
rlm@46:         shape.style.strokeWidth=parseInt(value) + 'px';
rlm@46:        } 
rlm@46:     } 
rlm@46:     else if (cmd == 'fillopacity') {
rlm@46:            if(shape.tagName=='image')
rlm@46:             {
rlm@46:              shape.style.opacity=parseFloat(value);
rlm@46:             }
rlm@46:              else
rlm@46:             {
rlm@46:                 shape.style.fillOpacity=parseFloat(value);
rlm@46:             }    
rlm@46:       
rlm@46:     }
rlm@46:     else if (cmd == 'lineopacity') {         
rlm@46:       
rlm@46:       shape.style.strokeOpacity=parseFloat(value);
rlm@46:       
rlm@46:     }
rlm@46:     else if (cmd == 'filter') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:         //shape.style.setProperty("filter", value) ;
rlm@46:          shape.style.filter=value;
rlm@46:          //alert(value)
rlm@46:         }
rlm@46:      }  
rlm@46:     else if (cmd == 'textContent') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:          shape.textContent=value;
rlm@46:         }
rlm@46:      }   
rlm@46:      else if (cmd == 'textSize') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.fontSize=parseFloat(eval(value));
rlm@46:         }
rlm@46:      }
rlm@46:      else if (cmd == 'textFamily') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.fontFamily=value;
rlm@46:         }
rlm@46:      } 
rlm@46:     else if (cmd == 'textSpacing') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.letterSpacing=''+value+'em';
rlm@46:           //alert(value) //bad letter-spacing word-spacing
rlm@46:         }
rlm@46:      } 
rlm@46:     else if (cmd == 'textLength') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           //shape.style.=''+value+'';
rlm@46:           shape.style.lengthAdjust='spacing';//spacing spacingAndGlyphs
rlm@46:           //alert(value) //bad textLength
rlm@46:         }
rlm@46:      } 
rlm@46:      
rlm@46:      
rlm@46:     else if (cmd == 'textAnchor') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.textAnchor=value;
rlm@46:         }
rlm@46:      }
rlm@46:     else if (cmd == 'textWeight') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.fontWeight=value;
rlm@46:         }
rlm@46:      }  
rlm@46:     else if (cmd == 'textStyle') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.fontStyle=value;
rlm@46:         }
rlm@46:      }
rlm@46:     else if (cmd == 'textDecoration') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.textDecoration=value;
rlm@46:         }  
rlm@46:           //alert(value) //bad  textDecoration
rlm@46:      }                  
rlm@46:     else if (cmd == 'textMode') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.writingMode=value;
rlm@46:         }
rlm@46:      } 
rlm@46:     else if (cmd == 'textDirection') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.direction=value;
rlm@46:         }
rlm@46:      }  
rlm@46:     else if (cmd == 'textOrientation') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.glyphOrientationVertical=value;
rlm@46:         }
rlm@46:      } 
rlm@46:     else if (cmd == 'stopcolor') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         {                
rlm@46:           shape.style.stopColor=value;
rlm@46:         }
rlm@46:      } 
rlm@46:     else if (cmd == 'linearGradient') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         { 
rlm@46:           shape.style.x1=value.x1;
rlm@46:           shape.style.y1=value.y1;
rlm@46:           shape.style.x2=value.x2;
rlm@46:           shape.style.y2=value.y2;
rlm@46:         }
rlm@46:      }  
rlm@46:     else if (cmd == 'radialGradient') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         { 
rlm@46:           shape.style.x1=value.x1;
rlm@46:           shape.style.y1=value.y1;
rlm@46:           shape.style.x2=value.x2;
rlm@46:           shape.style.y2=value.y2;
rlm@46:         }
rlm@46:      }  
rlm@46:     else if (cmd == 'leftTop') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         { 
rlm@46:           shape.style.left=parseInt(value.left)+'px';
rlm@46:           shape.style.top=parseInt(value.top)+'px';
rlm@46:           
rlm@46:         }
rlm@46:      }  
rlm@46:     else if (cmd == 'cxcy') 
rlm@46:      {
rlm@46:        if (value != '')
rlm@46:         { 
rlm@46:           shape.style.cx=value.cx;
rlm@46:           shape.style.cy=value.cy;
rlm@46:           
rlm@46:         }
rlm@46:      }  
rlm@46:  
rlm@46:   }
rlm@46: }
rlm@46: 
rlm@46: 
rlm@46: VMLRenderer.prototype.queryCommand = function(shape, cmd)
rlm@46: {
rlm@46:   var result = '';
rlm@46:   
rlm@46:   if (shape != null) {
rlm@46:     if (cmd == 'fillcolor') {
rlm@46:       result = shape.style.fill;
rlm@46:       if (result == 'none')
rlm@46:         result = '';
rlm@46:     }
rlm@46:     else if (cmd == 'linecolor') {
rlm@46:       result = shape.style.stroke;
rlm@46:       if (result == 'none')
rlm@46:         result = '';
rlm@46:     }
rlm@46:     else if (cmd == 'linewidth') {
rlm@46:       result = shape.style.stroke;
rlm@46:       if (result == 'none')
rlm@46:         result = '';
rlm@46:       else
rlm@46:         result = shape.style.strokeWidth;
rlm@46:     }
rlm@46:     else if (cmd == 'fillopacity') {
rlm@46:            if(shape.tagName=='image')
rlm@46:             {
rlm@46:              result= shape.style.opacity;
rlm@46:             }
rlm@46:              else
rlm@46:             {
rlm@46:              result= shape.style.fillOpacity;
rlm@46:             }    
rlm@46:       
rlm@46:     }
rlm@46:     else if (cmd == 'lineopacity') {         
rlm@46:       
rlm@46:      result= shape.style.strokeOpacity;
rlm@46:       
rlm@46:     }
rlm@46:     else if (cmd == 'text') {         
rlm@46:          var text1=shape.textContent;
rlm@46:          var text2=shape.style.fontFamily;
rlm@46:          var text3=parseInt(shape.style.fontSize);
rlm@46:       
rlm@46:       result= {"data":text1,"family":text2,"size":text3};
rlm@46:       
rlm@46:     } 
rlm@46:     else if (cmd == 'points') {         
rlm@46:          result=shape.style,d;
rlm@46:       
rlm@46:     }    
rlm@46:     else if (cmd == 'stopcolor') {         
rlm@46:          result=shape.style.stopColor
rlm@46:       
rlm@46:     }
rlm@46:     else if (cmd == 'box') {         
rlm@46:       result= this.bounds(shape);
rlm@46:       
rlm@46:     }
rlm@46:     else if (cmd == 'linearGradient') {         
rlm@46:          var x1=shape.style.x1;
rlm@46:          var y1=shape.style.y1;
rlm@46:          var x2=shape.style.x2;
rlm@46:          var y2=shape.style.y2;
rlm@46:       result= {"x1":x1,"y1":y1,"x2":x2,"y2":y2};
rlm@46:       
rlm@46:     }
rlm@46:  
rlm@46:  
rlm@46:   }
rlm@46:   
rlm@46:   return result;
rlm@46: } 
rlm@46: 
rlm@46:  VMLRenderer.prototype.showTracker01 = function(shape) {
rlm@46:   var box = this.bounds(shape);
rlm@46: 
rlm@46:   var tracker = document.getElementById('tracker');
rlm@46:   if (tracker) {
rlm@46:     this.remove(tracker);
rlm@46:   }
rlm@46: 
rlm@46:   tracker = this.container.ownerDocument.createElement('v:rect');
rlm@46:   tracker.id = 'tracker';
rlm@46:   tracker.style.position = 'absolute';
rlm@46:   tracker.style.left = box.x - 10;
rlm@46:   tracker.style.top = box.y - 10;
rlm@46:   tracker.style.width = box.width + 20;
rlm@46:   tracker.style.height = box.height + 20;
rlm@46:   tracker.setAttribute('filled', 'false');
rlm@46:   tracker.setAttribute('stroked', 'true');
rlm@46:   tracker.setAttribute('strokecolor', 'blue');
rlm@46:   tracker.setAttribute('strokeweight', '1px');
rlm@46:   this.container.appendChild(tracker);
rlm@46: }
rlm@46: 
rlm@46: 
rlm@46: VMLRenderer.prototype.showTracker = function(shape) {
rlm@46:   var box = this.bounds(shape);  
rlm@46:    //alert(box.width+' '+shape.id)
rlm@46:   var trshape = parseFloat(shape.getAttribute('rotation'));  
rlm@46:   var tracker = document.getElementById('tracker');
rlm@46: 
rlm@46:   if (tracker) {
rlm@46:     this.remove(tracker);
rlm@46:   }
rlm@46:   
rlm@46:   if (shape.tagName == 'shape') 
rlm@46:    { 
rlm@46:       shap=2; 
rlm@46:       if(shape.children[0].tagName == 'path') 
rlm@46:        {
rlm@46:       
rlm@46:             /* $('option_path_trx').value= box.x;  
rlm@46:              $('option_path_try').value= box.y;
rlm@46:              $('option_path_sclx').value= box.width;   
rlm@46:              $('option_path_scly').value= box.height; 
rlm@46:              $('option_path_rot').value= shape.style.rotation;
rlm@46:              */  
rlm@46:              //var path=shape.children[0].getAttribute('v');
rlm@46:              // $('control_codebase').value=path;
rlm@46:        }        
rlm@46:    }     
rlm@46:   if (shape.tagName == 'rect') { 
rlm@46:    /*  
rlm@46:      $('option_rect_rot').value= shape.getAttribute('rotation');
rlm@46:      $('option_rect_trx').value= box.x;  
rlm@46:      $('option_rect_try').value= box.y;
rlm@46:      $('option_rect_sclx').value= box.width;  
rlm@46:      $('option_rect_scly').value= box.height;
rlm@46:      */
rlm@46:   }  
rlm@46: 
rlm@46:   if (shape.tagName == 'image'){
rlm@46:   /*  $('option_img_trx').value= box.x; 
rlm@46:     $('option_img_try').value= box.y;
rlm@46:     $('option_img_sclx').value= box.width;  
rlm@46:     $('option_img_scly').value= box.height;
rlm@46:     $('option_img_rot').value= T.b* (Math.PI * 2 / 360);   
rlm@46:       */
rlm@46:   }
rlm@46:   if (shape.tagName == 'text'){
rlm@46:    /* f$('option_text_trx').value= box.x; 
rlm@46:     $('option_text_try').value= box.y;
rlm@46:     $('option_text_sclx').value= box.width;  
rlm@46:     $('option_text_scly').value= box.height;
rlm@46:     $('option_text_rot').value= T.b* (Math.PI * 2 / 360);
rlm@46:    */
rlm@46:   }
rlm@46:   if (shape.tagName == 'line'){ 
rlm@46:     /*
rlm@46:     $('option_line_trx').value= box.x;  
rlm@46:     $('option_line_try').value= box.y;
rlm@46:     */
rlm@46:   }   
rlm@46:   if (shape.tagName == 'oval'){  
rlm@46:     /*$('option_ellipse_trx').value= putx;  
rlm@46:     $('option_ellipse_try').value= puty;
rlm@46:     $('option_ellipse_sclx').value= box.width;  
rlm@46:     $('option_ellipse_scly').value= box.height;
rlm@46:     $('option_ellipse_rot').value= T.b* (Math.PI * 2 / 360);
rlm@46:     */
rlm@46:   }
rlm@46:   
rlm@46:   
rlm@46:   
rlm@46:  /*var matrix = shape.getScreenCTM();
rlm@46:   var trshape= shape.getAttribute('transform');  
rlm@46:   var shap=1;
rlm@46:   if (shape.tagName == 'path') { shap=2; 
rlm@46:         
rlm@46:         
rlm@46:         
rlm@46:   }
rlm@46:   */  
rlm@46:   //if (shape.getAttribute('transform') ) { shap=2; } 
rlm@46:   //var svgNamespace = 'http://www.w3.org/2000/svg';
rlm@46:   
rlm@46:    tracker = this.container.ownerDocument.createElement('v:group');
rlm@46:    tracker.id = 'tracker'; 
rlm@46:   //tracker.setAttribute('rotation',trshape);
rlm@46:   tracker.setAttribute('coordorigin','0, 0');
rlm@46:   //tracker.setAttribute('wrapcoords',true);
rlm@46:  
rlm@46:    
rlm@46:   tracker.setAttribute('coordsize',box.width+','+ box.height);
rlm@46:   tracker.style.position = 'absolute';   
rlm@46:   tracker.style.left = box.x ;
rlm@46:   tracker.style.top = box.y;
rlm@46:   tracker.style.width = box.width ;
rlm@46:   tracker.style.height = box.height ;
rlm@46:  
rlm@46:      
rlm@46:     ////////////////
rlm@46: 
rlm@46:                                          
rlm@46:  var corners = [];
rlm@46:   var point = createPoint(box.x, box.y, box.width, box.height);
rlm@46:  //point = {x:box.x, y:box.y, width: box.width, height:box.height};
rlm@46: //point = createPoint(box.x, box.y, box.width, box.height);    
rlm@46:   //1
rlm@46:   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );
rlm@46:   point.x = box.x + box.width;
rlm@46:   point.y = box.y;
rlm@46:   //2
rlm@46:   corners.push( createPoint(box.x + box.width, box.y + box.height, box.width, box.height) );
rlm@46:   point.x = box.x + box.width;
rlm@46:   point.y = box.y + box.height;
rlm@46:   //3
rlm@46:   //corners.push( point.matrixTransform(matrix) );
rlm@46:   corners.push( createPoint(box.x , box.y + box.height, box.width, box.height) );
rlm@46:   point.x = box.x;
rlm@46:   point.y = box.y + box.height;
rlm@46:   //4
rlm@46:   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );   
rlm@46:   
rlm@46:   var max = createPoint(corners[0].x, corners[0].y);
rlm@46:   var min = createPoint(corners[0].x, corners[0].y);
rlm@46:   
rlm@46:   for (var i = 1; i < corners.length; i++) {
rlm@46:     var x = corners[i].x;
rlm@46:     var y = corners[i].y;
rlm@46:     if (x < min.x) {
rlm@46:       min.x = x;
rlm@46:     }
rlm@46:     else if (x > max.x) {
rlm@46:       max.x = x;
rlm@46:     }
rlm@46:     if (y < min.y) {
rlm@46:       min.y = y;
rlm@46:     }
rlm@46:     else if (y > max.y) {
rlm@46:       max.y = y;
rlm@46:     }
rlm@46:   } 
rlm@46:       
rlm@46:       
rlm@46:  var border_square = this.container.ownerDocument.createElement('v:rect');
rlm@46:   
rlm@46:   border_square.style.position = 'relative';
rlm@46:   border_square.style.left = 0 - 10;
rlm@46:   border_square.style.top = 0 - 10;
rlm@46:   border_square.style.width = box.width + 20;
rlm@46:   border_square.style.height = box.height + 20;
rlm@46:   border_square.setAttribute('filled', 'false');
rlm@46:   border_square.setAttribute('stroked', 'true');
rlm@46:   border_square.setAttribute('strokecolor', 'blue');
rlm@46:   border_square.setAttribute('strokeweight', '1px');  
rlm@46:   
rlm@46:   
rlm@46:   var border_angle = this.container.ownerDocument.createElement('v:polyline');  
rlm@46:   border_angle.style.position = 'relative';
rlm@46:  
rlm@46:   border_angle.setAttribute('filled', 'false');
rlm@46:   border_angle.setAttribute('stroked', 'true');
rlm@46:   border_angle.setAttribute('strokecolor', 'blue');
rlm@46:   border_angle.setAttribute('strokeweight', '1px'); 
rlm@46:   border_angle.setAttribute("points", (box.width+10)+","+((box.height/2))+", "+(box.width+10+25)+","+((box.height/2)) );
rlm@46:                   
rlm@46: 
rlm@46:      var circle1 = this.container.ownerDocument.createElement('v:oval'); 
rlm@46:       circle1.style.position = 'relative'; 
rlm@46:         circle1.style.left = ( (box.width+40)-5);
rlm@46:     circle1.style.top = ( (box.height / 2) -5);
rlm@46:     circle1.style.width = (10);
rlm@46:     circle1.style.height = (10);
rlm@46:     circle1.setAttribute('filled', 'true');
rlm@46:    circle1.setAttribute('stroked', 'true'); 
rlm@46:    circle1.setAttribute('fillcolor', '#ffffff');
rlm@46:    circle1.setAttribute('strokecolor', 'green');
rlm@46:    circle1.setAttribute('strokeweight', '1px');
rlm@46: 
rlm@46:    
rlm@46:   var rect1 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rect1.style.position = 'relative';
rlm@46:   rect1.style.left =  - 10-5;
rlm@46:   rect1.style.top =  - 10-5;
rlm@46:   rect1.style.width = 10;
rlm@46:   rect1.style.height = 10;
rlm@46:   rect1.setAttribute('filled', 'true');
rlm@46:   rect1.setAttribute('stroked', 'true'); 
rlm@46:   rect1.setAttribute('fillcolor', '#ffffff');
rlm@46:   rect1.setAttribute('strokecolor', 'green');
rlm@46:   rect1.setAttribute('strokeweight', '1px');
rlm@46: 
rlm@46:     
rlm@46:   var rect2 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rect2.style.position = 'relative';
rlm@46:   rect2.style.left =   box.width +5;
rlm@46:   rect2.style.top = -10 -5;
rlm@46:   rect2.style.width = 10;
rlm@46:   rect2.style.height = 10;
rlm@46:   rect2.setAttribute('filled', 'true');
rlm@46:   rect2.setAttribute('stroked', 'true'); 
rlm@46:   rect2.setAttribute('fillcolor', '#ffffff');
rlm@46:   rect2.setAttribute('strokecolor', 'green');
rlm@46:   rect2.setAttribute('strokeweight', '1px');
rlm@46: 
rlm@46:                                                         
rlm@46:   var rect3 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rect3.style.position = 'relative';
rlm@46:   rect3.style.left =   box.width+5;
rlm@46:   rect3.style.top =  box.height+5;
rlm@46:   rect3.style.width = 10;
rlm@46:   rect3.style.height = 10;
rlm@46:   rect3.setAttribute('filled', 'true');
rlm@46:   rect3.setAttribute('stroked', 'true'); 
rlm@46:   rect3.setAttribute('fillcolor', '#ffffff');
rlm@46:   rect3.setAttribute('strokecolor', 'green');
rlm@46:   rect3.setAttribute('strokeweight', '1px');
rlm@46:    
rlm@46:   var rect4 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rect4.style.position = 'relative';
rlm@46:   rect4.style.left =  -10-5;
rlm@46:   rect4.style.top = box.height+5;
rlm@46:   rect4.style.width = 10;
rlm@46:   rect4.style.height = 10;
rlm@46:   rect4.setAttribute('filled', 'true');
rlm@46:   rect4.setAttribute('stroked', 'true'); 
rlm@46:   rect4.setAttribute('fillcolor', '#ffffff');
rlm@46:   rect4.setAttribute('strokecolor', 'green');
rlm@46:   rect4.setAttribute('strokeweight', '1px');
rlm@46:  
rlm@46:  
rlm@46:  
rlm@46:   var rectmid12 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rectmid12.style.position = 'relative';
rlm@46:   rectmid12.style.left = (box.width/2) -5;
rlm@46:   rectmid12.style.top =- 10-5;
rlm@46:   rectmid12.style.width = 10;
rlm@46:   rectmid12.style.height = 10;
rlm@46:   rectmid12.setAttribute('filled', 'true');
rlm@46:   rectmid12.setAttribute('stroked', 'true'); 
rlm@46:   rectmid12.setAttribute('fillcolor', '#ffffff');
rlm@46:   rectmid12.setAttribute('strokecolor', 'green');
rlm@46:   rectmid12.setAttribute('strokeweight', '1px');
rlm@46: 
rlm@46:  var rectmid23 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rectmid23.style.position = 'relative';
rlm@46:   rectmid23.style.left = box.width +5;
rlm@46:   rectmid23.style.top = (box.height/2)-5;
rlm@46:   rectmid23.style.width = 10;
rlm@46:   rectmid23.style.height = 10;
rlm@46:   rectmid23.setAttribute('filled', 'true');
rlm@46:   rectmid23.setAttribute('stroked', 'true'); 
rlm@46:   rectmid23.setAttribute('fillcolor', '#ffffff');
rlm@46:   rectmid23.setAttribute('strokecolor', 'green');
rlm@46:   rectmid23.setAttribute('strokeweight', '1px');
rlm@46: 
rlm@46:  var rectmid34 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rectmid34.style.position = 'relative';
rlm@46:   rectmid34.style.left = (box.width/2)-5;
rlm@46:   rectmid34.style.top = box.height+5;
rlm@46:   rectmid34.style.width = 10;
rlm@46:   rectmid34.style.height = 10;
rlm@46:   rectmid34.setAttribute('filled', 'true');
rlm@46:   rectmid34.setAttribute('stroked', 'true'); 
rlm@46:   rectmid34.setAttribute('fillcolor', '#ffffff');
rlm@46:   rectmid34.setAttribute('strokecolor', '#000000');
rlm@46:   rectmid34.setAttribute('strokeweight', '1px');
rlm@46: 
rlm@46:  
rlm@46:  var rectmid41 = this.container.ownerDocument.createElement('v:rect');
rlm@46:   rectmid41.style.position = 'relative';
rlm@46:   rectmid41.style.left =  -10-5 ;
rlm@46:   rectmid41.style.top =(box.height/2)-5;
rlm@46:   rectmid41.style.width = 10;
rlm@46:   rectmid41.style.height = 10;
rlm@46:   rectmid41.setAttribute('filled', 'true');
rlm@46:   rectmid41.setAttribute('stroked', 'true'); 
rlm@46:   rectmid41.setAttribute('fillcolor', '#ffffff');
rlm@46:   rectmid41.setAttribute('strokecolor', 'green');
rlm@46:   rectmid41.setAttribute('strokeweight', '1px');
rlm@46:   
rlm@46:        
rlm@46:   
rlm@46: 
rlm@46:      var colorin="#ff0000";
rlm@46:       var colorout="#ffffff" 
rlm@46:     
rlm@46:         circle1.attachEvent("onmouseover", function(event) {circle1.style.cursor= 's-resize';  circle1.setAttribute('fillcolor', colorin ); typeTransform='Rotate'; scaleType='nw'; }, false);
rlm@46:      circle1.attachEvent("onmouseout", function(event) {circle1.style.cursor= 'default';  circle1.setAttribute('fillcolor', colorout ); typeTransform='Rotate'; }, false); //typeTransform='rotate'
rlm@46:      
rlm@46:       
rlm@46:      rect1.attachEvent("onmouseover", function(event) {rect1.style.cursor= 'nw-resize';  rect1.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='nw';  }, false);
rlm@46:      rect1.attachEvent("onmouseout", function(event) {rect1.style.cursor= 'default';  rect1.setAttribute('fillcolor', colorout ); typeTransform='Scale';  }, false); //typeTransform='rotate'
rlm@46:     
rlm@46:      rect2.attachEvent("onmouseover", function(event) {rect2.style.cursor= 'ne-resize';  rect2.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='ne';}, false);  
rlm@46:      rect2.attachEvent("onmouseout", function(event) {rect2.style.cursor= 'default';  rect2.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);
rlm@46:       
rlm@46:      rect3.attachEvent("onmouseover", function(event) {rect3.style.cursor= 'se-resize';  rect3.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='se';}, false);  
rlm@46:      rect3.attachEvent("onmouseout", function(event) {rect3.style.cursor= 'default';  rect3.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);
rlm@46:      
rlm@46:      rect4.attachEvent("onmouseover", function(event) {rect4.style.cursor= 'sw-resize';  rect4.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='sw';}, false);  
rlm@46:      rect4.attachEvent("onmouseout", function(event) {rect4.style.cursor= 'default';  rect4.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);
rlm@46:                                                     
rlm@46:      rectmid12.attachEvent("onmouseover", function(event) {rectmid12.style.cursor= 'n-resize';  rectmid12.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='n';}, false);  
rlm@46:      rectmid12.attachEvent("onmouseout", function(event) {rectmid12.style.cursor= 'default';  rectmid12.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 
rlm@46: 
rlm@46:      rectmid23.attachEvent("onmouseover", function(event) {rectmid23.style.cursor= 'e-resize';  rectmid23.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='e';}, false);  
rlm@46:      rectmid23.attachEvent("onmouseout", function(event) {rectmid23.style.cursor= 'default';  rectmid23.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 
rlm@46:      
rlm@46:      rectmid34.attachEvent("onmouseover", function(event) {rectmid34.style.cursor= 's-resize';  rectmid34.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='s';}, false);  
rlm@46:      rectmid34.attachEvent("onmouseout", function(event) {rectmid34.style.cursor= 'default';  rectmid34.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 
rlm@46: 
rlm@46:      rectmid41.attachEvent("onmouseover", function(event) {rectmid41.style.cursor= 'w-resize';  rectmid41.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='w'; }, false);  
rlm@46:      rectmid41.attachEvent("onmouseout", function(event) {rectmid41.style.cursor= 'default';  rectmid41.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 
rlm@46:    //tracker.setAttribute('transform',trshape); 
rlm@46:  
rlm@46:    
rlm@46:   
rlm@46:   tracker.appendChild(border_square); 
rlm@46:   tracker.appendChild(border_angle);  
rlm@46:    
rlm@46:   tracker.appendChild(circle1);  
rlm@46:   
rlm@46:   tracker.appendChild(rect1);    
rlm@46:   tracker.appendChild(rect2);   
rlm@46:   tracker.appendChild(rect3); 
rlm@46:   tracker.appendChild(rect4);    
rlm@46:   tracker.appendChild(rectmid12);  
rlm@46:   tracker.appendChild(rectmid23);
rlm@46:   tracker.appendChild(rectmid34);
rlm@46:   tracker.appendChild(rectmid41);  
rlm@46:   
rlm@46:   /*
rlm@46:    
rlm@46:   
rlm@46:  
rlm@46:   */
rlm@46: 
rlm@46:    //alert(shape.id)
rlm@46:    this.container.appendChild(tracker);
rlm@46:   
rlm@46: 
rlm@46: 
rlm@46: }