<asp:PlaceHolder runat="server">

<%:Styles.Render("~/Content/bootstrap.min.css") %>
<%:Styles.Render("~/Content/Site.css") %>
<%: Scripts.Render("~/Scripts/jquery-1.11.3.min.js")%>
<%: Scripts.Render("~/Scripts/jquery-3.4.1.min.js")%>
<script language="javascript" type="text/javascript">

function MyMethod_Result(ResultString) {
alert(ResultString);
}
function PasoDescripcionPaso(ResultString) {
textDescripcionPaso.SetText(ResultString);
}

function CallMyMethod(DescPaso) {
var diagram = $("#DiagramContent").ejDiagram("instance");
for (var i = 0; i < diagram.model.selectedItems.children.length; i+
+) {
var child = diagram.model.selectedItems.children[i];
}

diagramatosession();

PageMethods.pLeerValor(child.name, "Descripcion",
PasoDescripcionPaso);

pcLogin.Show();
}

function Actividad() {
var diagram = $("#DiagramContent").ejDiagram("instance");
for (var i = 0; i < diagram.model.selectedItems.children.length; i+
+) {
var child = diagram.model.selectedItems.children[i];
}
//diagramatosession();
//PageMethods.GrabarDiagrama(OnVerificalite);

PageMethods.vergrabo(child.name, OnActividad);
//PageMethods.VerificaDiagrama(OnVerifica);

}
function GrabaDiagrama() {
Notify("Grabando diagrama espere..", "Sistema", "info", true,
"toast-top-left", true);
diagramatosession();
Notify("Grabando Datos..", "Sistema", "info", true, "toast-top-
left", true);
PageMethods.GrabarDiagrama(OnVerifica);
Notify("Grabando Datos..", "Sistema", "info", true, "toast-top-
left", true);
}

function OnVerifica(rpta) {
if (rpta.length > 0) {
//alert(rpta);
Notify(rpta, "Sistema", "error", false, "toast-top-left",
false);
}
 else
Notify("Diagrama grabado correctamente...", "Sistema",
"success", false, "toast-top-left", false);

document.getElementsByClassName("diagram_section")[0].style.width =
screen.width - 170;
document.getElementsByClassName("diagram_section")[0].style.height
= screen.height - 230;
}

function OnVerificalite(rpta) {
if (rpta.length > 0) {
Notify(rpta, "Sistema", "error", false, "toast-top-left",
false);
}
}

function OnActividad(rpta) {
//alert(rpta);
if (rpta > 0) {
//alert("11111");
window.location = "FrmFlujodetalle.aspx";
}
else {

Notify("Por Favor debe grabar primero el diagrama para editar

la Actividad." + ' <%= Session["mensajeerror"] %>', "Sistema", "warning", true,
"toast-top-left", true);
}
}

</script>
<script type="text/javascript">

function ShowLoginWindow() {
var diagram = $("#DiagramContent").ejDiagram("instance");
for (var i = 0; i < diagram.model.selectedItems.children.length; i+
+) {
var child = diagram.model.selectedItems.children[i];
}
diagramatosession();
//var dato = PageMethods.pLeerValor(child.name,
"PasoDescripcionPaso");
//textDescripcionPaso.SetText(dato);
//alert(child.name);
//alert(PageMethods.pLeerValores());
//alert(dato);
//alert(dato2);
pcLogin.Show();
}

function ShowCreateAccountWindow() {
pcCreateAccount.Show();
tbUsername.Focus();
}

function singleclick(args) {
//////alert("singleclic");
var diagram = $("#Diagram").ejDiagram("instance");
 //load the JSON data to diagram
for (inodes = 0; inodes < diagram.model.nodes.length; inodes++) {
var allnode = diagram.model.nodes[inodes];

diagram.updateNode(allnode.name, { fillColor: "white" });

//debugger;
if (diagram.model.nodes[inodes].isSwimlane == true) {
for (i = 0; i <
diagram.model.nodes[inodes].children.length; i++) {
var child =
diagram.getNode(diagram.model.nodes[inodes].children[i]);
diagram.updateNode(child.name, { fillColor: "white" });
}
//debugger;
}
}

var node = args.element;

if (args.elementType === "node") {

console.log(args.elementType);
diagram.updateNode(node.name, { fillColor: "red" })
//yettocolorchildren = colorchildrennodes(node, diagram,
alreadycoloredchildren);

//for (iarray = 0; iarray < yettocolorchildren.length; iarray+

+) {
// colorchildrennodes(yettocolorchildren[iarray], diagram,
alreadycoloredchildren);
//}
}
else {
console.log(args.elementType);
}

