<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FinIQ_wiki_Bonds.aspx.vb" MasterPageFile="~/FiniqAppMasterPage.Master" Inherits="FinIQWebApp.FinIQ_wiki_Bonds" %>



<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy" runat="server"></asp:ScriptManagerProxy>
    <style>
	.txtsql{
	 width: 350px;
    height: 90px;
	}
        .listitem {
        font-size:14px;
        margin: 10px;
        height: 25px !important;
        }
         .SlideToggleDocShow
        {
            float: left;
            overflow-y: scroll;
            border: 1px solid #DDDDDD;
            padding: 6px;
            background-color: #FFFFFF !important;
            width: 300px;
            height: 670px;
        }
         .ShareDetailsContainer {
    
   border-radius: 10px;
    width: 620px;
    height: auto;
    position: absolute;
    text-align: left;
    box-shadow: 3px 3px 4px #666;
    border: solid 1px #ddd;
    border-collapse: collapse;
    background-color: white;
    top: 50%; 
    right: 2%;
    max-height: 50%;
    overflow-y: scroll;
}
        hr {
               
    border-color: #c5c5c5;
    border-width: 0.5px;
    border-style: solid;
        }
            .CurrentLayoutDiv
        {
                border: 1px solid #DDDDDD;
    box-shadow: 4px 3px 16px #e0e0e0;
    height: 410px;
    width: 1580px;
    margin-left: 320px;
    padding-top: 10px;
    margin-bottom:13px;

        }
            .SQLLayoutDiv
        {
                border: 1px solid #DDDDDD;
    box-shadow: 4px 3px 16px #e0e0e0;
    height: 131px;
    width: 1580px;
    margin-left: 320px;
    padding-top: 16px;
    margin-bottom:30px;

        }
        .lblNode11 {
        font-size: 11px ;
       
        }
        .lblNode12 {
        font-size:11px;
        }

        .lblNode13 {
        
        font-size:11px;
        }
        .lblNode20 {
            font-size: 11px; 
        
        }
        .lblNode31 {
            font-size: 11px;
            
        
        }
        .lblNode32 {
            font-size: 11px;
          
        
        }
        .lblNode41 {
            font-size:11px;
        }
        .lblNode42 {
            font-size:11px;
        }
        .lblNode43 {
            font-size:11px;
        }
        .lblNode44 {
            font-size:11px;
        }
        .lblNode45 {
            font-size:11px;
        }
         .ttl
        {
            height: 35px;
            text-align: center;
            border: 1px dashed #888888 !important;
            margin: 15px 15px 5px 15px;
            color:#6e6f72;
        }
         #btnincfont {
            background-image: url('../App_Resources/icons8-increase-font-16.png') !important;
        }

        #btndecfont {
            background-image: url('../App_Resources/icons8-decrease-font-16.png')  !important;
        }

        #btnleftalign {
            background-image: url('../App_Resources/icons8-align-left-16.png')  !important;
        }

        #btnrightalign {
		 background-image: url('../App_Resources/icons8-align-right-16.png')  !important;
        }

        #btncenteralign {
        
        background-image: url('../App_Resources/icons8-align-center-16.png')  !important;
        
        }
         #btnBold {
		 background-image: url('../App_Resources/icons8-bold-16.png') !important ;
        }

        #btnItalics {
        
        background-image: url('../App_Resources/icons8-italic-16.png') !important;
        
        }
           #btnfontcolor {
		 background-image: url('../App_Resources/icons8-a-16.png')  !important;
        }

        #btnfillcolor {
        
        background-image: url('../App_Resources/icons8-ice-cream-16.png') !important;
        
        }
        	 #btnPreview {
		 background-image: url('../App_Resources/icons8-view-20.png') !important;
        }
 #btnEdit {
		 background-image: url('../App_Resources/icons8-ios-filled-20.png') !important;
        }
        
 .btnDelete{
             background-image: url('../App_Resources/icons8-delete-bin-20.png') !important;
            
        }

        
        .btn1{
            background-repeat: no-repeat  !important;
    background-position: center  !important;
    height: 30px !important;
    width:30px !important;
    margin-left:3px;
    background-color:white;
        }
        
        .divpopup{
            border: 1px solid #DDDDDD;
    margin-left: 449px;
    height: 150px;
    width: 1002px;
    margin-top:20px;
     box-shadow: 3px 5px #dedada;
        }
        /*Modified by Sheetal K & Akshika B for Embedded Pop up - BNPINT-324 || Start || 12-02-20*/
         /*Arati Kulkarni CCS Changes 16-Jan-2019*/

         .ui-dialog-content {
             top:0px;
         }
         .ui-widget.ui-widget-content {
        z-index:99912 !important; /* don't change without shekhar permission */
        /*Arati Kulkarni CSS Changes 16-Jan-2019*/
        box-shadow: 0 0 10px #000000;
        padding: 0px;
        max-width: none !important;
        overflow:hidden;
		 
        /*Arati Kulkarni CSS Changes 16-Jan-2019*/
    }



     .holds-the-iframe {
    background: url(../App_Resources/loading.gif) center center no-repeat;
    background-size: 50px;
    background-attachment: scroll;
    }
    .ui-widget-overlay {
        background: #000 !important;
        opacity: .3 !important;
    }

    .ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar .ui-widget {
        background-image: none !important;
        background-color: #fff !important;
        color: #000000 !important;
        border: none;
        opacity:inherit;
    }

    .ui-selectmenu-button, .ui-widget, .ui-state-default, .ui-corner-all {
        border-radius: 8px !important;
    }

    .ui-dialog .ui-dialog-titlebar-close span {
        background-color: #fff !important;
        color: #000000 !important;
    }
         /*#tdmsgwarning {
             padding-top:40px;
         }
         #tdmsginfo {
             padding-top:40px;
         }*/
    /*Arati Kulkarni CCS Changes 16-Jan-2019*/
	/*Modified by Sheetal K & Akshika B for Embedded Pop up - BNPINT-324 || End || 12-02-20*/
      
        </style>

    <script>
        var fontsize = '11px';
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");

            var nodeCopy = document.getElementById(data).cloneNode(true);
            nodeCopy.id = "newId";
            var classname = ev.target.classList.value;
            var classelements = document.getElementsByClassName(classname);
            for (var i = 0; i < classelements.length; i++) {
                classelements[i].innerText = nodeCopy.innerText;

                classelements[i].parentElement.classList.remove("ttl");
                // classelements[i].parentElement.contentEditable = "true";

            }
            ev.target.innerText = nodeCopy.innerText;

            ev.target.parentElement.classList.remove("ttl");
            

            switch (classname) {
                case "lblNode20":
                    var elem = document.getElementsByName(classname);
                    var elem1 = document.getElementsByClassName(classname);
                    var td = document.getElementById('csstd1');
                    td.style.display = "block";
                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem1[j].parentElement.colSpan = "2"
                        elem[j].style.display = "block";


                    }
                    break;
                case "lblNode31":
                    var elem = document.getElementsByName(classname);
                    
                    var elem1 = document.getElementsByClassName('lblNode20');
                    var td = document.getElementById('csstd1');
                    td.style.display = "none";
                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem1[j].parentElement.colSpan = "2"
                        elem[j].style.display = "block";
                    }
                  
                    break;
                case "lblNode32":
                    var elem = document.getElementsByName(classname);
                    var elem1 = document.getElementsByClassName('lblNode20');
                    
                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem1[j].parentElement.colSpan = "3"
                        elem[j].style.display = "block";


                    }
                    break;
                default:
                    var elem = document.getElementsByName(classname);
                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem[j].style.display = "block";


                    }
            }
            

            var row = document.getElementById("tbltr");
            var x = row.insertCell(-1);
        }
        function changefont() {
          //  

            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;
            var e = document.getElementById('fontsize').value;
            var elemclassname = document.getElementById(id).classList.value;

            document.getElementById(id).style.fontSize = (parseFloat(e)) + 'px';

            var fontElements = document.getElementsByClassName(elemclassname);

            for (var i = 0, len = fontElements.length; i < len; ++i) {


                fontElements[i].style.fontSize = (parseFloat(e)) + 'px';

            }



        }
        function setBold(btnid) {
          //  

            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;

            var elemclassname = document.getElementById(id).classList.value;


            var fontElements = document.getElementsByClassName(elemclassname);

            for (var i = 0, len = fontElements.length; i < len; ++i) {

                if (fontElements[i].style.fontWeight == 'normal' || fontElements[i].style.fontWeight == '') {
                    fontElements[i].style.fontWeight = 'bold';
                    document.getElementById(btnid).style.backgroundColor = '#e4e4e4';
                }
                else if (fontElements[i].style.fontWeight == 'bold') {
                    fontElements[i].style.fontWeight = 'normal';
                    document.getElementById(btnid).style.backgroundColor = 'white';
                }

            }


            
        }
        function setItalics(btnid) {
           // 

            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;
            var e = document.getElementById('fontsize').value;
            var elemclassname = document.getElementById(id).classList.value;



            var fontElements = document.getElementsByClassName(elemclassname);

            for (var i = 0, len = fontElements.length; i < len; ++i) {

                if (fontElements[i].style.fontStyle == 'normal' || fontElements[i].style.fontStyle == '') {
                    fontElements[i].style.fontStyle = 'italic';
                    document.getElementById(btnid).style.backgroundColor = '#e4e4e4';
                }
                else if (fontElements[i].style.fontStyle == 'italic') {
                    fontElements[i].style.fontStyle = 'normal';
                    document.getElementById(btnid).style.backgroundColor = 'white';
                }

            }



        }
        function selectincfont() {
           // 
            var select = document.getElementById('fontsize');
            var val = document.getElementById('fontsize').value;
            var newval = parseFloat(val) + 1;
            select.value = newval;
            changefont();

        }
        function selectdecfont() {
            
            var select = document.getElementById('fontsize');
            var val = document.getElementById('fontsize').value;
            var newval = parseFloat(val) - 1;
            select.value = newval;
            changefont();

        }
        function leftalign(btnid) {
            
            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;

            var elemclassname = document.getElementById(id).classList.value;

            var fontElements = document.getElementsByClassName(elemclassname);

            for (var i = 0, len = fontElements.length; i < len; ++i) {

                fontElements[i].parentNode.style.textAlign = 'Left';

            }
            document.execCommand("justifyLeft", false, "");


        }
        function rightalign(btnid) {
            
            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;
            var elemclassname = document.getElementById(id).classList.value;
            var fontElements = document.getElementsByClassName(elemclassname);
            for (var i = 0, len = fontElements.length; i < len; ++i) {
                fontElements[i].parentNode.style.textAlign = 'Right';

            }

            document.execCommand("justifyRight", false, "");



        }

        function centeralign(btnid) {

            
            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;

            var elemclassname = document.getElementById(id).classList.value;

            var fontElements = document.getElementsByClassName(elemclassname);

            for (var i = 0, len = fontElements.length; i < len; ++i) {

                fontElements[i].parentNode.style.textAlign = 'center';

            }

            document.execCommand("justifyCenter", false, "");
            // var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;

            //document.getElementById(id).style.textAlign = 'center';


        }
        function DeleteNode(Name, value ) {
            var classelements = document.getElementsByClassName(Name);
            for (var i = 0; i < classelements.length; i++) {
                classelements[i].innerText = value;

                classelements[i].parentElement.classList.add("ttl");
               

            }
            var elem = document.getElementsByName(Name);
            for (var j = 0; j < elem.length; j++) {
                elem[j].parentElement.style.display = "none";
                elem[j].style.display = "none";
            }
            

        }
        function myfun1() {
            
            document.getElementById("fillcolor").click();
        }


        function myfun2() {
            document.getElementById("fontcolor").click();
        }
        function test1(t) {
            
            var inputVal = document.getElementById("fillcolorin");
            inputVal.style.backgroundColor = t;
            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;
            var elemclassname = document.getElementById(id).classList.value;
            var fontElements = document.getElementsByClassName(elemclassname);

            for (var i = 0, len = fontElements.length; i < len; ++i) {

                fontElements[i].parentNode.style.backgroundColor = t;

            }


        }
        function test2(t) {
            
            var inputVal = document.getElementById("fontcolorin");
            inputVal.style.backgroundColor = t;
            var id = document.getSelection().getRangeAt(0).startContainer.parentNode.id;
            var elemclassname = document.getElementById(id).classList.value;
            var fontElements = document.getElementsByClassName(elemclassname);

            for (var i = 0, len = fontElements.length; i < len; ++i) {

                fontElements[i].style.color = t;

            }
        }

        function save() {
            
            //if(document.getElementsByClassName("lblNode11")[0].innerText != "Node1.1"){var valn11 = document.getElementsByClassName("lblNode11")[0].innerText} else {  var valn11 = ""}
            //if(document.getElementsByClassName("lblNode12")[0].innerText != "Node1.2"){var valn12 = document.getElementsByClassName("lblNode12")[0].innerText} else {  var valn12 = ""}
            //if(document.getElementsByClassName("lblNode13")[0].innerText != "Node1.3"){var valn13 = document.getElementsByClassName("lblNode13")[0].innerText} else {  var valn13 = ""}
            //if(document.getElementsByClassName("lblNode20")[0].innerText != "Node2.0"){var valn20 = document.getElementsByClassName("lblNode20")[0].innerText} else {  var valn20 = ""}
            //if(document.getElementsByClassName("lblNode31")[0].innerText != "Node3.1"){var valn31 = document.getElementsByClassName("lblNode31")[0].innerText} else {  var valn31 = ""}
            //if(document.getElementsByClassName("lblNode32")[0].innerText != "Node3.2"){var valn32 = document.getElementsByClassName("lblNode32")[0].innerText} else {  var valn32 = ""}
            //if(document.getElementsByClassName("lblNode41")[0].innerText != "Node4.1"){var valn41 = document.getElementsByClassName("lblNode41")[0].innerText} else {  var valn41 = ""}
            //if(document.getElementsByClassName("lblNode42")[0].innerText != "Node4.2"){var valn42 = document.getElementsByClassName("lblNode42")[0].innerText} else {  var valn42 = ""}
            //if(document.getElementsByClassName("lblNode43")[0].innerText != "Node4.3"){var valn43 = document.getElementsByClassName("lblNode43")[0].innerText} else {  var valn43 = ""}
            //if(document.getElementsByClassName("lblNode44")[0].innerText != "Node4.4"){var valn44 = document.getElementsByClassName("lblNode44")[0].innerText} else {  var valn44 = ""}
            //if(document.getElementsByClassName("lblNode45")[0].innerText != "Node4.5"){var valn45 = document.getElementsByClassName("lblNode45")[0].innerText} else {  var valn45 = ""}
            if (document.getElementById("ctl00_MainContent_lblNode11").innerText != "Node1.1") { var valn11 = document.getElementById("ctl00_MainContent_lblNode11").innerText } else { var valn11 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode12").innerText != "Node1.2") { var valn12 = document.getElementById("ctl00_MainContent_lblNode12").innerText } else { var valn12 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode13").innerText != "Node1.3") { var valn13 = document.getElementById("ctl00_MainContent_lblNode13").innerText } else { var valn13 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode2011").innerText != "Node2.0") { var valn20 = document.getElementById("ctl00_MainContent_lblNode2011").innerText } else { var valn20 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode3111").innerText != "Node3.1") { var valn31 = document.getElementById("ctl00_MainContent_lblNode3111").innerText } else { var valn31 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode3211").innerText != "Node3.2") { var valn32 = document.getElementById("ctl00_MainContent_lblNode3211").innerText } else { var valn32 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode41").innerText != "Node4.1") { var valn41 = document.getElementById("ctl00_MainContent_lblNode41").innerText } else { var valn41 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode42").innerText != "Node4.2") { var valn42 = document.getElementById("ctl00_MainContent_lblNode42").innerText } else { var valn42 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode43").innerText != "Node4.3") { var valn43 = document.getElementById("ctl00_MainContent_lblNode43").innerText } else { var valn43 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode44").innerText != "Node4.4") { var valn44 = document.getElementById("ctl00_MainContent_lblNode44").innerText } else { var valn44 = "" }
            if (document.getElementById("ctl00_MainContent_lblNode45").innerText != "Node4.5") { var valn45 = document.getElementById("ctl00_MainContent_lblNode45").innerText } else { var valn45 = "" }

            var jsonobj = {
                "Node11": {
                    "Id": "lblNode11",
                    "value": valn11,
                    "css": document.getElementsByClassName("lblNode11")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode11")[0].parentNode.style.cssText
                },
                "Node12": {
                    "Id": "lblNode12",
                    "value": valn12,
                    "css": document.getElementsByClassName("lblNode12")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode12")[0].parentNode.style.cssText
                },
                "Node13": {
                    "Id": "lblNode13",
                    "value": valn13,
                    "css": document.getElementsByClassName("lblNode13")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode13")[0].parentNode.style.cssText
                },
                "Node20": {
                    "Id": "lblNode20",
                    "value": valn20,
                    "css": document.getElementsByClassName("lblNode20")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode20")[0].parentNode.style.cssText
                },
                "Node31": {
                    "Id": "lblNode31",
                    "value": valn31,
                    "css": document.getElementsByClassName("lblNode31")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode31")[0].parentNode.style.cssText
                },
                "Node32": {
                    "Id": "lblNode32",
                    "value": valn32,
                    "css": document.getElementsByClassName("lblNode32")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode32")[0].parentNode.style.cssText
                },
                "Node41": {
                    "Id": "lblNode41",
                    "value": valn41,
                    "css": document.getElementsByClassName("lblNode41")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode41")[0].parentNode.style.cssText
                },
                "Node42": {
                    "Id": "lblNode42",
                    "value": valn42,
                    "css": document.getElementsByClassName("lblNode42")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode42")[0].parentNode.style.cssText
                },
                "Node43": {
                    "Id": "lblNode43",
                    "value": valn43,
                    "css": document.getElementsByClassName("lblNode43")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode43")[0].parentNode.style.cssText
                },
                "Node44": {
                    "Id": "lblNode44",
                    "value": valn44,
                    "css": document.getElementsByClassName("lblNode44")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode44")[0].parentNode.style.cssText
                },
                "Node45": {
                    "Id": "lblNode45",
                    "value": valn45,
                    "css": document.getElementsByClassName("lblNode45")[0].style.cssText,
                    "parentcss": document.getElementsByClassName("lblNode45")[0].parentNode.style.cssText
                }
            }
            var Template_Name = document.getElementById("txttemplatename").value
            var e = document.getElementById("ctl00_MainContent_ddlScheme");
            var scheme_name = e.options[e.selectedIndex].value;
            document.getElementById("<%=hdnScheme.ClientID%>").value = scheme_name
            if (Template_Name == '') {
                MsgDialog(this, 'Warning', 0, 'Please enter Template name.');
            }
            else {
                var path_Name = window.location.pathname;
                var myPageName = path_Name.substring(path_Name.lastIndexOf('/') + 1);
                var param = JSON.stringify(jsonobj)
                var datastring = "{'TemplateData':'" + param + "', 'TemplateName':'" + Template_Name + "','SchemeName':'"+scheme_name+"'}";
                document.getElementById("<%=hdn_TemplateName.ClientID%>").value = top
                $.support.cors = true;
                $.ajax({
                    type: "POST",
                    url: "" + myPageName + "/Save_Template",
                    contentType: "application/json; charset=utf-8",
                    dataType: "text",
                    cache: false,
                    crossDomain: true,
                    data: datastring,
                    success: function (data) {
                        var obj = jQuery.parseJSON(data);

                        if (obj.d == 'Success') {
                            MsgDialog(this, 'Information', 1, 'Template Saved Successfully.');
                            var datastring1 = "{'TemplateName':'" + Template_Name + "','SchemeName':'" + scheme_name + "'}";
                            $.support.cors = true;
                            $.ajax({
                                type: "POST",
                                url: "" + myPageName + "/Get_SQLforTemplate",
                                contentType: "application/json; charset=utf-8",
                                dataType: "text",
                                cache: false,
                                crossDomain: true,
                                data: datastring1,
                                success: function (data) {
								var obj = jQuery.parseJSON(data);
                                        var objData;
                                        $.each(obj, function (key, value) {
                                            var jsonData = JSON.stringify(value);
                                            objData = $.parseJSON(jsonData);
                                        });
										
                                        for (var i = 0; i < objData.length; i++) {
										    if(objData[i].FW_NodeType == "FirstNode")
											   document.getElementById('ctl00_MainContent_txtSQL1').value = objData[i].FW_SQL;
											if(objData[i].FW_NodeType == "Expand")
											   document.getElementById('ctl00_MainContent_txtSQL2').value = objData[i].FW_SQL;
											if(objData[i].FW_NodeType == "PopUp")
											   document.getElementById('ctl00_MainContent_txtSQL3').value = objData[i].FW_SQL;
                                            
                                        }
                                }


                            });
                        }

                        else {

                            MsgDialog(this, "Warning", 0, obj.d)
                        }
                    }


                });
            }
        }
        function SetParentCSS(LabelID, ParentCSS) {
            

            var el = document.getElementsByClassName(LabelID);

            for (var i = 0, len = el.length; i < len; ++i) {

                el[i].parentNode.classList.remove("ttl");
                el[i].parentNode.setAttribute('style', ParentCSS + 'border-right:none;');

            }
          
            switch (LabelID) {
                case "lblNode20":
                    var elem = document.getElementsByName(LabelID);
                    var elem1 = document.getElementsByClassName(LabelID);
                    var td = document.getElementById('csstd1');
                    td.style.display = "block";
                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem1[j].parentElement.colSpan = "2"
                        elem[j].style.display = "block";


                    }
                    break;
                case "lblNode31":
                    var elem = document.getElementsByName(LabelID);

                    var elem1 = document.getElementsByClassName('lblNode20');
                    var td = document.getElementById('csstd1');
                    td.style.display = "none";
                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem1[j].parentElement.colSpan = "2"
                        elem[j].style.display = "block";
                    }

                    break;
                case "lblNode32":
                    var elem = document.getElementsByName(LabelID);
                    var elem1 = document.getElementsByClassName('lblNode20');

                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem1[j].parentElement.colSpan = "3"
                        elem[j].style.display = "block";


                    }
                    break;
                default:
                    var elem = document.getElementsByName(LabelID);
                    for (var j = 0; j < elem.length; j++) {
                        elem[j].parentElement.style.display = "block";
                        elem[j].style.display = "block";


                    }
            }
            $('#tablepopup tr:last').remove();
            
            $('#tablepopup').append(' <tr id="tbltr"><td style="border-right:none;">&nbsp;</td><td style="border-left:none;">&nbsp;</td><td style="border-right:none;">&nbsp;</td><td style="border-left:none;">&nbsp;</td><td style="border-right:none;">&nbsp;</td><td style="border-left:none;">&nbsp;</td><td style="border-right:none;">&nbsp;</td><td style="border-left:none;">&nbsp;</td><td style="border-right:none;">&nbsp;</td><td style="border-left:none;">&nbsp;</td></tr>');
           



        }
        function ChangebtnText(text, TemplateName) {
            document.querySelector('#Btnsubmit').innerText = text;
            if (TemplateName != "") {
                document.getElementById("txttemplatename").value = TemplateName;

            }
        }
        function EditTemplate(btnid) {
            document.getElementById("EditTemplate").style.display = "block";
            document.getElementById("PreviewTemplate").style.display = "none";
            if (document.getElementById("EditTemplate").style.display == "block") {
                document.getElementById('btnEdit').style.backgroundColor = '#e4e4e4';
                document.getElementById('btnPreview').style.backgroundColor = 'white';
            } else if (document.getElementById("EditTemplate").style.display == "none") {
                document.getElementById('btnEdit').style.backgroundColor = 'white';
                document.getElementById('btnPreview').style.backgroundColor = '#e4e4e4';
            }
        }
       
        function PreviewTemplate(btnid) {
            
            document.getElementById("EditTemplate").style.display = "none";
            document.getElementById("PreviewTemplate").style.display = "block";
            if (document.getElementById("PreviewTemplate").style.display == "block") {
                document.getElementById('btnEdit').style.backgroundColor = 'white';
                document.getElementById('btnPreview').style.backgroundColor = '#e4e4e4';
            } else if (document.getElementById("PreviewTemplate").style.display == "none") {
                document.getElementById('btnEdit').style.backgroundColor = '#e4e4e4';
                document.getElementById('btnPreview').style.backgroundColor = 'white';
            }
            document.getElementById("PreviewTemplateName").value = document.getElementById("txttemplatename").value
            var dictTemplate = {
                "Issuer Name": "UNION NATIONAL BANK PJSC",
                "Bonds Name": "UNBUH 4%, 03/13/2023",
                "Traded Volume in USD": "40,000,000",
                "WAV Sales Spread in BP": "30",
                "Customer Code": "CUSTOMER 2|32099",
                "RM Code": "10006",
                "BP Revenue": "30",
                "Ccy": "USD",
                "ISIN": "AU3FN0028502",
                "Number of Trades": "15",
                "Trade Date": "2019-06-12 00:00:00.000",
                "CIF": "CUSTOMER 2|32099",
                "Holdings": "7,700,000",
                "Side": "Buy",
                "Client Price": "100.98",
                "S&P Rating": "A+",
                "Largest Trade Size": "3,000,000"
            }

            if (document.getElementById("ctl00_MainContent_lblNode11").innerText != "Node1.1") {
                document.getElementById("ctl00_MainContent_PlblNode11").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode11").innerText]
                var el = document.getElementsByClassName("lblNode11");
                for (var i = 0, len = el.length; i < len; ++i) {
                    el[i].setAttribute('style', document.getElementById("ctl00_MainContent_lblNode11").style.cssText);
                    el[i].parentNode.setAttribute('style', document.getElementById("ctl00_MainContent_lblNode11").parentNode.style.cssText);


                }
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode11").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode12").innerText != "Node1.2") {
                document.getElementById("ctl00_MainContent_PlblNode12").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode12").innerText]
                var el = document.getElementsByClassName("lblNode12");
                for (var i = 0, len = el.length; i < len; ++i) {
                    el[i].setAttribute('style', document.getElementById("ctl00_MainContent_lblNode12").style.cssText);
                    el[i].parentNode.setAttribute('style', document.getElementById("ctl00_MainContent_lblNode12").parentNode.style.cssText);
                }
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode12").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode13").innerText != "Node1.3") {
                document.getElementById("ctl00_MainContent_PlblNode13").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode13").innerText]
                var el = document.getElementsByClassName("lblNode13");
                for (var i = 0, len = el.length; i < len; ++i) {
                    el[i].setAttribute('style', document.getElementById("ctl00_MainContent_lblNode13").style.cssText);
                    el[i].parentNode.setAttribute('style', document.getElementById("ctl00_MainContent_lblNode13").parentNode.style.cssText);
                }
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode13").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode2011").innerText != "Node2.0") {
                document.getElementById("ctl00_MainContent_PlblNode2011").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode2011").innerText]
                document.getElementById("ctl00_MainContent_PlblNode2012").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode2011").innerText]
                document.getElementById("ctl00_MainContent_PlblNode2013").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode2011").innerText]
                document.getElementById("ctl00_MainContent_PlblNode2021").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode2011").innerText]
                document.getElementById("ctl00_MainContent_PlblNode2022").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode2011").innerText]
                document.getElementById("ctl00_MainContent_PlblNode2023").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode2011").innerText]
                var el = document.getElementsByClassName("lblNode20");
                for (var i = 0, len = el.length; i < len; ++i) {
                    el[i].setAttribute('style', document.getElementsByClassName("lblNode20")[0].style.cssText);
                    el[i].parentNode.setAttribute('style', document.getElementsByClassName("lblNode20")[0].parentNode.style.cssText);
                }
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode2011").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode2012").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode2013").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode2021").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode2022").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode2023").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode3111").innerText != "Node3.1") {
                document.getElementById("ctl00_MainContent_PlblNode3111").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3111").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3112").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3111").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3113").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3111").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3121").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3111").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3122").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3111").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3123").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3111").innerText]
                var el = document.getElementsByClassName("lblNode31");
                for (var i = 0, len = el.length; i < len; ++i) {
                    el[i].setAttribute('style', document.getElementsByClassName("lblNode31")[0].style.cssText);
                    el[i].parentNode.setAttribute('style', document.getElementsByClassName("lblNode31")[0].parentNode.style.cssText);
                }
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode3111").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3112").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3113").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3121").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3122").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3123").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode3211").innerText != "Node3.2") {
                document.getElementById("ctl00_MainContent_PlblNode3211").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3211").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3212").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3211").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3213").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3211").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3221").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3211").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3222").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3211").innerText]
                document.getElementById("ctl00_MainContent_PlblNode3223").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode3211").innerText]
                var el = document.getElementsByClassName("lblNode32");
                for (var i = 0, len = el.length; i < len; ++i) {
                    el[i].setAttribute('style', document.getElementsByClassName("lblNode32")[0].style.cssText);
                    el[i].parentNode.setAttribute('style', document.getElementsByClassName("lblNode32")[0].parentNode.style.cssText);
                }
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode3211").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3212").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3213").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3221").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3222").innerText = ""
                document.getElementById("ctl00_MainContent_PlblNode3223").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode41").innerText != "Node4.1") {
                document.getElementById("ctl00_MainContent_PlblNode41").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode41").innerText]
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode41").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode42").innerText != "Node4.2") {
                document.getElementById("ctl00_MainContent_PlblNode42").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode42").innerText]
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode42").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode43").innerText != "Node4.3") {
                document.getElementById("ctl00_MainContent_PlblNode43").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode43").innerText]
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode43").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode44").innerText != "Node4.4") {
                document.getElementById("ctl00_MainContent_PlblNode44").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode44").innerText]
            } else {
                document.getElementById("ctl00_MainContent_PlblNode44").innerText = ""
            }

            if (document.getElementById("ctl00_MainContent_lblNode45").innerText != "Node4.5") {
                document.getElementById("ctl00_MainContent_PlblNode45").innerText = dictTemplate[document.getElementById("ctl00_MainContent_lblNode45").innerText]
            }
            else {
                document.getElementById("ctl00_MainContent_PlblNode45").innerText = ""
            }




        }
       

        </script>
    <div class= "SlideToggleDocShow">
       
          
                                        <asp:Label ID="taglibray" runat="server" Text="Tag Library" style =" margin: 80px ; font-size: 13px; font-weight: bold"/>
                        
        <hr style="margin-top:10px;" >
        <table>
            <tr>
                <td><td>
                            <asp:DropDownList ID="ddlScheme" runat="server"   CssClass="ddl1"  Width="240px"  AutoPostBack="true" ></asp:DropDownList>
                            </td>
                    </td>
                 <td style="padding-left:5px;"> <asp:Button id ="btnAddTaglibrary" runat="server" style=" background-image: url('../App_Resources/icons8-add-list-25.png') !important; height:30px!important; width:30px; background-color:white; background-position:center  !important; background-repeat:no-repeat  !important;" class="btn" ToolTip="Add in TagLibraryList">
                                   </asp:Button>
                            </td>
                </tr>
        </table>
                <table>
           <tr><td style =" padding-top:10px;">
                   <asp:DataList ID="dttaglibrary" runat="server"  >
                                    <ItemTemplate >
                    
        <table border="0">
            <tr><td>
                                       <asp:Label runat="server" Text='<%#Eval("Field_Name")%>'  ID="taglibrarylist"  class = "taglist" CssClass = "listitem" draggable ="true"  ondragstart="drag(event)" droppable=" true"></asp:Label>
                                         </td>
                </tr>
            </table>
                                        
                                    </ItemTemplate>
                                </asp:DataList>

                </td>
                </tr>
            </table>
        </div>
        <div id="toggle">
    </div>
    
    <div id ="templateDiv" >
     <div style=" margin-left:320px; width:1582px; height:62px; background-color:#f2f2f2; margin-bottom:2px;">
                <table style=" padding-top:8px"><tr><td>         
                      
       <input type="text" id="fontsize" value="11" style ="width:35px; position:relative; bottom:5px" />
                               <button id ="btnincfont" Onclick="selectincfont(); return false;" class="btn btn1" title="Increase Font">
                                   </button>
                               <button id ="btndecfont" onclick="selectdecfont(); return false;" class="btn btn1" title="Decrease Font">
                                   </button>
          <button id ="btnleftalign" Onclick="leftalign(this.id); return false;" class="btn btn1" title="Align Left">
                                   </button>
                               <button id ="btncenteralign" onclick="centeralign(this.id); return false;" class="btn btn1" title="Align Center">
                                   </button>
           <button id ="btnrightalign" onclick="rightalign(this.id); return false;" class="btn btn1" title="Align Right">
                                   </button>
          <button id ="btnBold" onclick="setBold(this.id); return false;" class="btn btn1" title="Bold">
                                   </button>
           <button id ="btnItalics" onclick="setItalics(this.id); return false;" class="btn btn1" title="Italics">
                                   </button>
                    </td><td>
         <input id = "fillcolor" type="color" value="#ffffff"  style="display:none; width:22px;" onchange="test1(this.value);"></input>
         <button id ="btnfillcolor" class="btn1 btn" onclick="myfun1(); return false;" title="Fill Color"></button>
       

         <input id = "fontcolor" type="color" value="#ffffff"  style="display:none; width:22px;" onchange="test2(this.value);" ></input>
              <button id ="btnfontcolor" class="btn1 btn" onclick="myfun2(); return false;" title="Font Color"></button>
         
                        </td>  

                     
                        <td>
                            <asp:DropDownList ID="ddlWiki_Template" runat="server"   CssClass="ddl1"  Width="191px"  AutoPostBack="true" ></asp:DropDownList>
                            </td>
							 <td>
                           <button id ="btnEdit" onclick="EditTemplate(this.id); return false;" class="btn btn1" title="Edit Template">
                            </td>
							 <td>
                             <button id ="btnPreview" onclick="PreviewTemplate(this.id); return false;" class="btn btn1" title="Preview Template">
                            </td>
                    
                    
                                                </tr>
                   <tr> <td>
                        </td>
                    <td style=" position:relative;bottom:5px;">   <input type="text" id="fillcolorin" style="width:34px; height:6px;"></input> <input type="text" id="fontcolorin" style="width:34px; height:6px;" ></input> </td>
                    
                      
                   </tr>  </table>       </div>
    <%--<hr style=" margin-left:326px;width:1500px">--%>
    <div id="EditTemplate">
   <div class="droppableContainerCommon CurrentLayoutDiv " id="droppableContainerCommon" >
                    <div  style=" border: 1px solid #ece8e8 !important; text-align:center; margin:15px 15px 5px 15px; width:1500px;">
                        <input type="text" id ="txttemplatename" placeholder="Enter template name here.."  style=" padding-top :3px; font-weight:700; font-size: 15px; width: 500px; text-align:center; border:none !important;" onkeypress="return this.value.length<=32"  />
                       
                        </div>
  
                           <div>
                               <table style=" border-spacing:15px;">
                                   <tr>
                                       <td style =" width:400px" class="ttl">
                                            <asp:Label ID="lblNode11"  runat="server" Text="Node1.1" class="lblNode11" ondrop="drop(event)" ondragover="allowDrop(event)">
                                               
                                            </asp:Label> 
                                            
                                           </td>
                                       <td style= "display: none;"> <button id ="btnNode11" name="lblNode11" value="Node1.1" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                       <td style=" width:5px;"><span style=" font-size: 18px; color:#868686">(</span>
                                           </td>
                                  
                                       <td style=" width:200px;"  class="ttl">
                                      
                                         <asp:Label ID="lblNode12"  runat="server" Text="Node1.2" class="lblNode12" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                            
                                              
                      </td><td style= "display: none;"><button id ="btnNode12" name="lblNode12" value="Node1.2" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                         <td style=" width:5px;"><span  style=" font-size: 18px; color:#868686">/</span>
                                           </td>
                                       <td style =" width:200px;" class="ttl">
                                           
                                                                               <asp:Label ID="lblNode13"  runat="server" Text="Node1.3" class="lblNode13" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                                           
                                    
                                           </td><td style= "display: none;"> <button id ="btnNode13" name="lblNode13" value="Node1.3" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                        <td style=" width:5px;"><span style=" font-size: 18px; color:#868686">)</span>
                                           </td>
                                       
                                       </tr>
                                   </table>
                               </div>
                      
                           <div style=" width: 900px;">
                               <table style ="border-spacing: 15px;">
                                   <tr><td  colspan="2" class="ttl">
                                        <asp:Label ID="lblNode2011" runat="server"  Text="Node2.0"  class ="lblNode20" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                                        
                                       </td>
                                       <td style= "display: none;"><button id ="btnNode2011" name="lblNode20" value="Node2.0" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                       <td  colspan="2" class="ttl">
                                        <asp:Label ID="lblNode2012" runat="server"  Text="Node2.0"  class ="lblNode20" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                           
                                       </td>
                                       <td colspan="2" class="ttl">
                                        <asp:Label ID="lblNode2013" runat="server"  Text="Node2.0"  class ="lblNode20" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                           
                                       </td>
                                       </tr>
                                   <tr>
                                
                                        <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3111" runat="server"  Text="Node3.1" class ="lblNode31" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                                            
                                          </td><td style= "display: none;"> <button id ="btnNode3111" name="lblNode31" value="Node3.1" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                                                                  
                                         <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3211" runat="server" Text="Node3.2"  class="lblNode32" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                            
                                                                              </td> <td id ="csstd1" style= "display: none;" ></td><td style= "display: none;"> <button id ="btnNode3211" name="lblNode32" value="Node3.2" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                             
                      <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3112" runat="server"  Text="Node3.1" class="lblNode31" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                         
                      </td>
                                                <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3212" runat="server" Text="Node3.2"  class="lblNode32"  ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                                                                         </td>
                                                                          
                                        <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3113" runat="server"  Text="Node3.1"  class="lblNode31" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                             
                                        </td>
                                                                                  <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3213" runat="server" Text="Node3.2"  class="lblNode32" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                                                                       
                                                                              </td>
                                                             
                      
                      
                                       </tr>
                                   <tr>
                                       <td style =" height:8px;"></td>
                                   </tr>
                                         <tr><td  colspan="2" class="ttl">
                                        <asp:Label ID="lblNode2021" runat="server"  Text="Node2.0"  class ="lblNode20" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                              
                                       </td>
                                       <td  colspan="2" class="ttl">
                                        <asp:Label ID="lblNode2022" runat="server"  Text="Node2.0"  class ="lblNode20" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>  
                                       </td>
                                       <td colspan="2" class="ttl">
                                        <asp:Label ID="lblNode2023" runat="server"  Text="Node2.0"  class ="lblNode20" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                           
                                       </td>
                                       </tr>
                                   <tr>
                                    
                                        <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3121" runat="server"  Text="Node3.1" class="lblNode31" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                              
                                                                          <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3221" runat="server" Text="Node3.2"  class="lblNode32" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                                                               
                                                                              </td>
                                            
                       
                                        <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3122" runat="server"  Text="Node3.1"  class="lblNode31" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                              
                                        </td>
                                                                                 
                                                                                  <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3222" runat="server" Text="Node3.2" class="lblNode32" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                                                                                    
                                                                              </td>
                                                                                
                       
                                        <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3123" runat="server"  Text="Node3.1" class="lblNode31" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>

                                           
                                        </td>
                                                                                    <td style =" width:200px" class="ttl">
                                                                                  <asp:Label ID="lblNode3223" runat="server" Text="Node3.2" class="lblNode32" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                                                                        
                                                                              </td>
                                                                                
                      
                      
                                       </tr>
                                   </table>
                               </div>
       </div>
                          <div  class="ShareDetailsContainer">
                              <table id="tablepopup" border="1"  border-color="#abaaaa" style=" border-collapse:collapse; margin:10px">
                                  <tr>
                                       <td style =" width:200px; height:35px; " class="ttl">
                                                                                  <asp:Label ID="lblNode41" runat="server"  Text="Node4.1" class="lblNode41" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                                           
                                       </td><td style= "display: none; border-left:none !important;border-top: none; border-bottom: none; "> <button id ="btnNode41" name="lblNode41" value="Node4.1" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                                                                    <td style =" width:200px; " class="ttl">
                                                                                  <asp:Label ID="lblNode42" runat="server" Text="Node4.2" class="lblNode42" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                                                                        
                                                                              </td><td style= "display: none; border-left:none !important;border-top: none; border-bottom: none;"> <button id ="btnNode42" name="lblNode42" value="Node4.2" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                       <td style =" width:200px; height:35px; " class="ttl">
                                                                                  <asp:Label ID="lblNode43" runat="server"  Text="Node4.3" class="lblNode43" ondrop="drop(event)" ondragover="allowDrop(event)" ></asp:Label>
                                          
                                       </td><td style= "display: none; border-left:none !important; border-top: none; border-bottom: none; ">  <button id ="btnNode43" name="lblNode43" value="Node4.3" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                                                                    <td style =" width:200px; " class="ttl">
                                                                                  <asp:Label ID="lblNode44" runat="server" Text="Node4.4" class="lblNode44" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                                                                         
                                                                              </td>
                                      <td style= "display: none; border-left:none !important;border-top: none; border-bottom: none;"><button id ="btnNode44" name="lblNode44" value="Node4.4" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                       <td style =" width:200px; height:35px; " class="ttl">
                                                                                  <asp:Label ID="lblNode45" runat="server" Text="Node4.5"  class ="lblNode45" ondrop="drop(event)" ondragover="allowDrop(event)"></asp:Label>
                                           
                                                                              </td><td style= "display: none; border-left:none !important;border-top: none; border-bottom: none; "> <button id ="btnNode45" name="lblNode45" value="Node4.5" onclick="DeleteNode(this.name, this.value); return false;" class="btn btn1 btnDelete" title="Delete Node" style="display:none;"></td>
                                      </tr>
                                  <tr id="tbltr"><td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      </tr>
                              
                                  </table>
                              </div>
        
    </div>
     <div id="PreviewTemplate" style="display:None;">
   <div class="droppableContainerCommon CurrentLayoutDiv " id="Div2" >
                    <div  style=" border: 1px solid #ece8e8 !important; text-align:center; margin:15px 15px 5px 15px; width:1500px;">
                        <input type="text" id ="PreviewTemplateName" placeholder="Enter template name here.."  style=" padding-top :3px; font-size: 15px; font-weight:700; width: 500px; text-align:center; border:none !important;"  />
                       
                        </div>
  
                           <div>
                               <table style=" border-spacing:15px;">
                                   <tr>
                                       <td style =" width:400px" >
                                            <asp:Label ID="PlblNode11"  runat="server" Text="Node1.1" class="lblNode11"></asp:Label> 
                                           </td>
                                       <td style=" width:5px;"><span style=" font-size: 18px; color:#868686">(</span>
                                           </td>
                                  
                                       <td style=" width:200px;"  >
                                      
                                         <asp:Label ID="PlblNode12"  runat="server" Text="Node1.2" class="lblNode12" ></asp:Label>
                                              
                      </td>
                                         <td style=" width:5px;"><span  style=" font-size: 18px; color:#868686">/</span>
                                           </td>
                                       <td style =" width:200px;" >
                                           
                                                                               <asp:Label ID="PlblNode13"  runat="server" Text="Node1.3" class="lblNode13"></asp:Label>
                                    
                                           </td>
                                        <td style=" width:5px;"><span style=" font-size: 18px; color:#868686">)</span>
                                           </td>
                                       
                                       </tr>
                                   </table>
                               </div>
                      
                           <div style=" width: 900px;">
                               <table style ="border-spacing: 15px;">
                                   <tr><td  colspan="2" >
                                        <asp:Label ID="PlblNode2011" runat="server"  Text="Node2.0"  class ="lblNode20" ></asp:Label>
                                       </td>
                                       <td  colspan="2">
                                        <asp:Label ID="PlblNode2012" runat="server"  Text="Node2.0"  class ="lblNode20" ></asp:Label>
                                       </td>
                                       <td colspan="2" >
                                        <asp:Label ID="PlblNode2013" runat="server"  Text="Node2.0"  class ="lblNode20"></asp:Label>
                                       </td>
                                       </tr>
                                   <tr>
                                
                                        <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode3111" runat="server"  Text="Node3.1" class ="lblNode31"  ></asp:Label>
                                                                                  
                                         <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode3211" runat="server" Text="Node3.2"  class="lblNode32"></asp:Label>
                                                                              </td>
                                             
                      <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode3112" runat="server"  Text="Node3.1" class="lblNode31" ></asp:Label> </td>
                                                <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode3212" runat="server" Text="Node3.2"  class="lblNode32"  ></asp:Label>
                                                                              </td>
                                                                          
                                        <td style =" width:200px">
                                                                                  <asp:Label ID="PlblNode3113" runat="server"  Text="Node3.1"  class="lblNode31" ></asp:Label></td>
                                                                                  <td style =" width:200px">
                                                                                  <asp:Label ID="PlblNode3213" runat="server" Text="Node3.2"  class="lblNode32"></asp:Label>
                                                                              </td>
                                                             
                      
                      
                                       </tr>
                                   <tr>
                                       <td style =" height:8px;"></td>
                                   </tr>
                                         <tr><td  colspan="2" >
                                        <asp:Label ID="PlblNode2021" runat="server"  Text="Node2.0"  class ="lblNode20" ></asp:Label>
                                       </td>
                                       <td  colspan="2">
                                        <asp:Label ID="PlblNode2022" runat="server"  Text="Node2.0"  class ="lblNode20" ></asp:Label>
                                       </td>
                                       <td colspan="2" >
                                        <asp:Label ID="PlblNode2023" runat="server"  Text="Node2.0"  class ="lblNode20" ></asp:Label>
                                       </td>
                                       </tr>
                                   <tr>
                                    
                                        <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode3121" runat="server"  Text="Node3.1" class="lblNode31" ></asp:Label>
                                                                          <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode3221" runat="server" Text="Node3.2"  class="lblNode32" ></asp:Label>
                                                                              </td>
                                            
                       
                                        <td style =" width:200px">
                                                                                  <asp:Label ID="PlblNode3122" runat="server"  Text="Node3.1"  class="lblNode31" ></asp:Label> </td>
                                                                                 
                                                                                  <td style =" width:200px">
                                                                                  <asp:Label ID="PlblNode3222" runat="server" Text="Node3.2" class="lblNode32"  ></asp:Label>
                                                                              </td>
                                                                                
                       
                                        <td style =" width:200px">
                                                                                  <asp:Label ID="PlblNode3123" runat="server"  Text="Node3.1" class="lblNode31" ></asp:Label></td>
                                                                                    <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode3223" runat="server" Text="Node3.2" class="lblNode32"></asp:Label>
                                                                              </td>
                                                                                
                      
                      
                                       </tr>
                                   </table>
                               </div>
       </div>
                          <div  class="ShareDetailsContainer">
                              <table border="1"  bordercolor="#abaaaa" style=" border-collapse:collapse; margin:10px">
                                  <tr>
                                       <td style =" width:200px; height:35px;" >
                                                                                  <asp:Label ID="PlblNode41" runat="server"  Text="Node4.1" class="lblNode41" ></asp:Label></td>
                                                                                    <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode42" runat="server" Text="Node4.2" class="lblNode42"></asp:Label>
                                                                              </td>
                                       <td style =" width:200px; height:35px;" >
                                                                                  <asp:Label ID="PlblNode43" runat="server"  Text="Node4.3" class="lblNode43"  ></asp:Label></td>
                                                                                    <td style =" width:200px" >
                                                                                  <asp:Label ID="PlblNode44" runat="server" Text="Node4.4" class="lblNode44"></asp:Label>
                                                                              </td>
                                       <td style =" width:200px; height:35px;">
                                                                                  <asp:Label ID="PlblNode45" runat="server" Text="Node4.5"  class ="lblNode45" ></asp:Label>
                                                                              </td>
                                      </tr>
                                  <tr><td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      <td>&nbsp;</td>
                                      </tr>
                              
                                  </table>
                              </div>
        
    </div>
   <div class="SQLLayoutDiv">
