diff --git a/workflow/engine/methods/bpmn/designer.php b/workflow/engine/methods/bpmn/designer.php
new file mode 100755
index 000000000..3e53cc2dd
--- /dev/null
+++ b/workflow/engine/methods/bpmn/designer.php
@@ -0,0 +1,61 @@
+<?php
+  	
+  $oHeadPublisher =& headPublisher::getSingleton();
+  //$oHeadPublisher->setExtSkin( 'xtheme-gray');
+  $oHeadPublisher->addExtJsScript('bpmn/MyWorkflow',true );    //adding a javascript file .js
+  $oHeadPublisher->addExtJsScript('bpmn/pmosExt', true );    //adding a javascript file .js
+  $oHeadPublisher->addExtJsScript('bpmn/TaskContext', true );    //adding a javascript file .js
+  $oHeadPublisher->addExtJsScript('bpmn/ProcessMapContext', true );    //adding a javascript file .js
+  $oHeadPublisher->addExtJsScript('bpmn/designer', true );    //adding a javascript file .js
+  $oHeadPublisher->addExtJsScript('bpmn/Annotation' );
+  $oHeadPublisher->addExtJsScript('bpmn/FlowConnector');
+  $oHeadPublisher->addExtJsScript('bpmn/GroupFigure');
+  $oHeadPublisher->addExtJsScript('bpmn/bpmnShapes', true); //
+  $oHeadPublisher->addExtJsScript('bpmn/LoopingSubProcess'); //
+  $oHeadPublisher->addExtJsScript('bpmn/LoopingTask'); //
+  $oHeadPublisher->addExtJsScript('bpmn/Dataobject'); //
+  $oHeadPublisher->addExtJsScript('bpmn/Pool',true);
+  $oHeadPublisher->addExtJsScript('bpmn/Lane');
+    
+  $oHeadPublisher->addExtJsScript('bpmn/EventEmptyStart');
+  $oHeadPublisher->addExtJsScript('bpmn/EventMessageStart');
+  $oHeadPublisher->addExtJsScript('bpmn/EventRuleStart');
+  $oHeadPublisher->addExtJsScript('bpmn/EventTimerStart');
+  $oHeadPublisher->addExtJsScript('bpmn/EventSignalStart');
+  $oHeadPublisher->addExtJsScript('bpmn/EventMulStart');
+  $oHeadPublisher->addExtJsScript('bpmn/EventLinkStart');
+  $oHeadPublisher->addExtJsScript('bpmn/EventEmptyInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventMessageRecInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventMessageSendInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventTimerInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventBoundaryTimerInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventErrorInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventCompInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventRuleInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventCancelInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventInterSignal');
+  $oHeadPublisher->addExtJsScript('bpmn/EventMultipleInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventLinkInter');
+  $oHeadPublisher->addExtJsScript('bpmn/EventEmptyEnd');
+  $oHeadPublisher->addExtJsScript('bpmn/EventMessageEnd');
+  $oHeadPublisher->addExtJsScript('bpmn/EventErrorEnd');
+  $oHeadPublisher->addExtJsScript('bpmn/EventCompEnd');
+  $oHeadPublisher->addExtJsScript('bpmn/EventTerminateEnd');
+  $oHeadPublisher->addExtJsScript('bpmn/EventEndSignal');
+  $oHeadPublisher->addExtJsScript('bpmn/EventMultipleEnd');
+  $oHeadPublisher->addExtJsScript('bpmn/EventCancelEnd');
+  $oHeadPublisher->addExtJsScript('bpmn/EventLinkEnd');
+
+  $oHeadPublisher->addExtJsScript('bpmn/GatewayInclusive' );
+  $oHeadPublisher->addExtJsScript('bpmn/GatewayExclusiveData' );
+  $oHeadPublisher->addExtJsScript('bpmn/GatewayExclusiveEvent' );
+  $oHeadPublisher->addExtJsScript('bpmn/GatewayParallel' );
+  $oHeadPublisher->addExtJsScript('bpmn/GatewayComplex' );
+  $oHeadPublisher->addExtJsScript('bpmn/GridPanel');
+  $oHeadPublisher->addExtJsScript('bpmn/SubProcess' );
+  $oHeadPublisher->addExtJsScript('bpmn/ProcessOptions',true);
+
+  $oHeadPublisher->addContent( 'bpmn/designer'); //adding a html file  .html.
+  $oHeadPublisher->assign('pro_uid', (isset($_GET['PRO_UID']) ? $_GET['PRO_UID']: ''));
+  G::RenderPage('publish', 'extJs');
+ 
diff --git a/workflow/engine/methods/bpmn/processmap.php b/workflow/engine/methods/bpmn/processmap.php
index 93915b928..784e7924a 100755
--- a/workflow/engine/methods/bpmn/processmap.php
+++ b/workflow/engine/methods/bpmn/processmap.php
@@ -1,6 +1,14 @@
 <?php
-  	
+
+  if( ! isset($_GET['PRO_UID']) )
+    throw new Exception('The Process ID was not set!');
+
+  require_once 'classes/model/Process.php';
+  $process = ProcessPeer::retrieveByPK($_GET['PRO_UID']);
+  
   $oHeadPublisher =& headPublisher::getSingleton();
+  $oHeadPublisher->usingExtJs('ux/miframe');
+  
   //$oHeadPublisher->setExtSkin( 'xtheme-gray');
   $oHeadPublisher->addExtJsScript('bpmn/MyWorkflow',true );    //adding a javascript file .js
   $oHeadPublisher->addExtJsScript('bpmn/pmosExt', true );    //adding a javascript file .js
@@ -56,5 +64,8 @@
   $oHeadPublisher->addExtJsScript('bpmn/ProcessOptions',true);
 
   $oHeadPublisher->addContent( 'bpmn/processmap'); //adding a html file  .html.
+  
+  $oHeadPublisher->assign('pro_title', $process->getProTitle());
+  $oHeadPublisher->assign('pro_uid', $process->getProUid());
   G::RenderPage('publish', 'extJs');
  