function mostrarpanel(obj) {
var box = document.getElementById(obj);
obj.show();
//window.showModalDialog("Procedimiento.aspx", "",
"dialogWidth:600px; dialogHeight:500px; center:yes ; scroll:no; resizable:no;
toolbar:no; copyhistory:no; menubar:no; status:no ; addressbar:no;");
//window.location.href = window.location.href;
return false;
}
function doubleClick(args) {
//alert("doble");
//PageMethods.NodeClick(OnSuccess, OnError);
//var node = args.element;
//if (args.elementType === "node") {
//console.log(args.elementType);
//diagram.updateNode(node.name, { fillColor: "red" })
//alert(args.elementType)
//}
//else {
//console.log(args.elementType);
 //alert(child.name);

var diagram = $("#DiagramContent").ejDiagram("instance");

for (var i = 0; i < diagram.model.selectedItems.children.length; i+
+) {
var child = diagram.model.selectedItems.children[i];
}

//diagramatosession();
//alert(child.name);
PageMethods.NodeClick(child.name);

//pcLogin.Show();
}
function click(args) {
var diagram = $("#DiagramContent").ejDiagram("instance");

//Updates the size, position and rotateAngle of selected elements.

//diagram.updateSelector({
// offsetX: 200,
// offsetY: 200,
// width: 200,
// height: 200,
// rotateAngle: 200
//});
//Iterates the selected elements
for (var i = 0; i < diagram.model.selectedItems.children.length; i+
+) {
var child = diagram.model.selectedItems.children[i];
}
diagramatosession();
<%--document.getElementById("<%=txtNombrePaso.ClientID %>").text =
child.name;--%>

PageMethods.NodeClick(child.name);
}
function selectionchange() {
alert("selectionChange");
//PageMethods.NodeClick(OnSuccess, OnError);
}
function focuschange() {
alert("focuschange");
//PageMethods.NodeClick(OnSuccess, OnError);
}
function itemclick() {
alert("itemclick");
//PageMethods.NodeClick(OnSuccess, OnError);
}
function focuschange() {
alert("focuschange");
//PageMethods.NodeClick(OnSuccess, OnError);
}
function abrepopupproc() {
PageMethods.abrepopupproc();
}
function CambioProcedimiento() {
var obj = document.getElementById("cmbProcedimientos");
var selectText = obj.options[obj.selectedIndex].text;
 var selectvalue = obj.options[obj.selectedIndex].value;
PageMethods.cambioproc(selectvalue, selectText);
load();
}

function InicializaProcedimiento() {
var obj = document.getElementById("cmbProcedimientos");
var selectText = obj.options[obj.selectedIndex].text;
var selectvalue = obj.options[obj.selectedIndex].value;
PageMethods.Inicializar(selectvalue, selectText);
load();

function CambioDepen() {
var obj = document.getElementById("cmdDependencias");
var selectText = obj.options[obj.selectedIndex].text;
var selectvalue = obj.options[obj.selectedIndex].value;
PageMethods.cambiodep(selectvalue, selectText);
}

function grabar_proc() {
var obj = document.getElementById("cmbProcedimientos");
var selectvalue = obj.options[obj.selectedIndex].value;
PageMethods.grabar_procw(selectvalue);

alert("Procedimiento Grabado Correctamente...");

}

//function grabar_proc() {
// var obj = document.getElementById("cmbProcedimientos");
// var selectvalue = obj.options[obj.selectedIndex].value;
// PageMethods.grabar_procw(selectvalue);

// //alert("Procedimiento Grabado Correctamente...");

//}

function fnRandom(iModifier) {
return parseInt(Math.random() * iModifier);
}
function fnSetValues() {
var oForm = document.getElementById('oForm');
var iHeight =
oForm.oHeight.options[oForm.oHeight.selectedIndex].text;

if (iHeight.indexOf("Random") > -1) {

iHeight = fnRandom(document.body.clientHeight);
}

var sFeatures = "dialogHeight: " + iHeight + "px;";

return sFeatures;
}
function change(args) {

//var sFeatures = fnSetValues();

//window.showModalDialog("Test.aspx", "", sFeatures)
 //var diagram = $("#diagram").ejDiagram("instance");
//args.element has the current node(Ex:rectanglenode)
//var node = args.element;
//node.name = node.name + "x";

//alert(node.name);
//if (node && args.elementType === "node") {
// //returns the parent element(lane)
// var parent = diagram.findNode(args.element.parent);
//}
}
function drop(args) {
var diagram = $("#diagram").ejDiagram("instance");
//args.element has the current node(Ex:rectanglenode)
var node = args.element;
node.name = "midep";
alert("Drop");
alert(node.name);
//if (node && args.elementType === "node") {
// //returns the parent element(lane)
// var parent = diagram.findNode(args.element.parent);
//}
}
function diagramCreate(args) {
//if ((ej.browserInfo().name === "msie" &&
Number(ej.browserInfo().version) < 9)) {
//alert("Creooo");
//}
}
function clickc() {
if ((ej.browserInfo().name === "msie" &&
Number(ej.browserInfo().version) < 9)) {
alert("Diagram will not be supported in IE Version < 9");
}
}
function diagramatosession() {
var diagram = null;
var diagram = $("#DiagramContent").ejDiagram("instance");
var saving = diagram.save();
var stringify = String(JSON.stringify(saving));
PageMethods.savesession(stringify);
load();
return false;
}

