/**
 * This file is part of FlowgorithmJS.
 * Copyright (C) 2018-2024 Andrea Vallorani

 * FlowgorithmJS is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.

 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 * FlowgorithmJS
 * @version 0.17a1
 * @date 2020-05-02
 * @author Andrea Vallorani <andrea.vallorani@gmail.com>
 */
var maxW,flowX=0,funX=0;
var flow;
function drawFlowchartFromUrl(url,selector,options){
    $.ajax({
        type: "GET",
        url: url,
        dataType: "xml",
        cache: false,
        success: function(result) {
            drawFlowchart($(result),selector,options);
        }
    });
}
function drawFlowchartFromSource(source,selector,options){
    drawFlowchart($($.parseXML(source)),selector,options);
}
function drawFlowchart($xml,selector,options){
    //default settings
    options = $.extend(true,{
        aH: 12, //arrow length
        aT: 7, //arrow tip size
        groupInput: false,
        viewDesc: true, //print description
        itMode: 2, //pre-Iteraction style
        labelTrue: "True",
        labelFalse: "False"
    },options);
    //--
    var $output = $(selector);
    $output.trigger("flowgorithmjs:preload");
    flowX=0,funX=0;
    flow = {Y:0,fWidth:0,dim:[]};
    $output.empty();
    if(options.viewDesc){
        var title = $xml.find('attribute[name=name]').attr('value');
        var desc = $xml.find('attribute[name=about]').attr('value');
        $output.append('<div class="desc" style="margin:0;border-bottom:1px solid #aaa;text-align:left">'+desc+'</div>'+
              '<div class="info" style="padding:.5em 0;font-size:.85em;text-align:left">'+
              '<span class="title"><strong>'+title+'</strong> </span>'+
              '<span class="author">'+$xml.find('attribute[name=authors]').attr('value')+' </span>'+
              '<span class="date">'+$xml.find('attribute[name=saved]').attr('value')+' </span>'+
              '<a onclick="downloadSVG(\''+selector+'\',\''+title+'.svg\')" style="cursor:pointer;text-decoration:underline;color:red">Download SVG</a>'+
              '</div>');
    }
    $output.append('<svg class="flowchart" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'+
      '  <style type="text/css"><![CDATA['+
      '  .flowchart{font-size:14px;font-family:Times}'+
      '  .arrow{stroke:#000;stroke-width:1px;marker-end:url(#arrow);fill:none}'+
      '  .line{stroke:#000;stroke-width:1px;fill:none}'+
      '  text{stroke:#000;stroke-width:0;text-anchor:middle}'+
      '  .iotype{font-size:12px;font-style:italic}'+
      '  .symbol{stroke:#000;stroke-width:1px;fill:#fff}'+
      '  ]]></style> '+
      '  <defs>'+
      '    <marker id="arrow" markerWidth="12" markerHeight="12" refX="0" refY="'+(options.aT/2)+'" orient="auto" markerUnits="strokeWidth">'+
      '      <path d="M0,0 L0,'+options.aT+' L'+options.aT+','+(options.aT/2)+' z" fill="#000" />'+
      '    </marker>'+
      '  </defs><text id="ttest" style="visibility:hidden"></text><g id="gtest" style="visibility:hidden"></g></svg>').css('text-align','center');
    //draw flowchart  
    var svg = '';
    $xml.find('function').each(function(){
        svg += drawFunction($(this));
    });
    $svg = $output.children('svg');
    $svg.get(0).innerHTML += '<g transform="translate(0,0)">'+svg+'</g>';
    $svg.children('g').eq(0).remove();
    var gwidth = $svg.children('g').get(0).getBBox().width;
    var gheight = $svg.children('g').get(0).getBBox().height;
    $svg.attr('width',gwidth+10).attr('height',gheight+15).attr('viewBox','0 0 '+(gwidth+10)+' '+(gheight+15));
    var disc = 0-$svg.children('g').get(0).getBBox().x+5;
    $svg.children('g').attr('transform',"translate("+(disc)+",0)");
    $output.trigger("flowgorithmjs:postload");

    function drawFunction($xml){
        maxW = 0;
        flow.Y = 0;
        flow.fWidth = 0;
        var name = $xml.attr('name');
        var txtStart,txtEnd;
        if(name==='Main'){
            txtStart = 'START';
            txtEnd = 'END';
        } 
        else{
            txtStart = name;
            var params = $xml.find('parameter');
            if(params.length>0){
                txtStart += '(';
                params.each(function(i){
                    if(i>0) txtStart += ',';
                    txtStart += $(this).attr('type')+' '+$(this).attr('name');
                });
                txtStart += ')';
            }
            txtEnd = 'RETURN '+$xml.attr('variable');
        }
        var s = drawStart(txtStart);
        s += drawSequence($xml.children('body'));
        s += drawEnd(txtEnd);
        var fwidth = calcBlockWidth(s)+5;
        var fx = calcBlockX(s);
        var tempX = funX;
        if(tempX!=0){
            tempX+=fx;
            funX+=fwidth;
        }
        else{
            funX=fwidth-fx;
        }
        flow.dim.push(flow.Y+20);
        return '<g transform="translate('+(tempX)+',10)" class="function '+name+'">'+s+'</g>';
    };
    function drawSequence($xml){
        var s = '<g class="block sequence" transform="translate(0,'+flow.Y+')">';
        var oldY = flow.Y;
        flow.Y = 0;
        var nextI = -1;
        $xml.children().each(function(i){
            var $el = $(this);
            switch($el.prop("tagName")){
                case 'declare': var array = ($el.attr('array')==="True") ? '['+$el.attr('size')+']' : '';
                                s += drawDeclare($el.attr('type')+' '+$el.attr('name')+array); 
                                break;
                case 'output':  var outString = $el.attr('expression');
                                if($el.attr('newline')==='False') outString+=' ...';
                                s += drawOutput(outString); break;
                case 'input':   if(i>nextI){
                                    var vars = $el.attr('variable');
                                    if(options.groupInput){
                                        nextI = i+1;
                                        while($xml.children().eq(nextI).prop("tagName")=='input'){
                                            vars += ', '+$xml.children().eq(nextI).attr('variable');
                                            nextI++;
                                        }
                                    }
                                    s += drawInput(vars);
                                } break;
                case 'assign': s += drawAssign($el.attr('variable')+'='+$el.attr('expression')); break;
                case 'call': s += drawCall($el.attr('expression')); break;
                case 'if': s += drawSelection($el.attr('expression'),$el.children('then'),$el.children('else')); break;
                case 'for': s += drawPreIteraction($el.attr('variable')+'='+$el.attr('start')+' TO '+$el.attr('end'),$el); break;
                case 'while': s += drawPreIteraction($el.attr('expression'),$el); break;
                case 'do': s += drawPostIteraction($el.attr('expression'),$el); break;
                case 'more': s += drawMore(); break;
            }
        });
        s += '</g>';
        flow.Y += oldY;
        //console.log("sequence ("+flow.Y+")");
        //if(flow.Y>maxH) maxH = flow.Y;
        //if($xml.children('if').length>0) maxW+=100;
        return s;
    };
    function drawStart(content){
        flow.Y += 20;
        var padding = 10;
        var l = Math.max(calcExtraWidth(content),50)/2+padding;
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                '  <g class="start">'+
                '    <ellipse class="symbol" cx="0" cy="0" rx="'+l+'" ry="20"/>'+
                '    <text x="0" y="4">'+content+'</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 20;
        return s;
    };
    function drawEnd(content){
        var padding = 10;
        var l = Math.max(calcExtraWidth(content),50)/2+padding;
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                drawArrow()+
                '  <g class="end" transform="translate(0,'+(options.aH+options.aT+20)+')">'+
                '    <ellipse class="symbol" cx="0" cy="0" rx="'+l+'" ry="20"/>'+
                '    <text x="0" y="4">'+content+'</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 40+options.aH+options.aT;
        return s;
    };
    function drawDeclare(content){
        //console.log("declare ("+flow.Y+")");
        var l = Math.max(calcExtraWidth(content),60)+20;
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                drawArrow()+
                '  <g class="assign" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                '    <rect class="symbol" width="'+l+'" height="36"/>'+
                '    <line class="line" x1="5" y1="0" x2="5" y2="36"/>'+
                '    <line class="line" x1="0" y1="5" x2="'+l+'" y2="5"/>'+
                '    <text x="'+(l/2+3)+'" y="25">'+content+'</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 36+options.aH+options.aT;
        return s;
    };
    function drawAssign(content){
        //console.log("assign ("+flow.Y+")");
        var l = Math.max(calcExtraWidth(content),60)+10;
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                drawArrow()+
                '  <g class="assign" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                '    <rect class="symbol" width="'+(l)+'" height="36"/>'+
                '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 36+options.aH+options.aT;
        return s;
    };
    function drawInput(content){
        //console.log("input ("+flow.Y+")");
        var l = Math.max(calcExtraWidth(content),50);
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                drawArrow()+
                '  <g class="input" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                '    <polygon class="symbol" points="0,0 -20,36 '+l+',36 '+(20+l)+',0"/>'+
                '    <path class="line" d="M'+(0+l)+',0 q0,15 13,13"/>'+
                '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                '    <text class="iotype" x="'+(10+l)+'" y="10">i</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 36+options.aH+options.aT;
        return s;
    };
    function drawOutput(content){
        //console.log("output ("+flow.Y+")");
        var l = Math.max(calcExtraWidth(content),50);
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                drawArrow()+
                '  <g class="output" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                '    <polygon class="symbol" points="0,0 -20,36 '+l+',36 '+(20+l)+',0"/>'+
                '    <path class="line" d="M'+(l)+',0 q0,15 13,13"/>'+
                '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                '    <text class="iotype" x="'+(10+l)+'" y="9">o</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 36+options.aH+options.aT;
        return s;
    };
    function drawCall(content){
        var l = Math.max(calcExtraWidth(content),60)+20;
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                drawArrow()+
                '  <g class="sub-program" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                '    <rect class="symbol" width="'+l+'" height="36"/>'+
                '    <line class="line" x1="5" y1="0" x2="5" y2="36"/>'+
                '    <line class="line" x1="'+(l-5)+'" y1="0" x2="'+(l-5)+'" y2="36"/>'+
                '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 36+options.aH+options.aT;
        return s;
    };
    function drawMore(){
        var text = "...";
        var l = calcExtraWidth(text);
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                drawArrow()+
                '  <g class="other" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                '    <text x="'+(l/2)+'" y="15">'+text+'</text>'+
                '  </g>'+
                '</g>';
        flow.Y += 28+options.aH+options.aT;
        return s;
    };
    function drawEmptyBlock(){
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                '<polyline class="line" points="0,0 0,'+(options.aH*3)+'" />'+
                '</g>';
        flow.Y += options.aH*3;
        return s;
    };
    function splitCondition(condition){
        var i,tot=0,start=0,nl=false;
        var lines = [];
        for(i=0;i<condition.length;i++){
            if((i+1)%10==0 || nl){
                if(condition.charAt(i)==' ' && i-start>5){
                    lines[tot]=condition.substring(start,i);
                    tot++;
                    start=i+1;
                    nl=false;
                }
                else nl=true;
            } 
        }
        lines[tot]=condition.substring(start);
        //console.log(lines);
        return lines;
    }
    function drawSelection(condition,$branchTrue,$branchFalse){
        var labelTrueSize = Math.max(calcExtraWidth(options.labelTrue),20);
        var labelFalseSize = Math.max(calcExtraWidth(options.labelFalse),20);
        var minPathWidth = Math.max(30,labelTrueSize+5,labelFalseSize+5); //minimum path width
        console.log(labelFalseSize*2);
        var circleRadius = 4; //circle radius of rejoining paths 
        var parts = splitCondition(condition);
        var romH;
        var contidionWidth = 0;
        if(parts.length>1){
            condition = '';
            var nRows = parts.length;
            $(parts).each(function(i){
                contidionWidth = Math.max(calcExtraWidth(this),contidionWidth);
                condition += '<tspan x="0" dy="1.1em">'+this.escape()+'</tspan>';
            });
            contidionWidth += 20*nRows;
            var yc = 11*nRows;
            condition = '<text x="0" y="'+yc+'">'+condition+'</text>';
            romH = 20*nRows;
        }
        else{ 
            contidionWidth = calcExtraWidth(condition);
            condition = '<text x="0" y="32">'+condition.escape()+'</text>';
            romH = 27;
        }
        contidionWidth = Math.max(contidionWidth,50)+30;
        var oldY = 0;
        oldY = flow.Y;
        flow.Y = 0;
        var halfCondition = contidionWidth/2;
        var svgSequenceTrue = '';
        var trueWidth = halfCondition-5;
        if($branchTrue.children().length>0){
            svgSequenceTrue = drawSequence($branchTrue);
            trueWidth+=Math.max(calcBlockX(svgSequenceTrue),minPathWidth);
        }
        else trueWidth+=minPathWidth;
        var s = '<g class="block" transform="translate(0,'+oldY+')">'+
                drawArrow()+
                '  <g class="selection" transform="translate(0,'+(options.aH+options.aT)+')">'+
                '    <g class="condition">'+
                '      <polygon class="symbol" points="0,0 '+halfCondition+','+romH+' 0,'+(romH*2)+' '+(-halfCondition)+','+(romH)+'"/>'+
                        condition+
                '    </g>'+
                '    <g class="arrow-right">'+
                '      <polyline class="line" points="'+halfCondition+','+romH+' '+trueWidth+','+romH+' '+trueWidth+','+(romH+10)+'"/>'+
                '      <text x="'+(halfCondition+labelTrueSize/2)+'" y="'+(romH-5)+'">'+options.labelTrue+'</text>'+
                '    </g>'+
                '    <g class="true-path" transform="translate('+trueWidth+','+(romH+10)+')">'+svgSequenceTrue+'</g>';
        var branchTrueHeight = flow.Y+romH;
        flow.Y = 0;
        var svgSequenceFalse = '';
        var falseWidth = halfCondition-5; 
        if($branchFalse.children().length>0){
            svgSequenceFalse = drawSequence($branchFalse);
            falseWidth += Math.max(calcBlockWidth(svgSequenceFalse)-calcBlockX(svgSequenceFalse),minPathWidth);
        }
        else falseWidth+=minPathWidth;
        s+=     '    <g class="arrow-left">'+
                '      <polyline class="line" points="'+(-halfCondition)+','+romH+' '+(-falseWidth)+','+romH+' '+(-falseWidth)+','+(romH+10)+'"/>'+
                '      <text x="'+(-halfCondition-labelFalseSize/2)+'" y="'+(romH-5)+'">'+options.labelFalse+'</text>'+
                '    </g>'+
                '    <g class="false-path" transform="translate('+(-falseWidth)+','+(romH+10)+')">'+svgSequenceFalse+'</g>';
        var branchFalseHeight = flow.Y+romH;
        if(branchTrueHeight>branchFalseHeight){
            s += '<polyline class="line" points="'+(-falseWidth)+','+(branchFalseHeight+10)+' '+(-falseWidth)+','+(branchTrueHeight+10)+'"/>';
        }
        else if(branchTrueHeight<branchFalseHeight){
            s += '<polyline class="line" points="'+trueWidth+','+(branchTrueHeight+10)+' '+trueWidth+','+(branchFalseHeight+10)+'"/>';
        }
        var endHeight=options.aT+options.aH+3;
        var maxBranchesHeight = Math.max(branchTrueHeight,branchFalseHeight)+10;
        s +=    '    <g class="selection-close" transform="translate(0,'+(maxBranchesHeight)+')">'+
                '      <polyline class="line" points="'+trueWidth+',0 '+trueWidth+','+endHeight+' '+circleRadius+','+endHeight+'"/>'+
                '      <polyline class="line" points="'+(-falseWidth)+',0 '+(-falseWidth)+','+endHeight+' -'+circleRadius+','+endHeight+'"/>'+
                '      <circle class="symbol" cx="0" cy="'+endHeight+'" r="'+circleRadius+'"/>'+
                '    </g>'+
                '  </g>'+
                '</g>';
        flow.Y = oldY+maxBranchesHeight+circleRadius+endHeight+options.aT+options.aH;
        calcBlockWidth(s);
        return s;
    };
    function drawPreIteraction(condition,$content){
        var labelTrueSize = Math.max(calcExtraWidth(options.labelTrue),16);
        var labelFalseSize = Math.max(calcExtraWidth(options.labelFalse),16);
        var parts = splitCondition(condition);
        var romH;
        var contidionWidth=0;
        if(parts.length>1){
            condition = '';
            $(parts).each(function(i){
                contidionWidth = Math.max(calcExtraWidth(this),contidionWidth);
                condition += '<tspan x="0" dy="1.1em">'+this.escape()+'</tspan>';
            });
            contidionWidth += 2*parts.length;
            var yc = parts.length;
            condition = '<text x="0" y="'+yc+'">'+condition+'</text>';
            romH = 9*parts.length;
        }
        else{ 
            contidionWidth = Math.max(calcExtraWidth(condition),60);
            condition = '<text x="0" y="25">'+condition.escape()+'</text>';
            romH = 20;
        }
        var condW2 = contidionWidth/2;
        var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+drawArrow();
        var oldY = flow.Y;
        flow.Y = 0;
        var contentDraw = ($content.children().length>0) ? drawSequence($content) : drawEmptyBlock();
        var contentWidth = calcBlockWidth(contentDraw);
        var half = Math.max(calcBlockX(contentDraw),40);
        s +=    '  <g class="preIteraction" transform="translate(0,'+(options.aH+options.aT)+')">'+
                '    <g class="condition">'+
                '      <polygon class="symbol" points="0,0 '+condW2+',0 '+(condW2+15)+','+romH+' '+condW2+','+(romH*2)+' '+(-condW2)+','+(romH*2)+' '+(-condW2-15)+','+(romH)+' '+(-condW2)+',0"/>'+
                        condition+
                '    </g>';
        //don't use this variant
        if(options.itMode===1){        
            s += '    <g class="true-path" transform="translate('+(condW2+15)+','+(romH)+')">'+
                 '       <polyline class="line" points="0,0 '+half+',0"/>'+
                 '       <text x="10" y="-5">'+options.labelTrue+'</text>'+
                 '       <g class="true-branch" transform="translate('+half+',0)">';
            s += contentDraw;
            s += '           <g class="true-close" transform="translate(0,'+flow.Y+')">'+
                 '               <polyline class="arrow" points="0,0 0,15 '+(-half-15-condW2)+',15 '+(-half-15-condW2)+','+(-flow.Y+romH*2)+'"/>'+
                 '           </g>'+
                 '       </g>'+
                 '    </g>'+
                 '    <g class="false-path" transform="translate('+(-condW2-15)+','+(romH)+')">'+
                 '       <polyline class="line" points="0,0 -25,0 -25,'+flow.Y+' '+(condW2+15)+','+flow.Y+'"/>'+
                 '       <text x="-10" y="-5">'+options.labelFalse+'</text>'+
                 '    </g>'+
                 '  </g>'+
                 '</g>';
            flow.Y += oldY+options.aH+options.aT+20;
        }
        else if(options.itMode===2){
            var down=Math.max(0,romH-options.aH-options.aT);
            s += '    <g class="true-path" transform="translate('+(condW2+15)+','+romH+')">'+
                 '       <polyline class="line" points="0,0 '+(half-5)+',0 '+(half-5)+','+down+'"/>'+
                 '       <text x="'+(labelTrueSize/2+2)+'" y="-5">'+options.labelTrue+'</text>'+
                 '       <g class="true-branch" transform="translate('+(half-5)+','+down+')">';
            s += contentDraw;
            s += '           <g class="true-close" transform="translate(0,'+(flow.Y)+')">'+
                 '               <polyline class="arrow" points="0,0 0,15 '+(-half+15-condW2)+',15 '+(-half+15-condW2)+',0 '+(-half+15-condW2)+','+(-flow.Y+(options.aT*2)+options.aH)+'"/>'+
                 '           </g>'+
                 '       </g>'+
                 '    </g>'+
                 '    <g class="false-path" transform="translate(0,'+(romH*2)+')">'+
                 '       <polyline class="line" points="0,0 0,'+(flow.Y-15)+'"/>'+
                 '       <text x="-'+(labelFalseSize/2+4)+'" y="18">'+options.labelFalse+'</text>'+
                 '    </g>'+
                 '  </g>'+
                 '</g>';
            flow.Y += oldY+(romH*2)+options.aH+options.aT-15;
        }
        else if(options.itMode===3){
            s += '    <g class="true-path" transform="translate(0,'+(romH*2)+')">'+
                 '       <text x="'+(labelTrueSize/2+6)+'" y="14">'+options.labelTrue+'</text>'+
                 '       <g class="true-branch" transform="translate(0,0)">';
            s += contentDraw;
            s += '           <g class="true-close" transform="translate(0,'+flow.Y+')">'+
                 '               <polyline class="arrow" points="0,0 0,10 '+(-half+5-condW2)+',10 '+(-half+5-condW2)+','+(-flow.Y-romH)+' '+(-condW2-25)+','+(-flow.Y-romH)+'"/>'+
                 '           </g>'+
                 '       </g>'+
                 '    </g>'+
                 '    <g class="false-path" transform="translate('+(condW2+15)+','+(romH)+')">'+
                 '       <polyline class="line" points="0,0 '+Math.max((half-condW2),15)+',0 '+Math.max((half-condW2),15)+','+(flow.Y+romH+10+10)+' '+(-condW2-15)+','+(flow.Y+romH+10+10)+'"/>'+
                 '       <text x="'+(labelFalseSize/2+1)+'" y="-5">'+options.labelFalse+'</text>'+
                 '    </g>'+
                 '  </g>'+
                 '</g>';
            flow.Y += oldY+(romH*2)+20+options.aH+options.aT;
        }
        return s;
    };
    function drawPostIteraction(condition,$content){
        var parts = splitCondition(condition);
        var romH;
        var contidionWidth = 0;
        if(parts.length>1){
            condition = '';
            $(parts).each(function(i){
                contidionWidth = Math.max(calcExtraWidth(this),contidionWidth);
                condition += '<tspan x="0" dy="1.1em">'+this.escape()+'</tspan>';
            });
            contidionWidth+=2*parts.length;
            var yc = parts.length;
            condition = '<text x="0" y="'+yc+'">'+condition+'</text>';
            romH = 9*parts.length;
        }
        else{ 
            contidionWidth = calcExtraWidth(condition);
            condition = '<text x="0" y="25">'+condition.escape()+'</text>';
            romH = 20;
        }
        contidionWidth = Math.max(contidionWidth,60);
        var condW2 = contidionWidth/2;
        var s = '<g class="block" transform="translate(0,'+flow.Y+')"><line class="line" x1="0" y1="0" x2="0" y2="'+(options.aH+options.aT)+'"/><circle class="symbol" cx="0" cy="'+(options.aH+options.aT)+'" r="4"/>';
        var oldY = flow.Y;
        flow.Y = 0;
        var contentDraw = ($content.children().length>0) ? drawSequence($content) : drawEmptyBlock();
        var contentWidth = calcBlockWidth(contentDraw);
        var half = Math.max(calcBlockX(contentDraw),condW2+40);
        half+=6;
        flow.Y += 15;
        s +=    '  <g class="postIteraction" transform="translate(0,'+(options.aH+options.aT)+')">';
                
        if(options.itMode===1 || options.itMode===2 || options.itMode===3){        
            s += '    <g class="true-path" transform="translate(4,0)">'+
                 '       <polyline class="line" points="0,0 '+half+',0"/>'+
                 '       <text x="-17" y="'+(flow.Y-7)+'">T</text>'+
                 '       <g class="true-branch" transform="translate('+half+',0)">';
            s += contentDraw+
                 '           <g class="true-close" transform="translate(0,'+(flow.Y-15)+')">'+
                 '               <polyline class="arrow" points="0,0 0,'+(15+romH)+' '+(-Math.abs(half-condW2-20))+','+(15+romH)+'"/>'+
                 '           </g>';
            s += '       </g>'+
                 '    </g>'+
                 '    <g class="condition" transform="translate(0,'+flow.Y+')">'+
                 '      <polygon class="symbol" points="0,0 '+condW2+',0 '+(condW2+15)+','+romH+' '+condW2+','+(romH*2)+' '+(-condW2)+','+(romH*2)+' '+(-condW2-15)+','+(romH)+' '+(-condW2)+',0"/>'+
                        condition+
                 '       <text x="-12" y="'+(romH*2+15)+'">F</text>'+
                 '       <polyline class="line" points="0,'+(romH*2)+' 0,'+(romH*2+10)+'"/>'+
                 '    </g>';
            s += '    <polyline class="arrow" points="0,'+(flow.Y)+' 0,14"/>'+
                 '  </g>'+
                 '</g>';
            flow.Y += romH*2;
            flow.Y += oldY+options.aH+options.aT+10;
        }
        return s;
    };
    function calcExtraWidth(content){
        $('#ttest').text(content);
        var l = $('#ttest').get(0).getBBox().width;
        maxW = Math.max(maxW,l);
        return l;
    };
    function calcBlockWidth(content){
        $('#gtest').get(0).innerHTML = '<g transform="translate(0,0)">'+content+'</g>';
        var l = $('#gtest').children('g').get(0).getBBox().width;
        maxW = Math.max(maxW,l);
        return l;
    };
    function calcBlockX(content){
        $("#gtest").get(0).innerHTML = '<g transform="translate(0,0)">'+content+'</g>';
        return Math.abs($('#gtest').children('g').get(0).getBBox().x);
    };
    function drawArrow(){
        return '<line class="arrow" x1="0" y1="0" x2="0" y2="'+options.aH+'"/>';
    };
    function getSVGContents(inputString){
        var domParser = new DOMParser();
        var svgDOM = domParser.parseFromString(inputString,'text/xml').getElementsByTagName('g')[0];
        return svgDOM.innerHTML;
    };
}
function downloadSVG(selector,strFileName){
    var strData = $(selector+' svg').clone().find('#ttest').remove().end();
    strData = strData[0].outerHTML;
    var strMimeType = 'text/plain';
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        d = A[0],
        n = A[1],
        t = A[2] || "text/plain";
    //build download link:
    a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);
    if (window.MSBlobBuilder) { // IE10
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */
    if ('download' in a) { //FF20, CH19
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    }; /* end if('download' in a) */
    //do iframe dataURL download: (older W3)
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return false;
};
String.prototype.escape = function() {
    var tagsToReplace = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};