diff --git a/workflow/engine/templates/bpmn/designer.html b/workflow/engine/templates/bpmn/designer.html
new file mode 100755
index 000000000..3c0ae162b
--- /dev/null
+++ b/workflow/engine/templates/bpmn/designer.html
@@ -0,0 +1,7 @@
+<div id='cases-grid'></div>
+<div id="toolbar"></div>
+<div id="center1" class="x-layout-active-content">
+  <div id="paintarea" ></div>
+</div>
+<div id="debug"></div>
+<div id="properties"></div>
\ No newline at end of file
diff --git a/workflow/engine/templates/bpmn/designer.js b/workflow/engine/templates/bpmn/designer.js
new file mode 100755
index 000000000..dfccae4d6
--- /dev/null
+++ b/workflow/engine/templates/bpmn/designer.js
@@ -0,0 +1,795 @@
+Ext.onReady ( function() {
+
+  workflow  = new MyWorkflow("paintarea");
+  workflow.setEnableSmoothFigureHandling(false);
+  workflow.scrollArea.width = 2000;
+  //For Undo and Redo Options
+  // workflow.getCommandStack().addCommandStackEventListener(new commandListener());
+  //Getting process id from the URL using getUrlvars function
+  //var pro_uid = getUrlVars();
+
+  if(typeof pro_uid !== 'undefined') {
+    Ext.Ajax.request({
+      url: 'openProcess.php?PRO_UID=' + pro_uid,
+      success: function(response) {
+        shapesData =  createShapes(response.responseText,this);
+        createConnection(shapesData);
+      },
+      failure: function(){
+        Ext.Msg.alert ('Failure');
+      }
+    });
+  }
+
+  
+
+  /**********************************************************************************
+  *
+  * Do the Ext (Yahoo UI) Stuff
+  *
+  **********************************************************************************/
+  var west= {
+      /*xtype	:"panel",
+      title: 'Palette',
+      region: 'west',
+      split: false,
+      width: 75,
+      collapsible: false,
+      margins:'3 0 3 3',
+      cmargins:'3 3 3 3',*/
+      id         : 'palette',
+      title      : 'Palette',
+      region     : 'west',
+      width      : 65,
+      border     : false,
+      autoScroll : true,
+      collapsible :true,
+      split       :true,
+      //collapseMode:'mini',
+      hideCollapseTool: false,
+      
+      items:{
+        html:'<div id="x-shapes">\n\
+                <p id="x-shapes-task" title="Task" ><img src= "/skins/ext/images/gray/shapes/pallete/task.png"/></p>\n\
+                <p id="x-shapes-startEvent" title="Start"><img src= "/skins/ext/images/gray/shapes/pallete/startevent.png"/></p>\n\
+                <p id="x-shapes-interEvent" title="Intermediate Event"><img src= "/skins/ext/images/gray/shapes/pallete/interevent.png"/></p>\n\
+                <p id="x-shapes-endEvent" title="End Event"><img src= "/skins/ext/images/gray/shapes/pallete/endevent.png"/></p>\n\
+                <p id="x-shapes-gateways" title="Gateway"><img src= "/skins/ext/images/gray/shapes/pallete/gateway.png"/></p>\n\
+                <p id="x-shapes-annotation" title="Annotation"><img src= "/skins/ext/images/gray/shapes/pallete/annotation.png"/></p>\n\
+                <!--<p id="x-shapes-group" title="Group"><img src= "/skins/ext/images/gray/shapes/pallete/group.png"/></p>\n\
+                <p id="x-shapes-dataobject" title="Data Object"><img src= "/skins/ext/images/gray/shapes/pallete/dataobject.png"/></p>\n\
+                <p id="x-shapes-pool" title="Pool"><img src= "/skins/ext/images/gray/shapes/pallete/pool.png"/></p>\n\
+                <p id="x-shapes-lane" title="Lane"><img src= "/skins/ext/images/gray/shapes/pallete/lane.png"/></p>\n\
+                <p id="x-shapes-milestone" title="Milestone"><img src= "/skins/ext/images/gray/shapes/pallete/milestone.png"/></p>-->\n\
+              </div>'
+      }
+  };
+  
+  var east= {
+      
+      id         : 'eastPanel',
+      title      : '',
+      region     : 'east',
+      width      : 150,
+      border     : false,
+      autoScroll : true,
+      collapsible :true,
+      split       :true,
+      collapseMode:'mini',
+      hideCollapseTool: false,
+      
+      items:{
+        html:'east panel'
+      }
+  };
+
+  var north= {
+    xtype	:	"panel",
+    initialSize: 60,
+    split:false,
+    titlebar: false,
+    collapsible: false,
+    animate: false,
+    region	:	"north"
+  };
+  
+  var south= {
+      xtype	:	"panel",
+      initialSize: 120,
+      height: 100,
+      split:true,
+      titlebar: false,
+      collapsible: true,
+      autoScroll:true,
+      animate: true,
+      region	:	"south",
+      items: {
+          region: 'center',
+          xtype: 'tabpanel',
+          items: [{
+              title: 'Properties',
+              html: 'Properties'
+          },
+          {
+              title: 'Debug Console',
+              html: 'Debug Console'
+          }]
+      }
+  };
+
+  var center= {
+      width:100,
+      height:2000,
+      xtype	:	"panel",
+      //autoScroll:true,
+      fitToFrame:true,
+      region	:	"center",
+      //bodyStyle: 'background-color:red; overflow:scroll; height:3000px',
+      
+      /*bodyCfg: {
+        tag: 'div',
+        cls: 'x-panel-body',  // Default class not applied if Custom element specified
+        style: 'height:3000; overflow:scroll;',
+        html: 'Message'
+      },*/
+    
+  };
+
+  var processObj = new ProcessOptions();
+
+  var main = new Ext.Panel({
+    renderTo  : "center1",
+    region    : "center",
+    layout    : "border",
+    autoScroll: true,
+    height    : 1000,
+    width     : 1300,
+    items   : [west, north, center]
+  });
+
+  //Getting Process name and setting Title of center region to that processname
+  /*var urlparams = '?action=load&data={"uid":"'+ pro_uid +'"}';
+  Ext.Ajax.request({
+          url: "processes_Ajax.php"+ urlparams,
+          success: function(response) {
+              var processes = Ext.util.JSON.decode(response.responseText);
+              main.items.items[2].setTitle(processes.title.label);     //items[2]=>center region
+          },
+          failure: function(){
+              Ext.Msg.alert ('Failure');
+          }
+      });*/
+
+  //Get main into workflow object
+  workflow.main = main;
+  //items[3]=>'center region'
+  var centerRegionId = main.items.items[2].body.id;
+  canvas = Ext.get(centerRegionId);
+
+  //Context Menu of ProcessMap
+  ProcessMapObj = new ProcessMapContext();
+  contextCanvasMenu = new Ext.menu.Menu({
+      items: [{
+          text: 'Edit Process',
+          handler: ProcessMapObj.editProcess,
+          //icon: '/skins/ext/images/gray/shapes/more.gif',
+          iconCls: 'button_menu_ext ss_sprite ss_page_white_edit',
+          scope: this
+      }, {
+          text: 'Export Process',
+          handler: ProcessMapObj.exportProcess,
+          iconCls: 'button_menu_ext ss_sprite ss_script_go',
+          scope: this
+      }, {
+          text: 'Add Task',
+          handler: ProcessMapObj.addTask,
+          iconCls: 'button_menu_ext ss_sprite ss_layout_add',
+          scope: this
+      }, {
+          text: 'Add Subprocess',
+          handler: workflow.subProcess,
+          iconCls: 'button_menu_ext ss_sprite ss_layout_link',
+          scope: this
+      },/* {
+          text: 'Horizontal Line',
+          handler: ProcessMapObj.horiLine,
+          scope: this
+      }, {
+          text: 'Vertical Line',
+          handler: ProcessMapObj.vertiLine,
+          scope: this
+      }, {
+          text: 'Delete All Lines',
+          handler: ProcessMapObj.delLines,
+          scope: this
+      }, */{
+          text: 'Process Permission',
+          iconCls: 'button_menu_ext ss_sprite ss_application_key',
+          handler: ProcessMapObj.processPermission,
+          scope: this
+      },{
+          text: 'Process Supervisor',
+          iconCls: 'button_menu_ext ss_sprite ss_group',
+          menu: {        // <-- submenu by nested config object
+                  items: [
+                      // stick any markup in a menu
+                      {
+                          text: 'Supervisors',
+                          iconCls: 'button_menu_ext ss_sprite ss_group',
+                          handler: ProcessMapObj.processSupervisors
+                      },
+                      {
+                          text: 'DynaForm',
+                          iconCls: 'button_menu_ext ss_sprite ss_application_form',
+                          handler: ProcessMapObj.processDynaform
+                      },
+                      {
+                          text: 'Input Documents',
+                          iconCls: 'button_menu_ext ss_sprite ss_page_white_put',
+                          handler: ProcessMapObj.processIODoc
+                      }
+                  ]
+              }
+      },{
+          text: 'Case Tracker',
+          iconCls: 'button_menu_ext ss_sprite ss_exclamation',
+
+          menu: {        // <-- submenu by nested config object
+                  items: [
+                      // stick any markup in a menu
+                      {
+                          text: 'Properties',
+                          iconCls: 'button_menu_ext ss_sprite ss_exclamation',
+                          handler: ProcessMapObj.caseTrackerProperties,
+                          scope:this
+                      },
+                      {
+                          text: 'Objects',
+                          iconCls: 'button_menu_ext ss_sprite ss_exclamation',
+                          handler: ProcessMapObj.caseTrackerObjects,
+                          scope:this
+                      }
+                  ]
+              }
+      }, {
+          text: 'Process File Manager',
+          iconCls: 'button_menu_ext ss_sprite ss_folder',
+          menu: {        // <-- submenu by nested config object
+                  items: [
+                      // stick any markup in a menu
+                      {
+                          text: 'mailTemplates',
+                          iconCls: 'button_menu_ext ss_sprite ss_email',
+                          handler: ProcessMapObj.processFileManager
+                      },
+                      {
+                          text: 'public',
+                          iconCls: 'button_menu_ext ss_sprite ss_folder_go',
+                          handler: ProcessMapObj.processFileManager
+                      }
+                  ]
+              }
+      }]
+  });
+
+  canvas.on('contextmenu', function(e) {
+      e.stopEvent();
+      this.workflow.contextX = e.xy[0];
+      this.workflow.contextY = e.xy[1];
+      var pmosExtObj = new pmosExt();
+      //Load all the process Data
+      pmosExtObj.loadEditProcess(this);
+      pmosExtObj.loadProcessCategory(this);
+      this.contextCanvasMenu.showAt(e.getXY());
+  }, this);
+
+  canvas.on('click', function(e) {
+      e.stopEvent();
+      this.workflow.contextClicked = false;
+      if(this.workflow.currentSelection != null)
+          this.workflow.disablePorts(this.workflow.currentSelection);
+      //Removes Flow menu
+      this.workflow.setCurrentSelection(null);
+  }, this);
+
+  var simpleToolbar = new Ext.Toolbar('toolbar');
+  simpleToolbar.addButton({
+      text: 'Save',
+      cls: 'x-btn-text-icon scroll-bottom'
+  });
+  simpleToolbar.addButton({
+      text: 'Save As',
+      cls: 'x-btn-text-icon scroll-bottom'
+  });
+  simpleToolbar.addButton({
+      text: 'Undo',
+      cls: 'x-btn-text-icon'
+  });
+  simpleToolbar.addButton({
+      text: 'Redo',
+      cls: 'x-btn-text-icon'
+  });
+
+  var menu = new FlowMenu(workflow);
+  workflow.addSelectionListener(menu);
+  workflow.scrollArea = document.getElementById(centerRegionId).parentNode;
+  
+  
+  
+  
+  
+  var dragsource=new Ext.dd.DragSource("x-shapes-task", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnTask"
+      }
+  });
+  var dragsource=new Ext.dd.DragSource("x-shapes-startEvent", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnEventEmptyStart"
+      }
+  });
+  var dragsource=new Ext.dd.DragSource("x-shapes-interEvent", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnEventEmptyInter"
+      }
+  });
+  var dragsource=new Ext.dd.DragSource("x-shapes-endEvent", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnEventEmptyEnd"
+      }
+  });
+  var dragsource=new Ext.dd.DragSource("x-shapes-gateways", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnGatewayExclusiveData"
+      }
+  });
+  /*var dragsource=new Ext.dd.DragSource("x-shapes-dataobject", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnDataobject"
+      }
+  });
+  var dragsource=new Ext.dd.DragSource("x-shapes-pool", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnPool"
+      }
+  });*/
+  var dragsource=new Ext.dd.DragSource("x-shapes-annotation", {
+      ddGroup:'TreeDD',
+      dragData:{
+          name: "bpmnAnnotation"
+      }
+  });
+
+
+  var droptarget=new Ext.dd.DropTarget(centerRegionId,{
+      ddGroup:'TreeDD'
+  });
+
+  //Creating Pool
+  var oPool = new bpmnPool(workflow);
+  //workflow.addFigure(oPool,100,70);
+  if(workflow.taskNo == '')
+      workflow.taskNo= 0; //Initializing Count for the bpmnTask
+  var count = 0;
+  this.taskName='';
+  droptarget.notifyDrop=function(dd, e, data)
+  {
+      if(data.name)
+      {
+          var xOffset    = workflow.getAbsoluteX();
+          var yOffset    = workflow.getAbsoluteY();
+          if(data.name == 'bpmnTask')
+          {
+              workflow.boundaryEvent = false;
+          }
+
+
+          NewShape = eval("new "+data.name+"(workflow)");
+          NewShape.x = e.xy[0];
+          NewShape.y = e.xy[1];
+          NewShape.actiontype = 'addTask';
+
+          if(data.name == 'bpmnAnnotation')
+              {
+                  NewShape.actiontype = 'addText';
+                  workflow.saveShape(NewShape);      //Saving task when user drags and drops it
+              }
+          if(data.name == 'bpmnTask')
+              {
+                  NewShape.actiontype = 'addTask';
+                  workflow.saveShape(NewShape);      //Saving Annotations when user drags and drops it
+                  // NewShape.taskName = workflow.taskName;
+              }
+
+
+
+
+          var scrollLeft = workflow.getScrollLeft();
+          var scrollTop  = workflow.getScrollTop();
+          workflow.addFigure(NewShape,e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop);
+          return true;
+      }
+  }
+
+
+  function createConnection(shapes)
+  {
+      //var totaltask = shapes[0].length;                //shapes[0] is an array for all the tasks
+      //var totalgateways = shapes[1].length;          //shapes[1] is an array for all the gateways
+      //var totalevents = shapes[2].length;           //shapes[2] is an array for all the events
+      var totalroutes  = shapes.routes.length;           //shapes[3] is an array for all the routes
+
+      for(var i=0;i<=totalroutes-1;i++)
+      {
+          var sourceid = shapes.routes[i][1];      //getting source id for connection from Routes array
+          var targetid = shapes.routes[i][2];      //getting target id for connection from Routes array
+
+          //After creating all the shapes, check one by one shape id
+          for(var conn =0; conn < this.workflow.figures.data.length ; conn++)
+          {
+              if(typeof this.workflow.figures.data[conn] === 'object')
+              {
+                  if(sourceid == this.workflow.figures.data[conn].id){
+                      sourceObj = this.workflow.figures.data[conn];
+                  }
+              }
+          }
+
+          for(var conn =0; conn < this.workflow.figures.data.length ; conn++)
+          {
+              if(typeof this.workflow.figures.data[conn] === 'object')
+              {
+                  //If End Process or Evaluate
+                  if(targetid == '-1' || typeof shapes.routes[i][5] != 'undefined' && shapes.routes[i][5] == 'EVALUATE')
+                  {
+                      targetObj = eval("new bpmnEventEmptyEnd (this.workflow)");
+                      this.workflow.addFigure(targetObj,sourceObj.x+67,sourceObj.y+60);
+                      break;
+                  }
+                  else if(targetid == this.workflow.figures.data[conn].id ){
+                      targetObj = this.workflow.figures.data[conn];
+                  }
+              }
+          }
+
+
+          //Making Connections
+          var connObj = new DecoratedConnection();
+          connObj.setSource(sourceObj.output1);
+          connObj.setTarget(targetObj.input2);
+          connObj.id = shapes.routes[i][0];
+          this.workflow.addFigure(connObj);
+
+      }
+  }
+
+
+
+
+  /*function getUrlVars()
+  {
+      var vars = [], hash;
+      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+
+      for(var i = 0; i < hashes.length; i++)
+      {
+          hash = hashes[i].split('=');
+          vars.push(hash[0]);
+          vars[hash[0]] = hash[1];
+      }
+      var pro_uid = vars["PRO_UID"];
+      return pro_uid;
+  }*/
+
+  function createShapes(stringData,_4562)
+  {
+
+      var responsearray = stringData.split("|");
+      var jsonstring = new Array();
+      var shapes = new Array();
+      //var param = new Array();
+      var shapeType = new Array();
+
+      for(var i=0; i<=responsearray.length-1;i++)
+      {
+          jsonstring[i] = responsearray[i].split(":");
+          var param = jsonstring[i][0].replace(" ","");
+          shapeType[i] = param;
+          switch(param)
+          {
+              case 'tasks':
+                  shapes[param] = new Array();
+                  shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
+                  break;
+              case 'gateways':
+                  shapes[param] = new Array();
+                  shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
+                  break;
+              case 'events':
+                  shapes[param] = new Array();
+                  shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
+                  break;
+              case 'annotations':
+                  shapes[param] = new Array();
+                  shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
+                  break;
+              case 'process':
+                  shapes[param] = new Array();
+                  shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
+                  break;
+              case 'subprocess':
+                  shapes[param] = new Array();
+                  shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
+                  break;
+              case 'routes':
+                  shapes[param] = new Array();
+                  shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
+                  break;
+          }
+      }
+      workflow.taskNo = 0;
+      //Create all shapes
+      for(var j=0;j< shapeType.length;j++)
+      {
+          //  _4562.workflow.taskNo=0;
+          
+          switch(shapeType[j])
+          {
+              case 'tasks':
+                  for(var k=0;k<shapes.tasks.length;k++){
+                      var task_boundary = shapes.tasks[k][6];
+                      if(task_boundary != null && task_boundary == 'TIMER' && task_boundary != '')
+                          workflow.boundaryEvent = true;
+                      else
+                          workflow.boundaryEvent = false;
+
+                      if(k != 0)
+                          workflow.taskNo++;
+
+                      workflow.taskName = shapes.tasks[k][1];
+                      workflow.task_width = shapes.tasks[k][4];
+                      workflow.task_height = shapes.tasks[k][5];
+                      NewShape = eval("new bpmnTask(workflow)");
+                      NewShape.x = shapes.tasks[k][2];
+                      NewShape.y = shapes.tasks[k][3];
+                      NewShape.taskName = shapes.tasks[k][1];
+                      workflow.setBoundary(NewShape);
+                      workflow.addFigure(NewShape, NewShape.x, NewShape.y);
+                      NewShape.html.id = shapes.tasks[k][0];
+                      NewShape.id = shapes.tasks[k][0];
+                  }
+                  break;
+              case 'gateways':
+                  for(var k=0;k<shapes.gateways.length;k++){
+                      var srctype = shapes.gateways[k][1];
+                      
+                      NewShape = eval("new "+srctype+"(_4562.workflow)");
+                      NewShape.x = shapes.gateways[k][2];
+                      NewShape.y = shapes.gateways[k][3];
+                      workflow.setBoundary(NewShape);
+                      workflow.addFigure(NewShape, NewShape.x, NewShape.y);
+                      //Setting newshape id to the old shape id
+                      NewShape.html.id = shapes.gateways[k][0];
+                      NewShape.id = shapes.gateways[k][0];
+                  }
+                  break;
+              case 'events':
+                      for(var k=0;k<shapes.events.length;k++){
+                          var srceventtype = shapes.events[k][1];
+                          if(! srceventtype.match(/End/))
+                          {
+                              NewShape = eval("new "+srceventtype+"(_4562.workflow)");
+                              NewShape.x = shapes.events[k][2];
+                              NewShape.y = shapes.events[k][3];
+                              workflow.setBoundary(NewShape);
+                              workflow.addFigure(NewShape, NewShape.x, NewShape.y);
+                              //Setting newshape id to the old shape id
+                              NewShape.html.id = shapes.events[k][0];
+                              NewShape.id = shapes.events[k][0];
+                          }
+                  }
+                  break;
+              case 'annotations':
+                  for(var k=0;k<shapes.annotations.length;k++){
+                      workflow.annotationName = shapes.annotations[k][1];
+                      workflow.anno_width = shapes.annotations[k][4];
+                      workflow.anno_height = shapes.annotations[k][5];
+                      NewShape = eval("new bpmnAnnotation(_4562.workflow)");
+                      NewShape.x = shapes.annotations[k][2];
+                      NewShape.y = shapes.annotations[k][3];
+                      workflow.setBoundary(NewShape);
+                      workflow.addFigure(NewShape, NewShape.x, NewShape.y);
+                      //Setting newshape id to the old shape id
+                      NewShape.html.id = shapes.annotations[k][0];
+                      NewShape.id = shapes.annotations[k][0];
+                  }
+                  break;
+          case 'subprocess':
+              for(var k=0;k<shapes.subprocess.length;k++){
+                  workflow.subProcessName = shapes.subprocess[k][1];
+                  NewShape = eval("new bpmnSubProcess(_4562.workflow)");
+                  NewShape.x = shapes.subprocess[k][2];
+                  NewShape.y = shapes.subprocess[k][3];
+                  workflow.setBoundary(NewShape);
+                  workflow.addFigure(NewShape, NewShape.x, NewShape.y);
+                  //Setting newshape id to the old shape id
+                  NewShape.html.id = shapes.subprocess[k][0];
+                  NewShape.id = shapes.subprocess[k][0];
+              }
+              break;
+          }
+      }
+      if(typeof(workflow.taskNo) != 'undefined' && workflow.taskNo != 0)
+          workflow.taskNo++;
+      return shapes;
+  }
+
+
+  function updateConnection(connArray,oldid,newid)
+  {
+      for(var i=0;i< connArray.length;i++)
+      {
+          if(connArray[i][1] == oldid)
+              connArray[i][1] = newid;
+          else if(connArray[i][2] == oldid)
+              connArray[i][2] = newid;
+      }
+      return connArray;
+  }
+
+  function debug(msg)
+  {
+      var console = document.getElementById("debug");
+      console.innerHTML=console.innerHTML+"<br>"+msg;
+  }
+
+  function saveProcess()
+  {
+      // console.dir(this.workflow);
+
+      var tasks = new Array();
+      var events = new Array();
+      var gateways = new Array();
+      var annotations = new Array();
+      var subprocess = new Array();
+      var l=0;
+      var m=0;
+      var n=0;
+      var p=0;
+      var r=0;
+
+      for(var c = 0; c<this.workflow.figures.data.length; c++)
+      {
+          if(this.workflow.figures.data[c]){
+              if(typeof this.workflow.figures.data[c] === "object")
+              {
+                  if(this.workflow.figures.data[c].type.match(/Task/))
+                  {
+                      tasks[l] = new Array();
+
+                      tasks[l][0] = this.workflow.figures.data[c].id;
+                      tasks[l][1] = this.workflow.figures.data[c].taskName;
+                      tasks[l][2] = this.workflow.figures.data[c].x;
+                      tasks[l][3] = this.workflow.figures.data[c].y;
+                      tasks[l][4] = this.workflow.figures.data[c].width;
+                      tasks[l][5] = this.workflow.figures.data[c].height;
+                      tasks[l][6] = 'NORMAL';
+
+                      l++;
+                  }
+
+                  if(this.workflow.figures.data[c].type.match(/Gateway/))
+                  {
+                      gateways[m] = new Array();
+
+                      gateways[m][0] = this.workflow.figures.data[c].id;
+                      gateways[m][1] = this.workflow.figures.data[c].type;
+                      gateways[m][2] = this.workflow.figures.data[c].x;
+                      gateways[m][3] = this.workflow.figures.data[c].y;
+                      gateways[m][4] = this.workflow.figures.data[c].width;
+                      gateways[m][5] = this.workflow.figures.data[c].height;
+
+                      m++;
+                  }
+
+                  if(this.workflow.figures.data[c].type.match(/Event/))
+                  {
+                      events[n] = new Array();
+
+                      events[n][0] = this.workflow.figures.data[c].id;
+                      events[n][1] = this.workflow.figures.data[c].type;
+                      events[n][2] = this.workflow.figures.data[c].x;
+                      events[n][3] = this.workflow.figures.data[c].y;
+                      events[n][4] = this.workflow.figures.data[c].width;
+                      events[n][5] = this.workflow.figures.data[c].height;
+
+                      n++;
+                  }
+
+                  if(this.workflow.figures.data[c].type.match(/Annotation/))
+                  {
+                      annotations[p] = new Array();
+
+                      annotations[p][0] = this.workflow.figures.data[c].id;
+                      annotations[p][1] = this.workflow.figures.data[c].type;
+                      annotations[p][2] = this.workflow.figures.data[c].x;
+                      annotations[p][3] = this.workflow.figures.data[c].y;
+                      annotations[p][4] = this.workflow.figures.data[c].width;
+                      annotations[p][5] = this.workflow.figures.data[c].height;
+                      annotations[p][6] = this.workflow.figures.data[c].annotationName;
+                      p++;
+                  }
+
+                  if(this.workflow.figures.data[c].type.match(/SubProcess/))
+                  {
+                      subprocess[r] = new Array();
+
+                      subprocess[r][0] = this.workflow.figures.data[c].id;
+                      subprocess[r][1] = this.workflow.figures.data[c].subProcessName;
+                      subprocess[r][2] = this.workflow.figures.data[c].x;
+                      subprocess[r][3] = this.workflow.figures.data[c].y;
+                      subprocess[r][4] = this.workflow.figures.data[c].width;
+                      subprocess[r][5] = this.workflow.figures.data[c].height;
+                      subprocess[r][6] = 'SUBPROCESS';
+                      r++;
+                  }
+              }
+          }
+      }
+
+      var routes = new Array();
+      routes = this.workflow.getCommonConnections(this);
+
+      //array task ['idTask','name','pos_X','pos_y']
+      var oldtasks    = [['4043621294c5bda0d9625f4067933182','Task 1','431','131'],['4131425644c5bda073ed062050942935','Task 2','360','274'],['6367816924c6cbc57f36c36034634744','Task 3','540','274']];
+      //array gateways ['idGateway','type_gateway','pos_X','pos_y']
+      var oldgateways = [['6934720824c5be48364b533001453464','GatewayExclusiveData','461','228']];
+      //array gateways ['idEvent','type_event','pos_X','pos_y']
+      var oldevents    = [['2081943344c5bdbb38a7ae9016052622','EventEmptyStart','480','95'],['5585460614c5bdbb8629170012669821','EventEmptyEnd','411','347'],['8565089054c5be1e6efeca5077280809','EventEmptyEnd','590','347']];
+      //array routes ['id','from','to']
+      var oldroutes    = [['2081943344c5bdbb38a7ae9016052982','2081943344c5bdbb38a7ae9016052622','4043621294c5bda0d9625f4067933182'],['4031913164c5bdbb5329a05024607071','4043621294c5bda0d9625f4067933182','6934720824c5be48364b533001453464'],['8851314534c5a6777ee2c96009360450','6934720824c5be48364b533001453464','4131425644c5bda073ed062050942935'],['6934720824c5be48364b533001453464','6934720824c5be48364b533001453464','6367816924c6cbc57f36c36034634744'],['7298598774c5bd9fa3ed1c8035004509','4131425644c5bda073ed062050942935','5585460614c5bdbb8629170012669821'],['8565089054c5be1e6efeca5077280809','6367816924c6cbc57f36c36034634744','8565089054c5be1e6efeca5077280809']];
+
+      var allRoutes = routes
+      var aTasks        =  	Ext.util.JSON.encode(tasks);
+      var aGateways     = 	Ext.util.JSON.encode(gateways);
+      var aEvents       = 	Ext.util.JSON.encode(events);
+      var aAnnotations  = 	Ext.util.JSON.encode(annotations);
+      var aRoutes       = 	Ext.util.JSON.encode(routes);
+      var aSubProcess   = Ext.util.JSON.encode(subprocess);
+
+      var pro_uid = getUrlVars();
+
+      if(typeof pro_uid != 'undefined')
+      {
+          Ext.Ajax.request({
+              url: 'saveProcess.php',
+              method: 'POST',
+              success: function(response) {
+                  Ext.Msg.alert ('Done', response.responseText);
+              },
+              failure: function(){},
+              params: {
+                  PRO_UID:pro_uid,
+                  tasks: aTasks,
+                  gateways:aGateways,
+                  events:aEvents,
+                  annotations:aAnnotations,
+                  subprocess:aSubProcess,
+                  routes:aRoutes
+              }
+          });
+      }
+      else
+          Ext.Msg.alert ('Process ID Undefined');
+  }
+
+
+});
+
diff --git a/workflow/engine/templates/bpmn/processmap.html b/workflow/engine/templates/bpmn/processmap.html
index 19fca8e19..3c0ae162b 100755
--- a/workflow/engine/templates/bpmn/processmap.html
+++ b/workflow/engine/templates/bpmn/processmap.html
@@ -1,10 +1,7 @@
 <div id='cases-grid'></div>