function resultadog() {
var name = 'Welcomes ' + ' <%= Session["Dependencia"] %>';
lblerr.SetText(name);
}

function save() {
var diagram = null;
var diagram = $("#DiagramContent").ejDiagram("instance");
//returns diagram model’s json datac
var saving = diagram.save();
//convert JSON object to JSON string
var stringify = String(JSON.stringify(saving));
<%-- '<%Session["Diagram"] = "' + stringify +'"; %>';
 alert('<%=Session["Diagram"] %>');--%>
PageMethods.save(stringify);
return false;
}
function creardep() {
var diagram = null;
var diagram = $("#DiagramContent").ejDiagram("instance");
var saving = diagram.save();
var stringify = String(JSON.stringify(saving));
PageMethods.savesession(stringify);

PageMethods.creadep(OnSuccess);
document.getElementsByClassName("diagram_section")[0].style.width =
screen.width - 170;
document.getElementsByClassName("diagram_section")[0].style.height
= screen.height - 230;
return false;
}
function falso() {
return false;
}

function load() {
<%-- var name = 'Welcomes xxxx' + ' <%= Session["mensajeerror"] %>';
lblerr.SetText(name);--%>
PageMethods.load(OnSuccess);
document.getElementsByClassName("diagram_section")[0].style.width =
screen.width - 170;
document.getElementsByClassName("diagram_section")[0].style.height
= screen.height - 230;
return false;
}

function OnSuccess(stringify) {
var diagram = null;
var diagram = $("#DiagramContent").ejDiagram("instance");
//convert JSON string to JSON object
var loaddiagram = JSON.parse(stringify);
//load the diagram using saved json data
diagram.load(loaddiagram);
diagram.model.click = "doubleClick";
//diagram.model.doubleClick = "EditarActividad";
}

</script>
<script type="text/javascript">
$(document).ready(function () {
load();
});

</script>
<script type="text/javascript">
$(window).on("load", function () {
if (ej.isMobile() && ej.isDevice()) {
document.getElementsByClassName("symPalette_section")
[0].style.display = "none";
document.getElementsByClassName("middle_section")
[0].style.display = "none";
document.getElementsByClassName("diagram_section")
[0].style.width = screen.width;
document.getElementsByClassName("control_section")
[0].style.height = "100%";
}
});
</script>

<link href="./Media/css/Grey/ListBox.Grey.css" rel="stylesheet"

type="text/css" />
<link href="./Media/css/WebTrack.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"
type="text/javascript"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css"
rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"
type="text/javascript"></script>

<script language="javascript" type="text/javascript">

function Notify(msg, title, type, clear, pos, sticky) {
// toastr.options.positionClass = "toast-bottom-right";
// toastr.options.positionClass = "toast-bottom-left";
// toastr.options.positionClass = "toast-top-right";
// toastr.options.positionClass = "toast-top-left";
// toastr.options.positionClass = "toast-bottom-full-width";
// toastr.options.positionClass = "toast-top-full-width";
// options = {
// tapToDismiss: true,
// toastClass: 'toast',
// containerId: 'toast-container',
// debug: false,
// fadeIn: 300,
// fadeOut: 1000,
// extendedTimeOut: 1000,
// iconClass: 'toast-info',
// positionClass: 'toast-top-right',
// timeOut: 5000, // Set timeOut to 0 to make it sticky
// titleClass: 'toast-title',
// messageClass: 'toast-message' }

if (clear == true) {
toastr.clear();
}
if (sticky == true) {
toastr.tapToDismiss = true;
toastr.timeOut = 10000;
}

toastr.options.onclick = function () {
//alert('You can perform some custom action after a toast goes
away');
}
//"toast-top-left";
toastr.options.positionClass = pos;
if (type.toLowerCase() == 'info') {
toastr.options.timeOut = 1000;
toastr.tapToDismiss = true;
 toastr.info(msg, title);
}
if (type.toLowerCase() == 'success') {
toastr.options.timeOut = 1500;
toastr.success(msg, title);
}
if (type.toLowerCase() == 'warning') {
toastr.options.timeOut = 3000;
toastr.warning(msg, title);
}
if (type.toLowerCase() == 'error') {
toastr.options.timeOut = 10000;
toastr.error(msg, title);
}
}
</script>
</asp:PlaceHolder>
<style type="text/css">
.Background {
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}

.Popup {
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
width: 500px;
height: 600px;
}

.lbl {
font-size: 16px;
font-style: italic;
font-weight: bold;
}

.auto-style1 {
color: #3366CC;
}
</style>