var diagramXML;

  	function setXml(xml){
  		if(xml != null||xml != ''){
  			diagramXML = xml;
  		}else{
			diagramXML = '<?xml version="1.0" encoding="UTF-8"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd"><process id="Process_18p4xqa" /><bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830"><bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="Process_18p4xqa" /><bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581"><omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle><bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b"><omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle></bpmndi:BPMNDiagram></definitions>';

  		}
  		
  		$("#show-button").trigger("click");
  	}

$(document).ready(function(){
	if(id!=''&&id!='null')
		show();
  });

function show(){
	$.ajax({
		url : basePath + 'WFP?module=definition&action=getXml&id='+ id,
		type : 'POST',
		data : {
		},
		success : function(json) {
			var obj = JSON.parse(json);
			if(obj != null && obj != ''){
				var xmlData = obj.xmlData;
				diagramXML = xmlData;
			}else{
				var url = basePath + 'player/page/lc404.jsp';
				$("#bpmnShow", parent.document).attr('src',url);
			}	
			$("#show-button").trigger("click");
		}
		});
}

(function(BpmnViewer, $) {
  // create viewer
  var bpmnViewer = new BpmnViewer({
    container: '#canvas'
  });

  var canvas = bpmnViewer.get('canvas'),
          overlays = bpmnViewer.get('overlays');

  // import function
  function importXML(xml) {
    // import diagram
    bpmnViewer.importXML(xml, function(err) {

//      if (err) {
//        return console.error('could not import BPMN 2.0 diagram', err);
//      }

      canvas.zoom('fit-viewport');

    });
  }


  var showButton = document.querySelector('#show-button');
  showButton.addEventListener('click', function() {
	  importXML(diagramXML);
  })
  

})(window.BpmnJS, window.jQuery);