-  <div id="toolbar"></div>
-  <div id="center1" class="x-layout-active-content">
-     <div id="paintarea" >
-    </div>
-  </div>
-  <div id="debug">
-  </div>
-  <div id="properties">
-  </div>
+<div id="toolbar"></div>
+<div id="center1" class="x-layout-active-content">
+  <div id="paintarea" ></div>
+</div>
+<div id="debug"></div>
+<div id="properties"></div>
\ No newline at end of file
diff --git a/workflow/engine/templates/bpmn/processmap.js b/workflow/engine/templates/bpmn/processmap.js
index 3b53bb49c..5db554abd 100755
--- a/workflow/engine/templates/bpmn/processmap.js
+++ b/workflow/engine/templates/bpmn/processmap.js
@@ -1,853 +1,229 @@
 Ext.onReady ( function() {
 
-    workflow  = new MyWorkflow("paintarea");
-    workflow.setEnableSmoothFigureHandling(false);
-    workflow.scrollArea.width = 2000;
-    //For Undo and Redo Options
-   // workflow.getCommandStack().addCommandStackEventListener(new commandListener());
-    //Getting process id from the URL using getUrlvars function
-    var pro_uid = getUrlVars();
+  workflow  = new MyWorkflow("paintarea");
+  workflow.setEnableSmoothFigureHandling(false);
+  workflow.scrollArea.width = 2000;
+  //For Undo and Redo Options
+  // workflow.getCommandStack().addCommandStackEventListener(new commandListener());
+  //Getting process id from the URL using getUrlvars function
+  
 
-    if(typeof pro_uid !== 'undefined') {
-        Ext.Ajax.request({
-            url: 'openProcess.php?PRO_UID=' + pro_uid,
-            success: function(response) {
-                shapesData =  createShapes(response.responseText,this);
-                createConnection(shapesData);
-            },
-            failure: function(){
-                Ext.Msg.alert ('Failure');
-            }
-        });
-    }
-
-    
-
-    /**********************************************************************************
-   *
-   * Do the Ext (Yahoo UI) Stuff
-   *
-   **********************************************************************************/
-
-
-
-    var west= {
-        xtype	:"panel",
-        title: 'Palette',
-        region: 'west',
-        split: false,
-        width: 75,
-        collapsible: false,
-        margins:'3 0 3 3',
-        cmargins:'3 3 3 3',
-        items:{
-            html:'<div id="x-shapes">\n\
-                        <p id="x-shapes-task" title="Task" ><img src= "/skins/ext/images/gray/shapes/pallete/task.png"/></p>\n\
-                        <p id="x-shapes-startEvent" title="Start"><img src= "/skins/ext/images/gray/shapes/pallete/startevent.png"/></p>\n\
-                        <p id="x-shapes-interEvent" title="Intermediate Event"><img src= "/skins/ext/images/gray/shapes/pallete/interevent.png"/></p>\n\
-                        <p id="x-shapes-endEvent" title="End Event"><img src= "/skins/ext/images/gray/shapes/pallete/endevent.png"/></p>\n\
-                        <p id="x-shapes-gateways" title="Gateway"><img src= "/skins/ext/images/gray/shapes/pallete/gateway.png"/></p>\n\
-                        <p id="x-shapes-annotation" title="Annotation"><img src= "/skins/ext/images/gray/shapes/pallete/annotation.png"/></p>\n\
-                        <!--<p id="x-shapes-group" title="Group"><img src= "/skins/ext/images/gray/shapes/pallete/group.png"/></p>\n\
-                        <p id="x-shapes-dataobject" title="Data Object"><img src= "/skins/ext/images/gray/shapes/pallete/dataobject.png"/></p>\n\
-                        <p id="x-shapes-pool" title="Pool"><img src= "/skins/ext/images/gray/shapes/pallete/pool.png"/></p>\n\
-                        <p id="x-shapes-lane" title="Lane"><img src= "/skins/ext/images/gray/shapes/pallete/lane.png"/></p>\n\
-                        <p id="x-shapes-milestone" title="Milestone"><img src= "/skins/ext/images/gray/shapes/pallete/milestone.png"/></p>-->\n\
-                  </div>'
-        }
-    };
-
-    var north= {
-        xtype	:	"panel",
-        initialSize: 60,
-        split:false,
-        titlebar: false,
-        collapsible: false,
-        animate: false,
-        region	:	"north"
-
-    };
-    var south= {
-        xtype	:	"panel",
-        initialSize: 120,
-        height: 100,
-        split:true,
-        titlebar: false,
-        collapsible: true,
-        autoScroll:true,
-        animate: true,
-        region	:	"south",
-        items: {
-            region: 'center',
-            xtype: 'tabpanel',
-            items: [{
-                title: 'Properties',
-                html: 'Properties'
-            },
-            {
-                title: 'Debug Console',
-                html: 'Debug Console'
-            }]
-        }
-    };
-
-    var center= {
-        width:100,
-        height:200,
-        xtype	:	"panel",
-        titlebar: true,
-        title   : "BPMN Processmap",
-        autoScroll:true,
-        fitToFrame:true,
-        region	:	"center"
-
-    };
-
-    
-        
-    var processObj = new ProcessOptions();
-
-    var main = new Ext.Panel({
-        tbar: [
-        {
-            text: 'Save',
-            cls: 'x-btn-text-icon',
-            iconCls: 'button_menu_ext ss_sprite ss_disk',
-            handler: function() {
-                saveProcess();
-            }
-        },
-        {
-            text:'Save as'
-        },
-
-        {
-            text:'Undo',
-            iconCls: 'button_menu_ext ss_sprite ss_arrow_undo',
-            handler: function() {
-                workflow.getCommandStack().undo();
-            }
-
-        },
-
-        {
-            text:'Redo',
-            iconCls: 'button_menu_ext ss_sprite ss_arrow_redo',
-            handler: function() {
-                workflow.getCommandStack().redo();
-            }
-        },
-
-        {
-            xtype: 'tbsplit',
-            iconCls: 'button_menu_ext ss_sprite ss_application',
-            text: 'Process',
-            menu: new Ext.menu.Menu({
-                items: [{
-                            text    : 'Dynaform',
-                            iconCls: 'button_menu_ext ss_sprite ss_application_form',
-                            handler : function() {
-                                processObj.addDynaform();
-                            }
-                        },
-                        {
-                            text: 'Input Document',
-                            iconCls: 'button_menu_ext ss_sprite ss_page_white_put',
-                            handler : function() {
-                                processObj.addInputDoc();
-                            }
-                        },{
-                            text: 'Output Document',
-                            iconCls: 'button_menu_ext ss_sprite ss_page_white_get',
-
-                            handler : function() {
-                                processObj.addOutputDoc();
-                            }
-                        },{
-                            text: 'Trigger',
-                            iconCls: 'button_menu_ext ss_sprite ss_cog',
-                            handler : function() {
-                                processObj.addTriggers();
-                            }
-                        },
-                        {
-                            text: 'Report Table',
-                            iconCls: 'button_menu_ext ss_sprite ss_table',
-                            handler : function() {
-                                processObj.addReportTable();
-                            }
-                        },
-                        {
-                            text: 'Database Connection',
-                            iconCls: 'button_menu_ext ss_sprite ss_database_connect',
-                            handler : function() {
-                                processObj.dbConnection();
-                            }
-                        }]
-            })
-
-        },
-        {
-            text:'Zoom In',
-            iconCls: 'button_menu_ext ss_sprite ss_zoom_in',
-            handler: function() {
-                workflow.zoom('in');
-            }
-        },
-        {
-            text:'Zoom Out',
-            iconCls: 'button_menu_ext ss_sprite ss_zoom_out',
-            handler: function() {
-                workflow.zoom('out');
-            }
-        }
-    ],
-        renderTo  : "center1",
-        layout    : "border",
-        autoScroll: true,
-        height    : 1000,
-        width     : 1300,
-        items   : [west,north,center]
-    });
-
-    //Getting Process name and setting Title of center region to that processname
-    var urlparams = '?action=load&data={"uid":"'+ pro_uid +'"}';
+  if(typeof pro_uid !== 'undefined') {
     Ext.Ajax.request({
-            url: "processes_Ajax.php"+ urlparams,
-            success: function(response) {
-                var processes = Ext.util.JSON.decode(response.responseText);
-                main.items.items[2].setTitle(processes.title.label);     //items[2]=>center region
-            },
-            failure: function(){
-                Ext.Msg.alert ('Failure');
-            }
-        });
+      url: 'openProcess.php?PRO_UID=' + pro_uid,
+      success: function(response) {
+        //shapesData =  createShapes(response.responseText,this);
+        //createConnection(shapesData);
+      },
+      failure: function(){
+        Ext.Msg.alert ('Failure');
+      }
+    });
+  }
 