<table><tr><td style="width: 75px;padding-left:10px; ">
                       <asp:Label runat="server" ID="lblSQL1" Text="First Node SQL" CssClass="lbl"> </asp:Label>
                   </td>
                   <td>
                       <asp:TextBox ID="txtSQL1" runat="server" TextMode="MultiLine" CssClass="txt txtsql" ></asp:TextBox>
   </td>
    <td style="width: 75px;padding-left:10px; ">
                       <asp:Label runat="server" ID="lblSQL2" Text="Expand SQL" CssClass="lbl"> </asp:Label>
                   </td>
                   <td>
                       <asp:TextBox ID="txtSQL2" runat="server" TextMode="MultiLine" CssClass="txt txtsql" ></asp:TextBox>
   </td>
    <td style="width: 75px;padding-left:10px; ">
                       <asp:Label runat="server" ID="lblSQL3" Text="Popup SQL" CssClass="lbl"> </asp:Label>
                   </td>
                   <td>
                       <asp:TextBox ID="txtSQL3" runat="server" TextMode="MultiLine" CssClass="txt txtsql" ></asp:TextBox>
   </td></tr>
    <tr>
        <td style="padding-left:10px; ">

                           <asp:Button ID="btnsavesql" Text="Update SQL" runat="server" class="btn"  />


                     </td>
    </tr>
</table>

       <br/>
       <br />


   </div>
    <div style="padding-left:1000px;">
        <table><tr><td style="padding-left:10px;">

                           <asp:Button ID="btnNew" Text="New Template" runat="server" class="btn"  />


                     </td><td style="padding-left:10px;">
       <button id ="Btnsubmit" class="btn"    onclick="save(); return false;"> Save Template</button>
            </td>

           
                <td style="padding-left:10px;">

                           <asp:Button ID="btnDelete" Text="Delete Template" runat="server" class="btn"  />


                     </td>
           
               </tr></table>
    </div>
        </div>
    <input id="hdn_TemplateName" type="type" style="display: none;" name="name" value=" " runat="server" />
     <input id="hdnScheme" type="type" style="display: none;" name="name" value=" " runat="server"/>

</asp:Content>
