function drawConceptDiagram (concept, div, options, panel) {
    var svgIsaModel = [];
    var svgAttrModel = [];
        if (concept.relationships) {
            $.each(concept.relationships, function (i, field) {
                if (field.activeStatus == 1) {
                    if (field.type.id == 116680003) {
                        svgIsaModel.push(field);
                    } else {
                        svgAttrModel.push(field);
                    }
                }
            });
        }   
    
    var context = {
        divElementId: div.attr('id')
    };
    //console.log(context);
    div.html(JST["views/conceptDetailsPlugin/tabs/details/diagram.hbs"](context));

    var parentDiv = $("#" + div.attr('id') + "-diagram-body");
    parentDiv.svg('destroy');

    parentDiv.svg({
        settings: {
            width: '1000px',
            height: '2000px'}});
    var svg = parentDiv.svg('get');
    loadDefs(svg);
    var x = 10;
    var y = 10;
    var maxX =10;
    var sctClass = "";
    if (concept.definitionStatus == "900000000000074008") {
        sctClass = "sct-primitive-concept";
    } else {
        sctClass = "sct-defined-concept";
    }
    //console.log("In draw: " + concept.defaultTerm + " " + concept.conceptId + " " + sctClass);
    var rect1 = drawSctBox(svg, x, y, concept.fsn, concept.conceptId, sctClass);
    x = x + 90;
    y = y + rect1.getBBox().height + 40;
    var circle1;
    if (concept.definitionStatus == "900000000000074008") {
        circle1 = drawSubsumedByNode(svg, x, y);
    } else {
        circle1 = drawEquivalentNode(svg, x, y);
    }
    connectElements(svg, rect1, circle1, 'bottom-50', 'left');
    x = x + 55;
    var circle2 = drawConjunctionNode(svg, x, y);
    connectElements(svg, circle1, circle2, 'right', 'left', 'LineMarker');
    x+=rect1.getBBox().width;
    x = x + 40;
    y = y - 18;
    maxX = ((maxX < x) ? x : maxX);
    x-=rect1.getBBox().width;

    // load stated parents
    sctClass = "sct-defined-concept";
    $.each(svgIsaModel, function(i, relationship) {
    	if(relationship.isConcreteRelationship){
    		sctClass= "concrete-domain";
    	}
    	else if (relationship.destinationConcept.definitionStatusId == "PRIMITIVE") {
            sctClass = "sct-primitive-concept";
        } else {
            sctClass = "sct-defined-concept";
        }

    	if(sctClass=="concrete-domain"){
    		var rectParent = drawSctBox(svg, x, y, relationship.destinationConcept.id,"", sctClass);    		
    	}else{
    	var rectParent = drawSctBox(svg, x, y, relationship.destinationConcept.fullySpecifiedName, relationship.destinationConcept.id, sctClass);
    	}// $("#" + rectParent.id).css({"top":
        // (rectParent.outerHeight()/2) + "px"});
        connectElements(svg, circle2, rectParent, 'center', 'left', 'ClearTriangle');
        y = y + rectParent.getBBox().height + 25;
        maxX = ((maxX < x + rectParent.getBBox().width + 50) ? x + rectParent.getBBox().width + 50 : maxX);
    });

    // load ungrouped attributes
    var maxRoleNumber = 0;
    $.each(svgAttrModel, function(i, relationship) {
    	if(relationship.isConcreteRelationship){
    	sctClass = "concrete-domain";	
    	}
    	else if (relationship.destinationConcept.definitionStatusId == "PRIMITIVE") {
            sctClass = "sct-primitive-concept";
        } else {
            sctClass = "sct-defined-concept";
        }
        if (relationship.relationshipGroup == 0) {

        	var rectAttr = drawSctBox(svg, x, y, relationship.type.fullySpecifiedName,relationship.type.id, "sct-attribute");
        	connectElements(svg, circle2, rectAttr, 'center', 'left');
        	if(sctClass=="concrete-domain"){
        		var rectTarget = drawSctBox(svg, x + rectAttr.getBBox().width + 50, y, relationship.destinationConcept.id,"", sctClass);
        	}//gayatri
        	else{
            var rectTarget = drawSctBox(svg, x + rectAttr.getBBox().width + 50, y, relationship.destinationConcept.fullySpecifiedName,relationship.destinationConcept.id, sctClass);
        	}connectElements(svg, rectAttr, rectTarget, 'right', 'left');
            y = y + rectTarget.getBBox().height + 25;
            maxX = ((maxX < x + rectAttr.getBBox().width + 50 + rectTarget.getBBox().width + 50) ? x + rectAttr.getBBox().width + 50 + rectTarget.getBBox().width + 50 : maxX);
        } else {
            if (relationship.relationshipGroup > maxRoleNumber) {
                maxRoleNumber = relationship.relationshipGroup;
            }
        }
    });
    y = y + 50;
    for (var i = 1; i <= maxRoleNumber; i++) {
        var groupNode = drawAttributeGroupNode(svg, x, y);
        connectElements(svg, circle2, groupNode, 'center', 'left');
        var conjunctionNode = drawConjunctionNode(svg, x + 55, y);
        connectElements(svg, groupNode, conjunctionNode, 'right', 'left');
        $.each(svgAttrModel, function(m, relationship) {
            if (relationship.relationshipGroup == i) {
            	if(relationship.isConcreteRelationship){
            		sctClass="concrete-domain";
            	}
            	else if (relationship.destinationConcept.definitionStatusId == "PRIMITIVE") {
                    sctClass = "sct-primitive-concept";
                } else {
                    sctClass = "sct-defined-concept";
                }
               // var rectRole = drawSctBox(svg, x + 85, y - 18, relationship.typeId, relationship.type.conceptId,"sct-attribute");                

    var rectRole = drawSctBox(svg, x + 85, y - 18, relationship.type.fullySpecifiedName,relationship.type.id,"sct-attribute");                
                connectElements(svg, conjunctionNode, rectRole, 'center', 'left');
                if(sctClass=="concrete-domain"){
                	var rectRole2 = drawSctBox(svg, x + 85 + rectRole.getBBox().width + 30, y - 18, relationship.destinationConcept.id,"", sctClass);
                }else{
                var rectRole2 = drawSctBox(svg, x + 85 + rectRole.getBBox().width + 30, y - 18, relationship.destinationConcept.fullySpecifiedName,relationship.destinationConcept.id, sctClass);
                }connectElements(svg, rectRole, rectRole2, 'right', 'left');
                y = y + rectRole2.getBBox().height + 25;
                maxX = ((maxX < x + 85 + rectRole.getBBox().width + 30 + rectRole2.getBBox().width + 50) ? x + 85 + rectRole.getBBox().width + 30 + rectRole2.getBBox().width + 50 : maxX);
            }
        });
    }
    var svgCode = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>' + parentDiv.html();
    svgCode = svgCode.substr(0, svgCode.indexOf("svg") + 4) +
        ' xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" ' +
        svgCode.substr(svgCode.indexOf("svg") + 4)
    svgCode = svgCode.replace('width="1000px" height="2000px"', 'width="' + maxX + '" height="' + y + '"');    
    var b64 = Base64.encode(svgCode);

    $("#" + div.attr('id') + "-download-button").disableTextSelect();
    $("#" + div.attr('id') + "-progress-button").disableTextSelect();    
    $("#" + div.attr('id') + "-download-button").removeClass('disabled');
    $("#" + div.attr('id') + "-download-button").unbind().click(function(event) {
    $("#" + div.attr('id') + "-download-button").hide();
    $("#" + div.attr('id') + "-progress-button").show();
        saveAsPng(svgCode,concept.conceptId);        
        $("#" + div.attr('id') + "-progress-button").hide();     
        $("#" + div.attr('id') + "-download-button").show();
    });   
}

function saveAsPng(svg,conceptId) {
 
    var canvas = document.createElement('canvas');
    canvas.id = "canvas";       
    document.body.appendChild(canvas);
    context = canvas.getContext("2d");
   
  var image = new Image;
  canvg(document.getElementById('canvas'), svg);
  var img = canvas.toDataURL("image/png",1.0);
  image.src = img;
  image.onload = function() {
        context.drawImage(image, 0,0 );
        var a = document.createElement("a");
        a.download = conceptId+".png";
        a.href = canvas.toDataURL("image/png");
        document.body.appendChild(a);
        a.click();
        document.getElementById('canvas').remove(); 
        };
}