-    //Get main into workflow object
-    workflow.main = main;
-    //items[3]=>'center region'
-    var centerRegionId = main.items.items[2].body.id;
-    canvas = Ext.get(centerRegionId);
+  
 
-    //Context Menu of ProcessMap
-    ProcessMapObj = new ProcessMapContext();
-    contextCanvasMenu = new Ext.menu.Menu({
+  /**********************************************************************************
+  *
+  * Do the Ext (Yahoo UI) Stuff
+  *
+  **********************************************************************************/
+  var west= {
+    id         : 'palette',
+    title      : 'Palette',
+    region     : 'west',
+    width      : 65,
+    border     : false,
+    autoScroll : true,
+    collapsible :true,
+    split       :true,
+    //collapseMode:'mini',
+    hideCollapseTool: false,
+
+    items:{
+      html:'<div id="x-shapes">\n\
+              <p id="x-shapes-task" title="Task" ><img src= "/skins/ext/images/gray/shapes/pallete/task.png"/></p>\n\
+              <p id="x-shapes-startEvent" title="Start"><img src= "/skins/ext/images/gray/shapes/pallete/startevent.png"/></p>\n\
+              <p id="x-shapes-interEvent" title="Intermediate Event"><img src= "/skins/ext/images/gray/shapes/pallete/interevent.png"/></p>\n\
+              <p id="x-shapes-endEvent" title="End Event"><img src= "/skins/ext/images/gray/shapes/pallete/endevent.png"/></p>\n\
+              <p id="x-shapes-gateways" title="Gateway"><img src= "/skins/ext/images/gray/shapes/pallete/gateway.png"/></p>\n\
+              <p id="x-shapes-annotation" title="Annotation"><img src= "/skins/ext/images/gray/shapes/pallete/annotation.png"/></p>\n\
+              <!--<p id="x-shapes-group" title="Group"><img src= "/skins/ext/images/gray/shapes/pallete/group.png"/></p>\n\
+              <p id="x-shapes-dataobject" title="Data Object"><img src= "/skins/ext/images/gray/shapes/pallete/dataobject.png"/></p>\n\
+              <p id="x-shapes-pool" title="Pool"><img src= "/skins/ext/images/gray/shapes/pallete/pool.png"/></p>\n\
+              <p id="x-shapes-lane" title="Lane"><img src= "/skins/ext/images/gray/shapes/pallete/lane.png"/></p>\n\
+              <p id="x-shapes-milestone" title="Milestone"><img src= "/skins/ext/images/gray/shapes/pallete/milestone.png"/></p>-->\n\
+            </div>'
+    }
+  };
+  
+  var east= {
+    id         : 'eastPanel',
+    title      : '',
+    region     : 'east',
+    width      : 150,
+    border     : false,
+    autoScroll : true,
+    collapsible :true,
+    split       :true,
+    collapseMode:'mini',
+    hideCollapseTool: false,
+
+    items:{
+      html:'east panel'
+    }
+  };
+
+  var north= {
+    xtype	:	"panel",
+    initialSize: 60,
+    split:false,
+    titlebar: false,
+    collapsible: false,
+    animate: false,
+    region	:	"north"
+  };
+  
+  var south= {
+    xtype	:	"panel",
+    initialSize: 120,
+    height: 100,
+    split:true,
+    titlebar: false,
+    collapsible: true,
+    autoScroll:true,
+    animate: true,
+    region	:	"south",
+    items: {
+        region: 'center',
+        xtype: 'tabpanel',
         items: [{
-            text: 'Edit Process',
-            handler: ProcessMapObj.editProcess,
-            //icon: '/skins/ext/images/gray/shapes/more.gif',
-            iconCls: 'button_menu_ext ss_sprite ss_page_white_edit',
-            scope: this
-        }, {
-            text: 'Export Process',
-            handler: ProcessMapObj.exportProcess,
-            iconCls: 'button_menu_ext ss_sprite ss_script_go',
-            scope: this
-        }, {
-            text: 'Add Task',
-            handler: ProcessMapObj.addTask,
-            iconCls: 'button_menu_ext ss_sprite ss_layout_add',
-            scope: this
-        }, {
-            text: 'Add Subprocess',
-            handler: workflow.subProcess,
-            iconCls: 'button_menu_ext ss_sprite ss_layout_link',
-            scope: this
-        },/* {
-            text: 'Horizontal Line',
-            handler: ProcessMapObj.horiLine,
-            scope: this
-        }, {
-            text: 'Vertical Line',
-            handler: ProcessMapObj.vertiLine,
-            scope: this
-        }, {
-            text: 'Delete All Lines',
-            handler: ProcessMapObj.delLines,
-            scope: this
-        }, */{
-            text: 'Process Permission',
-            iconCls: 'button_menu_ext ss_sprite ss_application_key',
-            handler: ProcessMapObj.processPermission,
-            scope: this
-        },{
-            text: 'Process Supervisor',
-            iconCls: 'button_menu_ext ss_sprite ss_group',
-            menu: {        // <-- submenu by nested config object
-                    items: [
-                        // stick any markup in a menu
-                        {
-                            text: 'Supervisors',
-                            iconCls: 'button_menu_ext ss_sprite ss_group',
-                            handler: ProcessMapObj.processSupervisors
-                        },
-                        {
-                            text: 'DynaForm',
-                            iconCls: 'button_menu_ext ss_sprite ss_application_form',
-                            handler: ProcessMapObj.processDynaform
-                        },
-                        {
-                            text: 'Input Documents',
-                            iconCls: 'button_menu_ext ss_sprite ss_page_white_put',
-                            handler: ProcessMapObj.processIODoc
-                        }
-                    ]
-                }
-        },{
-            text: 'Case Tracker',
-            iconCls: 'button_menu_ext ss_sprite ss_exclamation',
-
-            menu: {        // <-- submenu by nested config object
-                    items: [
-                        // stick any markup in a menu
-                        {
-                            text: 'Properties',
-                            iconCls: 'button_menu_ext ss_sprite ss_exclamation',
-                            handler: ProcessMapObj.caseTrackerProperties,
-                            scope:this
-                        },
-                        {
-                            text: 'Objects',
-                            iconCls: 'button_menu_ext ss_sprite ss_exclamation',
-                            handler: ProcessMapObj.caseTrackerObjects,
-                            scope:this
-                        }
-                    ]
-                }
-        }, {
-            text: 'Process File Manager',
-            iconCls: 'button_menu_ext ss_sprite ss_folder',
-            menu: {        // <-- submenu by nested config object
-                    items: [
-                        // stick any markup in a menu
-                        {
-                            text: 'mailTemplates',
-                            iconCls: 'button_menu_ext ss_sprite ss_email',
-                            handler: ProcessMapObj.processFileManager
-                        },
-                        {
-                            text: 'public',
-                            iconCls: 'button_menu_ext ss_sprite ss_folder_go',
-                            handler: ProcessMapObj.processFileManager
-                        }
-                    ]
-                }
+            title: 'Properties',
+            html: 'Properties'
+        },
+        {
+            title: 'Debug Console',
+            html: 'Debug Console'
         }]
-    });
+    }
+  };
 
-    canvas.on('contextmenu', function(e) {
-        e.stopEvent();
-        this.workflow.contextX = e.xy[0];
-        this.workflow.contextY = e.xy[1];
-        var pmosExtObj = new pmosExt();
-        //Load all the process Data
-        pmosExtObj.loadEditProcess(this);
-        pmosExtObj.loadProcessCategory(this);
-        this.contextCanvasMenu.showAt(e.getXY());
-    }, this);
+  var center= {
+    region: 'center',
+    width:100,
+    height:2000,
+    xtype	:	"iframepanel",
+    title   : "BPMN Processmap - " + pro_title,
 
-    canvas.on('click', function(e) {
-        e.stopEvent();
-        this.workflow.contextClicked = false;
-        if(this.workflow.currentSelection != null)
-            this.workflow.disablePorts(this.workflow.currentSelection);
-        //Removes Flow menu
-        this.workflow.setCurrentSelection(null);
-    }, this);
+    frameConfig:{name:'designerFrame', id:'designerFrame'},
+    defaultSrc : 'designer?PRO_UID=' + pro_uid,
+    loadMask:{msg:'Loading...'},
+    bodyStyle:{height: (_BROWSER.screen.height-55) + 'px', overflow:'scroll'},
+    width:'1024px'
+  };
 
-    var simpleToolbar = new Ext.Toolbar('toolbar');
-    simpleToolbar.addButton({
+  var processObj = new ProcessOptions();
+
+  var main = new Ext.Panel({
+    renderTo  : "center1",
+    region    : "center",
+    layout    : "border",
+    autoScroll: true,
+    height    : 1000,
+    width     : 1300,    
+    items   : [north, center],
+    tbar: [
+      {
         text: 'Save',
-        cls: 'x-btn-text-icon scroll-bottom'
-    });
-    simpleToolbar.addButton({
-        text: 'Save As',
-        cls: 'x-btn-text-icon scroll-bottom'
-    });
-    simpleToolbar.addButton({
-        text: 'Undo',
-        cls: 'x-btn-text-icon'
-    });
-    simpleToolbar.addButton({
-        text: 'Redo',
-        cls: 'x-btn-text-icon'
-    });
+        cls: 'x-btn-text-icon',
+        iconCls: 'button_menu_ext ss_sprite ss_disk',
+        handler: function() {
+          saveProcess();
+        }
+      }, {
+          text:'Save as'
+      }, {
+        text:'Undo',
+        iconCls: 'button_menu_ext ss_sprite ss_arrow_undo',
+        handler: function() {
+          document.getElementById('designerFrame').contentWindow.workflow.getCommandStack().undo();
+        }
+      }, {
+        text:'Redo',
+        iconCls: 'button_menu_ext ss_sprite ss_arrow_redo',
+        handler: function() {
+          document.getElementById('designerFrame').contentWindow.workflow.getCommandStack().redo();
+        }
+      }, {
+        xtype: 'tbsplit',
+        iconCls: 'button_menu_ext ss_sprite ss_application',
+        text: 'Process',
+        menu: new Ext.menu.Menu({
+          items: [{
+              text    : 'Dynaform',
+              iconCls: 'button_menu_ext ss_sprite ss_application_form',
+              handler : function() {
+                processObj.addDynaform();
+              }
+            }, {
+              text: 'Input Document',
+              iconCls: 'button_menu_ext ss_sprite ss_page_white_put',
+              handler : function() {
+                processObj.addInputDoc();
+              }
+            }, {
+              text: 'Output Document',
+              iconCls: 'button_menu_ext ss_sprite ss_page_white_get',
 
-    var menu = new FlowMenu(workflow);
-    workflow.addSelectionListener(menu);
-    workflow.scrollArea = document.getElementById(centerRegionId).parentNode;
-
-    var dragsource=new Ext.dd.DragSource("x-shapes-task", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnTask"
-        }
-    });
-    var dragsource=new Ext.dd.DragSource("x-shapes-startEvent", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnEventEmptyStart"
-        }
-    });
-    var dragsource=new Ext.dd.DragSource("x-shapes-interEvent", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnEventEmptyInter"
-        }
-    });
-    var dragsource=new Ext.dd.DragSource("x-shapes-endEvent", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnEventEmptyEnd"
-        }
-    });
-    var dragsource=new Ext.dd.DragSource("x-shapes-gateways", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnGatewayExclusiveData"
-        }
-    });
-    /*var dragsource=new Ext.dd.DragSource("x-shapes-dataobject", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnDataobject"
-        }
-    });
-    var dragsource=new Ext.dd.DragSource("x-shapes-pool", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnPool"
-        }
-    });*/
-    var dragsource=new Ext.dd.DragSource("x-shapes-annotation", {
-        ddGroup:'TreeDD',
-        dragData:{
-            name: "bpmnAnnotation"
-        }
-    });
-
-
-    var droptarget=new Ext.dd.DropTarget(centerRegionId,{
-        ddGroup:'TreeDD'
-    });
-
-    //Creating Pool
-    var oPool = new bpmnPool(workflow);
-    //workflow.addFigure(oPool,100,70);
-    if(workflow.taskNo == '')
-        workflow.taskNo= 0; //Initializing Count for the bpmnTask
-    var count = 0;
-    this.taskName='';
-    droptarget.notifyDrop=function(dd, e, data)
-    {
-        if(data.name)
-        {
-            var xOffset    = workflow.getAbsoluteX();
-            var yOffset    = workflow.getAbsoluteY();
-            if(data.name == 'bpmnTask')
+              handler : function() {
+                processObj.addOutputDoc();
+              }
+            }, {
+              text: 'Trigger',
+              iconCls: 'button_menu_ext ss_sprite ss_cog',
+              handler : function() {
+                processObj.addTriggers();
+              }
+            },
             {
-                workflow.boundaryEvent = false;
-            }
-
-
-            NewShape = eval("new "+data.name+"(workflow)");
-            NewShape.x = e.xy[0];
-            NewShape.y = e.xy[1];
-            NewShape.actiontype = 'addTask';
-
-            if(data.name == 'bpmnAnnotation')
-                {
-                    NewShape.actiontype = 'addText';
-                    workflow.saveShape(NewShape);      //Saving task when user drags and drops it
-                }
-            if(data.name == 'bpmnTask')
-                {
-                    NewShape.actiontype = 'addTask';
-                    workflow.saveShape(NewShape);      //Saving Annotations when user drags and drops it
-                   // NewShape.taskName = workflow.taskName;
-                }
-
-
-
-
-            var scrollLeft = workflow.getScrollLeft();
-            var scrollTop  = workflow.getScrollTop();
-            workflow.addFigure(NewShape,e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop);
-            return true;
-        }
-    }
-
-
-    function createConnection(shapes)
-    {
-        //var totaltask = shapes[0].length;                //shapes[0] is an array for all the tasks
-        //var totalgateways = shapes[1].length;          //shapes[1] is an array for all the gateways
-        //var totalevents = shapes[2].length;           //shapes[2] is an array for all the events
-        var totalroutes  = shapes.routes.length;           //shapes[3] is an array for all the routes
-
-        for(var i=0;i<=totalroutes-1;i++)
-        {
-            var sourceid = shapes.routes[i][1];      //getting source id for connection from Routes array
-            var targetid = shapes.routes[i][2];      //getting target id for connection from Routes array
-
-            //After creating all the shapes, check one by one shape id
-            for(var conn =0; conn < this.workflow.figures.data.length ; conn++)
+              text: 'Report Table',
+              iconCls: 'button_menu_ext ss_sprite ss_table',
+              handler : function() {
+                processObj.addReportTable();
+              }
+            },
             {
-                if(typeof this.workflow.figures.data[conn] === 'object')
-                {
-                    if(sourceid == this.workflow.figures.data[conn].id){
-                        sourceObj = this.workflow.figures.data[conn];
-                    }
-                }
+              text: 'Database Connection',
+              iconCls: 'button_menu_ext ss_sprite ss_database_connect',
+              handler : function() {
+                processObj.dbConnection();
+              }
             }
+          ]
+        })
 
-            for(var conn =0; conn < this.workflow.figures.data.length ; conn++)
-            {
-                if(typeof this.workflow.figures.data[conn] === 'object')
-                {
-                    //If End Process or Evaluate
-                    if(targetid == '-1' || typeof shapes.routes[i][5] != 'undefined' && shapes.routes[i][5] == 'EVALUATE')
-                    {
-                        targetObj = eval("new bpmnEventEmptyEnd (this.workflow)");
-                        this.workflow.addFigure(targetObj,sourceObj.x+67,sourceObj.y+60);
-                       break;
-                    }
-                    else if(targetid == this.workflow.figures.data[conn].id ){
-                        targetObj = this.workflow.figures.data[conn];
-                    }
-                }
-            }
-
-
-            //Making Connections
-            var connObj = new DecoratedConnection();
-            connObj.setSource(sourceObj.output1);
-            connObj.setTarget(targetObj.input2);
-            connObj.id = shapes.routes[i][0];
-            this.workflow.addFigure(connObj);
-
+      }, {
+        text:'Zoom In',
+        iconCls: 'button_menu_ext ss_sprite ss_zoom_in',
+        handler: function() {
+          document.getElementById('designerFrame').contentWindow.workflow.zoom('in');
         }
-    }
-
-
-
-
-    function getUrlVars()
-    {
-        var vars = [], hash;
-        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
-
-        for(var i = 0; i < hashes.length; i++)
-        {
-            hash = hashes[i].split('=');
-            vars.push(hash[0]);
-            vars[hash[0]] = hash[1];
+      }, {
+        text:'Zoom Out',
+        iconCls: 'button_menu_ext ss_sprite ss_zoom_out',
+        handler: function() {
+          document.getElementById('designerFrame').contentWindow.workflow.zoom('out');
         }
-        var pro_uid = vars["PRO_UID"];
-        return pro_uid;
-    }
-
-    function createShapes(stringData,_4562)
-    {
-
-        var responsearray = stringData.split("|");
-        var jsonstring = new Array();
-        var shapes = new Array();
-        //var param = new Array();
-        var shapeType = new Array();
-
-        for(var i=0; i<=responsearray.length-1;i++)
-        {
-            jsonstring[i] = responsearray[i].split(":");
-            var param = jsonstring[i][0].replace(" ","");
-            shapeType[i] = param;
-            switch(param)
-            {
-                case 'tasks':
-                    shapes[param] = new Array();
-                    shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
-                    break;
-                case 'gateways':
-                    shapes[param] = new Array();
-                    shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
-                    break;
-                case 'events':
-                    shapes[param] = new Array();
-                    shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
-                    break;
-                case 'annotations':
-                    shapes[param] = new Array();
-                    shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
-                    break;
-                case 'process':
-                    shapes[param] = new Array();
-                    shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
-                    break;
-                case 'subprocess':
-                    shapes[param] = new Array();
-                    shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
-                    break;
-                case 'routes':
-                    shapes[param] = new Array();
-                    shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]);
-                    break;
-            }
-        }
-        workflow.taskNo = 0;
-        //Create all shapes
-        for(var j=0;j< shapeType.length;j++)
-        {
-            //  _4562.workflow.taskNo=0;
-           
-            switch(shapeType[j])
-            {
-                case 'tasks':
-                    for(var k=0;k<shapes.tasks.length;k++){
-                        var task_boundary = shapes.tasks[k][6];
-                        if(task_boundary != null && task_boundary == 'TIMER' && task_boundary != '')
-                            workflow.boundaryEvent = true;
-                        else
-                            workflow.boundaryEvent = false;
-
-                        if(k != 0)
-                            workflow.taskNo++;
-
-                        workflow.taskName = shapes.tasks[k][1];
-                        workflow.task_width = shapes.tasks[k][4];
-                        workflow.task_height = shapes.tasks[k][5];
-                        NewShape = eval("new bpmnTask(workflow)");
-                        NewShape.x = shapes.tasks[k][2];
-                        NewShape.y = shapes.tasks[k][3];
-                        NewShape.taskName = shapes.tasks[k][1];
-                        workflow.setBoundary(NewShape);
-                        workflow.addFigure(NewShape, NewShape.x, NewShape.y);
-                        NewShape.html.id = shapes.tasks[k][0];
-                        NewShape.id = shapes.tasks[k][0];
-                    }
-                    break;
-                case 'gateways':
-                    for(var k=0;k<shapes.gateways.length;k++){
-                        var srctype = shapes.gateways[k][1];
-                        
-                        NewShape = eval("new "+srctype+"(_4562.workflow)");
-                        NewShape.x = shapes.gateways[k][2];
-                        NewShape.y = shapes.gateways[k][3];
-                        workflow.setBoundary(NewShape);
-                        workflow.addFigure(NewShape, NewShape.x, NewShape.y);
-                        //Setting newshape id to the old shape id
-                        NewShape.html.id = shapes.gateways[k][0];
-                        NewShape.id = shapes.gateways[k][0];
-                    }
-                    break;
-                case 'events':
-                        for(var k=0;k<shapes.events.length;k++){
-                            var srceventtype = shapes.events[k][1];
-                            if(! srceventtype.match(/End/))
-                            {
-                                NewShape = eval("new "+srceventtype+"(_4562.workflow)");
-                                NewShape.x = shapes.events[k][2];
-                                NewShape.y = shapes.events[k][3];
-                                workflow.setBoundary(NewShape);
-                                workflow.addFigure(NewShape, NewShape.x, NewShape.y);
-                                //Setting newshape id to the old shape id
-                                NewShape.html.id = shapes.events[k][0];
-                                NewShape.id = shapes.events[k][0];
-                           }
-                    }
-                    break;
-                case 'annotations':
-                    for(var k=0;k<shapes.annotations.length;k++){
-                        workflow.annotationName = shapes.annotations[k][1];
-                        workflow.anno_width = shapes.annotations[k][4];
-                        workflow.anno_height = shapes.annotations[k][5];
-                        NewShape = eval("new bpmnAnnotation(_4562.workflow)");
-                        NewShape.x = shapes.annotations[k][2];
-                        NewShape.y = shapes.annotations[k][3];
-                        workflow.setBoundary(NewShape);
-                        workflow.addFigure(NewShape, NewShape.x, NewShape.y);
-                        //Setting newshape id to the old shape id
-                        NewShape.html.id = shapes.annotations[k][0];
-                        NewShape.id = shapes.annotations[k][0];
-                    }
-                    break;
-            case 'subprocess':
-                for(var k=0;k<shapes.subprocess.length;k++){
-                    workflow.subProcessName = shapes.subprocess[k][1];
-                    NewShape = eval("new bpmnSubProcess(_4562.workflow)");
-                    NewShape.x = shapes.subprocess[k][2];
-                    NewShape.y = shapes.subprocess[k][3];
-                    workflow.setBoundary(NewShape);
-                    workflow.addFigure(NewShape, NewShape.x, NewShape.y);
-                    //Setting newshape id to the old shape id
-                    NewShape.html.id = shapes.subprocess[k][0];
-                    NewShape.id = shapes.subprocess[k][0];
-                }
-                break;
-            }
-        }
-        if(typeof(workflow.taskNo) != 'undefined' && workflow.taskNo != 0)
-            workflow.taskNo++;
-        return shapes;
-    }
-
-
-    function updateConnection(connArray,oldid,newid)
-    {
-        for(var i=0;i< connArray.length;i++)
-        {
-            if(connArray[i][1] == oldid)
-                connArray[i][1] = newid;
-            else if(connArray[i][2] == oldid)
-                connArray[i][2] = newid;
-        }
-        return connArray;
-    }
-
-    function debug(msg)
-    {
-        var console = document.getElementById("debug");
-        console.innerHTML=console.innerHTML+"<br>"+msg;
-    }
-
-    function saveProcess()
-    {
-        // console.dir(this.workflow);
-
-        var tasks = new Array();
-        var events = new Array();
-        var gateways = new Array();
-        var annotations = new Array();
-        var subprocess = new Array();
-        var l=0;
-        var m=0;
-        var n=0;
-        var p=0;
-        var r=0;
-
-        for(var c = 0; c<this.workflow.figures.data.length; c++)
-        {
-            if(this.workflow.figures.data[c]){
-                if(typeof this.workflow.figures.data[c] === "object")
-                {
-                    if(this.workflow.figures.data[c].type.match(/Task/))
-                    {
-                        tasks[l] = new Array();
-
-                        tasks[l][0] = this.workflow.figures.data[c].id;
-                        tasks[l][1] = this.workflow.figures.data[c].taskName;
-                        tasks[l][2] = this.workflow.figures.data[c].x;
-                        tasks[l][3] = this.workflow.figures.data[c].y;
-                        tasks[l][4] = this.workflow.figures.data[c].width;
-                        tasks[l][5] = this.workflow.figures.data[c].height;
-                        tasks[l][6] = 'NORMAL';
-
-                        l++;
-                    }
-
-                    if(this.workflow.figures.data[c].type.match(/Gateway/))
-                    {
-                        gateways[m] = new Array();
-
-                        gateways[m][0] = this.workflow.figures.data[c].id;
-                        gateways[m][1] = this.workflow.figures.data[c].type;
-                        gateways[m][2] = this.workflow.figures.data[c].x;
-                        gateways[m][3] = this.workflow.figures.data[c].y;
-                        gateways[m][4] = this.workflow.figures.data[c].width;
-                        gateways[m][5] = this.workflow.figures.data[c].height;
-
-                        m++;
-                    }
-
-                    if(this.workflow.figures.data[c].type.match(/Event/))
-                    {
-                        events[n] = new Array();
-
-                        events[n][0] = this.workflow.figures.data[c].id;
-                        events[n][1] = this.workflow.figures.data[c].type;
-                        events[n][2] = this.workflow.figures.data[c].x;
-                        events[n][3] = this.workflow.figures.data[c].y;
-                        events[n][4] = this.workflow.figures.data[c].width;
-                        events[n][5] = this.workflow.figures.data[c].height;
-
-                        n++;
-                    }
-
-                    if(this.workflow.figures.data[c].type.match(/Annotation/))
-                    {
-                        annotations[p] = new Array();
-
-                        annotations[p][0] = this.workflow.figures.data[c].id;
-                        annotations[p][1] = this.workflow.figures.data[c].type;
-                        annotations[p][2] = this.workflow.figures.data[c].x;
-                        annotations[p][3] = this.workflow.figures.data[c].y;
-                        annotations[p][4] = this.workflow.figures.data[c].width;
-                        annotations[p][5] = this.workflow.figures.data[c].height;
-                        annotations[p][6] = this.workflow.figures.data[c].annotationName;
-                        p++;
-                    }
-
-                    if(this.workflow.figures.data[c].type.match(/SubProcess/))
-                    {
-                        subprocess[r] = new Array();
-
-                        subprocess[r][0] = this.workflow.figures.data[c].id;
-                        subprocess[r][1] = this.workflow.figures.data[c].subProcessName;
-                        subprocess[r][2] = this.workflow.figures.data[c].x;
-                        subprocess[r][3] = this.workflow.figures.data[c].y;
-                        subprocess[r][4] = this.workflow.figures.data[c].width;
-                        subprocess[r][5] = this.workflow.figures.data[c].height;
-                        subprocess[r][6] = 'SUBPROCESS';
-                        r++;
-                    }
-                }
-            }
-        }
-
-        var routes = new Array();
-        routes = this.workflow.getCommonConnections(this);
-
-        //array task ['idTask','name','pos_X','pos_y']
-        var oldtasks    = [['4043621294c5bda0d9625f4067933182','Task 1','431','131'],['4131425644c5bda073ed062050942935','Task 2','360','274'],['6367816924c6cbc57f36c36034634744','Task 3','540','274']];
-        //array gateways ['idGateway','type_gateway','pos_X','pos_y']
-        var oldgateways = [['6934720824c5be48364b533001453464','GatewayExclusiveData','461','228']];
-        //array gateways ['idEvent','type_event','pos_X','pos_y']
-        var oldevents    = [['2081943344c5bdbb38a7ae9016052622','EventEmptyStart','480','95'],['5585460614c5bdbb8629170012669821','EventEmptyEnd','411','347'],['8565089054c5be1e6efeca5077280809','EventEmptyEnd','590','347']];
-        //array routes ['id','from','to']
-        var oldroutes    = [['2081943344c5bdbb38a7ae9016052982','2081943344c5bdbb38a7ae9016052622','4043621294c5bda0d9625f4067933182'],['4031913164c5bdbb5329a05024607071','4043621294c5bda0d9625f4067933182','6934720824c5be48364b533001453464'],['8851314534c5a6777ee2c96009360450','6934720824c5be48364b533001453464','4131425644c5bda073ed062050942935'],['6934720824c5be48364b533001453464','6934720824c5be48364b533001453464','6367816924c6cbc57f36c36034634744'],['7298598774c5bd9fa3ed1c8035004509','4131425644c5bda073ed062050942935','5585460614c5bdbb8629170012669821'],['8565089054c5be1e6efeca5077280809','6367816924c6cbc57f36c36034634744','8565089054c5be1e6efeca5077280809']];
-
-        var allRoutes = routes
-        var aTasks        =  	Ext.util.JSON.encode(tasks);
-        var aGateways     = 	Ext.util.JSON.encode(gateways);
-        var aEvents       = 	Ext.util.JSON.encode(events);
-        var aAnnotations  = 	Ext.util.JSON.encode(annotations);
-        var aRoutes       = 	Ext.util.JSON.encode(routes);
-        var aSubProcess   = Ext.util.JSON.encode(subprocess);
-
-        var pro_uid = getUrlVars();
-
-        if(typeof pro_uid != 'undefined')
-        {
-            Ext.Ajax.request({
-                url: 'saveProcess.php',
-                method: 'POST',
-                success: function(response) {
-                    Ext.Msg.alert ('Done', response.responseText);
-                },
-                failure: function(){},
-                params: {
-                    PRO_UID:pro_uid,
-                    tasks: aTasks,
-                    gateways:aGateways,
-                    events:aEvents,
-                    annotations:aAnnotations,
-                    subprocess:aSubProcess,
-                    routes:aRoutes
-               }
-            });
-        }
-        else
-            Ext.Msg.alert ('Process ID Undefined');
-    }
-
+      }
+    ]
+  });
 
+  
+  var viewport = new Ext.Viewport({
+    id:'viewPort1'
+    ,layout:'border'
+    ,border:false,
+    items:[main]
+  });
+  
 });