frame_data["fomanticui2"] = {"xml":"<div title=\"Fomantic-ui 2.2.13\">\n    <div class=\"components\">\n        <div class=\"allowed-XSS-code\" title=\"Allow these attributes when filtering for XSS\">\n            <script>\n                allowedXSS[\"attributes\"].push(\"data-tooltip\",\"data-position\",\"data-inverted\",\"data-html\",\"data-variation\");\n            </script>\n        </div>\n        <div class=\"category\" title=\"Text, Images, Headers\">\n            <div class=\"component divider\" title=\"Text, Paragraph and Link\"></div>\n            <div class=\"component\" title=\"Text\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Text.png\">\n                <div class=\"html-content\"><span class=\"ag-text-edit\"></span></div>\n                <div class=\"runOnLoad\">\n                    <script>\n                        tagReName(\"Text\", \".ag-text-edit\");\n                        designSetting(\"disablePropInspector\", \".ag-text-edit\");\n                    </script>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n\n                        addCustomButton(inEditor, \"addNewText\", \"Add New Text\", \"\", \"\", \".ag-text-edit\");\n\n                        inEditor.find(\"#addNewText\").click(function (event) {\n                            var elm = selectedElement();\n\n                            var newCol = elm.after('<div class=\"newStuff\"><span class=\"ag-text-edit\"></span></div>');\n                            runUndoAddNew(false);\n                            var ifram = editFrameContent();\n                            finishNewElem(ifram, false, true);\n\n                            setTimeout(function () {\n                                selectedElement().click();\n                            }, 200);\n\n                            event.stopPropagation();\n                        });\n                    </script>\n                </div>\n                <div class=\"beforeDrop\">\n                    <script>\n                        // if a link contains only a single text element, then drop it outside the link\n                        if (elmDrag.is(\".ag-text-edit\")) {\n                            if (injectPoint.element.parent().is(\"a\")) {\n                                if (injectPoint.element.parent().children().length == 1) {\n                                    if (injectPoint.element) {\n                                        useCustomDrop = true;\n\n                                        if (injectPoint.position == \"before\") {\n                                            injectPoint.element.closest(\"a\").before(elmDragCode);\n                                        } else if (injectPoint.position == \"after\") {\n                                            injectPoint.element.closest(\"a\").after(elmDragCode);\n                                        } else if (injectPoint.position == \"prepend\") {\n                                            injectPoint.element.closest(\"a\").before(elmDragCode);\n                                        } else if (injectPoint.position == \"append\") {\n                                            injectPoint.element.closest(\"a\").after(elmDragCode);\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    </script>\n                </div>\n                <div class=\"cleanUpBeforePublish\">\n                    <script>\n                        pageClone.find(\".ag-text-edit\").each(function () {\n                            $(this).replaceWith($(this).text());\n                        });\n                    </script>\n                </div>\n            </div>\n            <div class=\"component\" title=\"Text Element\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Text_Element.png\">\n                <div class=\"html-content\"><span class=\"ag-text-span\"></span></div>\n                <div class=\"runOnLoad\">\n                    <script>\n                        hideClassFromPropInspector(\"ag-text-span\", true);\n                    </script>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n\n                        addCustomButton(inEditor, \"addNewSpan\", \"Add New Text\", \"\", \"\", \".ag-text-span\");\n\n                        inEditor.find(\"#addNewSpan\").click(function (event) {\n                            var elm = selectedElement();\n\n                            var newCol = elm.after('<div class=\"newStuff\"><span class=\"ag-text-span\"></span></div>');\n                            runUndoAddNew(false);\n                            var ifram = editFrameContent();\n                            finishNewElem(ifram, false, true);\n\n                            setTimeout(function () {\n                                selectedElement().click();\n                            }, 200);\n\n                            event.stopPropagation();\n                        });\n                    </script>\n                </div>\n            </div>\n            <div class=\"component\" title=\"Paragraph\" id=\"paragraph\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Paragraph.png\">\n                <div class=\"html-content\"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p></div>\n            </div>\n            <div class=\"component\" title=\"Link\" id=\"link\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Link.png\">\n                <div class=\"html-content\"><a href=\"\"><span class=\"ag-text-edit\">Links</span></a></div>\n                <div class=\"runOnLoad\">\n                    <style>\n                        a:empty{\n                            padding-top: 16px !important;\n                            padding-bottom: 16px !important;\n                        }\n                    </style>\n                </div>\n            </div>\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Images\"></div>\n                <div class=\"component\" title=\"Image Link\" id=\"imageLink\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Image_Link-v2.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui image\"><img alt=\"...\" src=\"https://editor.bragndrop.com/assets/images/259x259.png\" ></a></div>\n                    <div class=\"runOnLoad\">\n                        <style>\n                            a.image:empty{\n                                padding-top: 16px !important;\n                                padding-bottom: 16px !important;\n                            }\n                        </style>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Image\" id=\"image\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Image-v2.png\">\n                    <div class=\"html-content\"><img class=\"ui image\" alt=\"...\" src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Image Holder\", \"div.image\");\n                        </script>    \n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"imgSrc\", \"Change Image\", \"\", \"\", \"img\", \"\", \"#15CD72\");\n\n                            function undoRedoImageURLChanges(elem, oldImage, newImage) {\n                                // update the \"src\" value in the \"Property Inspector\" box\n                                var srcAttribute = $('.attrName[value=\"src\"]').closest(\"tr\").find(\".attrVal\");\n                                srcAttribute.attr(\"value\", newImage);\n                                srcAttribute.val(newImage);\n                                srcAttribute.attr(\"title\", newImage);\n\n                                elem.attr(\"src\", newImage);\n\n                                undoManager.add({\n                                    undo: function () {\n                                        showIfHidden(elem);\n                                        elem.attr(\"src\", oldImage);\n                                        resetBreadcrumbAndProps(elem, false);\n                                    },\n                                    redo: function () {\n                                        showIfHidden(elem);\n                                        elem.attr(\"src\", newImage);\n                                        resetBreadcrumbAndProps(elem, false);\n\n                                    }\n                                });\n\n                                undoRedoStatus();\n                            }\n\n                            inEditor.find(\"#imgSrc\").click(function (event) {\n\n                                var elem = selectedElement();\n\n                                // \"openImageGallery\" is a function used to open the image gallery\n                                // you must pass an array of affected elements (with a target attribute) for the image url\n                                openImageGallery([\n                                    {\n                                        \"element\": elem,\n                                        \"attribute\": \"src\"\n                                    }\n                                ]);\n\n\n                                $('#ImageGallery').off('click', '.thumbnail');\n\n                                $('#ImageGallery').on('click', '.thumbnail', function (event) {\n\n                                    if ($(this).hasClass(\"imageActive\") == false) {\n\n                                        // \"currentImage\" is an internal variable that tracks the active image url\n                                        var oldImage = currentImage;\n\n                                        // \"getSelectedImage\" is a function which grabs the url of the selected image\n                                        var newImage = getSelectedImage($(this));\n\n                                        undoRedoImageURLChanges(elem, oldImage, newImage);\n\n                                    }\n\n                                });\n\n\n                                $('#UpdateImageURLviaInputBox').off('click');\n\n                                $('#UpdateImageURLviaInputBox').on('click', function (event) {\n\n                                    if (currentImage != $(\"#ImageURLInputBox\").val()) {\n\n                                        // \"currentImage\" is an internal variable that tracks the active image url\n                                        var oldImage = currentImage;\n\n                                        // \"#ImageURLInputBox\" is the input box were the user enters the img URL\n                                        var newImage = $(\"#ImageURLInputBox\").val();\n\n                                        undoRedoImageURLChanges(elem, oldImage, newImage);\n\n                                        setTimeout(function () {\n                                            elem.click();\n                                        }, 200); \n                                    }\n\n                                    $('#SelectImageModal').modal('hide');\n\n                                });\n\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"avatar,bordered,rounded,circular\");\n                            addListButton(inEditor, \"Shape\", list, \"img, .image\", \".image > img\");\n\n                            addClassButton(inEditor,\"Spaced\", \"spaced\", \"img, .image\", \".image > img, .reveal\");\n                            addClassButton(inEditor,\"Centered\", \"centered\", \"img, .image\", \".image > img\");\n                            addClassButton(inEditor,\"Disabled\", \"disabled\", \"img, .image\", \".image > img\");\n                            addClassButton(inEditor, \"Fluid\", \"fluid\", \"img, .image\", \".image > img\");\n\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Image Swap\" id=\"imageSwap\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Image_Swap.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui fade reveal image\"><img class=\"visible content\" src=\"https://editor.bragndrop.com/assets/images/male-small.jpg\"><img class=\"hidden content\" src=\"https://editor.bragndrop.com/assets/images/female-small.jpg\"></a></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"unTouchElement\", \".reveal .content\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"visibleImage\", \"Visible Image\", \"\", \"\", \".reveal\", \"\", \"#15CD72\");\n                            addCustomButton(inEditor, \"hiddenImage\", \"Hidden Image\", \"\", \"\", \".reveal\", \"\", \"#15CD72\");\n\n                            function undoRedoImageSwapURLChanges(elem, oldImage, newImage){\n\n                                // update the \"src\" value in the \"Property Inspector\" box\n                                var srcAttribute = $('.attrName[value=\"src\"]').closest(\"tr\").find(\".attrVal\");\n                                if (srcAttribute.length > 0) {\n                                    srcAttribute.attr(\"value\", newImage);\n                                    srcAttribute.val(newImage);\n                                    srcAttribute.attr(\"title\", newImage);\n                                }\n\n                                elem.attr(\"src\", newImage);\n\n                                undoManager.add({\n                                    undo: function () {\n                                        showIfHidden(elem);\n                                        elem.attr(\"src\", oldImage);\n                                        resetBreadcrumbAndProps(elem, false);\n                                    },\n                                    redo: function () {\n                                        showIfHidden(elem);\n                                        elem.attr(\"src\", newImage);\n                                        resetBreadcrumbAndProps(elem, false);\n\n                                    }\n                                });\n                                undoRedoStatus();\n                            }\n\n                            function revealImageChange(elem){\n\n                                // \"openImageGallery\" is a function used to open the image gallery\n                                // you must pass an array of affected elements (with a target attribute) for the image url\n                                openImageGallery([\n                                    {\n                                        \"element\": elem,\n                                        \"attribute\": \"src\"\n                                    }\n                                ]);\n\n\n                                $('#ImageGallery').off('click', '.thumbnail');\n\n                                $('#ImageGallery').on('click', '.thumbnail', function (event) {\n\n                                    if ($(this).hasClass(\"imageActive\") == false) {\n\n                                        // \"currentImage\" is an internal variable that tracks the active image url\n                                        var oldImage = currentImage;\n\n                                        // \"getSelectedImage\" is a function which grabs the url of the selected image\n                                        var newImage = getSelectedImage($(this));\n\n                                        undoRedoImageSwapURLChanges(elem, oldImage, newImage);\n                                    }\n                                });\n\n\n                                $('#UpdateImageURLviaInputBox').off('click');\n\n                                $('#UpdateImageURLviaInputBox').on('click', function (event) {\n\n                                    if (currentImage != $(\"#ImageURLInputBox\").val()) {\n\n                                        // \"currentImage\" is an internal variable that tracks the active image url\n                                        var oldImage = currentImage;\n\n                                        // \"#ImageURLInputBox\" is the input box were the user enters the img URL\n                                        var newImage = $(\"#ImageURLInputBox\").val();\n\n                                        undoRedoImageSwapURLChanges(elem, oldImage, newImage);\n\n                                        setTimeout(function () {\n                                            elem.click();\n                                        }, 200); \n                                    }\n\n                                    $('#SelectImageModal').modal('hide');\n\n                                });\n                            }\n\n                            inEditor.find(\"#visibleImage\").click(function (event) {\n                                var elem = selectedElement();\n                                revealImageChange(elem.find(\".visible\"));\n                                event.stopPropagation();\n                            });\n\n                            inEditor.find(\"#hiddenImage\").click(function (event) {\n                                var elem = selectedElement();\n                                revealImageChange(elem.find(\".hidden\"));\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"fade,move,move right,move up,move down,rotate,rotate left\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Animate\", list, \".reveal\");\n\n                            addClassButton(inEditor, \"Instant\", \"instant\", \".reveal\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrop.hasClass(\"reveal\")) { \n                                isOut = true;\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"copyComponent\" title=\"dimmableImage\"></div>\n                <div class=\"component\" title=\"Corner Label Image\" id=\"imageCornerLabel\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Corner_Label_Image.png\">\n                    <div class=\"html-content\"><div class=\"ui image\"><a class=\"ui left corner label\"><i class=\"heart icon\"></i></a><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"noCopy\", \".ui.corner.label\");\n                            designSetting(\"isAbsolutePosition\", \".ui.corner.label\");\n                            designSetting(\"notDraggable\", \".ui.corner.label\");\n                            designSetting(\"notDroppable\", \".ui.corner.label\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"left corner,right corner\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Left or Right\", list, \".ui.corner.label\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Image Group\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Thumbnails_Simple.png\">\n                    <div class=\"html-content\"><div class=\"ui images\"><img class=\"ui image\" alt=\"...\" src=\"https://editor.bragndrop.com/assets/images/140x140.png\" ><img class=\"ui image\" alt=\"...\" src=\"https://editor.bragndrop.com/assets/images/140x140.png\" ><img class=\"ui image\" alt=\"...\" src=\"https://editor.bragndrop.com/assets/images/140x140.png\" ><img class=\"ui image\" alt=\"...\" src=\"https://editor.bragndrop.com/assets/images/140x140.png\" ></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Image Group\", \"div.images\");\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Headers\"></div>\n            <div class=\"component-group\" id=\"header\">\n                <div class=\"component\" title=\"H1, H2, H3, H4, H5, H6\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Heading_3.png\">\n                    <div class=\"html-content\"><div class=\"ui header h3\">Heading</div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Heading\", \".h1,.h2,.h3,.h4,.h5,.h6\");\n                            hideClassFromPropInspector(\"h1\", true);\n                            hideClassFromPropInspector(\"h2\", true);\n                            hideClassFromPropInspector(\"h3\", true);\n                            hideClassFromPropInspector(\"h4\", true);\n                            hideClassFromPropInspector(\"h5\", true);\n                            hideClassFromPropInspector(\"h6\", true);\n                        </script>\n                        <style>\n                            .h1 {\n                              font-size: 2em !important;\n                              margin: 0.67em 0;\n                            }\n                            .h1,.h2,.h3,.h4,.h5 {\n                              font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;\n                              line-height: 1.28571429em;\n                              margin: calc(2rem -  0.14285714em ) 0em 1rem;\n                              font-weight: bold;\n                              padding: 0em;\n                            }\n\n                            .h1 {\n                              min-height: 1rem;\n                              font-size: 2rem !important;\n                            }\n\n                            .h2 {\n                              font-size: 1.71428571rem !important;\n                            }\n\n                            .h3 {\n                              font-size: 1.28571429rem !important;\n                            }\n\n                            .h4 {\n                              font-size: 1.07142857rem; !important\n                            }\n\n                            .h5 {\n                              font-size: 1rem !important;\n                            }\n\n                            .h6 {\n                               font-size: 0.67em !important;\n                            }\n\n                            .h1:first-child,.h2:first-child,.h3:first-child,.h4:first-child,.h5:first-child {\n                              margin-top: 0em;\n                            }\n\n                            .h1:last-child,.h2:last-child,.h3:last-child,.h4:last-child,.h5:last-child {\n                              margin-bottom: 0em;\n                            }\n\n                            .h1.ui.header {\n                              font-size: 2rem !important;\n                            }\n\n                            .h2.ui.header {\n                              font-size: 1.71428571rem !important;\n                            }\n\n                            .h3.ui.header {\n                              font-size: 1.28571429rem !important;\n                            }\n\n                            .h4.ui.header {\n                              font-size: 1.07142857rem !important;\n                            }\n\n                            .h5.ui.header {\n                              font-size: 1rem !important;\n                            }\n\n                            .h1.ui.header .sub.header {\n                              font-size: 1.14285714rem !important;\n                            }\n\n                            .h2.ui.header .sub.header {\n                              font-size: 1.14285714rem !important;\n                            }\n\n                            .h3.ui.header .sub.header {\n                              font-size: 1rem !important;\n                            }\n\n                            .h4.ui.header .sub.header {\n                              font-size: 1rem !important;\n                            }\n\n                            .h5.ui.header .sub.header {\n                              font-size: 0.92857143rem !important;\n                            }\n\n                            .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {\n                              font-size: 1rem !important;\n                            }\n\n                            .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {\n                              font-size: 1em !important;\n                            }\n\n                            .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {\n                              font-size: 1.28571429em !important;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            pageClone.find(\".h1, .h2, .h3, .h4, .h5, .h6\").each(function () {\n                                var hTag = \"<h1></h1>\";\n                                if ($(this).hasClass(\"h2\")) {\n                                    hTag = \"<h2></h2>\";\n                                } else if ($(this).hasClass(\"h3\")) {\n                                    hTag = \"<h3></h3>\";\n                                } else if ($(this).hasClass(\"h4\")) {\n                                    hTag = \"<h4></h4>\";\n                                } else if ($(this).hasClass(\"h5\")) {\n                                    hTag = \"<h5></h5>\";\n                                } else if ($(this).hasClass(\"h6\")) {\n                                    hTag = \"<h6></h6>\";\n                                }\n                                var newElem = $(hTag, {html: $(this).html()});\n                                $.each(this.attributes, function() {\n                                    newElem.attr(this.name, this.value);\n                                });\n                                $(this).replaceWith(newElem);\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"h1,h2,h3,h4,h5,h6\");\n                            list.altCaption = {\"h1\": \"Heading 1\", \"h2\": \"Heading 2\", \"h3\": \"Heading 3\", \"h4\": \"Heading 4\", \"h5\": \"Heading 5\", \"h6\": \"Heading 6\", };\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Size\", list, \".h1,.h2,.h3,.h4,.h5,.h6\");\n\n                            addClassButton(inEditor, \"Horizontal Divider\", \"horizontal divider\", \".h1,.h2,.h3,.h4,.h5,.h6\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if ((elmDrop.closest(\".h1\").length > 0) || (elmDrop.closest(\".h2\").length > 0) || (elmDrop.closest(\".h3\").length > 0) || (elmDrop.closest(\".h4\").length > 0) || (elmDrop.closest(\".h5\").length > 0) || (elmDrop.closest(\".h6\").length > 0)) {\n                                if ((dragTag == \"span\") || (dragTag == \"small\")) {\n                                }else{\n                                    if ((elmDrop.hasClass(\"h1\")) || (elmDrop.hasClass(\"h2\")) || (elmDrop.hasClass(\"h3\")) || (elmDrop.hasClass(\"h4\")) || (elmDrop.hasClass(\"h5\")) || (elmDrop.hasClass(\"h6\"))) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Header\" id=\"header\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Header.png\">\n                    <div class=\"html-content\"><div class=\"ui medium header\"><span class=\"ag-text-edit\">Header</span></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Header\", \"div.header\");\n                        </script>\n                        <style>\n                            div.header:empty{\n                                padding-top: 16px !important;\n                                padding-bottom: 16px !important;\n                            }\n                            div.header:empty:before{\n                                content: \"header...\";\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Sub Header\", \"sub\", \"div.header\");\n\n                            var list = new listOption(\"dividing,block,attached,top attached,bottom attached\");\n                            addListButton(inEditor, \"Display\", list, \".header\");\n\n                            addClassButton(inEditor, \"Disabled\", \"disabled\", \".header\");\n                        </script>   \n                    </div>\n                </div>\n                <div class=\"component\" title=\"Sub Header\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Sub_Header.png\">\n                    <div class=\"html-content\"><div class=\"ui header\">Account Settings<div class=\"sub header\">Manage your account settings and set e-mail preferences.</div></div></div>\n                </div>\n                <div class=\"component\" title=\"Top Icon Header\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Top_Icon_Header.png\">\n                    <div class=\"html-content\"><div class=\"ui icon header\"><i class=\"settings icon\"></i><div class=\"content\"><span class=\"ag-text-edit\">Account Settings</span><div class=\"sub header\"><span class=\"ag-text-edit\">Manage your account settings and set e-mail preferences.</span></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Icon Header\", \".icon.header\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Side Icon Header\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Side_Icon_Header.png\">\n                    <div class=\"html-content\"><div class=\"ui header\"><i class=\"settings icon\"></i><div class=\"content\"><span class=\"ag-text-edit\">Account Settings</span><div class=\"sub header\"><span class=\"ag-text-edit\">Manage your preferences</span></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Image Header\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Image_Header.png\">\n                    <div class=\"html-content\"><div class=\"ui header large\"><img src=\"https://editor.bragndrop.com/assets/images/female.jpg\" class=\"ui circular image spaced\">Sally</div></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Grid, Segments, Dividers, Containers\">\n            <div class=\"component divider\" title=\"Grid System\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Columns\" data-alias=\"responsive\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Grid_Columns.png\">\n                    <div class=\"html-content\"><div class=\"ui three column grid\"><div class=\"column\"></div><div class=\"column\"></div><div class=\"column\"></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Grid\", \".ui.grid\");\n                            tagReName(\"Column\", \".column:not(.row)\");\n                        </script>\n                        <style>\n                            .ui.grid:empty  {\n                                width: 100%;\n                                height: 47px;\n                            }\n                            .column:empty  {\n                                height: 47px;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"one wide,two wide,three wide,four wide,five wide,six wide,seven wide,eight wide,nine wide,ten wide,eleven wide,twelve wide,thirteen wide,fourteen wide,fifteen wide,sixteen wide\");\n                            addListButton(inEditor, \"Width\", list, \".column\", \".grid, .row, .grid.responsive .column\");\n\n                            var list = new listOption(\"equal width,one column,two column,three column,four column,five column,six column,seven column,eight column,nine column,ten column,eleven column,twelve column,thirteen column,fourteen column,fifteen column,sixteen column\");\n                            addListButton(inEditor, \"Width\", list, \".grid, .row\", \".grid.responsive, .grid.responsive .row\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"doubling,stackable,doubling stackable\");\n                            list.altCaption = {\"doubling\": \"double column width per device jump\", \"stackable\": \"stack columns on mobile\", \"doubling stackable\": \"double column width per device jump + stack columns on mobile\"};\n                            addListButton(inEditor, \"Responsive\", list, \".row\", \".grid.responsive .row\");\n\n                            var list = new listOption(\"mobile only,tablet only,tablet mobile only,widescreen only,large screen only,computer only,computer tablet only\");\n                            list.altCaption = {\"mobile only\": \"mobile\", \"tablet only\": \"tablet\", \"tablet mobile only\": \"tablet + mobile\", \"widescreen only\": \"widescreen\", \"large screen only\": \"widescreen + large screen\", \"computer only\": \"widescreen + large screen + computer\", \"computer tablet only\": \"widescreen + large screen + computer + tablet\"};\n\n                            addListButton(inEditor, \"Device Visibility\", list, \".column, .row\", \".grid\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"container,doubling,stackable,container doubling,container stackable,doubling stackable,container doubling stackable\");\n\n                            list.altCaption = {\"container\": \"container\", \"doubling\": \"double column width per device jump\", \"stackable\": \"stack columns on mobile\", \"container doubling\": \"container + double column width per device jump\", \"container stackable\": \"container + stack columns on mobile\", \"doubling stackable\": \"double column width per device jump + stack columns on mobile\", \"container doubling stackable\": \"container + double column width per device jump + stack columns on mobile\"};\n\n                            addListButton(inEditor, \"Responsive\", list, \".grid\", \".grid.responsive\");\n\n                            var list = new listOption(\"divided,vertically divided,celled,internally celled\");\n                            addListButton(inEditor, \"Border (row required)\", list, \".grid\");\n\n                            var list = new listOption(\"computer reversed,tablet reversed,mobile reversed\");\n                            addListButton(inEditor, \"Reversed\", list, \".grid, .row\");\n\n                            var list = new listOption(\"relaxed,very relaxed\");\n                            addListButton(inEditor, \"Relaxed\", list, \".grid, .row\");\n\n                            var list = new listOption(\"padded,vertically padded,horizontally padded\");\n                            addListButton(inEditor, \"Padded\", list, \".grid\");   \n\n\n                            addClassButton(inEditor, \"Centered\", \"centered\", \".grid, .row\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // A Grid can only be placed beside another Grid or inside a Column\n                            if (elmDrag.is(\".ui.grid\")) {\n                                if (elmDrop.is(\".ui.grid\")) {\n                                    isOut = true;\n                                }else if (elmDrop.hasClass(\"row\")) {\n                                    finalShow = false;\n                                }else if (elmDrop.is(\".ui.grid .column:not(.row)\")) {\n                                    isOut = false;\n                                }\n                            }\n\n                            // A Column can only be placed inside a Grid or outside another Column\n                            if (elmDrag.is(\".ui.grid .column:not(.row)\")) {\n                                if (elmDrop.is(\".ui.grid\")) {\n                                    isOut = false;\n                                }else if (elmDrop.is(\".ui.grid .column:not(.row)\")) {\n                                    isOut = true;\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Rows with Columns\" data-alias=\"responsive\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Grid_Rows_with_Columns.png\">\n                    <div class=\"html-content\"><div class=\"ui three column grid\"><div class=\"row\"><div class=\"column\"></div><div class=\"column\"></div><div class=\"column\"></div></div><div class=\"row\"><div class=\"column\"></div><div class=\"column\"></div><div class=\"column\"></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Responsive 4-2-1 Grid\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/6-6_Cell_Grid.png\">\n                    <div class=\"html-content\"><div class=\"ui grid four column container doubling stackable\"><div class=\"row\"><div class=\"column\"></div><div class=\"column\"></div><div class=\"column\"></div><div class=\"column\"></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Responsive Manual Tweaks\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/8-4_Cell_Grid.png\">\n                    <div class=\"html-content\"><div class=\"ui grid container responsive\"><div class=\"column\"></div></div></div>\n                    <div class=\"afterDrop\">\n                        <script>\n                            setTimeout(function () {\n                                focusElement(selectedElement().find(\".column\").eq(0));\n                                setTimeout(function () {\n                                    inEditor.find(\"#editColumnWidth\").click();\n                                }, 200);    \n                            }, 100);\n                        </script>\n                    </div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"allowDuplicateClassNames\", \"wide\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Container\", \"container\", \".ui.grid.responsive\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <div id=\"semanticGridOptions\"><form><div class=\"form-group\"><label class=\"control-label\">Column Width: <span id=\"col-slider-val\"></span></label><div id=\"col-slider\"></div></div></form></div>\n                        <script>\n                            addCustomButton(inEditor, \"editColumnWidth\", \"Width\", \"\", \"\", \".grid.responsive .column\", \".grid.responsive .row\" );\n\n\n                            var propBody = controlLayout.find(\"#semanticGridOptions\").html();\n                            var columnProp = buildCustomProp(\"#column-prop\", propBody);\n                            var deviceTypeHTML = controlLayout.find(\".deviceTypeSelectorControl\").html()\n                            columnProp.find(\"form\").prepend(deviceTypeHTML);\n                            var deviceTypeSelector = columnProp.find(\".deviceTypeSelector\");\n\n                            var colWidthText = [\"one\",\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\",\"thirteen\",\"fourteen\",\"fifteen\",\"sixteen\"];\n\n                            function scrollCaption(val){\n                                if (val == 0) {\n                                    $(\"#col-slider-val\").text('not set');\n                                }else{\n                                    $(\"#col-slider-val\").text(val);\n                                }\n                            }\n\n                            function slideToCol() {\n\n                                var elm = selectedElement();\n                                var elmClass = elm.attr(\"class\");\n                                var val = 0;\n                                for (var i = 0; i <= 15; i++) {\n                                    var matchClass =  colWidthText[i] + \" wide \" + deviceTypeSelector.val();\n                                    if (elmClass.indexOf(matchClass) > -1) {\n                                        val = i + 1;\n                                        break;\n                                    }\n                                }\n                                columnSlider.slider(\"option\", \"value\", val);\n                                scrollCaption(val);\n                            }\n\n                            function deviceSelected() {\n\n                                var vl = deviceTypeSelector.val();\n                                var s = \"\";\n                                switch(vl) {\n                                    case \"widescreen\":\n                                        s = \"wide_screen\";\n                                        break;\n                                    case \"large screen\":\n                                        s = \"large_screen\";\n                                        break;\n                                    case \"computer\":\n                                        s = \"desktop\";\n                                        break;\n                                    case \"tablet\":\n                                        s = \"tablet\";\n                                        break;\n                                    case \"mobile\":\n                                        s = \"mobile\";\n                                        break;\n                                    default:\n                                        s = \"desktop\";\n                                        break;\n                                }\n\n                                return s;\n\n                            }\n\n                            deviceTypeSelector.change(function () {\n\n                                slideToCol();\n                                var ds = deviceSelected();\n                                $(\"#viewportList\").val(ds);\n                                changeViewport(ds);\n\n                            });\n\n                            var classOldVal = \"\";\n                            var classNewVal = \"\";\n\n                            var oldScrollVal = \"\";\n                            var newScrollVal = \"\";\n\n                            var columnSlider = columnProp.find(\"#col-slider\").slider({\n                                min: 0,\n                                max: 16,\n                                range: \"min\",\n                                start: function (event, ui) {\n\n                                    oldScrollVal = ui.value;\n                                    classOldVal = selectedElement().attr(\"class\");\n\n                                },\n                                slide: function (event, ui) {\n\n                                    var elm = selectedElement();\n\n                                    for (var i = 0; i <= 15; i++) {\n                                        var matchClass =  colWidthText[i] + \" wide \" + deviceTypeSelector.val();\n                                        var elmClass = elm.attr(\"class\");\n                                        var cleanClass = elmClass.replace(matchClass,\"\");\n                                        elm.attr(\"class\", cleanClass);\n                                    }\n\n                                    newScrollVal = ui.value;\n\n                                    if (newScrollVal > 0) {\n                                        var newClass = colWidthText[newScrollVal - 1] + \" wide \" + deviceTypeSelector.val() + \" \" + elm.attr(\"class\");\n                                        classNewVal = newClass.replace(/\\s{2,}/g, ' ');\n                                        selectedElement().attr(\"class\", classNewVal);\n                                    }\n\n                                    updateClassValue(elm);\n\n                                    scrollCaption(newScrollVal);\n\n                                },\n                                stop: function (event, ui) {\n\n                                    if (oldScrollVal != newScrollVal) {\n\n                                        var elm = selectedElement();\n\n                                        var elmClassOldVal = classOldVal;\n                                        var elmClassNewVal = classNewVal;\n\n                                        var elmOldScrollVal = oldScrollVal;\n                                        var elmNewScrollVal = newScrollVal;\n\n                                        var ds = deviceSelected();\n                                        var dt = deviceTypeSelector.val();\n\n                                        undoManager.add({\n                                            undo: function () {\n                                                eastPanelShowContent(\"#column-prop\");\n                                                showIfHidden(elm);\n\n                                                elm.attr(\"class\", elmClassOldVal);\n                                                columnSlider.slider(\"option\", \"value\", elmOldScrollVal);\n                                                scrollCaption(elmOldScrollVal);\n\n                                                deviceTypeSelector.val(dt);\n                                                $(\"#viewportList\").val(ds);\n                                                changeViewport(ds);\n\n                                                updateClassValue(elm);\n                                                resetBreadcrumbAndProps(elm, false, true);\n\n                                            },\n                                            redo: function () {\n                                                eastPanelShowContent(\"#column-prop\");\n                                                showIfHidden(elm);\n\n                                                elm.attr(\"class\", elmClassNewVal);\n                                                columnSlider.slider(\"option\", \"value\", elmNewScrollVal);\n                                                scrollCaption(elmNewScrollVal);\n\n                                                deviceTypeSelector.val(dt);\n                                                $(\"#viewportList\").val(ds);\n                                                changeViewport(ds);\n\n                                                updateClassValue(elm);\n                                                resetBreadcrumbAndProps(elm, false, true);\n\n                                            }\n                                        });\n\n                                        undoRedoStatus();  \n                                    }\n                                }\n                            });\n\n                            inEditor.find(\"#editColumnWidth\").click(function (event) {\n\n\n                                var dv = $(\"#viewportList\").val();\n\n                                switch(dv) {\n                                    case \"wide_screen\":\n                                        deviceTypeSelector.val(\"widescreen\");\n                                        break;\n                                    case \"large_screen\":\n                                        deviceTypeSelector.val(\"large screen\");\n                                        break;\n                                    case \"desktop\":\n                                        deviceTypeSelector.val(\"computer\");\n                                        break;\n                                    case \"tablet\":\n                                        deviceTypeSelector.val(\"tablet\");\n                                        break;\n                                    case \"mobile\":\n                                        deviceTypeSelector.val(\"mobile\");\n                                        break;\n                                    default:\n                                        deviceTypeSelector.val(\"computer\");\n                                        break;\n                                }\n\n\n                                if ($(\"#viewportList\").val() == 'browser_width') {\n                                    $(\"#viewportList\").val('desktop');\n                                    changeViewport('desktop');\n                                }\n\n                                slideToCol();\n\n                                eastPanelShowContent(\"#column-prop\");\n\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Add Row\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Rows.png\" >\n                    <div class=\"html-content\"><div class=\"row\"><div class=\"column\"></div><div class=\"column\"></div><div class=\"column\"></div><div class=\"column\"></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Row\", \".row\");\n                        </script>\n                        <style>\n                            .row:empty  {\n                                height: 47px;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Stretched\", \"stretched\", \".row\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // A Row can only be placed inside a Grid or outside a Column or another Row\n                            if (elmDrag.hasClass(\"row\")) {\n                                if (elmDrop.parent().hasClass(\"row\")) {\n                                    finalShow = false;\n                                }else if (elmDrop.is(\".ui.grid\")) {\n                                    isOut = false;\n                                }else if (elmDrop.hasClass(\"row\")) {\n                                    isOut = true;\n                                }else if (elmDrop.is(\".ui.grid .column:not(.row)\")) {\n                                    isOut = true;\n                                }\n                            }\n\n                            // Drop everything else inside the Column\n                            if (elmDrag.is(\":not(.grid, .row, .column)\")){\n                                if (elmDrop.is(\".ui.grid .column:not(.row)\")) {\n                                    isOut = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Segments\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Segment\" id=\"segment\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Segment.png\">\n                    <div class=\"html-content\"><div class=\"ui segment\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Segment\", \".segment\");\n                        </script>    \n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"circular,raised,stacked,tall stacked,piled\");\n                            addListButton(inEditor, \"Types\", list, \".segment, .segments\", \".segment.dimmed, .sidebar\");\n\n                            var list = new listOption(\"padded,very padded,compact\");\n                            addListButton(inEditor, \"Spacing\", list, \".segment\", \".segment.dimmed\");\n\n                            addClassButton(inEditor, \"Vertical\", \"vertical\", \".segment\", \".segment.dimmed, .sidebar\");\n\n                            var list = new listOption(\"attached,top attached,bottom attached\");\n                            addListButton(inEditor, \"Attached\", list, \".segment\", \".segment.dimmed, .sidebar\");\n\n                            var list = new listOption(\"disabled,loading\");\n                            addListButton(inEditor, \"State\", list, \".segment\", \".segment.dimmed\");\n\n                            var list = new listOption(\"secondary,tertiary\");\n                            addListButton(inEditor, \"Emphasis\", list, \".segment\", \".segment.dimmed\");\n\n                            addClassButton(inEditor, \"Clear Floats\", \"clearing\", \".segment\", \".segment.dimmed, .sidebar\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Circular Segments\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Circular_Segments.png\">\n                    <div class=\"html-content\"><div class=\"ui inverted circular green segment\"><div class=\"ui header inverted large\">Sale<div class=\"ui header sub\">$10.99</div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Raised Segment\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Raised_Segment.png\">\n                    <div class=\"html-content\"><div class=\"raised segment ui\"><p>Pellentesque habitant morbi.</p></div></div>\n                </div>\n                <div class=\"component\" title=\"Stacked Segment\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Stacked_Segment.png\">\n                    <div class=\"html-content\"><div class=\"stacked segment ui\"><p>Pellentesque habitant morbi.</p></div></div>\n                </div>\n                <div class=\"component\" title=\"Piled Segment\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Piled_Segment.png\">\n                    <div class=\"html-content\"><div class=\"piled segment ui\"><p>Pellentesque habitant morbi.</p></div></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Segment\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Segment.png\">\n                    <div class=\"html-content\"><div class=\"vertical segment ui\"><p>Pellentesque habitant morbi.</p></div><div class=\"vertical segment ui\"><p>Pellentesque habitant morbi.</p></div><div class=\"vertical segment ui\"><p>Pellentesque habitant morbi.</p></div></div>\n                </div>\n                <div class=\"component\" title=\"Grouped Segments\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Grouped_Segments.png\">\n                    <div class=\"html-content\"><div class=\"ui segments\"><div class=\"ui segment\"><p>Top</p></div><div class=\"ui segment\"><p>Middle</p></div><div class=\"ui segment\"><p>Middle</p></div><div class=\"ui segment\"><p>Bottom</p></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Segments\", \".segments\");\n                        </script>    \n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Horizontal\", \"horizontal\", \".segments\");\n                            addClassButton(inEditor, \"Compact\", \"compact\", \".segments\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Horizontal Segments\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Horizontal_Segments.png\">\n                    <div class=\"html-content\"><div class=\"ui horizontal segments\"><div class=\"ui segment\"><p>One</p></div><div class=\"ui segment\"><p>Two</p></div><div class=\"ui segment\"><p>Three</p></div></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Dividers\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Divider\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Divider.png\">\n                    <div class=\"html-content\"><div class=\"ui divider\">&nbsp;</div></div> \n                </div>\n                <div class=\"component\" title=\"Text Divider\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Text_Divider.png\">\n                    <div class=\"html-content\"><div class=\"ui horizontal divider\"><span class=\"ag-text-edit\">Or</span></div></div> \n                </div>\n                <div class=\"runOnLoad\">\n                    <script>\n                        tagReName(\"Divider\", \"div.divider\");\n\n                        designSetting(\"noCopy\", \".divider .ag-text-edit\");\n                        designSetting(\"noRemove\", \".divider .ag-text-edit\");\n                        designSetting(\"notDraggable\", \".divider .ag-text-edit\");\n                    </script>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n                        addClassButton(inEditor, \"Fitted\", \"fitted\", \".divider\", \".breadcrumb .divider, .menu >  .divider\");\n                        addClassButton(inEditor, \"Clearing\", \"clearing\", \".divider\", \".breadcrumb .divider, .menu >  .divider\");\n                        addClassButton(inEditor, \"Section\", \"section\", \"div.divider\", \".breadcrumb .divider, .menu >  .divider\");\n                    </script>   \n                </div>\n                <div class=\"whenDrag\">\n                    <script>\n                        // A Divider can not be dropped into another Divider\n                        if (elmDrop.closest(\".divider\").length > 0) {\n                            if (elmDrag.hasClass(\"divider\")) {\n                                if (elmDrop.hasClass(\"divider\")) {\n                                    isOut = true;\n                                }else{\n                                    finalShow = false;\n                                }  \n                            }\n                        }\n                    </script>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Containers\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Container\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Container.png\">\n                    <div class=\"html-content\"><div class=\"ui container\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Container\", \".container\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Fluid\", \"fluid\", \".container\", \".grid\");\n                            addClassButton(inEditor, \"Text\", \"text\", \".container\", \".grid\");\n                        </script>   \n                    </div>\n                </div>\n                <div class=\"component\" title=\"Content\" id=\"content\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Content.png\">\n                    <div class=\"html-content\"><div class=\"content\"><span class=\"ag-text-edit\">content</span></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Content\", \"div.content\");\n                        </script>\n                        <style>\n                            div.content:empty{\n                                width:100px !important;\n                            }\n                            .card div.content:empty{\n                                width:100% !important;\n                            }\n                            div.content:empty:before{\n                                content: \"content...\";\n                            }\n                        </style>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Extra Content\" id=\"extraContent\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Extra_Content.png\">\n                    <div class=\"html-content\"><div class=\"extra content\"><span class=\"ag-text-edit\">extra content</span></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Extra Content\", \"div.extra\");\n                        </script>\n                        <style>\n                            div.content.extra:empty:before{\n                                position: relative !important;\n                                content: \"extra content...\" !important;\n                            }\n\n                        </style>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Description\" id=\"description\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Description.png\">\n                    <div class=\"html-content\"><div class=\"description\"><p>Nullam quis risus eget urna mollis ornare vel eu leo.</p></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Description\", \".description\");\n                        </script>    \n                    </div>\n                </div>\n                <div class=\"component\" title=\"Detail\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Detail.png\">\n                    <div class=\"html-content\"><div class=\"detail\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Detail\", \".detail\");\n                        </script>    \n                    </div>\n                </div>            \n            </div>\n        </div>\n        <div class=\"category\" title=\"Menus, Sidebars and Sticky Content\">\n            <div class=\"component divider\" title=\"Menus\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Standard Menu\" data-alias=\"nav\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Standard_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui menu standard-menu\"><a class=\"item\">Link</a><div class=\"item\">Item</div><div class=\"right menu\"><div class=\"item\">Item</div><a class=\"item\">Link</a></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Menu\", \".menu:not(.right, .pagination)\");\n                            tagReName(\"Right Menu\", \".menu.right\");\n\n                            designSetting(\"noCopy\", \".menu > .right.menu\");\n                            designSetting(\"noRemove\", \".menu > .right.menu > .item:only-child\");\n                            designSetting(\"notDraggable\", \".ui.menu > .item, .menu.right\");\n                            designSetting(\"notDroppable\", \".menu.right\");\n                            hideClassFromPropInspector(\"standard-menu\", true);\n\n                            tagReName(\"Mega Menu\", \".mega-menu-popup\");\n                            designSetting(\"notDraggable\", \".mega-menu-popup\");\n                            designSetting(\"notSelectable\", \".mega-menu-popup\");\n\n                            designSetting(\"isAbsolutePosition\", \".mega-menu-popup\");\n                            hideClassFromPropInspector(\"mega-menu-visible\", false);\n                        </script>\n                        <style>\n                            .mega-menu-visible .mega-menu-popup {\n                                display: block;\n                                z-index: 2010;\n                            }\n\n                            .mega-menu-popup:empty{\n                                height: 200px;\n                            }\n\n                            .mega-menu-popup:before{\n                                display: none !important;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"menuDivideEvenly\", \"Spread/Compact\", \"\", \"\", \".ui.menu\", \".vertical, .standard-menu\");\n\n                            inEditor.find(\"#menuDivideEvenly\").click(function (event) {\n                                var elm = selectedElement();\n                                var numName = [\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\"];\n\n                                elm.removeClass(numName.join(\" \"));\n\n                                var isEvenlyDivide = elm.hasClass(\"item\");\n                                if (isEvenlyDivide == true){\n                                    elm.removeClass(\"item\");\n                                }else{\n                                    var itemLen = elm.children(\".item\").length;\n                                    elm.addClass(numName[itemLen-2]);\n                                    elm.addClass(\"item\");\n                                }\n\n                                updateClassValue(elm);\n\n                                undoManager.add({\n                                    undo: function () {\n                                        showIfHidden(elm);\n\n                                        elm.removeClass(numName.join(\" \"));\n                                        if (isEvenlyDivide == true){\n                                            var itemLen = elm.children(\".item\").length;\n                                            elm.addClass(numName[itemLen-2]);\n                                            elm.addClass(\"item\");\n                                        }else{\n                                            elm.removeClass(\"item\");\n                                        }\n\n                                        updateClassValue(elm);\n                                        resetBreadcrumbAndProps(elm, true);\n                                    },\n                                    redo: function () {\n                                        showIfHidden(elm);\n\n                                        elm.removeClass(numName.join(\" \"));\n                                        if (isEvenlyDivide == true){\n                                            elm.removeClass(\"item\");\n                                        }else{\n                                            var itemLen = elm.children(\".item\").length;\n                                            elm.addClass(numName[itemLen-2]);\n                                            elm.addClass(\"item\");\n                                        }\n\n                                        updateClassValue(elm);\n                                        resetBreadcrumbAndProps(elm, true);\n                                    }\n                                });\n\n                                undoRedoStatus();\n\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"text,tabular,secondary,pointing,secondary pointing\");\n                            list.altCaption = {\"text\": \"Text\", \"tabular\": \"Tabular\", \"secondary\": \"Simple\", \"pointing\": \"Pointing\", \"secondary pointing\": \"Line\"};\n                            addListButton(inEditor, \"Style\", list, \".menu:not(.right, .dropdown .menu)\", \".vertical.menu .menu, .sidebar\");\n\n                            var list = new listOption(\"fluid,compact\");\n                            addListButton(inEditor, \"Width\", list, \".menu:not(.right, .dropdown .menu)\", \".vertical.menu .menu, .item.menu, .sidebar\");\n\n                            var list = new listOption(\"top attached,bottom attached,top fixed,bottom fixed\");\n                            addListButton(inEditor, \"Attached/Fixed\", list, \".menu:not(.right, .dropdown .menu)\", \".vertical, .vertical.menu .menu, .sidebar, .segment .menu.inverted\");\n\n                            addClassButton(inEditor, \"Borderless\", \"borderless\", \".menu:not(.right, .dropdown .menu)\", \".vertical.menu .menu, .sidebar\");\n\n                            addClassButton(inEditor, \"Mobile Stack\", \"stackable\", \".menu:not(.right, .dropdown .menu)\", \".vertical, .vertical.menu .menu\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"on-focus,on-click,on-hover,on-manual\");\n                            list.altCaption = {\"on-focus\": \"Focus\", \"on-click\": \"Click\", \"on-hover\": \"Hover\", \"on-manual\": \"Manual\"};\n                            addListButton(inEditor, \"Trigger\", list, \".mega-menu\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addClassButton(inEditor, \"Header\", \"header\", \".menu > .item:not(.tab-item, .dropdown)\", \".dropdown > .menu > .item\");\n\n\n                            var list = new listOption(\"fitted,horizontally fitted,vertically fitted\");\n                            list.altCaption = {\"fitted\": \"Squeeze\",\"horizontally fitted\": \"Left/Right Squeeze\",\"vertically fitted\": \"Top/Bottom Squeeze\"};\n                            addListButton(inEditor, \"Squeeze\", list, \".menu > .item:not(.tab-item)\");\n\n\n                            var list = new listOption(\"link,down,active\");\n                            addListButton(inEditor, \"States\", list, \".menu > .item:not(.tab-item)\");\n\n                            function updateEvenlyDividedMenu(itemElm){\n                                if (itemElm.is(\".ui.item.menu > .item\")) {\n                                    var itemMenu = itemElm.parent();\n                                    var itemLen = itemMenu.children(\".item\").length;\n                                    var numName = [\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\"];\n\n                                    if (typeof numName[itemLen-2] !== \"undefined\") {\n                                        itemMenu.removeClass(numName.join(\" \"));\n                                        itemMenu.addClass(numName[itemLen-2]);\n                                    }\n                                }\n                            }\n\n\n                            addCustomButton(inEditor, \"menuAddItem\", \"New Item\", \"plus\", \"Add New Item\", \".menu > .item:not(.tab-item)\", \".dropdown > .menu > .item\");\n\n                            inEditor.find(\"#menuAddItem\").click(function (event) {\n                                var elm = selectedElement();\n\n                                elm.after('<div class=\"newStuff\"><div class=\"item\">Item</div></div>');\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n                                updateEvenlyDividedMenu(elm);\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"menuAddLink\", \"Link\", \"plus\", \"Add New Link\", \".menu > .item:not(.tab-item)\", \".dropdown > .menu > .item\");\n\n                            inEditor.find(\"#menuAddLink\").click(function (event) {\n                                var elm = selectedElement();\n\n                                elm.after('<div class=\"newStuff\"><a class=\"item\">New Link</a></div>');\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n                                updateEvenlyDividedMenu(elm);\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"menuAddMegaMenu\", \"Mega Menu\", \"plus\", \"Add a Mega Menu\", \".menu > .item:not(.tab-item)\", \".dropdown > .menu > .item, .sub-menu .item, .vertical  .item, .sidebar .item\");\n\n                            inEditor.find(\"#menuAddMegaMenu\").click(function (event) {\n                                var elm = selectedElement();\n\n                                designWindow().hideMegaMenu();\n\n                                elm.after('<div class=\"newStuff\"><div class=\"item link mega-menu\"><div class=\"text\">Mega Menu</div><i class=\"dropdown icon\"></i><div class=\"ui fluid popup mega-menu-popup\"></div></div></div>');\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n\n                                designWindow().startMegaMenu();\n\n                                designWindow().openMegaMenu(selectedElement());\n                                updateEvenlyDividedMenu(elm);\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"menuAddDropdown\", \"Dropdown\", \"plus\", \"Add a Dropdown\", \".menu > .item:not(.tab-item)\", \".dropdown > .menu > .item, .sub-menu .item, .sidebar .item\");\n\n                            inEditor.find(\"#menuAddDropdown\").click(function (event) {\n                                var elm = selectedElement();\n\n                                elm.after('<div class=\"newStuff\"><div class=\"ui dropdown item\"><div class=\"text\">Dropdown</div><i class=\"dropdown icon\"></i><div class=\"menu\"><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"divider\"></div><div class=\"item\">Menu Text</div></div></div></div>');\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n\n                                designWindow().startDropdown();\n                                updateEvenlyDividedMenu(elm);\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"menuAddSearch\", \"Search\", \"plus\", \"\", \".menu > .item:not(.tab-item)\", \".dropdown > .menu > .item, .sub-menu .item\");\n\n                            inEditor.find(\"#menuAddSearch\").click(function (event) {\n                                var elm = selectedElement();\n\n                                if (elm.closest(\".ui.inverted.menu\").length > 0) {\n                                    var addTransparent = \"\";\n                                }else{\n                                    var addTransparent = \"transparent \";\n                                }\n\n                                elm.after('<div class=\"newStuff\"><div class=\"ui category search item\"><div class=\"ui ' + addTransparent + 'icon input\"><input class=\"prompt\" type=\"text\" placeholder=\"Search...\"><i class=\"search link icon\"></i></div><div class=\"results\"></div></div></div>');\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n                                updateEvenlyDividedMenu(elm);\n\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrop.is(\".ui.menu > .item\") == true){\n                                if (dropTag == \"a\") {\n                                    if (isOut == true) {\n                                        finalShow = false;\n                                    }\n                                }else{\n                                    isOut = false; \n                                }\n                            }\n                            if (elmDrop.hasClass(\".menu\") == true){\n                                isOut = true;\n                            }\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            pageClone.find(\".menu.right\").each(function() {\n                                if ($(this).html() == '<div class=\"item\"><span class=\"ag-text\"></span></div>') {\n                                    $(this).remove();\n                                }\n                            });\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            if (pageClone.find(\".mega-menu-popup\").length > 0){\n\n                                pageClone.find(\".mega-menu-popup\").each(function() {\n                                    $(this).parent().attr(\"data-html\", $(this).html());\n                                    $(this).parent().attr(\"data-variation\", 'basic fluid mega-menu-popup');\n                                });\n\n                                pageClone.find(\".mega-menu-popup\").remove();\n                            }\n                        </script>\n                    </div>\n                    <div class=\"requireCSS\" data-check=\".ui.menu.bottom.fixed > .mega-menu > .icon.dropdown\">\n                        <style>\n                            .ui.menu.bottom.fixed > .mega-menu > .icon.dropdown{\n                                -webkit-transform: scale(1,-1);\n                                -ms-transform: scale(1,-1);\n                                transform: scale(1,-1);\n                            }\n                        </style>\n                    </div>\n                    <div class=\"requireCSS\" data-check=\".ui.menu.bottom.fixed > .mega-menu[data-html]\">\n                        <style>\n                            .ui.menu.bottom.fixed > .mega-menu-popup{\n                                box-shadow: none;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addJStoFinalFirst\" data-check=\".mega-menu[data-html]\">\n                        <script>\n                            $(function () {\n                                $('.mega-menu').each(function() {\n                                    var megaMenuButton = $(this);\n\n                                    var onTrigger = \"hover\";\n\n                                    if (megaMenuButton.hasClass(\"on-focus\")) {\n                                        onTrigger = \"focus\";\n                                    }else if (megaMenuButton.hasClass(\"on-click\")) {\n                                        onTrigger = \"click\";\n                                    }else if (megaMenuButton.hasClass(\"on-manual\")) {\n                                        onTrigger = \"manual\";\n                                    }\n\n                                    $(this).popup({\n                                        target: $(this).closest(\".ui.menu\"),\n                                        context: $(this).closest(\".ui.menu\"),\n                                        on: onTrigger,\n                                        hoverable: true,\n                                        position: \"bottom center\",\n                                        maxSearchDepth: 1,\n                                        distanceAway: -11,\n                                        duration: 0,\n                                        transition: \"slide up\",\n                                        lastResort: true,\n                                        preserve: true,\n                                        onVisible: function() {\n                                            var realTop;\n                                            if ($(this).closest(\".ui.menu\").is(\".bottom.fixed\")) {\n                                                realTop = 0 - $(this).outerHeight(false);\n                                            } else {\n                                                realTop = (megaMenuButton.position().top - parseInt($(this).css(\"marginTop\")) + megaMenuButton.outerHeight(true));\n                                            }\n                                            $(this).css(\"top\", realTop + \"px\");\n                                            $(this).css(\"bottom\", \"auto\");\n                                        }\n                                    });\n                                });\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Colored Menu\" data-alias=\"nav\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Colored_Menu.png\">\n                    <div class=\"html-content\"><div class=\"inverted ui black segment\"><div class=\"ui inverted secondary menu standard-menu\"><a class=item>Link</a><div class=\"item active\">Item</div><div class=\"menu right\"><div class=item>Item</div><a class=item>Link</a></div></div></div></div>\n                    <div class=\"afterDrop\" id=\"selectMenu\">\n                        <script>\n                            var elm = selectedElement();\n                            setTimeout(function () {\n                                focusElement(elm.children(\".menu\"));\n                            }, 100);\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Evenly Divided Menu\" data-alias=\"nav\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Evenly_Divided_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui fluid three item menu\"><a class=\"item\">item</a><a class=\"item\">item</a><a class=\"item\">item</a></div></div>\n                    <div class=\"afterCopy\">\n                        <script>\n                            if (elm.is(\".ui.item.menu > .item\")) {\n                                var itemMenu = elm.parent();\n                                var itemLen = itemMenu.children(\".item\").length;\n                                var numName = [\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\"];\n\n                                if (typeof numName[itemLen-2] !== \"undefined\") {\n                                    itemMenu.removeClass(numName.join(\" \"));\n                                    itemMenu.addClass(numName[itemLen-2]);\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            if (elm.is(\".ui.item.menu > .item\")) {\n                                var itemMenu = elm.parent();\n                                var itemLen = itemMenu.children(\".item\").length;\n                                var numName = [\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\"];\n\n                                if (typeof numName[itemLen-3] !== \"undefined\") {\n                                    itemMenu.removeClass(numName.join(\" \"));\n                                    itemMenu.addClass(numName[itemLen-3]);\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterUndo\">\n                        <script>\n                            editFrameContent().find(\".ui.item.menu\").each(function () {\n                                var itemLen = $(this).children(\".item\").length;\n                                var numName = [\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\"];\n                                if (typeof numName[itemLen-2] !== \"undefined\") {\n                                    $(this).removeClass(numName.join(\" \"));\n                                    $(this).addClass(numName[itemLen-2]);\n                                }\n                            });\n                        </script>\n                    </div>\n                    <div class=\"afterRedo\">\n                        <script>\n                            editFrameContent().find(\".ui.item.menu\").each(function () {\n                                var itemLen = $(this).children(\".item\").length;\n                                var numName = [\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\"];\n                                if (typeof numName[itemLen-2] !== \"undefined\") {\n                                    $(this).removeClass(numName.join(\" \"));\n                                    $(this).addClass(numName[itemLen-2]);\n                                }\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Colored Evenly Divided Menu\" data-alias=\"nav\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Colored_Evenly_Divided_Menu.png\">\n                    <div class=\"html-content\"><div class=\"inverted ui black segment\"><div class=\"ui fluid three item menu inverted secondary\"><a class=\"item\">item</a><a class=\"item\">item</a><a class=\"item\">item</a></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"selectMenu\"></div>\n                </div>\n                <div class=\"component\" title=\"Icon menu\" data-alias=\"nav\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_menu.png\">\n                    <div class=\"html-content\"><div class=\"ui icon menu\"><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a></div></div>\n                </div>\n                <div class=\"component\" title=\"Colored Icon Menu\" data-alias=\"nav\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Colored_Icon_Menu.png\">\n                    <div class=\"html-content\"><div class=\"inverted ui black segment\"><div class=\"ui inverted icon menu secondary\"><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"selectMenu\"></div>\n                </div>\n                <div class=\"component\" title=\"Labeled Icon\" data-alias=\"nav,menu\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Labeled_Icon_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui six item labeled icon menu\"><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a></div></div>\n                </div>\n                <div class=\"component\" title=\"Colored Labeled Icon Menu\" data-alias=\"nav\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Colored_Labeled_Icon_Menu.png\">\n                    <div class=\"html-content\"><div class=\"inverted ui black segment\"><div class=\"ui inverted six item labeled icon menu secondary\"><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"selectMenu\"></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Menu\" data-alias=\"nav,side\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui vertical pointing menu\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"left fixed,right fixed\");\n                            addListButton(inEditor, \"Fixed\", list, \".vertical.menu:not(.right, .dropdown .menu)\", \".vertical.menu .menu, .sidebar\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Colored Vertical Menu\" data-alias=\"nav,side\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Colored_Vertical_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui inverted vertical pointing menu\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a></div></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Style 1\" data-alias=\"nav,side,menu\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Style_1.png\">\n                    <div class=\"html-content\"><div class=\"ui vertical menu\"><div class=\"item\"><div class=\"header\">Products</div><div class=\"menu\"><a class=\"item\">Enterprise</a><a class=\"item\">Consumer</a></div></div><div class=\"item\"><div class=\"header\">CMS Solutions</div><div class=\"menu\"><a class=\"item\">Rails</a><a class=\"item\">Python</a><a class=\"item\">PHP</a></div></div><div class=\"item\"><div class=\"header\">Hosting</div><div class=\"menu\"><a class=\"item\">Shared</a><a class=\"item\">Dedicated</a></div></div><div class=\"item\"><div class=\"header\">Support</div><div class=\"menu\"><a class=\"item\">E-mail Support</a><a class=\"item\">FAQs</a></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Style 2\" data-alias=\"nav,side,menu\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Style_2.png\">\n                    <div class=\"html-content\"><div class=\"ui vertical menu\"><div class=\"item\"><div class=\"ui header h4\">Promotions</div><p>Check out our new promotions</p></div><div class=\"item\"><div class=\"ui header h4\">Coupons</div><p>Check out our collection of coupons</p></div><div class=\"item\"><div class=\"ui header h4\">Rebates</div><p>Visit our rebate forum for information on claiming rebates</p></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Icon Menu\" data-alias=\"nav,side\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Icon_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui vertical icon menu\"><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a></div></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Labeled Icon Menu\" data-alias=\"nav,side\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Labeled_Icon_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui vertical labeled icon menu\"><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Sticky Content\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Left Inner Sticky\" data-alias=\"float\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Left_Inner_Sticky.png\">\n                    <div class=\"html-content\"><div class=\"ui segment\"><div class=\"ui left internal attached rail\"><div class=\"ui sticky\"></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"noCopy\", \".internal.rail .ui.sticky\");\n                            designSetting(\"notDraggable\", \".internal.rail .ui.sticky\");\n                            designSetting(\"unTouchElement\", \".internal.rail\");\n                            designSetting(\"isAbsolutePosition\", \".ui.rail\");\n                        </script>\n                        <style>\n                            .internal.rail .ui.sticky {\n                                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2P8f5bBmNGY4SwjAxCAOAAxvwUCcMdW+wAAAABJRU5ErkJggg==);\n                                background-repeat: repeat;\n                            }\n\n                            .internal.rail .ui.sticky.fixed:empty, .internal.rail .ui.sticky.bound:empty{\n                                min-width: 100%; \n                            }\n                        </style>\n                    </div>\n                    <div class=\"afterDrop\" id=\"focusSticky\">\n                        <script>\n                            var elm = selectedElement();\n                            setTimeout(function () {\n                                focusElement(elm.find(\".sticky\"));\n                            }, 100);\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            if (elm.is(\".internal.rail .ui.sticky\")) {\n                                elm = elm.parent();\n                                delElm = elm;\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Right Inner Sticky\" data-alias=\"float\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Right_Inner_Sticky.png\">\n                    <div class=\"html-content\"><div class=\"ui segment\"><div class=\"ui right internal attached rail\"><div class=\"ui sticky\"></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"focusSticky\"></div>\n                </div>\n                <div class=\"component\" title=\"Sticky\" data-alias=\"float\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Sticky.png\">\n                    <div class=\"html-content\"><div class=\"ui sticky\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Sticky\", \".ui.sticky\");\n                            designSetting(\"addOutline\", \".ui.sticky\");\n                        </script>\n                        <style>\n                            .ui.sticky:empty:before {\n                                content: \"Sticky\";\n                            }\n                            .ui.right.internal.attached.rail, .ui.left.internal.attached.rail{\n                                height: auto;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticSticky'] = '$(\"?????\").sticky();';\n                            eventSnippet['semanticStickyCheck'] = '$(\"?????\").sticky(';\n                        </script>\n                    </div>\n                    <div class=\"addJStoFinal\" data-check=\".ui.sticky, .mega-menu[data-html*='sticky']\">\n                        <script>\n                            $(function () {\n                                $('.ui.sticky').sticky();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticStickySetup\", \"Sticky Setup Code\", \"\", \"\", \".ui.sticky\", \"\", \"#2196f3\");\n                            inEditor.find(\"#semanticStickySetup\").click(function (event) {\n\n                                var elm = selectedElement();\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.sticky\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticSticky',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"fixed top,fixed bottom,bound top,bound bottom\");\n                            addListButton(inEditor, \"Sticky Conditions\", list, \".ui.sticky\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if ((elmDrag.find(\".sticky\").length > 0) || (elmDrag.hasClass(\"sticky\") == true)) {\n                                if ((elmDrop.closest(\".sticky\").length > 0) || (elmDrop.hasClass(\"sticky\") == true)) {\n                                    finalShow = false;\n                                }\n                            }else{\n                                if (elmDrop.hasClass(\"sticky\") == true){\n                                    isOut = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            pageClone.find(\".ui.sticky\").each(function() {\n                                $(this).css(\"position\", \"\");\n                            });\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Left Sidebars\"></div>\n                <div class=\"component\" title=\"Left Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Left_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui left sidebar inverted segment\" id=\"sidebar-x\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Sidebar\", \".sidebar\");\n                            designSetting(\"noCopy\", \".sidebar\");\n                            designSetting(\"hiddenContent\", \".sidebar\");\n                            hideClassFromPropInspector(\"sidebar-visible\", false);\n                            hideClassFromPropInspector(\"blurry-lines\", false);\n                        </script>\n                        <style>\n                            .sidebar:not(.sidebar-visible) {\n                                display: none !important;\n                            }\n                            .sidebar.sidebar-visible {\n                                visibility: visible;\n                            }\n\n                            .ag-show-all.ui.menu.sidebar.top, .ag-show-all.ui.menu.sidebar.bottom{\n                                display: -webkit-box !important;\n                                display: -webkit-flex !important;\n                                display: -ms-flexbox !important;\n                                display: flex !important;\n                            }\n\n                            .ui.left.sidebar, .ui.top.sidebar, .ui.right.sidebar,.ui.bottom.sidebar{\n                                -webkit-transform: none !important;\n                                transform: none !important;\n                            }\n\n                            .blurry-lines{\n                                background-image: url(\"https://editor.bragndrop.com/assets/images/blurry_lines.png\");\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"compact,thin,very thin,wide,very wide\");\n                            addListButton(inEditor, \"Width\", list, \".sidebar\", \".top, .bottom\");\n\n                            var list = new listOption(\"left,right\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Direction\", list, \".sidebar\", \".top, .bottom\");\n\n                            var list = new listOption(\"top,bottom\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Direction\", list, \".sidebar\", \".left, .right\");\n                        </script>\n                    </div>\n                    <div class=\"beforeDrop\">\n                        <script>\n                            // Drop sidebar into <body>\n                            if (dropFromOutside) {\n                                if (elmDrag.hasClass(\"sidebar\")) {\n                                    useCustomDrop = true;\n                                    selFrame.find(\"body\").append(elmDragCode);\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // We don't want to drop a sidebar into any other types of hidden contents\n                            if (elmDrag.hasClass(\"sidebar\")) { \n                                if ($(\"#hideModeButton\").hasClass(\"isInHideMode\") == true) {\n                                    finalShow = false;\n                                }\n                            }\n\n                            if (elmDrop.hasClass(\"sidebar\")) {\n                                isOut = false;\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"dropSidebar\">\n                        <script>\n                            //adds unique id to every new sidebar\n                            var elm = designFrame.find(\"#sidebar-x\");\n\n                            if (elm.hasClass(\"top\")){\n                                var id = \"top-sidebar-\";\n                            }else if (elm.hasClass(\"right\")){\n                                var id = \"right-sidebar-\";\n                            }else if (elm.hasClass(\"bottom\")){\n                                var id = \"bottom-sidebar-\";\n                            }else{\n                                var id = \"left-sidebar-\";\n                            }\n\n                            var i = uniqueID(id);\n\n                            elm.attr(\"id\", id + i);\n                            goIntoHideMode(id + i, true);\n                            createHiddenControl(id + i);\n                        </script>\n                    </div>\n                    <div class=\"beforeUnHide\">\n                        <script>\n                            if (visibleElm.hasClass(\"sidebar\")){\n                                visibleElm.addClass(\"sidebar-visible\");\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenInHideMode\">\n                        <script>\n                            if (elm.hasClass(\"sidebar\")){\n                                editFrameContent().find(\".sidebar-visible\").removeClass(\"sidebar-visible\");\n                                elm.addClass(\"sidebar-visible\");\n                                editFrameContent().find(\"body\").addClass(\"blurry-lines\");\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenOutOfHideMode\">\n                        <script>\n                            editFrameContent().find(\".sidebar-visible\").removeClass(\"sidebar-visible\");\n                            editFrameContent().find(\"body\").removeClass(\"blurry-lines\");\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            // we can access the sidebar from the editors 'Hidden' button in the toolbar\n                            // however if we remove a sidebar, then we must also remove the reference for this sidebar\n                            // from the editor menu:\n                            if (elm.hasClass(\"sidebar\")) {\n                                deleteHiddenContNode(\"vis-content-\" + elm.attr(\"id\"));\n                                selectHiddenControl(\"parentPage\");\n\n                                // has the redo (to remove) button been pressed\n                                if (redoRemove == true){\n                                    if ($(\"#hideModeButton\").hasClass(\"isInHideMode\") == false){\n                                        // we are not in content hidden mode therefore we do not know if the item has been removed when the redo was pressed, therefore display a message under the redo button\n                                        undoRedoCaption(\"Sidebar Removed (\" + elm.attr(\"id\") + \")\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            if (pageClone.find(\".ui.sidebar\").length > 0){\n                                pageClone.find(\"body\").append('<div class=\"pusher\"></div>');\n                                var pusher = pageClone.find(\"body\").children(\".pusher\");\n\n                                pageClone.find(\"body\").children().not(\".pusher, .sidebar, .modal, script, .ui.page.dimmer\").each(function() {\n                                    pusher.append($(this));\n                                    $(this).appendTo(pusher);\n                                });\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Left Menu Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Left_Menu_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui left sidebar inverted vertical menu\" id=\"sidebar-x\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Left Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Left_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui left sidebar inverted vertical icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Left Labeled Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Left_Labeled_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui left sidebar inverted vertical labeled icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component divider\" title=\"Top Sidebars\"></div>\n                <div class=\"component\" title=\"Top Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Top_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui top sidebar inverted segment\" id=\"sidebar-x\"></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Top Menu Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Top_Menu_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui top sidebar inverted menu standard-menu\" id=\"sidebar-x\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a><div class=\"right menu\"><div class=\"item\">Item</div><a class=\"item\">Link</a></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Top Evenly Divided Menu Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Top_Evenly_Divided_Menu_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui top sidebar inverted three item menu\" id=\"sidebar-x\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Top Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Top_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui top sidebar inverted icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Top Labeled Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Top_Labeled_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui top sidebar inverted three item labeled icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component divider\" title=\"Right Sidebars\"></div>\n                <div class=\"component\" title=\"Right Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Right_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui right sidebar inverted segment\" id=\"sidebar-x\"></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Right Menu Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Right_Menu_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui right sidebar inverted vertical menu\" id=\"sidebar-x\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Right Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Right_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui right sidebar inverted vertical icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Right Labeled Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Right_Labeled_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui right sidebar inverted vertical labeled icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component divider\" title=\"Bottom Sidebars\"></div>\n                <div class=\"component\" title=\"Bottom Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Bottom_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui bottom sidebar inverted segment\" id=\"sidebar-x\"></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Bottom Menu Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Bottom_Menu_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui bottom sidebar inverted menu standard-menu\" id=\"sidebar-x\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a><div class=\"right menu\"><div class=\"item\">Item</div><a class=\"item\">Link</a></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Bottom Evenly Divided Menu Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Bottom_Evenly_Divided_Menu_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui bottom sidebar inverted three item menu\" id=\"sidebar-x\"><a class=\"item\">Link</a><a class=\"item\">Link</a><a class=\"item\">Link</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Bottom Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Bottom_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui bottom sidebar inverted icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i></a><a class=\"item\"><i class=\"forward icon\"></i></a><a class=\"item\"><i class=\"play icon\"></i></a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n                <div class=\"component\" title=\"Bottom Labeled Icon Sidebar\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Bottom_Labeled_Icon_Sidebar.png\">\n                    <div class=\"html-content\"><div class=\"ui bottom sidebar inverted three item labeled icon menu\" id=\"sidebar-x\"><a class=\"item\"><i class=\"backward icon\"></i>Backward</a><a class=\"item\"><i class=\"forward icon\"></i>Forward</a><a class=\"item\"><i class=\"play icon\"></i>Play</a></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropSidebar\"></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Breadcrumb, Statistic, Table\">\n            <div class=\"component divider\" title=\"Breadcrumb\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Text Divider\" data-alias=\"breadcrumb\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Breadcrumb_Text_Divider.png\">\n                    <div class=\"html-content\"><div class=\"ui breadcrumb\"><a class=\"section\">Home</a><span class=\"divider\">/</span><a class=\"section\">Registration</a><span class=\"divider\">/</span><div class=\"active section\">Personal Information</div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Breadcrumb\", \".breadcrumb\");\n                            tagReName(\"Divider\", \".breadcrumb .divider\");\n                            tagReName(\"Section\", \".breadcrumb div.section\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Active\", \"active\", \".breadcrumb .section\");\n                        </script>   \n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // A Breadcrumb can not be dropped into another Breadcrumb\n                            if (elmDrag.hasClass(\"breadcrumb\")) {\n                                if (elmDrop.closest(\".breadcrumb\").length > 0) {\n                                    if (elmDrop.hasClass(\"breadcrumb\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Icon Divider\" data-alias=\"breadcrumb\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Breadcrumb_Icon_Divider.png\">\n                    <div class=\"html-content\"><div class=\"ui breadcrumb\"><a class=\"section\">Home</a><i class=\"chevron right icon divider\"></i><a class=\"section\">Registration</a><i class=\"arrow right icon divider\"></i><div class=\"active section\">Personal Information</div></div></div>\n                </div>\n                <div class=\"component\" title=\"Search Result\" data-alias=\"breadcrumb\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Breadcrumb_Search_Result.png\">\n                    <div class=\"html-content\"><div class=\"ui breadcrumb\"><a class=\"section\">Home</a><div class=\"divider\">/</div><div class=\"active section\">Search for:<a href=\"#\">paper towels</a></div></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Statistic\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Simple Stat\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Simple_Stat.png\">\n                    <div class=\"html-content\"><div class=\"ui statistic\"><div class=\"value\"><span class=\"ag-text-edit\">5,550</span></div><div class=\"label\"><span class=\"ag-text-edit\">Downloads</span></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Statistic\", \".statistic\");\n                            tagReName(\"Value\", \".value\");\n                            tagReName(\"Label\", \".label\");\n                        </script>\n                        <style>\n                            .statistic:empty  {\n                                width: 153px;\n                                height: 75px;\n                            }\n                            .statistic .value:empty  {\n                                width: 153px;\n                                height: 56px;\n                            }\n                            .statistic .label:empty  {\n                                width: 153px;\n                                height: 19px;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Horizontal\", \"horizontal\", \".statistic\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // A Statistic can not be dropped into another Statistic\n                            if (elmDrag.hasClass(\"statistic\")) {\n                                if (elmDrop.closest(\".statistic\").length > 0) {\n                                    if (elmDrop.hasClass(\"statistic\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Text Stat\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Text_Stat.png\">\n                    <div class=\"html-content\"><div class=\"ui statistic\"><div class=\"text value\">Three<br/>Thousand</div><div class=\"label\"><span class=\"ag-text-edit\">Signups</span></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Icon Stat\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Stat.png\">\n                    <div class=\"html-content\"><div class=\"ui statistic\"><div class=\"value\"><i class=\"plane icon\"></i><span class=\"ag-text-edit\">5</span></div><div class=\"label\"><span class=\"ag-text-edit\">Flights</span></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Image Stat\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Image_Stat.png\">\n                    <div class=\"html-content\"><div class=\"ui statistic\"><div class=\"value\"><img src=\"https://editor.bragndrop.com/assets/images/male.jpg\" class=\"ui circular inline image\"><span class=\"ag-text-edit\">42</span></div><div class=\"label\"><span class=\"ag-text-edit\">Team Members</span></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Statistic Group\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Statistic_Group.png\">\n                    <div class=\"html-content\"><div class=\"ui statistics\"><div class=\"statistic\"><div class=\"value\"><span class=\"ag-text-edit\">22</span></div><div class=\"label\"><span class=\"ag-text-edit\">Faves</span></div></div><div class=\"statistic\"><div class=\"value\"><span class=\"ag-text-edit\">31,200</span></div><div class=\"label\"><span class=\"ag-text-edit\">Views</span></div></div><div class=\"statistic\"><div class=\"value\"><span class=\"ag-text-edit\">22</span></div><div class=\"label\"><span class=\"ag-text-edit\">Members</span></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Statistics\", \".statistics\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"evenlyDividedStat\", \"Evenly Divide\", \"\", \"\", \".statistics\");\n\n                            inEditor.find(\"#evenlyDividedStat\").click(function (event) {\n\n                                var divideButton = $(this);\n                                var statTotal = selectedElement().find(\".statistic\").length;\n\n                                if (statTotal == 0){\n                                    statTotal = 1;\n                                }\n                                if (statTotal > 10){\n                                    statTotal = 10;\n                                }\n\n                                var numWord = \"one two three four five six seven eight nine ten\";\n\n                                var elm = selectedElement();\n                                var originalElm = elm;\n                                var wordArray = numWord.split(\" \");\n                                var oldWord = \"\";\n\n                                for (var i = 0; i < wordArray.length; i++) {\n                                    if (elm.hasClass(wordArray[i])){\n                                        oldWord = wordArray[i];\n                                        break;\n                                    }\n                                }\n\n                                elm.removeClass(numWord);\n\n                                var useWord = wordArray[statTotal-1];\n                                elm.addClass(useWord);\n\n                                updateClassValue(elm);\n\n                                undoManager.add({\n                                    undo: function () {\n                                        showIfHidden(originalElm);\n                                        elm.removeClass(numWord);\n                                        elm.addClass(oldWord);\n                                        resetBreadcrumbAndProps(originalElm, true);\n                                        highlightButton(divideButton, true);\n                                    },\n                                    redo: function () {\n                                        showIfHidden(originalElm);\n                                        elm.removeClass(numWord);\n                                        elm.addClass(useWord);\n                                        resetBreadcrumbAndProps(originalElm, true);\n                                        highlightButton(divideButton, true);\n                                    }\n                                });\n\n                                undoRedoStatus();\n\n                                event.stopPropagation();\n                            });\n\n                            addClassButton(inEditor, \"Horizontal\", \"horizontal\", \".statistics\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrag.hasClass(\"statistics\")) {\n                                if (elmDrop.closest(\".statistics\").length > 0) {\n                                    // A Statistics Group can not be dropped into another Statistics Group\n                                    if (elmDrop.hasClass(\"statistics\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                } else if (elmDrop.closest(\".statistic\").length > 0) {\n                                    // A Statistics Group can not be dropped into a single Statistic\n                                    if (elmDrop.hasClass(\"statistic\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Tables and Pagination\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Simple Table\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Simple_Table.png\">\n                    <div class=\"html-content\"><table class=\"ui table\"><thead><tr><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></tbody><tfoot><tr><th>Footer</th><th>Footer</th><th>Footer</th></tr></tfoot></table></div>\n                    <div class=\"runOnLoad\">\n                        <style>\n                            .ui.table tr td.disabled, .ui.table tr.disabled td, .ui.table tr.disabled:hover, .ui.table tr:hover td.disabled{\n                                pointer-events: auto !important;\n                                cursor: pointer;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"definition,structured\");\n                            addListButton(inEditor, \"Type\", list, \"table\");\n\n                            var list = new listOption(\"basic,very basic\");\n                            addListButton(inEditor, \"Style\", list, \"table\");\n\n                            addClassButton(inEditor, \"Bordered\", \"celled\", \"table\");\n\n                            var list = new listOption(\"padded,very padded,compact,very compact\");\n                            addListButton(inEditor, \"Spacing\", list, \"table\");\n\n                            addClassButton(inEditor, \"Compact\", \"collapsing\", \"table\");\n\n                            addClassButton(inEditor, \"Hover Row\", \"selectable\", \"table\");\n\n                            addClassButton(inEditor, \"Striped\", \"striped\", \"table\");\n\n                            addClassButton(inEditor, \"No Wrap\", \"single line\", \"table\");\n\n                            addClassButton(inEditor, \"Equal Cell Width\", \"fixed\", \"table\");\n\n                            var list = new listOption(\"unstackable,tablet stackable\");\n                            list.altCaption = {\"unstackable\": \"Unstackable on Mobile\", \"tablet stackable\": \"Stackable on Tablet\"};\n                            addListButton(inEditor, \"Device Stacking\", list, \"table\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Hover Cell\", \"selectable\", \"td\");\n\n                            addClassButton(inEditor, \"Compact\", \"collapsing\", \"td, th\");\n\n                            var list = new listOption(\"one wide,two wide,three wide,four wide,five wide,six wide,seven wide,eight wide,nine wide,ten wide,eleven wide,twelve wide,thirteen wide,fourteen wide,fifteen wide,sixteen wide\");\n                            addListButton(inEditor, \"Width\", list, \"thead th\");\n\n                            var list = new listOption(\"positive,negative,error,warning,active,disabled\");\n                            addListButton(inEditor, \"State\", list, \"tr, td\");\n\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Definition Table\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Definition_Table.png\">\n                    <div class=\"html-content\"><table class=\"ui compact celled definition table\"><thead><tr><th></th><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><td class=\"collapsing\">Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><td class=\"collapsing\">Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr></tbody><tfoot class=\"full-width\"><tr><th></th><th colspan=\"3\">Footer</th></tr></tfoot></table></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Full Width\", \"full-width\", \"table.definition thead\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Structured Table\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Structured_Table.png\">\n                    <div class=\"html-content\"><table class=\"ui celled structured table\"><thead><tr><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></tbody><tfoot><tr><th>Footer</th><th>Footer</th><th>Footer</th></tr></tfoot></table></div>\n                </div>\n                <div class=\"component\" title=\"Pagination\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Pagination.png\">\n                    <div class=\"html-content\"><div class=\"ui pagination menu\"><a class=\"item\">1 </a><a class=\"item\">2 </a><a class=\"active item\">3</a><div class=\"disabled item\">...</div><a class=\"item\">10 </a><a class=\"item\">11 </a><a class=\"item\">12</a></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Pagination\", \".pagination\");\n                        </script>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Content List, Feed, Comments\">\n            <div class=\"component divider\" title=\"Item Collections\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Standard Items\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Standard_Items.png\">\n                    <div class=\"html-content\"><div class=\"ui divided items\"><div class=\"item\"><div class=\"image\"><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div><div class=\"content middle aligned\"><a class=\"header\">Header</a><div class=\"meta\"><span>Description</span></div><div class=\"description\"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p></div><div class=\"extra\">Additional Details</div></div></div><div class=\"item\"><div class=\"image\"><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div><div class=\"content middle aligned\"><a class=\"header\">Header</a><div class=\"meta\"><span>Description</span></div><div class=\"description\"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p></div><div class=\"extra\">Additional Details</div></div></div><div class=\"item\"><div class=\"image\"><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div><div class=\"content middle aligned\"><a class=\"header\">Header</a><div class=\"meta\"><span>Description</span></div><div class=\"description\"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p></div><div class=\"extra\">Additional Details</div></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Items\", \".items\");\n                            tagReName(\"Extra\", \".extra\");\n\n                        </script>\n                        <style>\n\n                            .ui.items>.item>.image:empty{\n                                height:40px;\n                                width:40px;\n                            }\n\n                            .ui.items>.item>.content:empty{\n                                height:30px;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Divided\", \"divided\", \".ui.items\");\n\n                            var list = new listOption(\"relaxed,very relaxed\");\n                            addListButton(inEditor, \"Relaxed\", list, \".ui.items\");\n\n                            addClassButton(inEditor, \"Link\", \"link\", \".ui.items\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrag.hasClass(\"item\")) {\n                                if (elmDrop.hasClass(\"item\")) {\n                                    isOut = true;\n                                } else if (elmDrop.parent().closest(\".item\").length > 0) {\n                                    finalShow = false;\n                                }\n                            }\n\n                            if (elmDrag.hasClass(\"items\")) {\n                                if (elmDrop.hasClass(\"items\")) {\n                                    isOut = true;\n                                } else if (elmDrop.parent().closest(\".items\").length > 0) {\n                                    finalShow = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Tiny Linked Items\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Tiny_Linked_Items.png\">\n                    <div class=\"html-content\"><div class=\"ui divided relaxed link items\"><div class=\"item\"><div class=\"ui tiny image\"><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div><div class=\"content middle aligned\"><a class=\"header\">Header</a><div class=\"meta\"><span>Description</span></div><div class=\"description\"><p>Nullam quis risus eget urna mollis ornare vel eu leo.</p></div><div class=\"extra\">Additional Details</div></div></div><div class=\"item\"><div class=\"ui tiny image\"><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div><div class=\"content middle aligned\"><a class=\"header\">Header</a><div class=\"meta\"><span>Description</span></div><div class=\"description\"><p>Nullam quis risus eget urna mollis ornare vel eu leo.</p></div><div class=\"extra\">Additional Details</div></div></div><div class=\"item\"><div class=\"ui tiny image\"><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></div><div class=\"content middle aligned\"><a class=\"header\">Header</a><div class=\"meta\"><span>Description</span></div><div class=\"description\"><p>Nullam quis risus eget urna mollis ornare vel eu leo.</p></div><div class=\"extra\">Additional Details</div></div></div></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"List\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Basic List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Basic_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><div class=\"item\">Apple</div><div class=\"item\">Pears</div><div class=\"item\">Oranges</div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Item\", \"div.item\");\n                            tagReName(\"List\", \".list\");\n                        </script>\n                        <style>\n                            .list:empty{\n                                padding-top: 16px !important;\n                                padding-bottom: 16px !important;\n                                width: 100px;\n                            }\n                            .item:empty{\n                                padding-top: 12px !important;\n                                padding-bottom: 12px !important;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Horizontal List\", \"horizontal\", \".ui.list\");\n                            addClassButton(inEditor, \"Relaxed\", \"relaxed\", \".ui.list\");\n\n                            var list = new listOption(\"divided,celled\");\n                            addListButton(inEditor, \"Dividing\", list, \".ui.list\");\n\n                            addClassButton(inEditor, \"Selection\", \"selection\", \".ui.list\");\n                            addClassButton(inEditor, \"Animated\", \"animated\", \".ui.list\");\n                        </script>   \n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrop.is(\".list .item:not(a)\")) {\n                                if (elmDrag.is(\".list .item\") == false) { \n                                    isOut = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Navigation Links\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Navigation_Links.png\">\n                    <div class=\"html-content\"><div class=\"ui header h4\">Header</div><div class=\"link list ui\"><a class=\"item\">Home</a><a href=\"#\" class=\"item\">About</a><a href=\"#\" class=\"item\">Jobs</a><a href=\"#\" class=\"item\">Team</a></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Fade Inactive\", \"link\", \".ui.list\");\n\n                            addClassButton(inEditor, \"Active\", \"active\", \".ui.link.list > a.item\");\n                        </script>   \n                    </div>\n                </div>\n                <div class=\"component\" title=\"Horizontal List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Horizontal_List.png\">\n                    <div class=\"html-content\"><div class=\"ui horizontal bulleted list\"><a class=\"item\">Terms and Conditions </a><a class=\"item\">Privacy Policy </a><a class=\"item\">Contact Us</a></div></div>\n                </div>\n                <div class=\"component\" title=\"Contact List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Contact_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><div class=\"item\"><i class=\"icon users\"></i><div class=\"content\">Your Name</div></div><div class=\"item\"><i class=\"icon marker\"></i><div class=\"content\">New York, NY</div></div><div class=\"item\"><i class=\"icon mail\"></i><div class=\"content\"><a href=\"mailto:contact@email.com\">contact@email.com</a></div></div><div class=\"item\"><i class=\"icon linkify\"></i><div class=\"content\"><a href=\"http://www.mysite.com\">mysite.com</a></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Update List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Update_List.png\">\n                    <div class=\"html-content\"><div class=\"divided list relaxed ui\"><div class=\"item\"><i class=\"aligned checkmark box icon large middle\"></i><div class=\"content\"><a class=\"header\">Project A</a><div class=\"description\">Updated 10 mins ago</div></div></div><div class=\"item\"><i class=\"aligned square outline icon large middle\"></i><div class=\"content\"><a class=\"header\">Project B</a><div class=\"description\">Updated 22 mins ago</div></div></div><div class=\"item\"><i class=\"aligned square outline icon large middle\"></i><div class=\"content\"><a class=\"header\">Project C</a><div class=\"description\">Updated 34 mins ago</div></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Bulleted List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Bulleted_List.png\">\n                    <div class=\"html-content\"><ul class=\"ui list is-ul-child-list\"><li>Gaining Access</li><li>Inviting Friends</li><li>Benefits</li><li>Warranty</li></ul></div>\n                    <div class=\"afterDrop\">\n                        <script>\n                            if (designFrame.find(\".is-ul-child-list\").length > 0){\n                                designFrame.find(\".is-ul-child-list\").each(function() {\n                                    if ($(this).parent().closest(\".ui.list\").length > 0){\n                                        $(this).removeClass(\"ui list\");\n                                    }\n                                });\n                                designFrame.find(\".is-ul-child-list\").removeClass(\"is-ul-child-list\");\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Ordered List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Ordered_List.png\">\n                    <div class=\"html-content\"><ol class=\"ui list is-ol-child-list\"><li>Signing Up</li><li>User Benefits</li><li>User Types</li><li>Deleting Your Account</li></ol></div>\n                    <div class=\"afterDrop\">\n                        <script>\n                            if (designFrame.find(\".is-ol-child-list\").length > 0){\n                                designFrame.find(\".is-ol-child-list\").each(function() {\n                                    if ($(this).parent().closest(\".ui.list\").length > 0){\n                                        $(this).removeClass(\"ui list\");\n                                    }\n                                });\n                                designFrame.find(\".is-ol-child-list\").removeClass(\"is-ol-child-list\");\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Link A List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Link_A_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><a class=\"item\" href=\"#\">What is a FAQ?</a><a class=\"item\" href=\"#\">Who is our user?</a><a class=\"item\" href=\"#\">Where is our office located?</a></div></div>\n                </div>\n                <div class=\"component\" title=\"Link B List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Link_B_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><div class=\"item\"><a href=\"#\" class=\"header\">Header</a><div class=\"description\">Click a link in our <a>description</a>.</div></div><div class=\"item\"><a href=\"#\" class=\"header\">Learn More</a><div class=\"description\">Learn more about this site on <a>our FAQ page</a>.</div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Icon List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><a class=\"item\"><i class=\"help icon\"></i><div class=\"content\"><div class=\"header\">Floated Icon</div><div class=\"description\">This text will always have a left margin to make sure it sits alongside your icon</div></div></a><a class=\"item\"><i class=\"caret right icon\"></i><div class=\"content\"><div class=\"header\">Icon Alignment</div><div class=\"description\">Floated icons are by default top aligned. To have an icon top aligned try this example.</div></div></a></div></div>\n                </div>\n                <div class=\"component\" title=\"Image List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Image_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><div class=\"item\"><img class=\"ui avatar image\" src=\"https://editor.bragndrop.com/assets/images/female.jpg\"><div class=\"content\"><a href=\"#\" class=\"header\">Rachel</a><div class=\"description\">Last seen watching <a>Arrested Development</a> just now.</div></div></div><div class=\"item\"><img class=\"ui avatar image\" src=\"https://editor.bragndrop.com/assets/images/male.jpg\"><div class=\"content\"><a href=\"#\" class=\"header\">Andy</a><div class=\"description\">Last seen watching <a>Bob's Burgers</a> 10 hours ago.</div></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Horizontal Image List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Horizontal_Image_List.png\">\n                    <div class=\"html-content\"><div class=\"ui horizontal list\"><div class=\"item\"><img class=\"ui avatar image\" src=\"https://editor.bragndrop.com/assets/images/male.jpg\"><div class=\"content\"><div class=\"header\">Tom</div>Top Contributor</div></div><div class=\"item\"><img class=\"ui avatar image\" src=\"https://editor.bragndrop.com/assets/images/female.jpg\"><div class=\"content\"><div class=\"header\">Sally</div>Admin</div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Header List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Header_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><div class=\"item\"><div class=\"header\">New York City</div>A lovely city</div><div class=\"item\"><div class=\"header\">Chicago</div>Also quite a lovely city</div><div class=\"item\"><div class=\"header\">Los Angeles</div>Sometimes can be a lovely city</div><div class=\"item\"><div class=\"header\">San Francisco</div>What a lovely city</div></div></div>\n                </div>\n                <div class=\"component\" title=\"Description List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Description_List.png\">\n                    <div class=\"html-content\"><div class=\"ui list\"><div class=\"item\"><i class=\"marker icon\"></i><div class=\"content\"><a class=\"header\">Krowlewskie Jadlo</a><div class=\"description\">An excellent polish restaurant, quick delivery and hearty, filling meals.</div></div></div><div class=\"item\"><i class=\"marker icon\"></i><div class=\"content\"><a class=\"header\">Xian Famous Foods</a><div class=\"description\">A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.</div></div></div><div class=\"item\"><i class=\"marker icon\"></i><div class=\"content\"><a class=\"header\">Sapporo Haru</a><div class=\"description\">Greenpoint's best choice for quick and delicious sushi.</div></div></div><div class=\"item\"><i class=\"marker icon\"></i><div class=\"content\"><a class=\"header\">Enid's</a><div class=\"description\">At night a bar, during the day a delicious brunch spot.</div></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Colored List\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Colored_List.png\">\n                    <div class=\"html-content\"><div class=\"ui inverted segment\"><div class=\"ui inverted relaxed divided list\"><div class=\"item\"><div class=\"content\"><div class=\"header\">Snickerdoodle</div>An excellent companion</div></div><div class=\"item\"><div class=\"content\"><div class=\"header\">Poodle</div>A poodle, its pretty basic</div></div><div class=\"item\"><div class=\"content\"><div class=\"header\">Paulo</div>He's also a dog</div></div></div></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Feed\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Text Event\" data-alias=\"feed\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Text_Event.png\">\n                    <div class=\"html-content\"><div class=\"event\"><div class=\"label\"><img src=\"https://editor.bragndrop.com/assets/images/male.jpg\"></div><div class=\"content\"><div class=\"summary\"><a>Joe Henderson</a> posted on his page <div class=\"date\">3 days ago</div></div><div class=\"extra text\">Nullam quis risus eget urna mollis ornare vel eu leo.</div><div class=\"meta\"><a class=\"like\"><i class=\"heart icon\"></i> 5 Likes</a></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Feed\", \".feed\");\n                            tagReName(\"Event\", \".event\");\n                            tagReName(\"Summary\", \".summary\");\n\n                            designSetting(\"notDraggable\", \".feed .event *:not(.date)\");\n                            designSetting(\"notDroppable\", \".feed .event *:not(.date, .summary)\");\n\n                        </script>\n                        <style>\n                            .ui.feed>.event>.content .summary > * {\n                                margin-right:3px;   \n                            }\n\n                            .event .content:empty:before, .event .meta:empty:before{\n                                position: relative !important;\n                            }\n                            .event .meta:empty{\n                                padding-top: 3px !important;\n                                padding-bottom: 4px !important;\n                                padding-right: 12px !important;    \n                            }\n\n\n\n                            .event:empty, .event .content:empty{\n                                height: 35px !important;\n                            }\n\n                            .event .content:empty{\n                                padding-top: 3px !important;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"beforeDrop\">\n                        <script>\n                            // if a Event is not dropped into a Feed, then wrap the Event with a Feed\n                            if (dropFromOutside) {\n                                if (elmDrag.hasClass(\"event\")) {\n                                    if (injectPoint.element.closest(\".feed\").length == 0){\n                                        elmDragCode = '<div class=\"newStuff\"><div class=\"ui feed\">' + getControlCode($(this), \"html-content\") + \"</div></div>\";\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrag.hasClass(\"event\")) {\n                                if (elmDrop.hasClass(\"event\")) {\n                                    isOut = true;\n                                } else if (elmDrop.parent().closest(\".event\").length > 0) {\n                                    finalShow = false;\n                                }\n                            }\n\n                            if (elmDrag.is(\".event .date\")) {\n                                if (elmDrop.hasClass(\"summary\")) {\n                                    isOut = true;\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Image Event\" data-alias=\"feed\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Image_Event.png\">\n                    <div class=\"html-content\"><div class=\"event\"><div class=\"label\"><img src=\"https://editor.bragndrop.com/assets/images/female.jpg\"></div><div class=\"content\"><div class=\"summary\"><a>Justen Kitsune</a> added <a>2 new photos</a> of you <div class=\"date\">4 days ago</div></div><div class=\"extra images\"><a><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></a><a><img src=\"https://editor.bragndrop.com/assets/images/259x259.png\"></a></div><div class=\"meta\"><a class=\"like\"><i class=\"heart icon\"></i> 41 Likes</a></div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Icon Event\" data-alias=\"feed\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Event.png\">\n                    <div class=\"html-content\"><div class=\"event\"><div class=\"label\"><i class=\"icon write\"></i></div><div class=\"content\"><div class=\"summary\">You submitted a new post to the page <div class=\"date\">3 days ago</div></div><div class=\"extra text\">I'm having a BBQ this weekend. Come by around 4pm if you can.</div><div class=\"meta\"><a class=\"like\"><i class=\"heart icon\"></i> 11 Likes</a></div></div></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Comments\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Comment\" data-alias=\"feed\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Comment.png\">\n                    <div class=\"html-content\"><div class=\"ui comments\"><div class=\"comment\"><a class=\"avatar\"><img src=\"https://editor.bragndrop.com/assets/images/male.jpg\"></a><div class=\"content\"><a class=\"author\">Stevie Feliciano</a><div class=\"metadata\"><div class=\"date\">2 days ago</div></div><div class=\"text\">This will be great for business reports. I will definitely download this.</div><div class=\"actions\"><a class=\"reply\">Reply</a></div></div></div><div class=\"comment\"><a class=\"avatar\"><img src=\"https://editor.bragndrop.com/assets/images/female.jpg\"></a><div class=\"content\"><a class=\"author\">Jenny Hess</a><div class=\"metadata\"><div class=\"date\">2 days ago</div></div><div class=\"text\">Elliot you are always so right :)</div><div class=\"actions\"><a class=\"reply\">Reply</a></div></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Comments\", \".comments\");\n                            tagReName(\"Comment\", \".comment\");\n                            //                         tagReName(\"Author\", \".author\");\n                            tagReName(\"Metadata\", \".metadata\");\n                            tagReName(\"Text\", \".text\");\n                            tagReName(\"Date\", \".date\");\n                            tagReName(\"Actions\", \".actions\");\n\n                            designSetting(\"notDraggable\", \".comment *:not(.form, .comments, .comment)\");\n                            designSetting(\"notDroppable\", \".comment *:not(.form, .comments, .comment)\");\n                        </script>\n                        <style>\n                            .comment > .avatar:empty:before, .comment .content:empty:before, .comment .metadata:empty:before, .comment .actions:empty:before{\n                                position: relative !important;\n                            }\n                            .comment .content:empty, .comment .metadata:empty, .comment .actions:empty{\n                                padding-top: 3px !important;\n                                padding-bottom: 4px !important;\n                                padding-right: 12px !important;    \n                            }\n\n                            .comment > .avatar:empty{\n                                height: 35px !important;\n                                padding: 0px;\n                            }\n\n                            .comment:empty{\n                                height: 35px !important;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Threaded\", \"threaded\", \".ui.comments\");\n                            addClassButton(inEditor, \"Minimal\", \"minimal\", \".ui.comments\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrag.hasClass(\"comments\")) {\n                                if (elmDrop.hasClass(\"comment\")) {\n                                    isOut = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            //remove .ui from nested comments's\n                            pageClone.find(\".ui.comments\").each(function() {\n                                if ($(this).parent().closest(\".comments\").length > 0){\n                                    $(this).removeClass(\"ui\");\n                                }\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Reply Form\" data-alias=\"feed,comment\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Reply_Form.png\">\n                    <div class=\"html-content\"><form class=\"ui reply form\"><div class=\"field\"><textarea></textarea></div><button class=\"ui primary submit labeled icon button\"><i class=\"icon edit\"></i>Add Reply</button></form></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Field\", \".reply.form .field\");\n                        </script>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Icons, Labels (Tags, Pointers, Ribbons)\">\n            <div class=\"component divider\" title=\"Icons\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Icons\" id=\"icons\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icons.png\">\n                    <div class=\"html-content\"><i class=\"icon search\"></i></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"icons\", \".icon:not(.buttons, .button, .header, .input, .message, .menu)\");\n                            getVar[\"iconList\"] = \"add circle,add square,add to cart,add user,adjust,adn,alarm,alarm outline,alarm slash,alarm slash outline,align center,align justify,align left,align right,american express,anchor,android,angellist,angle double down,angle double left,angle double right,angle double up,angle down,angle left,angle right,angle up,announcement,apple,archive,area chart,arrow circle down,arrow circle left,arrow circle outline down,arrow circle outline left,arrow circle outline right,arrow circle outline up,arrow circle right,arrow circle up,arrow down,arrow left,arrow right,arrow up,asl interpreting,assistive listening systems,asterisk,at,attach,audio description,backward,ban,bar,bar chart,barcode,behance,behance square,birthday,bitbucket,bitbucket square,bitcoin,blind,block layout,bold,bomb,book,bookmark,braille,browser,bug,building,building outline,bullseye,buysellads,calculator,calendar,calendar outline,call,call square,camera retro,car,caret down,caret left,caret right,caret up,certificate,check circle,check circle outline,check square,checkered flag,checkmark,checkmark box,chevron circle down,chevron circle left,chevron circle right,chevron circle up,chevron down,chevron left,chevron right,chevron up,child,circle,circle notched,circle thin,cloud,cloud download,cloud upload,cocktail,codepen,coffee,columns,comment,comment outline,comments,comments outline,compress,configure,connectdevelop,copy,copyright,crop,crosshairs,css3,cube,cubes,cut,dashboard,dashcube,database,deafness,delicious,delete,desktop,deviantart,diamond,digg,discover,disk outline,doctor,dollar,download,dribble,dropbox,dropdown,drupal,edit,eject,ellipsis horizontal,ellipsis vertical,emergency,empire,empty heart,empty star,erase,euro,exchange,expand,external,external share,external square,eyedropper,facebook,facebook square,fast backward,fast forward,fax,feed,female,file,file archive outline,file audio outline,file code outline,file excel outline,file image outline,file outline,file pdf outline,file powerpoint outline,file text,file text outline,file video outline,file word outline,film,filter,find,fire,fire extinguisher,first aid,flag,flag outline,flickr,folder,folder open,folder open outline,folder outline,font,food,fork,forumbee,forward,forward mail,foursquare,frown,game,gay,gift,git,git square,github,github alternate,github square,gittip,google,google plus,google plus square,google wallet,grid layout,h,hacker news,handicap,header,heart,heartbeat,help,help circle,heterosexual,hide,history,home,hospital,html5,idea,in cart,inbox,indent,info,info circle,instagram,intergender,ioxhost,italic,joomla,jsfiddle,keyboard,lab,laptop,lastfm,lastfm square,leaf,leanpub,legal,lemon,lesbian,level down,level up,life ring,lightning,line chart,linkedin,linkedin square,linkify,linux,lira,list,list layout,location arrow,lock,long arrow down,long arrow left,long arrow right,long arrow up,low vision,magnet,mail,mail outline,mail square,male,man,map,marker,mastercard,maxcdn,maximize,meanpath,medium,meh,military,minus,minus circle,minus square,minus square outline,mobile,money,moon,move,music,mute,neuter,newspaper,non binary transgender,openid,options,ordered list,other gender,other gender horizontal,other gender vertical,outdent,pagelines,paint brush,paragraph,paste,pause,paw,payment,paypal,paypal card,phone,phone square,photo,pie chart,pied piper,pied piper alternate,pin,pinterest,pinterest square,plane,play,plug,plus,plus square outline,pointing down,pointing left,pointing right,pointing up,pound,power,print,privacy,protect,puzzle,qq,qrcode,quote left,quote right,radio,rain,random,rebel,record,recycle,reddit,reddit square,refresh,remove,remove bookmark,remove circle,remove circle outline,remove user,renren,repeat,reply,reply all,resize horizontal,resize vertical,retweet,road,rocket,rss,rss square,ruble,rupee,save,search,selected radio,sellsy,send,send outline,server,setting,settings,share,share alternate,share alternate square,share square,shekel,shipping,shirtsinbulk,shop,sidebar,sign in,sign out,sign language,signal,simplybuilt,sitemap,skyatlas,skype,slack,slideshare,smile,soccer,sort,sort alphabet ascending,sort alphabet descending,sort ascending,sort content ascending,sort content descending,sort descending,sort numeric ascending,sort numeric descending,sound,soundcloud,space shuttle,spinner,spoon,spotify,spy,square,square outline,stack exchange,stack overflow,star,star half,star half empty,steam,steam square,step backward,step forward,stop,strikethrough,stripe,student,stumbleupon,stumbleupon circle,subscript,suitcase,sun,superscript,table,tablet,tag,tags,tasks,taxi,tencent weibo,terminal,text height,text telephone,text width,theme,thumbs down,thumbs outline down,thumbs outline up,thumbs up,ticket,toggle down,toggle left,toggle off,toggle on,toggle right,toggle up,transgender,translate,trash,trash outline,travel,treatment,tree,trello,trophy,tumblr,tumblr square,twitch,twitter,twitter square,underline,undo,unhide,universal access,university,unlinkify,unlock,unlock alternate,unmute,unordered list,upload,user,users,viacoin,video play,video play outline,vimeo,vine,visa,vk,volume control phone,volume down,volume off,volume up,wait,warning,warning circle,warning sign,wechat,weibo,whatsapp,wheelchair,wifi,windows,wizard,woman,won,wordpress,world,write,write square,xing,xing square,yahoo,yelp,yen,youtube,youtube play,youtube square,zoom,zoom out\";\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"editSUIIconBtn\", \"Change\", \"\", \"\", \"i.icon\");\n\n                            inEditor.find(\"#editSUIIconBtn\").click(function (event) {\n                                iconBuild(getVar[\"iconList\"], \"icon\", false, \"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css\");\n                                event.stopPropagation();\n                            });\n\n                            var list = new listOption(\"circular,bordered\");\n                            addListButton(inEditor, \"Shape\", list, \"i.icon\");\n\n                            var list = new listOption(\"loading,horizontally flipped,vertically flipped,clockwise rotated,counterclockwise rotated\");\n                            list.altCaption = {\"loading\": \"spin\", \"horizontally flipped\": \"flip horizontally\", \"vertically flipped\": \"flip vertically\", \"clockwise rotated\": \"rotate clockwise\", \"counterclockwise rotated\": \"rotate counterclockwise\"};\n                            addListButton(inEditor, \"Rotate\", list, \"i.icon\");\n\n                            var list = new listOption(\"disabled,link\");\n                            addListButton(inEditor, \"type\", list, \"i.icon\");\n\n                            addClassButton(inEditor, \"Fitted\", \"fitted\", \"i.icon\");\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\">\n                        <script>\n                            iconBuild(getVar[\"iconList\"], \"icon\", false, \"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Flags\" data-alias=\"icon\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Flags.png\">\n                    <div class=\"html-content\"><i class=\"united kingdom flag\"></i></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"icons\", \".flag\");\n                            getVar[\"flagList\"] = \"afghanistan,aland islands,albania,algeria,american samoa,andorra,angola,anguilla,antigua,argentina,armenia,aruba,australia,austria,azerbaijan,bahamas,bahrain,bangladesh,barbados,belarus,belgium,belize,benin,bermuda,bhutan,bolivia,bosnia,botswana,bouvet island,brazil,british virgin islands,brunei,bulgaria,burkina faso,burma,burundi,caicos islands,cambodia,cameroon,canada,cape verde,cayman islands,central african republic,chad,chile,china,christmas island,cocos islands,colombia,comoros,congo,congo brazzaville,cook islands,costa rica,cote divoire,croatia,cuba,cyprus,czech republic,denmark,djibouti,dominica,dominican republic,ecuador,egypt,el salvador,equatorial guinea,eritrea,estonia,ethiopia,european union,falkland islands,faroe islands,fiji,finland,france,french guiana,french polynesia,french territories,gabon,gambia,georgia,germany,ghana,gibraltar,greece,greenland,grenada,guadeloupe,guam,guatemala,guinea,guinea-bissau,guyana,haiti,heard island,honduras,hong kong,hungary,iceland,india,indian ocean territory,indonesia,iran,iraq,ireland,israel,italy,jamaica,jan mayen,japan,jordan,kazakhstan,kenya,kiribati,kuwait,kyrgyzstan,laos,latvia,lebanon,lesotho,liberia,libya,liechtenstein,lithuania,luxembourg,macau,macedonia,madagascar,malawi,malaysia,maldives,mali,malta,marshall islands,martinique,mauritania,mauritius,mayotte,mexico,micronesia,moldova,monaco,mongolia,montenegro,montserrat,morocco,mozambique,namibia,nauru,nepal,netherlands,netherlands antilles,new caledonia,new guinea,new zealand,nicaragua,niger,nigeria,niue,norfolk island,north korea,northern mariana islands,norway,oman,pakistan,palau,palestine,panama,paraguay,peru,philippines,pitcairn islands,poland,portugal,puerto rico,qatar,reunion,romania,russia,rwanda,saint helena,saint kitts and nevis,saint lucia,saint pierre,saint vincent,samoa,san marino,sandwich islands,sao tome,saudi arabia,senegal,serbia,serbia,seychelles,sierra leone,singapore,slovakia,slovenia,solomon islands,somalia,south africa,south korea,spain,sri lanka,sudan,suriname,swaziland,sweden,switzerland,syria,taiwan,tajikistan,tanzania,thailand,timorleste,togo,tokelau,tonga,trinidad,tunisia,turkey,turkmenistan,tuvalu,uae,uganda,ukraine,united kingdom,united states,uruguay,us minor islands,us virgin islands,uzbekistan,vanuatu,vatican city,venezuela,vietnam,wallis and futuna,western sahara,yemen,zambia,zimbabwe\";\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"editSUIflagBtn\", \"Change\", \"\", \"\", \"i.flag\");\n\n                            inEditor.find(\"#editSUIflagBtn\").click(function (event) {\n                                iconBuild(getVar[\"flagList\"], \"flag\", false, \"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css\");\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\">\n                        <script>\n                            iconBuild(getVar[\"flagList\"], \"flag\", false, \"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component-group\" title=\"Icon Components\">\n                    <div class=\"component\" title=\"Group Icons\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Group_Icons.png\">\n                        <div class=\"html-content\"><i class=\"huge icons\"><i class=\"icon big tablet inverted black\"></i><i class=\"icon small youtube red inverted\"></i></i></div>\n                    </div>\n                    <div class=\"component\" title=\"Corner Icon\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Corner_Icon.png\">\n                        <div class=\"html-content\"><i class=\"huge icons\"><i class=\"twitter icon blue\"></i><i class=\"inverted corner plus icon blue\"></i></i></div>\n                    </div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Icon Group\", \"i.icons\");\n\n                            designSetting(\"noCopy\", \"i.icons .icon\");\n                            //                             designSetting(\"noRemove\", \"i.icons .icon\");\n                            designSetting(\"notDraggable\", \"i.icons .icon\");\n                            designSetting(\"notDroppable\", \"i.icons .icon\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // Don't drop inside Icon Group, but drop outside instead\n                            if (elmDrop.closest(\".icons\").length > 0) {\n                                if (elmDrop.hasClass(\"icons\")) {\n                                    isOut = true;\n                                }else{\n                                    finalShow = false;\n                                }  \n                            }\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Labels\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Basic Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Basic_Label.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui red label\"><span class=\"ag-text-edit\">2</span></a></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Circular\", \"circular\", \".ui.label\", \".corner, .ribbon\");\n                            addClassButton(inEditor, \"Floating\", \"floating\", \".ui.label\", \".corner\");\n\n                            var list = new listOption(\"top attached,bottom attached,top right attached,top left attached,bottom left attached,bottom right attached\");\n                            addListButton(inEditor, \"Attached\", list, \".ui.label\", \".corner\");\n                        </script>   \n                    </div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"isAbsolutePosition\", \".floating\");\n                            designSetting(\"isAbsolutePosition\", \".top.attached, .bottom.attached, .top.right.attached, .top.left.attached, .bottom.left.attached, .bottom.right.attached\");\n                        </script>\n                        <style>\n                            .ui.label:empty:before{\n                                content: none !important;\n                            }\n                            .ui.label:empty{\n                                outline: none;\n                            }\n                        </style>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Icon Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Label.png\">\n                    <div class=\"html-content\"><div class=\"ui label\"><i class=\"mail icon\"></i> 23</div></div>\n                </div>\n                <div class=\"component\" title=\"Image Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Image_Label.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui yellow image label\"><img src=\"https://editor.bragndrop.com/assets/images/female.jpg\">Helen<span class=\"detail\">Co-worker</span></a></div>\n                </div>\n                <div class=\"component\" title=\"Pointing Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Pointing_Label.png\">\n                    <div class=\"html-content\"><div class=\"ui label left pointing green\">51</div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"pointing,pointing below,left pointing,right pointing\");\n                            list.altCaption = {\"pointing\": \"Up\", \"pointing below\": \"Down\", \"left pointing\": \"Left\", \"right pointing\": \"Right\"};\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Point Direction\", list, \".pointing.label\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Tag Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Tag_Label.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui tag label\">New</a></div>\n                </div>\n                <div class=\"component\" title=\"Ribbon Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Ribbon_Label.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui ribbon label\">New</a></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"ribbon,right ribbon\");\n                            list.altCaption = {\"ribbon\": \"left\",\"right ribbon\": \"right\"};\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Left or Right\", list, \".ribbon\");\n                        </script>   \n                    </div>\n                </div>\n                <div class=\"component\" title=\"Horizontal Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Horizontal_Label.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui horizontal label\">Fruit</a></div>\n                </div>\n                <div class=\"component\" title=\"Detail Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Detail_Label.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui label\">Dogs<span class=\"detail\">214</span></a></div>\n                </div>\n                <div class=\"component\" title=\"Avatar Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Avatar_Label.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui label\"><img class=\"ui right spaced avatar image\" src=\"https://editor.bragndrop.com/assets/images/male.jpg\">Elliot</a></div>\n                </div>\n                <div class=\"component\" title=\"Group Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Group_Label.png\">\n                    <div class=\"html-content\"><div class=\"ui blue labels\"><a href=\"#\" class=\"ui label\">Fun</a><a href=\"#\" class=\"ui label\">Happy</a><a href=\"#\" class=\"ui label\">Smart</a></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Labels\", \".labels\");\n                        </script>    \n                    </div>\n                </div>\n                <div class=\"component\" title=\"Group Tag Label\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Group_Tag_Label.png\">\n                    <div class=\"html-content\"><div class=\"ui tag labels\"><a href=\"#\" class=\"ui label\">Fun</a><a href=\"#\" class=\"ui label\">Happy</a><a href=\"#\" class=\"ui label\">Smart</a></div></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Embed, Advertisement\">\n            <div class=\"component divider\" title=\"Embed\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Embed via URL\" data-alias=\"video,musiq\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Embed.png\">\n                    <div class=\"html-content\"><div class=\"ui embed\" data-url=\"https://editor.bragndrop.com\" data-placeholder=\"https://editor.bragndrop.com/assets/images/female.jpg\" data-icon=\"right circle arrow\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Embed\", \".ui.embed\");\n                        </script>\n                        <style>\n                            .ui.embed{\n                                height: 100%;\n                                min-height: 200px;\n                            }\n                            .ui.embed:empty:before {\n                                content:none;\n                            }\n                            .ui.embed:after{\n                                content: \"Embed\";\n                                display: block;\n                                position: absolute;\n                                top: 44%;\n                                width: 100%;\n                                height: 100%;\n                                text-align: center;\n                                color: #a0a0a0;\n                            }\n                            .ui.embed\n                        </style>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticEmbed'] = '$(\"?????\").embed();';\n                            eventSnippet['semanticEmbedCheck'] = '$(\"?????\").embed(';\n                        </script>\n                    </div>\n                    <div class=\"addJStoFinal\" data-check=\".ui.embed, .mega-menu[data-html*='embed']\">\n                        <script>\n                            $(function () {\n                                $('.ui.embed').embed();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticEmbedSetup\", \"Embed Setup Code\", \"\", \"\", \".ui.embed\", \"\", \"#2196f3\");\n                            inEditor.find(\"#semanticEmbedSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.embed\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticEmbed',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"embedOptions\", \"Options...\", \"\", \"\",  \".ui.embed\");\n\n                            inEditor.find(\"#embedOptions\").click(function (event) {\n                                eastPanelShowContent(\"#tag-att-container\");\n                                $(\"#tag-other-container\").hide();\n                                $(\"#tag-att-container\").closest(\".panelbody\").animate({ scrollTop: $(\"#tag-att-container\").closest(\".panelbody\").prop(\"scrollHeight\")}, 1000);\n                                event.stopPropagation();\n                            });\n\n                            var list = new listOption(\"square,4:3,16:9,21:9\");\n                            addListButton(inEditor, \"Aspect Ratio\", list, \".ui.embed\");\n\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrop.is(\".ui.embed\")) {\n                                isOut = true;\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Embed via Source + ID\" data-alias=\"video,musiq\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Embed.png\">\n                    <div class=\"html-content\"><div class=\"ui embed\" data-source=\"\" data-id=\"\" data-placeholder=\"https://editor.bragndrop.com/assets/images/female.jpg\" data-icon=\"right circle arrow\"></div></div>\n                </div>\n                <div class=\"component\" title=\"Embed Youtube\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Embed_Youtube.png\">\n                    <div class=\"html-content\"><div class=\"ui embed\" data-source=\"youtube\" data-id=\"\" data-placeholder=\"https://editor.bragndrop.com/assets/images/female.jpg\" data-icon=\"right circle arrow\"></div></div>\n                </div>\n                <div class=\"component\" title=\"Embed Vimeo\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Embed_Vimeo.png\">\n                    <div class=\"html-content\"><div class=\"ui embed\" data-source=\"vimeo\" data-id=\"\" data-placeholder=\"https://editor.bragndrop.com/assets/images/female.jpg\" data-icon=\"right circle arrow\"></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Advertisement\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Banner.png\">\n                    <div class=\"html-content\"><div class=\"ui banner test ad\" data-text=\"Banner\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Advertisement\", \"div.ad\");\n                            contentEditableButNoToolbar(\"div.ad\");\n                        </script>\n                        <style>\n                            .ui.ad:empty:before{\n                                content: \"Advertisement code goes here...\";\n                            }\n                            .ag-focus.ui.test.ad:after {\n                                display:none !important;\n                            }\n                            .ui.ad{\n                                color: #464646;\n                                overflow: auto;\n                            }\n                            .ui.ad.ag-focus{\n                                color: #ffffff;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"banner,vertical banner,top banner,half banner\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Style\", list, \".banner.ad\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrop.is(\"div.ad\")) {\n                                isOut = true;\n                            }\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            // Replace Ad component with proper code\n                            pageClone.find(\".ui.ad\").each(function() {\n                                $(this).removeClass(\"test\");\n                                $(this).removeAttr(\"data-text\");\n                                $(this).html($(this).text());\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Rectangle\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Rectangle.png\">\n                    <div class=\"html-content\"><div class=\"ui medium rectangle test ad\" data-text=\"Rectangle\"></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"medium rectangle,large rectangle,small rectangle,vertical rectangle\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Style\", list, \".rectangle.ad\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Button\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Banner_Button.png\">\n                    <div class=\"html-content\"><div class=\"ui button test ad\" data-text=\"Button\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <style>\n                            .ui.button.ad:empty  {\n                                width: 120px;\n                                height: 90px;\n                            }\n                            .ui[class*=\"square button\"].ad:empty {\n                                width: 125px;\n                                height: 125px;\n                            }\n                            .ui[class*=\"small button\"].ad:empty {\n                                width: 120px;\n                                height: 60px;\n                            }\n                            .ui.button.ad{\n                                text-align: left; \n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"button,square button,small button\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Style\", list, \".button.ad\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Skyscraper\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Skyscraper.png\">\n                    <div class=\"html-content\"><div class=\"ui skyscraper test ad\" data-text=\"Skyscraper\"></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"skyscraper,wide skyscraper\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Style\", list, \".skyscraper.ad\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Leaderboards\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Leaderboards.png\">\n                    <div class=\"html-content\"><div class=\"ui leaderboard test ad\" data-text=\"Leaderboard\"></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"leaderboard,large leaderboard,billboard\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Style\", list, \".leaderboard.ad, .billboard.ad\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Panorama\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Panorama.png\">\n                    <div class=\"html-content\"><div class=\"ui panorama test ad\" data-text=\"Panorama\"></div></div>\n                </div>\n                <div class=\"component\" title=\"Netboard\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Netboard.png\">\n                    <div class=\"html-content\"><div class=\"ui netboard test ad\" data-text=\"Netboard\"></div></div>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n                        addClassButton(inEditor, \"Centered\", \"centered\", \".ui.ad\");\n                        addClassButton(inEditor, \"Mobile Only\", \"mobile\", \".ui.ad\");\n                    </script>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Ratings, Cards\">\n            <div class=\"component divider\" title=\"Ratings\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Stars\" data-alias=\"rate\" id=\"star\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Stars.png\">\n                    <div class=\"html-content\"><div class=\"ui star rating\"><i class=\"icon active\"></i><i class=\"icon active\"></i><i class=\"icon active\"></i><i class=\"icon active\"></i><i class=icon></i></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Rating\", \".rating\");\n                            designSetting(\"unTouchElement\", \".rating *\");\n                        </script>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticUIRating'] = '$(\"?????\").rating({\\n        initialRating: 4,\\n        maxRating: 5\\n        \\n    });';\n                            eventSnippet['semanticUIRatingCheck'] = '$(\"?????\").rating({';\n                        </script>\n                    </div>\n                    <div class=\"addJStoFinal\" data-check=\".ui.rating, .mega-menu[data-html*='rating']\">\n                        <script>\n                            $(function () {\n                                $('.ui.rating').rating();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"ratingCodeSetup\", \"Code Setup\", \"\", \"\", \".rating\", \"\", \"#2196f3\");\n                            inEditor.find(\"#ratingCodeSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.rating\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticUIRating',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n\n                            var list = new listOption(\"star,heart\");\n                            addListButton(inEditor, \"Types\", list, \".rating\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // Can not drop inside a Rating:\n                            if (elmDrop.hasClass(\"rating\")) {\n                                isOut = true;\n                            }\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            // Replace Rating component with proper code\n                            pageClone.find(\".rating\").each(function() {\n                                $(this).html(\"\");\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Hearts\" data-alias=\"rate\" id=\"hearts\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Hearts.png\">\n                    <div class=\"html-content\"><div class=\"ui heart rating\"><i class=\"icon active\"></i><i class=\"icon active\"></i><i class=\"icon active\"></i><i class=\"icon active\"></i><i class=icon></i></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Cards\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Empty Card\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Empty_Card.png\">\n                    <div class=\"html-content\"><div class=\"ui card\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Card\", \".card\");\n                        </script>\n                        <style>\n                            .cards:empty, .card:empty{\n                                padding-bottom: 150px !important;\n                            }\n                            .ui.stackable.cards>.card:empty {\n                                padding-bottom: 150px !important;\n                            }\n                            .card:empty:before  {\n                                content: \"Add Card Content here\";\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Fluid\", \"fluid\", \".card\");\n                            addClassButton(inEditor, \"Centered\", \"centered\", \".card\");\n                            addClassButton(inEditor, \"Raised\", \"raised\", \".card\");\n                            addClassButton(inEditor, \"Link\", \"link\", \".card\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrag.hasClass(\"card\")) { \n                                if (elmDrop.hasClass(\"card\") == true){\n                                    isOut = true; \n                                }else if (elmDrop.closest(\".card\").length > 0) { \n                                    notAllowedMessage = \"Can Not be placed inside a Card!\";\n                                    finalShow = false;\n                                }\n                            }else{\n                                if (elmDrop.closest(\".cards\").length > 0){\n                                    if (elmDrop.hasClass(\"card\") == true){\n                                        isOut = false; \n                                    }\n                                }\n                            }\n\n                            if (elmDrag.hasClass(\"content\")) { \n                                if (elmDrop.closest(\".card\").length > 0){\n                                    if (elmDrop.hasClass(\"content\")) { \n                                        isOut = true; \n                                    }else if (elmDrop.closest(\".content\").length > 0){\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Group of Cards\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Group_of_Cards.png\">\n                    <div class=\"html-content\"><div class=\"ui cards\"><div class=\"ui card\"></div><div class=\"ui card\"></div><div class=\"ui card\"></div><div class=\"ui card\"></div><div class=\"ui card\"></div><div class=\"ui card\"></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Cards\", \".cards\");\n                        </script>\n                        <style>\n                            .cards:empty:before  {\n                                content: \"Add a Card here\";\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"one,two,three,four,five,six,seven,eight,nine,ten\");\n                            addListButton(inEditor, \"Cards Per Row\", list, \".cards\");\n\n                            var list = new listOption(\"doubling,stackable,doubling stackable\");\n                            list.altCaption = {\"doubling\": \"double card width per device jump\", \"stackable\": \"stack cards on mobile\", \"doubling stackable\": \"double card width per device jump + stack cards on mobile\"};\n                            addListButton(inEditor, \"Responsive\", list, \".cards\");\n\n                            addClassButton(inEditor, \"Link\", \"link\", \".cards\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"copyComponent\" title=\"textElement\"></div>\n                <div class=\"copyComponent\" title=\"content\"></div>\n                <div class=\"component\" title=\"Metadata\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Metadata.png\">\n                    <div class=\"html-content\"><div class=\"meta\"><span class=\"date\">Joined in 2013</span><span class=\"ag-text-span right floated\">14hr</span></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Metadata\", \".meta\");\n                        </script>    \n                    </div>\n                </div>\n                <div class=\"copyComponent\" title=\"header\"></div>\n                <div class=\"copyComponent\" title=\"description\"></div>\n                <div class=\"copyComponent\" title=\"extraContent\"></div>\n                <div class=\"copyComponent\" title=\"link\"></div>\n                <div class=\"copyComponent\" title=\"image\"></div>\n                <div class=\"copyComponent\" title=\"imageLink\"></div>\n                <div class=\"copyComponent\" title=\"imageSwap\"></div>\n                <div class=\"copyComponent\" title=\"dimmableImage\"></div>\n                <div class=\"copyComponent\" title=\"imageCornerLabel\"></div>\n                <div class=\"copyComponent\" title=\"icons\"></div>\n                <div class=\"copyComponent\" title=\"button\"></div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Slides, Steps (Wizard)\">\n            <div class=\"component divider\" title=\"Slides - (Shape)\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Standard Slide\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Standard_Slide.png\">\n                    <div class=\"html-content\"><div class=\"ui shape\"><div class=\"sides\"><div class=\"active side\"></div><div class=\"side\"></div><div class=\"side\"></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Slides\", \".shape\");\n                            tagReName(\"Slide\", \".shape .side\");\n\n                            designSetting(\"unTouchElement\", \".shape > .sides\");\n                            designSetting(\"notDraggable\", \".side\");\n                            designSetting(\"notSelectable\", \".side\");\n                        </script>\n                        <style>\n                            .ui.shape .side:empty{\n                                height:40px;\n                                width:150px;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"cube,text\");\n                            addListButton(inEditor, \"Types\", list, \".ui.shape\");\n\n                            addCustomButton(inEditor, \"prevSlide\", \"Previous Slide\", \"\", \"\", \".ui.shape\", \"\", \"#2196f3\");\n\n                            inEditor.find(\"#prevSlide\").click(function (event) {\n                                var elm = selectedElement();\n\n                                showLoad();\n                                var selElement = elm.find('.side.active');\n                                elm.find('.side').removeClass('active');\n                                if (selElement.prev().length == 0){\n                                    elm.find('.side').last().addClass('active');\n                                }else{\n                                    selElement.prev().addClass('active');\n                                }\n\n                                setTimeout(function () {\n                                    hideLoad();\n                                }, 100);\n                                event.stopPropagation();\n                            });\n\n\n                            addCustomButton(inEditor, \"nextSlide\", \"Next Slide\", \"\", \"\", \".ui.shape\", \"\", \"#2196f3\");\n\n                            inEditor.find(\"#nextSlide\").click(function (event) {\n                                var elm = selectedElement();\n\n                                showLoad();\n                                var selElement = elm.find('.side.active');\n                                elm.find('.side').removeClass('active');\n                                if (selElement.next().length == 0){\n                                    elm.find('.side').first().addClass('active');\n                                }else{\n                                    selElement.next().addClass('active');\n                                }\n                                setTimeout(function () {\n                                    hideLoad();\n                                }, 100);\n                                event.stopPropagation();\n                            });\n\n\n                            addCustomButton(inEditor, \"addSlide\", \"Add Slide\", \"\", \"\", \".ui.shape\");\n\n                            inEditor.find(\"#addSlide\").click(function (event) {\n\n                                var elm = selectedElement();\n                                var activeSlide = elm.find('.side.active');\n\n                                elm.children(\".sides\").children(\".side\").removeClass(\"active\");\n                                activeSlide.after('<div class=\"newStuff\"><div class=\"side active\">new</div></div>');\n\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, false);\n\n                                var newSlide = elm.find('.side.active');\n                                var newSlideAttachInfo = reAttachHow(newSlide);\n\n                                undoManager.add({\n                                    undo: function () {\n                                        showIfHidden(elm);\n                                        elm.children(\".sides\").children(\".side\").removeClass(\"active\");\n                                        newSlide.prev().addClass(\"active\");\n                                        newSlide.detach();\n                                        resetBreadcrumbAndProps(elm, false);\n                                    },\n                                    redo: function () {\n                                        showIfHidden(elm);\n                                        reAttachNow(newSlideAttachInfo);\n                                        elm.children(\".sides\").children(\".side\").removeClass(\"active\");\n                                        newSlideAttachInfo[\"elm\"].addClass(\"active\");\n                                        resetBreadcrumbAndProps(elm, false);\n                                    }\n                                });\n\n                                undoRedoStatus();\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"removeSlide\", \"Remove Slide\", \"\", \"\", \".ui.shape\");\n\n                            inEditor.find(\"#removeSlide\").click(function (event) {\n                                var elm = selectedElement();\n\n                                if (elm.children(\".sides\").children(\".side\").length > 1){\n                                    var activeSlide = elm.find('.side.active');\n\n                                    elm.children(\".sides\").children(\".side\").removeClass(\"active\");\n\n                                    if (activeSlide.prev().length == 0){\n                                        var closestSlide = activeSlide.next();\n                                    }else{\n                                        var closestSlide = activeSlide.prev();\n                                    }\n\n                                    closestSlide.addClass(\"active\");\n\n                                    var removeSlideInfo = reAttachHow(activeSlide);\n                                    activeSlide.detach();\n\n                                    undoManager.add({\n                                        undo: function () {\n                                            showIfHidden(elm);\n                                            reAttachNow(removeSlideInfo);\n                                            elm.children(\".sides\").children(\".side\").removeClass(\"active\");\n                                            removeSlideInfo[\"elm\"].addClass(\"active\");\n                                            resetBreadcrumbAndProps(elm, false);\n                                        },\n                                        redo: function () {\n                                            showIfHidden(elm);\n                                            elm.children(\".sides\").children(\".side\").removeClass(\"active\");\n                                            closestSlide.addClass(\"active\");\n                                            activeSlide.detach();\n                                            resetBreadcrumbAndProps(elm, false);\n\n                                        }\n                                    });\n\n                                    undoRedoStatus();\n                                }\n\n                                event.stopPropagation();\n                            });\n\n\n                        </script>\n                    </div>\n                    <div class=\"afterUnHide\">\n                        <script>\n                            var isInSide = visibleElm.closest(\".side\");\n                            if (isInSide.length > 0) {\n                                if (isInSide.hasClass(\"active\") == false) {\n                                    var isInShape = isInSide.closest(\".shape\");\n                                    if (isInShape.length > 0) {\n                                        isInShape.children(\".sides\").children(\".side\").removeClass(\"active\");\n                                        isInSide.addClass(\"active\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrag.hasClass(\"shape\")) {\n                                if (elmDrop.hasClass(\"shape\")) {\n                                    isOut = true;\n                                } else if (elmDrop.parent().closest(\".shape\").length > 0) {\n                                    finalShow = false;\n                                }\n                            }\n\n                            if (elmDrop.hasClass(\"shape\")) {\n                                isOut = true;\n                            }\n\n                            if (elmDrop.hasClass(\"side\")) {\n                                isOut = false;\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Cube Slide\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Cube_Slide.png\">\n                    <div class=\"html-content\"><div class=\"ui cube shape\"><div class=\"sides\"><div class=\"active side\"><div class=\"content\"><div class=\"center\"></div></div></div><div class=\"side\"><div class=\"content\"><div class=\"center\"></div></div></div><div class=\"side\"><div class=\"content\"><div class=\"center\"></div></div></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <style>\n                            .ui.cube.shape .side:empty{\n                                min-width: 15em;\n                                height: 15em;\n                                padding: 2em;\n                            }\n                        </style>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Text Slide\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Text_Slide.png\">\n                    <div class=\"html-content\"><div class=\"ui text shape\"><div class=\"sides\"><div class=\"side active\">Slide 1</div><div class=\"side\">Slide 2</div><div class=\"side\">Slide 3</div></div></div></div>\n                </div>\n                <div class=\"component\" title=\"Header Text Slide\" data-alias=\"banner\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Header_Text_Slide.png\">\n                    <div class=\"html-content\"><div class=\"ui text shape\"><div class=\"sides\"><div class=\"ui header side active\">Slide 1</div><div class=\"ui header side\">Slide 2</div><div class=\"ui header side\">Slide 3</div></div></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Steps\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Icons\" data-alias=\"step,wizard\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_steps.png\">\n                    <div class=\"html-content\"><div class=\"ui steps\"><a class=\"step\"><i class=\"shipping icon\"></i><div class=\"content\"><div class=\"title\">Shipping</div><div class=\"description\">Choose your shipping options</div></div></a><a class=\"step\"><i class=\"payment icon\"></i><div class=\"content\"><div class=\"title\">Billing</div><div class=\"description\">Enter billing information</div></div></a></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Title\", \".title\");\n                            tagReName(\"Step\", \".step\");\n                            tagReName(\"Steps Group\", \".steps\");\n                        </script>\n                        <style>\n                            .steps:empty  {\n                                width: 200px;\n                                height: 47px;\n                            }\n                            .ui.steps .disabled.step{\n                                pointer-events: auto !important;\n                                cursor: pointer;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Active\", \"active\", \".step\");\n                            addClassButton(inEditor, \"Disabled\", \"disabled\", \".step\");\n                            addClassButton(inEditor, \"Completed\", \"completed\", \".step\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // 'steps' can not be dropped into another 'steps'\n                            if (elmDrag.hasClass(\"steps\")) {\n                                if (elmDrop.closest(\".steps\").length > 0) {\n                                    if (elmDrop.hasClass(\"steps\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n\n                            // 'step' can not be dropped into another 'step'\n                            if (elmDrag.hasClass(\"step\")) {\n                                if (elmDrop.closest(\".step\").length > 0) {\n                                    if (elmDrop.hasClass(\"step\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Vertical\" data-alias=\"step,wizard\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Steps.png\">\n                    <div class=\"html-content\"><div class=\"ui vertical steps\"><a class=\"step\"><i class=\"shipping icon\"></i><div class=\"content\"><div class=\"title\">Shipping</div><div class=\"description\">Choose your shipping options</div></div></a><a class=\"step\"><i class=\"mastercard icon\"></i><div class=\"content\"><div class=\"title\">Billing</div><div class=\"description\">Enter billing information</div></div></a><a class=\"active step\"><i class=\"info icon\"></i><div class=\"content\"><div class=\"title\">Confirm Order</div><div class=\"description\">Verify order details</div></div></a></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Vertical\", \"vertical\", \".steps\");\n\n                            var list = new listOption(\"one,two,three,four,five,six,seven,eight\");\n                            addListButton(inEditor, \"Evenly divide into\", list, \".steps\", \".vertical\");\n\n                            addClassButton(inEditor, \"Fluid\", \"fluid\", \".steps\");\n\n                            addClassButton(inEditor, \"Tablet stackable\", \"tablet stackable\", \".steps\");\n\n                            var list = new listOption(\"top attached,bottom attached\");\n                            addListButton(inEditor, \"Attached\", list, \".steps\");\n\n                            var list = new listOption(\"small,large\");\n                            addListButton(inEditor, \"Size\", list, \".steps\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Ordered\" data-alias=\"step,wizard\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Ordered_steps.png\">\n                    <div class=\"html-content\"><div class=\"ui ordered steps\"><a class=\"step\"><div class=\"content\"><div class=\"title\">Shipping</div><div class=\"description\">Choose your shipping options</div></div></a><a class=\"step\"><div class=\"content\"><div class=\"title\">Billing</div><div class=\"description\">Enter billing information</div></div></a><a class=\"active step\"><div class=\"content\"><div class=\"title\">Confirm Order</div><div class=\"description\">Verify order details</div></div></a></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Ordered\", \"ordered\", \".steps\");\n                        </script>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Forms\">\n            <div class=\"component divider\" title=\"Form Holders\"></div>\n            <div class=\"component\" title=\"Standard Field\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Standard_Field.png\">\n                <div class=\"html-content\"><div class=\"field eight wide form-column\"><label>label</label><div class=fields><div class=\"field sixteen wide form-field\"></div></div></div></div>\n                <div class=\"runOnLoad\">\n                    <script>\n                        tagReName(\"Field\", \".form-column\");\n                        tagReName(\"Sub Field\", \".form-field\");\n\n                        hideClassFromPropInspector(\"form-column\", true);\n                        hideClassFromPropInspector(\"form-field\", true);\n\n                        designSetting(\"noRemove\", \".form-field:only-child\");\n                        designSetting(\"unTouchElement\", \".field > .fields\");\n                        designSetting(\"notDraggable\", \".form-column > label\");\n                        designSetting(\"notDraggable\", \".form-field\");\n                        designSetting(\"addOutline\", \".form\");\n                        designSetting(\"addOutline\", \".form-row\");\n\n                        contentEditableButNoToolbar(\".form-column > label\");\n                    </script>\n                    <style>\n                        .form-column > label {\n                            display: inline-block !important;\n                            min-width:50px;\n                        }\n\n                        .form-column > label:empty{\n                            height:20px;\n                        }\n\n                        .form-field:empty:before {\n                            overflow: hidden;\n                            height: 20px;\n                        }\n\n                        .ui.form .disabled.field, .ui.form .disabled.fields .field, .ui.form .field :disabled {\n                            pointer-events: auto !important;\n                            opacity: .6 !important;\n                        }\n                    </style>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n                        addCustomButton(inEditor, \"labelFor\", \"Label For...\", \"\", \"\", \"label\", \".checkbox label\", \"#2196f3\");\n                        showIDlist(inEditor, \"labelFor\", \"Form Controls\", \"*[id]\", \"for\", \"\");\n                    </script>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n                        var list = new listOption(\"error,disabled\");\n                        addListButton(inEditor, \"States\", list, \".form-row, .form-column\");\n\n                        addClassButton(inEditor, \"Required\", \"required\", \".form-row, .form-column\");\n\n                        var list = new listOption(\"one wide,two wide,three wide,four wide,five wide,six wide,seven wide,eight wide,nine wide,ten wide,eleven wide,twelve wide,thirteen wide,fourteen wide,fifteen wide,sixteen wide\");\n                        list.hasNone = false;\n                        addListButton(inEditor, \"Width\", list, \".form-column.wide, .field.wide\");\n                    </script>\n                </div>\n                <div class=\"whenDrag\">\n                    <script>\n                        if (elmDrag.hasClass(\"form-column\")) {\n                            if (elmDrag.find(\".inline-field\").length > 0) {\n                                var isInlineField = true;\n                            }else{\n                                var isInlineField = false;\n                            }\n                            if (elmDrop.closest(\".inline.form-row\").length > 0) {\n                                var isInlineRow = true;\n                            }else{\n                                var isInlineRow = false;\n                            }\n                            if (elmDrop.closest(\".form-column\").length > 0) {\n                                if (elmDrop.hasClass(\"form-column\")) {\n                                    if ((isInlineField == true) && (isInlineRow == true)) {\n\n                                        isOut = true;\n\n                                    }else if ((isInlineField == false) && (isInlineRow == false)) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n\n                                }else{\n                                    finalShow = false;\n                                }\n                            }else if (elmDrop.hasClass(\"form-row\")) {\n                                if ((isInlineField == true) && (isInlineRow == true)) {\n                                    isOut = false;\n                                }else if ((isInlineField == false) && (isInlineRow == false)) {\n                                    isOut = false;\n                                }else{\n                                    finalShow = false;\n                                }\n                            }\n                        }\n\n                        if (elmDrag.hasClass(\"form-row\")) {\n                            if (elmDrop.hasClass(\"form-row\")) {\n                                isOut = true;\n                            }else{\n                                finalShow = false;\n                            }\n                        }\n\n                        if (elmDrop.hasClass(\"form-field\")) {\n                            isOut = false;\n                        }\n                    </script>\n                </div>\n                <div class=\"beforeDrop\">\n                    <script>\n                        // if a field is not dropped into a form, then wrap the field with a form\n                        if (dropFromOutside) {\n                            if (elmDrag.hasClass(\"form-column\")) {\n                                if (injectPoint.element.closest(\".form\").length == 0){\n                                    if (elmDrag.find(\".inline-field\").length > 0) {\n                                        var inlineForm = \"inline \";\n                                    }else{\n                                        var inlineForm = \"\";\n                                    }\n                                    elmDragCode = '<div class=\"newStuff\"><div class=\"form ui\"><div class=\"' + inlineForm + 'fields form-row\">' + getControlCode($(this), \"html-content\") + \"</div></div></div>\";\n                                }\n                            }\n                        }\n                    </script>\n                </div>\n            </div>\n            <div class=\"component\" title=\"Inline Field\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Inline_Field.png\">\n                <div class=\"html-content\"><div class=\"eight wide field form-column\"><label>Name</label><div class=\"inline-field\"></div></div></div>\n                <div class=\"runOnLoad\">\n                    <script>\n                        tagReName(\"Field\", \".inline-field\");\n\n\n                        hideClassFromPropInspector(\"inline-field\", true);\n\n                        designSetting(\"noCopy\", \".inline-field\");\n                        designSetting(\"noRemove\", \".inline-field\");\n                        designSetting(\"notDraggable\", \".inline-field\");\n                        designSetting(\"notSelectable\", \".inline-field\");\n                    </script>\n                    <style>\n                        .inline-field {\n                            width: 100%;\n                            display: inline-block;\n                        }\n\n                        .one.wide .inline-field:empty:before {\n                            content: \"1 Wide\";\n                        }\n                        .two.wide .inline-field:empty:before {\n                            content: \"2 Wide\";\n                        }\n                        .three.wide .inline-field:empty:before {\n                            content: \"3 Wide\";\n                        }\n                        .four.wide .inline-field:empty:before {\n                            content: \"4 Wide\";\n                        }\n                        .five.wide .inline-field:empty:before {\n                            content: \"5 Wide\";\n                        }\n                        .six.wide .inline-field:empty:before {\n                            content: \"6 Wide\";\n                        }\n                        .seven.wide .inline-field:empty:before {\n                            content: \"7 Wide\";\n                        }\n                        .eight.wide .inline-field:empty:before {\n                            content: \"8 Wide\";\n                        }\n                        .nine.wide .inline-field:empty:before {\n                            content: \"9 Wide\";\n                        }\n                        .ten.wide .inline-field:empty:before {\n                            content: \"10 Wide\";\n                        }\n                        .eleven.wide .inline-field:empty:before {\n                            content: \"11 Wide\";\n                        }\n                        .twelve.wide .inline-field:empty:before {\n                            content: \"12 Wide\";\n                        }\n                        .thirteen.wide .inline-field:empty:before {\n                            content: \"13 Wide\";\n                        }\n                        .fourteen.wide .inline-field:empty:before {\n                            content: \"14 Wide\";\n                        }\n                        .fifteen.wide .inline-field:empty:before {\n                            content: \"15 Wide\";\n                        }\n                        .sixteen.wide .inline-field:empty:before {\n                            content: \"16 Wide\";\n                        }\n                    </style>\n                </div>\n                <div class=\"cleanUpBeforePublish\">\n                    <script>\n                        pageClone.find(\".inline-field\").each(function() {\n                            $(this).replaceWith($(this).html());\n                        });\n                    </script>\n                </div>\n                <div class=\"whenDrag\">\n                    <script>\n                        if (elmDrop.hasClass(\"inline-field\")) {\n                            isOut = false;\n                        }\n                    </script>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Form Controls\"></div>\n            <div class=\"copyComponent\" title=\"standardInput\"></div>\n            <div class=\"copyComponent\" title=\"button\"></div>\n            <div class=\"component\" title=\"Text Area\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Text_Area.png\">\n                <div class=\"html-content\"><textarea rows=\"3\"></textarea></div>\n                <div class=\"runOnLoad\">\n                    <style>\n                        textarea {\n                            resize: none;\n                        }\n                    </style>\n                </div>\n            </div>\n            <div class=\"component\" title=\"Validation Message\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Message.png\">\n                <div class=\"html-content\"><div class=\"ui message error validation-message\"><div class=\"content\"><p>Form Validation Error Message!</p></div></div></div>\n                <div class=\"runOnLoad\">\n                    <script>\n                        designSetting(\"unTouchElement\", \".validation-message *\");\n                        hideClassFromPropInspector(\"validation-message\", true);\n                    </script>\n                    <style>\n                        .ui.form .error.message, .ui.form .success.message, .ui.form .warning.message, .validation-message {\n                            display: block;\n                            opacity: 0.7;\n                        }\n                    </style>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n                        var list = new listOption(\"warning,success,error\");\n                        addListButton(inEditor, \"State\", list, \".validation-message\");\n                    </script>\n                </div>\n                <div class=\"whenDrag\">\n                    <script>\n                        if (elmDrag.hasClass(\"validation-message\")) { \n                            if (elmDrop.closest(\".ui.form\").length == 0) {\n                                finalShow = false;\n                                notAllowedMessage = \"Drop into a Form!\";\n                            }\n                        }\n                        if (elmDrop.hasClass(\"validation-message\")) { \n                            isOut = true;\n                        }\n                    </script>\n                </div>\n                <div class=\"cleanUpBeforePublish\">\n                    <script>\n\n                        pageClone.find(\".validation-message\").each(function() {\n                            $(this).html(\"\");\n                        });\n                    </script>\n                </div>\n            </div>\n            <div class=\"copyComponent\" title=\"singleSelection\"></div>\n            <div class=\"copyComponent\" title=\"multipleSelection\"></div>\n            <div class=\"copyComponent\" title=\"groupedCheckboxes\"></div>\n            <div class=\"copyComponent\" title=\"inlineCheckboxes\"></div>\n            <div class=\"copyComponent\" title=\"groupedRadio\"></div>\n            <div class=\"copyComponent\" title=\"inlineRadio\"></div>\n        </div>\n        <div class=\"category\" title=\"Form Components\">\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Modals (dialog prompts)\"></div>\n                <div class=\"component\" title=\"Standard Modal\" data-alias=\"alert,warn,info,notice,window\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Standard_Modal.png\">\n                    <div class=\"html-content\"><div class=\"ui modal\" id=\"modal-x\"><i class=\"close icon\"></i><div class=\"header\">Header</div><div class=\"content\"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p></div><div class=\"actions\"><button class=\"ui cancel button black\">Cancel</button><button class=\"ui right labeled icon ok button green\">Ok<i class=\"icon checkmark\"></i></button></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Modal\", \".modal\");\n                            tagReName(\"Footer\", \".modal > .actions\");\n\n                            designSetting(\"noCopy\", \".modal > *\");\n                            designSetting(\"noCopy\", \".modal\");\n                            designSetting(\"noRemove\", \".modal > .content\");\n\n                            designSetting(\"hiddenContent\", \".modal\");\n                            hideClassFromPropInspector(\"black-dimmer-background\", false);\n                        </script>\n                        <style>\n                            .ui.modal{\n                                position: relative;\n                                top: 10px !important;\n                            }\n\n                            .black-dimmer-background{\n                                background-color: rgba(0,0,0,.85);\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"small,large,fullscreen\");\n                            addListButton(inEditor, \"Size\", list, \".modal\");\n\n                            addClassButton(inEditor, \"Basic\", \"basic\", \".modal\");\n\n                            var list = new listOption(\"ok,cancel\");\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Action Type\", list, \".modal > .actions > button\");\n                        </script>\n                    </div>\n                    <div class=\"beforeDrop\">\n                        <script>\n                            // Drop modal into <body>\n                            if (dropFromOutside) {\n                                if (elmDrag.hasClass(\"modal\")) {\n                                    useCustomDrop = true;\n                                    selFrame.find(\"body\").append(elmDragCode);\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // We don't want to drop a modal into any other types of hidden contents\n                            if (elmDrag.hasClass(\"modal\")) { \n                                if ($(\"#hideModeButton\").hasClass(\"isInHideMode\") == true) {\n                                    finalShow = false;\n                                }\n                            }\n\n                            if (elmDrop.hasClass(\"modal\")) {\n                                isOut = false;\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"dropModal\">\n                        <script>\n                            //adds unique id to every new modal\n                            var id = \"modal-\";\n                            var i = uniqueID(id);\n                            var elm = designFrame.find(\"#\" + id + \"x\");\n                            elm.attr(\"id\", id + i);\n                            goIntoHideMode(id + i, true);\n                            createHiddenControl(id + i);\n                        </script>\n                    </div>\n                    <div class=\"whenInHideMode\">\n                        <script>\n                            if (elm.hasClass(\"modal\")){\n                                editFrameContent().find(\"body\").addClass(\"black-dimmer-background\");\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenOutOfHideMode\">\n                        <script>\n                            editFrameContent().find(\"body\").removeClass(\"black-dimmer-background\");\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            // we can access the modal from the editors 'Hidden' button in the toolbar\n                            // however if we remove a modal, then we must also remove the reference for this modal\n                            // from the editor menu:\n                            if (elm.hasClass(\"modal\")) {\n                                deleteHiddenContNode(\"vis-content-\" + elm.attr(\"id\"));\n                                selectHiddenControl(\"parentPage\");\n\n                                // has the redo (to remove) button been pressed\n                                if (redoRemove == true){\n                                    if ($(\"#hideModeButton\").hasClass(\"isInHideMode\") == false){\n                                        // we are not in content hidden mode therefore we do not know if the item has been removed when the redo was pressed, therefore display a message under the redo button\n                                        undoRedoCaption(\"Modal Removed (\" + elm.attr(\"id\") + \")\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Basic Modal\" data-alias=\"alert,warn,info,notice,window\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Basic_Modal.png\">\n                    <div class=\"html-content\"><div class=\"ui small basic modal\" id=\"modal-x\"><div class=\"ui icon header\"><i class=\"archive icon\"></i> Header Messages</div><div class=\"content\"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p></div><div class=\"actions\"><button class=\"ui red cancel basic inverted button\"><i class=\"remove icon\"></i> Cancel</button><button class=\"ui green ok inverted button\"><i class=\"checkmark icon\"></i> Ok</button></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropModal\"></div>\n                </div>\n                <div class=\"component\" title=\"Image Modal\" data-alias=\"alert,warn,info,notice,window\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Image_Modal.png\">\n                    <div class=\"html-content\"><div class=\"ui modal\" id=\"modal-x\"><i class=\"close icon\"></i><div class=\"header\">Header</div><div class=\"image content\"><div class=\"ui medium image\"><img src=\"https://editor.bragndrop.com/assets/images/male.jpg\"></div><div class=\"description\"><div class=\"ui header\">Nullam quis risus eget urna.</div><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p></div></div><div class=\"actions\"><button class=\"ui cancel button black\">Cancel</button><button class=\"ui right labeled icon ok button green\">Ok<i class=\"icon checkmark\"></i></button></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"dropModal\"></div>\n                </div>\n            </div>\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Loaders and Dimmers\"></div>\n                <div class=\"component\" title=\"Loader\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Loader.png\">\n                    <div class=\"html-content\"><div class=\"ui loader\">Loading</div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Loader\", \".loader\");\n                            designSetting(\"isAbsolutePosition\", \".loader:not(.inline)\");\n                        </script>\n                        <style>\n                            .loader:not(.text) .ag-text{\n                                display: none !important;\n                            }\n                            .loader:not(.inline){\n                                display: block !important; \n                            }\n                            .loader.inline{\n                                display: inline-block !important; \n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Text\", \"text\", \".loader\");\n                            addClassButton(inEditor, \"Inline\", \"inline\", \".loader\");\n\n                            var list = new listOption(\"loader,indeterminate loader,active loader,active centered loader,disabled loader\");\n                            list.altCaption = {\"loader\": \"None\", \"indeterminate loader\": \"Indeterminate\", \"active loader\": \"Active\", \"active centered loader\": \"Active Centered\", \"disabled loader\": \"Disabled\"};\n                            list.hasNone = false;\n                            addListButton(inEditor, \"State\", list, \".loader\");\n\n                        </script>\n                    </div>\n                    <div class=\"cleanUpBeforePublish\">\n                        <script>\n                            // if we are not using a text loader, then remove any unnecessary text\n                            pageClone.find(\".loader\").each(function() {\n                                if ($(this).hasClass(\"text\") == false){\n                                    $(this).html(\"\");\n                                }\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Page Dimmer\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Page_Dimmer.png\">\n                    <div class=\"html-content\"><div class=\"ui page dimmer\" id=\"page-dimmer-x\"><div class=\"content\"><div class=\"center\"><span class=\"ag-text-span\">Dimmed Message!</span></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Page Dimmer\", \".page.dimmer\");\n                            designSetting(\"noCopy\", \".page.dimmer\");\n                            designSetting(\"hiddenContent\", \".page.dimmer\");\n\n                            designSetting(\"isAbsolutePosition\", \".dimmer\");\n                            designSetting(\"notSelectable\", \".dimmer > .content, .dimmer > .content > div\");\n                            designSetting(\"notDraggable\", \".dimmer, .dimmer > .content\");\n                            designSetting(\"noCopy\", \".dimmer, .dimmer > .content\");\n                        </script>\n                        <style>\n                            .page.dimmer.ag-show-all{\n                                opacity: 1 !important;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Blur Dimmer\", \"blurring\", \".page.dimmer\", \"\", 'selectedElement().closest(\"body\")');\n                        </script>\n                    </div>\n                    <div class=\"beforeDrop\">\n                        <script>\n                            // Drop Page dimmer into <body>\n                            if (dropFromOutside) {\n                                if (elmDrag.is(\".page.dimmer\")) {\n                                    useCustomDrop = true;\n                                    selFrame.find(\"body\").append(elmDragCode);\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // We don't want to drop a Page dimmer into any other types of hidden contents\n                            if (elmDrag.is(\".page.dimmer\")) { \n                                if ($(\"#hideModeButton\").hasClass(\"isInHideMode\") == true) {\n                                    finalShow = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\">\n                        <script>\n                            //adds unique id to every new Page dimmer\n                            var id = \"page-dimmer-\";\n                            var i = uniqueID(id);\n                            var elm = designFrame.find(\"#\" + id + \"x\");\n                            elm.attr(\"id\", id + i);\n                            goIntoHideMode(id + i, true);\n                            createHiddenControl(id + i);\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            // we can access the Page dimmer from the editors 'Hidden' button in the toolbar\n                            // however if we remove a Page dimmer, then we must also remove the reference for this Page dimmer\n                            // from the editor menu:\n                            if (elm.is(\".page.dimmer\")) {\n                                deleteHiddenContNode(\"vis-content-\" + elm.attr(\"id\"));\n                                selectHiddenControl(\"parentPage\");\n\n                                // has the redo (to remove) button been pressed\n                                if (redoRemove == true){\n                                    if ($(\"#hideModeButton\").hasClass(\"isInHideMode\") == false){\n                                        // we are not in content hidden mode therefore we do not know if the item has been removed when the redo was pressed, therefore display a message under the redo button\n                                        undoRedoCaption(\"Page Dimmer Removed (\" + elm.attr(\"id\") + \")\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Dimmable Segment\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Dimmable_Segment.png\">\n                    <div class=\"html-content\"><div class=\"ui dimmable dimmed segment\"><p>Pellentesque habitant morbi.</p><div class=\"ui simple dimmer\"><div class=\"content\"><div><span class=\"ag-text-span\">Dimmed Message!</span></div></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Dimmer\", \".dimmer, .dimmer > div, .dimmer > div > div\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Show/Hide Dimmer\", \"dimmed\", \".dimmer\", \".page.dimmer\", 'selectedElement().closest(\".dimmable\")');\n                            addClassButton(inEditor, \"Show/Hide Dimmer\", \"dimmed\", \".dimmable\");\n\n                            var list = new listOption(\"top aligned,middle aligned,bottom aligned\");\n                            list.applyToFind = \".content\";\n                            list.hasNone = false;\n                            addListButton(inEditor, \"Align\", list, \".dimmer\");\n\n                            addClassButton(inEditor, \"Inverted\", \"inverted\", \".dimmer\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Blur Dimmer\", \"blurring\", \".simple.dimmer\", \"\", 'selectedElement().closest(\".dimmable\")');\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\">\n                        <script>\n                            var elm = selectedElement();\n                            setTimeout(function () {\n                                focusElement(elm.find(\".dimmer\"));\n                            }, 100);\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // A dimmer can not be dropped into another dimmer\n                            if (elmDrop.closest(\".dimmable\").find(\".dimmer\").length > 0) {\n                                if (elmDrag.find(\".dimmer\").length > 0) {\n                                    if (elmDrop.hasClass(\"dimmable\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }  \n                                }\n                            }else if (elmDrop.closest(\".dimmer\").length > 0) {\n                                if (elmDrag.find(\".dimmer\").length > 0) {\n                                    finalShow = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            if (elm.is(\".ui.dimmer\")) {\n                                if (elm.parent().is(\".ui.dimmable\")) {\n                                    elm.parent().removeClass(\"dimmable dimmed\");\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterAttach\">\n                        <script>\n                            if (elm.is(\".ui.dimmer\")) {\n                                elm.parent().addClass(\"dimmable dimmed\");\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Dimmable Image\" id=\"dimmableImage\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Dimmable_Image.png\">\n                    <div class=\"html-content\"><div class=\"ui dimmable dimmed image\"><div class=\"ui simple dimmer\"><div class=\"content\"><div class=\"center\"><div><div class=\"ui inverted header h2\">Title</div><button class=\"ui primary button\">Add</button><button class=\"ui button\">View</button></div></div></div></div><img class=\"ui image\" src=\"https://editor.bragndrop.com/assets/images/male-small.jpg\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Image Dimmer\", \".dimmable.image\");\n\n                            designSetting(\"noCopy\", \".dimmable.image > .image\");\n                            designSetting(\"noRemove\", \".dimmable.image > .image\");\n                            designSetting(\"notDraggable\", \".dimmable.image > .image\");\n                            designSetting(\"notDroppable\", \".dimmable.image > .image\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"selectImgDimmer\", \"Image Dimmer\", \"\", \"\", \".dimmable > img\");\n\n                            inEditor.find(\"#selectImgDimmer\").click(function (event) {\n                                focusElement(selectedElement().closest(\".dimmable\"));\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticImgDimmer'] = '$(\"?????\").dimmer({\\n        on: \"hover\"\\n    });';\n                            eventSnippet['semanticImgDimmerCheck'] = '$(\"?????\").dimmer(';\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticImgDimmerSetup\", \"Dimmer Hover Code\", \"\", \"\", \".dimmable.image\", \"\", \"#2196f3\");\n                            inEditor.find(\"#semanticImgDimmerSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n\n\n\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.dimmable.image\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticImgDimmer',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Message\"></div>\n                <div class=\"component\" title=\"Basic Message\" data-alias=\"alert,warn,info,notice,window\" id=\"message\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Basic_Message.png\">\n                    <div class=\"html-content\"><div class=\"ui message\"><i class=\"close icon\"></i><div class=\"header\">Changes in Service</div><p>We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.</p></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Message\", \".message\");\n                            designSetting(\"addOutline\", \".message.hidden\");\n                        </script>\n                        <style>\n                            .ui.hidden.message{\n                                display: block !important;\n                            }\n                            .ui.hidden.compact.message{\n                                display: inline-block !important;\n                            }\n                            .ui.icon.hidden.message{\n                                display: -webkit-box !important;\n                                display: -webkit-flex !important;\n                                display: -ms-flexbox !important;\n                                display: flex !important;\n                            }\n                            .ui.hidden{\n                                opacity: 0.5;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"warning,info,positive,success,negative,error\");\n                            addListButton(inEditor, \"Style\", list, \".message\", \".validation-message\");\n\n                            var list = new listOption(\"attached,bottom attached\");\n                            list.altCaption = {\"attached\": \"Top attached\",\"bottom attached\": \"Bottom attached\"};\n                            addListButton(inEditor, \"Attached\", list, \".message\");\n\n                            var list = new listOption(\"hidden,visible\");\n                            addListButton(inEditor, \"Visibility\", list, \".message\");\n\n                            addClassButton(inEditor, \"Compact\", \"compact\", \".message\");\n                            addClassButton(inEditor, \"Floating\", \"floating\", \".message\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"List Message\" data-alias=\"alert,warn,info,notice,window\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/List_Message.png\">\n                    <div class=\"html-content\"><div class=\"ui message\"><i class=\"close icon\"></i><div class=\"header\">New Site Features</div><ul class=\"list\"><li>You can now have cover images on blog pages</li><li>Drafts will now auto-save while writing</li></ul></div></div>\n                </div>\n                <div class=\"component\" title=\"Icon Message\" data-alias=\"alert,warn,info,notice,window\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Message.png\">\n                    <div class=\"html-content\"><div class=\"ui icon message\"><i class=\"close icon\"></i><i class=\"inbox icon\"></i><div class=\"content\"><div class=\"header\">Have you heard about our mailing list?</div><p>Get the best news in your e-mail every day.</p></div></div></div>\n                </div>\n            </div>\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Progress\"></div>\n                <div class=\"component\" title=\"Progress Bar\" data-alias=\"load\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Progress_Bar.png\">\n                    <div class=\"html-content\"><div class=\"ui progress\"><div class=\"bar\"><div class=\"progress\">50%</div></div><div class=\"label\">Uploading Files</div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Progress Bar\", \".ui.progress\");\n                            tagReName(\"Bar\", \".ui.progress .bar\");\n                            tagReName(\"Progress Value\", \".ui.progress .bar .progress\");\n\n                            designSetting(\"noCopy\", \".ui.progress *\");\n                            designSetting(\"noRemove\", \".ui.progress .bar\");\n                            designSetting(\"notDraggable\", \".ui.progress *\");\n                            designSetting(\"notDroppable\", \".ui.progress *\");\n                            designSetting(\"dontAddTextTo\", \".ui.progress .bar .progress\");\n                        </script>\n                        <style>\n                            .ui.progress .bar{\n                                width: 50%;\n                            }\n                            .ui.progress .bar{\n                                min-width: 10% !important;\n                            }\n                            .ui.progress .bar:empty::before{\n                                content: \"\" !important;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticProgress'] = '$(\"?????\").progress({\\n        percent: \"22\"\\n    });';\n                            eventSnippet['semanticProgressCheck'] = '$(\"?????\").progress(';\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticProgressSetup\", \"Progress Setup Code\", \"\", \"\", \".ui.progress\", \"\", \"#2196f3\");\n                            inEditor.find(\"#semanticProgressSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.progress\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticProgress',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"top attached,bottom attached\");\n                            addListButton(inEditor, \"Attached\", list, \".ui.progress\");\n\n                            var list = new listOption(\"indicating,success,warning,error\");\n                            addListButton(inEditor, \"Style\", list, \".ui.progress\");\n\n                            var list = new listOption(\"active,disabled\");\n                            addListButton(inEditor, \"States\", list, \".ui.progress\");\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // A Progress Bar can not be dropped into another Progress Bar\n                            if (elmDrag.is(\".ui.progress\")) {\n                                if (elmDrop.closest(\".ui.progress\").length > 0) {\n                                    if (elmDrop.is(\".ui.progress\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Tabs\"></div>\n                <div class=\"component\" title=\"Tab Top\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Tab_Top.png\">\n                    <div class=\"html-content\"><div class=\"ui tabs ag-tabs\" id=\"tabpanel-x\"><div class=\"ui top attached tabular menu\"><a class=\"item active tab-item\">Home</a><a class=\"item tab-item\">Profile</a><a class=\"item tab-item\">Messages</a><a class=\"item tab-item\">Settings</a><div class=\"right menu\"><div class=\"item tab-item\"><span class=\"ag-text\"></span></div></div></div><div class=\"ui bottom attached segment\"><div class=\"ui tab active\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Tabs\", \".tabs\");\n                            tagReName(\"Tab Right\", \".right.menu .tab-item\");\n                            tagReName(\"Tab\", \".tab-item\");\n\n                            tagReName(\"Tab Panel\", \".ui.tab\");\n\n                            designSetting(\"noCopy\", \".ui.tabs\");\n\n                            designSetting(\"noCopy\", \".ui.tabs > *\");\n                            designSetting(\"noRemove\", \".ui.tabs > *\");\n\n                            designSetting(\"noCopy\", \".ui.tabs > .menu > .item\");\n                            //                         designSetting(\"noRemove\", \".ui.tabs > .menu > .item\");\n\n                            designSetting(\"notDraggable\", \".ui.tabs > .menu, .ui.tabs > .menu > *, .ui.tabs > .menu > .right.menu > *\");\n                            designSetting(\"notDraggable\", \".ui.tabs > .segment > .ui.tab\");\n                            designSetting(\"notSelectable\", \".ui.tabs > .segment > .ui.tab\");\n                            designSetting(\"notDraggable\", \".ui.tabs > .segment\");\n                            designSetting(\"notDroppable\", \".ui.tabs > *\");\n\n                            designSetting(\"noMove\", \".ui.tabs > .ui.menu > .right.menu\");\n\n                            hideClassFromPropInspector(\"tab-item\", true);\n                            hideClassFromPropInspector(\"ag-tabs\", true);\n                        </script>\n                        <style>\n                            .ui.tab:empty{\n                                padding-bottom: 150px;\n                            }\n\n                            .ui.tabs .ui.bottom.attached.segment{\n                                z-index: auto;\n                            }\n\n                        </style>\n                    </div>\n                    <div class=\"onAttributeSelected\">\n                        <script>\n                            if (elm.hasClass('ag-tabs') == true) {\n                                $(\"#checkID\").prop( \"disabled\", true );\n                            }\n                        </script>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticTabs'] = '$(\"?????\").tab();';\n                            eventSnippet['semanticTabsCheck'] = '$(\"?????\").tab(';\n                        </script>\n                    </div>\n                    <div class=\"addJStoFinal\" data-check=\".ui.tabs, .mega-menu[data-html*='tabs']\">\n                        <script>\n                            $(function () {\n                                $('.ui.tabs > .menu > .item').tab();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticTabsSetup\", \"Tabs Setup Code\", \"\", \"\", \".ui.tabs, .ui.tabs > .menu\", \"\", \"#2196f3\");\n                            inEditor.find(\"#semanticTabsSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n                                var isMainTab = elm.is(\".ui.tabs\");\n\n                                if (isMainTab == false) {\n                                    var tabElm = elm.closest(\".ui.tabs\");\n                                }else{\n                                    var tabElm = elm;\n                                }\n\n                                if (attrExist(tabElm, \"id\") != \"\") {\n                                    var tabID = \"#\" + tabElm.attr(\"id\");\n                                    goToSourceCode();\n                                    handleEvent({\n                                        useSnippet:'semanticTabs',\n                                        snippetParameters: [tabID + \" > .menu > .item\"]\n                                    });\n                                }else{\n                                    if (isMainTab == false){\n                                        focusElement(elm.closest(\".ui.tabs\"));\n                                    }\n                                    setTimeout(function () {\n                                        alert(\"Tab 'ID' required!\");\n                                        eastPanelShowContent(\"#tag-att-container\");\n                                        $(\"#tag-other-container\").hide();\n                                        $(\"#tag-att-container\").closest(\".panelbody\").animate({ scrollTop: 0}, 1000);\n                                        $(\"#temp_id\").effect(\"pulsate\", {}, 1000);\n                                    }, 100);\n                                }\n\n\n                                event.stopPropagation();\n                            });\n\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"addNewTab\", \"Add New Tab\", \"\", \"\", \".ag-tabs > .menu > a.item\", \"\", \"#2196f3\");\n                            inEditor.find(\"#addNewTab\").click(function (event) {\n\n                                var tabButton = selectedElement();\n\n                                var tab = tabButton.closest(\".ag-tabs\");\n                                var tabID = tab.attr(\"id\");\n                                var tabIndex = tabButton.index();\n                                var tabPanel = tab.children(\".ui.segment\").children(\".ui.tab\").eq(tabIndex);\n\n                                tabButton.parent().children(\"a.item\").removeClass(\"active\");\n                                tabButton.after('<div class=\"newStuff\"><a class=\"item active tab-item\" data-tab=\"\">New Tab</a></div>');\n\n                                tabPanel.parent().children(\".ui.tab\").removeClass(\"active\");\n                                tabPanel.after('<div class=\"newStuff\"><div class=\"ui tab active\" data-tab=\"\"></div></div>');\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, false);\n\n                                if (tabButton.parent().hasClass(\"item\")){\n                                    var itemMenu = tabButton.parent();\n                                    var itemLen = itemMenu.children(\".item\").length;\n                                    var numName = [\"two\",\"three\",\"four\",\"five\",\"six\",\"seven\",\"eight\",\"nine\",\"ten\",\"eleven\",\"twelve\"];\n\n                                    if (typeof numName[itemLen-2] !== \"undefined\") {\n                                        itemMenu.removeClass(numName.join(\" \"));\n                                        itemMenu.addClass(numName[itemLen-2]);\n                                    }\n                                }\n\n\n                                tab.children(\".ui.menu\").children(\"a.item\").each(function (index) {\n                                    $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                });\n                                tab.children(\".ui.segment\").children(\".ui.tab\").each(function (index) {\n                                    $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                });\n\n\n\n                                setTimeout(function () {\n                                    focusElement(tabButton.next());\n                                }, 100);\n\n\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"afterDetach\">\n                        <script>\n\n                            var reActiveTab = false;\n                            if (addToElm.is(\".ag-tabs > .ui.menu > *\")) {\n                                if (elm.is(\"a.item\")){\n                                    reActiveTab = true;\n                                }\n                            }\n                            if (addToElm.is(\".ag-tabs > .ui.segment > .ui.tab\")) {\n                                reActiveTab = true;\n                            }\n\n                            if (reActiveTab) {\n                                var tab = addToElm.closest(\".ag-tabs\");\n                                var tabID = tab.attr(\"id\");\n                                tab.children(\".ui.menu\").children(\"a.item\").each(function (index) {\n                                    $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                    $(this).removeClass(\"active\");\n                                    if (index == 0) {\n                                        $(this).addClass(\"active\");\n                                    }\n                                });\n                                tab.children(\".ui.segment\").children(\".ui.tab\").each(function (index) {\n                                    $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                    $(this).removeClass(\"active\");\n                                    if (index == 0) {\n                                        $(this).addClass(\"active\");\n                                    }\n                                });\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterAttach\">\n                        <script>\n                            var reActiveTab = false;\n                            if (elm.is(\".ag-tabs > .ui.menu > a.item\")) {\n                                reActiveTab = true;\n                            }\n                            if (elm.is(\".ag-tabs > .ui.segment > .ui.tab\")) {\n                                reActiveTab = true;\n                            }\n\n                            if (reActiveTab) {\n                                var tab = elm.closest(\".ag-tabs\");\n                                var tabID = tab.attr(\"id\");\n                                var tabIndex = elm.index();\n                                tab.children(\".ui.menu\").children(\"a.item\").each(function (index) {\n                                    $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                    $(this).removeClass(\"active\");\n                                    if (tabIndex == index){\n                                        $(this).addClass(\"active\")\n                                    }\n                                });\n                                tab.children(\".ui.segment\").children(\".ui.tab\").each(function (index) {\n                                    $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                    $(this).removeClass(\"active\");\n                                    if (tabIndex == index){\n                                        $(this).addClass(\"active\")\n                                    }\n                                });\n                            }\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            if (elm.is(\".ag-tabs > .ui.menu > a.item\")) {\n                                var tabID = attrExist(elm, \"data-tab\");\n\n                                var tab = elm.closest(\".ag-tabs\");\n                                var tabpane = tab.children(\".ui.segment\").children(\".ui.tab[data-tab='\" + tabID + \"']\").eq(0);\n                                extraDetach.push(reAttachHow(tabpane));\n                                tabpane.detach();\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrop.is(\".ui.tabs\")) { \n                                isOut = true; \n                            }else if (elmDrop.is(\".ui.tab\")) { \n                                isOut = false; \n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"newTabID\">\n                        <script>\n                            //adds unique id to every new tab\n                            var id = \"tabpanel-\";\n                            var i = uniqueID(id);\n                            var elm = designFrame.find(\"#\" + id + \"x\");\n                            tabId = id + i;\n                            elm.attr(\"id\", tabId);\n                            elm.children(\".menu\").children(\".item\").each(function (index) {\n                                $(this).attr(\"data-tab\",  tabId + \"-tab-\" + index);\n                            });\n                            elm.children(\".segment\").children(\".tab\").each(function (index) {\n                                $(this).attr(\"data-tab\",  tabId + \"-tab-\" + index);\n                            });\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"startTabs\">\n                        <script>\n                            designWindow().startTabs();\n                        </script>\n                    </div>\n                    <div class=\"afterUnHide\">\n                        <script>\n                            //when we run the undo/redo command we need to put focus (active) on the tabpane which holds the edited item\n                            //visibleElm is visible element\n\n                            if (visibleElm.closest(\".ui.tabs\").length > 0){\n                                if (visibleElm.closest(\".ui.tab\").length > 0){\n                                    visibleElm.closest(\".ui.tab\").parent().children().removeClass(\"active\");\n                                    visibleElm.closest(\".ui.tab\").addClass(\"active\");\n\n                                    var tabID = visibleElm.closest(\".ui.tab\").attr(\"data-tab\");\n\n                                    visibleElm.closest(\".ui.tabs\").children(\".menu\").children().removeClass(\"active\");\n                                    visibleElm.closest(\".ui.tabs\").children(\".menu\").children(\".item[data-tab='\" + tabID + \"']\").eq(0).addClass(\"active\");\n                                }\n                            }\n\n                        </script>\n                    </div>\n                    <div class=\"afterMove\">\n                        <script>\n                            if (movedElm.is(\".ag-tabs > .ui.menu > a.item\")) {\n                                var tab = movedElm.closest(\".ag-tabs\");\n                                var tabPnlID = movedElm.attr(\"data-tab\");\n                                var tabCont = tab.children(\".ui.segment\").children(\".tab[data-tab='\" + tabPnlID + \"']\");\n\n                                if (mAfter == true) {\n                                    var tNxt = tabCont.next();\n                                } else {\n                                    var tNxt = tabCont.prev();\n                                }\n\n                                if (tNxt.length > 0) {\n                                    if (mAfter == true) {\n                                        tNxt.after(tabCont);\n                                    } else {\n                                        tNxt.before(tabCont);\n                                    }\n                                    var tabID = tab.attr(\"id\");\n                                    tab.children(\".ui.menu\").children(\"a.item\").each(function (index) {\n                                        $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                        $(this).removeClass(\"active\");\n                                    });\n                                    tab.children(\".ui.segment\").children(\".ui.tab\").each(function (index) {\n                                        $(this).attr(\"data-tab\", tabID + \"-tab-\" + index);\n                                        $(this).removeClass(\"active\");\n                                    });\n                                    movedElm.addClass(\"active\");\n                                    tabCont.addClass(\"active\");\n\n                                }\n\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Tab Bottom\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Tab_Bottom.png\">\n                    <div class=\"html-content\"><div class=\"ui tabs ag-tabs\" id=\"tabpanel-x\"><div class=\"ui top attached segment\"><div class=\"ui tab active\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div></div><div class=\"ui bottom attached tabular menu\"><a class=\"item tab-item active\">Home</a><a class=\"item tab-item\">Profile</a><a class=\"item tab-item\">Messages</a><a class=\"item tab-item\">Settings</a><div class=\"right menu\"><div class=\"item tab-item\"><span class=\"ag-text\"></span></div></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"newTabID\"></div>\n                    <div class=\"afterDropCopy\" title=\"startTabs\"></div>\n                </div>\n                <div class=\"component\" title=\"Top Spread Tabs\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Top_Spread_Tabs.png\">\n                    <div class=\"html-content\"><div class=\"ui tabs ag-tabs\" id=\"tabpanel-x\"><div class=\"ui top attached tabular four item menu\"><a class=\"item active tab-item\">Home</a><a class=\"item tab-item\">Profile</a><a class=\"item tab-item\">Messages</a><a class=\"item tab-item\">Settings</a></div><div class=\"ui bottom attached segment\"><div class=\"ui tab active\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"newTabID\"></div>\n                    <div class=\"afterDropCopy\" title=\"startTabs\"></div>\n                </div>\n                <div class=\"component\" title=\"Bottom Spread Tabs\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Bottom_Spread_Tabs.png\">\n                    <div class=\"html-content\"><div class=\"ui tabs ag-tabs\" id=\"tabpanel-x\"><div class=\"ui top attached segment\"><div class=\"ui tab active\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div><div class=\"ui tab\"></div></div><div class=\"ui bottom attached tabular four item menu\"><a class=\"item tab-item active\">Home</a><a class=\"item tab-item\">Profile</a><a class=\"item tab-item\">Messages</a><a class=\"item tab-item\">Settings</a></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"newTabID\"></div>\n                    <div class=\"afterDropCopy\" title=\"startTabs\"></div>\n                </div>\n            </div>\n            <div class=\"component-group\">\n                <div class=\"component divider\" title=\"Accordions\"></div>\n                <div class=\"component\" title=\"Simple\" data-alias=\"accordion\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Simple_Accordion.png\">\n                    <div class=\"html-content\"><div class=\"ui accordion\"><div class=\"title\"><i class=\"dropdown icon\"></i>Item #1</div><div class=\"content\"></div><div class=\"title\"><i class=\"dropdown icon\"></i>Item #2</div><div class=\"content\"></div><div class=\"title\"><i class=\"dropdown icon\"></i>Item #3</div><div class=\"content\"></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Accordion\", \".accordion\");\n\n                            designSetting(\"noCopy\", \".accordion > *\");\n                            designSetting(\"noRemove\", \".accordion > .content\");\n                            designSetting(\"notDraggable\", \".accordion > *\");\n                            designSetting(\"notSelectable\", \".accordion > .content\");\n\n                        </script>\n                        <style>\n                            .accordion > .content.active:empty{\n                                width:100% !important;\n                                height:50px;\n                            }\n\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"addNewAccPanel\", \"Add New Panel\", \"\", \"\", \".accordion > .title\");\n                            inEditor.find(\"#addNewAccPanel\").click(function (event) {\n                                var elm = selectedElement();\n\n                                elm.next().after('<div class=\"newStuff\"><div class=\"title\"><i class=\"dropdown icon\"></i>New Item</div><div class=\"content\"></div></div>');\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"afterAttach\">\n                        <script>\n                            if (elm.is(\".accordion > .title\")) {\n                                if (elm.prev().prev().hasClass('content') == true){\n                                    elm.after(elm.prev());\n                                    elm.removeClass(\"active\");\n                                    elm.next().removeClass(\"active\");\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticAccordion'] = '$(\"?????\").accordion();';\n                            eventSnippet['semanticAccordionCheck'] = '$(\"?????\").accordion(';\n                        </script>\n                    </div>\n                    <div class=\"addJStoFinal\" data-check=\".ui.accordion, .mega-menu[data-html*='accordion']\">\n                        <script>\n                            $(function () {\n                                $('.ui.accordion').accordion();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticAccordionSetup\", \"Accordion Setup Code\", \"\", \"\", \".accordion\", \"\", \"#2196f3\");\n                            inEditor.find(\"#semanticAccordionSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n\n                                // if nested accordion, then pick outermost accordion\n                                while (elm.parent().closest('.accordion').length != 0) {\n                                    elm = elm.parent().closest('.accordion');\n                                }\n\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.accordion\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticAccordion',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"startAccordion\">\n                        <script>\n                            designWindow().startAccordion();\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n\n                            if (elmDrop.is(\".accordion > *\")) {\n                                isOut = false;\n                            }\n\n                            if (elmDrag.hasClass(\"accordion\")) {\n                                if (elmDrop.is(\".accordion > .title\")) {\n                                    finalShow = false;\n                                }else if (elmDrop.closest(\".accordion > .title\").length > 0) {\n                                    finalShow = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"beforeMove\">\n                        <script>\n                            if (movedElm.is(\".accordion > .title\")) {\n                                movedElm.removeClass(\"active\");\n                                movedElm.next().removeClass(\"active\");\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterMove\">\n                        <script>\n                            //when moving an accordion title button we need to move the associated accordion content.\n                            //movedElm = the original selected element before it was moved\n                            if (movedElm.is(\".accordion > .title\")) {\n                                if (movedElm.parent().children().length > 2) {\n                                    if (mAfter == true) {\n                                        if (movedElm.hasClass(\"active\") == false){\n                                            movedElm.before(movedElm.next());\n                                        }else{\n                                            movedElm.next().next().after(movedElm);\n                                        }\n                                        movedElm.after(movedElm.prev().prev().prev());\n                                    }else{\n                                        if (movedElm.prev().hasClass(\"active\") == true){\n                                            movedElm.after(movedElm.prev());\n                                        }\n                                        movedElm.after(movedElm.next().next().next());\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            if (elm.is(\".accordion > .title\")) {\n                                elm.removeClass(\"active\");\n                                elm.next().removeClass(\"active\");\n                                extraDetach.push(reAttachHow(elm.next()));\n                                elm.next().detach();\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterUnHide\">\n                        <script>\n                            //when we run the undo/redo command we need to put focus (active) on the tabpane which holds the edited item\n                            //visibleElm is visible element\n\n                            var accContent = visibleElm.closest(\".content\");\n                            if (accContent.parent().hasClass(\"accordion\")){\n\n                                // close all nested accordion panels:\n                                var nestAcc = accContent.parent().closest('.accordion');\n                                while (nestAcc.length != 0) {\n                                    nestAcc.children().removeClass(\"active\");\n                                    nestAcc = nestAcc.parent().closest('.accordion');\n                                }\n\n                                // open required nested accordion panels:\n                                var nestAcc = accContent.parent().closest('.accordion');\n                                var activePanel = accContent;\n                                while (nestAcc.length != 0) {\n                                    activePanel.addClass(\"active\");\n                                    activePanel.prev().addClass(\"active\");\n                                    activePanel = nestAcc.parent().closest(\".accordion > .content\");\n                                    nestAcc = nestAcc.parent().closest('.accordion');\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"cleanUpBeforePublish\">\n                    <script>\n                        //remove .ui from nested accordion's\n                        pageClone.find(\".ui.accordion\").each(function() {\n                            if ($(this).parent().closest(\".accordion\").length > 0){\n                                $(this).removeClass(\"ui\");\n                            }\n                        });\n                    </script>\n                </div>\n                <div class=\"component\" title=\"Styled\" data-alias=\"accordion\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Styled_Accordian.png\">\n                    <div class=\"html-content\"><div class=\"ui accordion styled\"><div class=\"title active\"><i class=\"dropdown icon\"></i>Item #1</div><div class=\"content active\"></div><div class=\"title\"><i class=\"dropdown icon\"></i>Item #2</div><div class=\"content\"></div><div class=\"title\"><i class=\"dropdown icon\"></i>Item #3</div><div class=\"content\"></div></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Styled\", \"styled\", \".accordion\");\n                        </script>\n                    </div>\n                    <div class=\"afterDropCopy\" title=\"startAccordion\"></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Menu\" data-alias=\"accordion\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Menu_Accordian.png\">\n                    <div class=\"html-content\"><div class=\"ui accordion vertical menu\"><div class=\"title active\"><i class=\"dropdown icon\"></i>Item #1</div><div class=\"content active\"></div><div class=\"title\"><i class=\"dropdown icon\"></i>Item #2</div><div class=\"content\"></div><div class=\"title\"><i class=\"dropdown icon\"></i>Item #3</div><div class=\"content\"></div></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Vertical Menu\", \"vertical menu\", \".accordion\");\n                        </script>\n                    </div>\n                    <div class=\"afterDropCopy\" title=\"startAccordion\"></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Buttons, Checkbox, Radio, Toggle\">\n            <div class=\"component divider\" title=\"Buttons\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Button\" id=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Button.png\">\n                    <div class=\"html-content\"><button class=\"ui button\">Button</button></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Circular\", \"circular\", \".button\", \"div.ui.labeled.button, .buttons .button, .ad.button\");\n                            addClassButton(inEditor, \"Compact\", \"compact\", \".button, .buttons\", \"div.ui.labeled.button, .ad.button\");\n\n                            var list = new listOption(\"top attached,bottom attached\");\n                            addListButton(inEditor, \"Attached\", list, \".button, .buttons\", \"div.ui.labeled.button, .ad.button\");\n\n                            addClassButton(inEditor, \"Fluid\", \"fluid\", \".button, .buttons\");\n\n                            var list = new listOption(\"active,disabled,loading\");\n                            addListButton(inEditor, \"States\", list, \".button\", \"div.ui.labeled.button, .ad.button\");\n                        </script>   \n                    </div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Button\", \".ui.button\");\n                            tagReName(\"Buttons\", \".ui.buttons\");\n                        </script>\n                        <style>\n                            .ui.button:disabled, .ui.buttons .disabled.button, .ui.disabled.active.button, .ui.disabled.button, .ui.disabled.button:hover {\n                                pointer-events: auto !important;\n                                cursor: pointer;\n                            }\n                            .ui.button:empty, .ui.buttons:empty{\n                                width:50px;\n                                height:35px;\n                            }\n                        </style>  \n                    </div> \n                </div>\n                <div class=\"component\" title=\"Icon Button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Button.png\">\n                    <div class=\"html-content\"><button class=\"ui icon button\"><i class=\"cloud icon\"></i></button></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"noCopy\", \".icon.button .icon\");\n                            designSetting(\"noRemove\", \".icon.button .icon\");\n                            designSetting(\"notDraggable\", \".icon.button .icon\");\n                            designSetting(\"notDroppable\", \".icon.button .icon\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Labeled\" data-alias=\"button,like,share\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Labeled_Button.png\">\n                    <div class=\"html-content\"><div class=\"ui labeled button\"><div class=\"ui button\"><i class=\"heart icon\"></i><span class=\"ag-text\">Like</span></div><a class=\"ui basic left pointing label\">2,048</a></div></div>\n                    <div class=\"afterMove\">\n                        <script>\n                            //movedElm = the original selected element before it was moved\n                            if (movedElm.parent().is(\".ui.labeled.button\")) {\n                                if ((movedElm.parent().find(\".ui.label\").length > 0 ) && (movedElm.parent().find(\".ui.button\").length > 0 )){\n                                    if (movedElm.parent().children().first().is(\".ui.label\")) {\n                                        movedElm.parent().removeClass(\"left labeled button\").addClass(\"left labeled button\");\n                                        movedElm.parent().find(\".ui.label\").removeClass(\"left right pointing label\").addClass(\"right pointing label\"); \n                                    }else{\n                                        movedElm.parent().removeClass(\"left\");\n                                        movedElm.parent().find(\".ui.label\").removeClass(\"left right pointing label\").addClass(\"left pointing label\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Social\" data-alias=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Social.png\">\n                    <div class=\"html-content\"><a href=\"#\" class=\"ui circular facebook icon button\"><i class=\"icon facebook\"></i></a><a href=\"#\" class=\"ui circular twitter icon button\"><i class=\"icon twitter\"></i></a><a href=\"#\" class=\"ui circular google plus icon button\"><i class=\"icon google plus\"></i></a><a href=\"#\" class=\"ui circular vk icon button\"><i class=\"icon vk\"></i></a><a href=\"#\" class=\"ui circular linkedin icon button\"><i class=\"icon linkedin\"></i></a><a href=\"#\" class=\"ui circular instagram icon button\"><i class=\"icon instagram\"></i></a><a href=\"#\" class=\"ui circular youtube icon button\"><i class=\"icon youtube\"></i></a></div>\n                </div>\n                <div class=\"component\" title=\"Conditionals\" data-alias=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Conditional_Button.png\">\n                    <div class=\"html-content\"><div class=\"ui buttons\"><button class=\"ui button\">Cancel</button><div class=\"or\" data-text=\"or\">&nbsp;</div><button class=\"ui button positive\">Save</button></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"noCopy\", \".buttons div.or\");\n                            designSetting(\"noRemove\", \".buttons div.or\");\n                            designSetting(\"notDraggable\", \".buttons div.or\");\n                            designSetting(\"notDroppable\", \".buttons div.or\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Labeled Icon\" data-alias=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Labeled_Icon_Button.png\">\n                    <div class=\"html-content\"><button class=\"ui labeled icon button\"><i class=\"pause icon\"></i>Pause</button></div>\n                    <div class=\"afterMove\">\n                        <script>\n                            //movedElm = the original selected element before it was moved\n                            if (movedElm.parent().is(\".ui.labeled.icon.button\")) {\n                                if (movedElm.parent().find(\"i.icon\").length > 0 ){\n                                    if (movedElm.parent().children().first().is(\"i.icon\")) {\n                                        movedElm.parent().removeClass(\"right\"); \n                                    }else{\n                                        movedElm.parent().removeClass(\"labeled icon button\").addClass(\"right labeled icon button\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Group\" data-alias=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Group_Buttons.png\">\n                    <div class=\"html-content\"><div class=\"ui buttons\"><button class=\"ui button\">One</button><button class=\"ui button\">Two</button><button class=\"ui button\">Three</button></div></div>\n                </div>\n                <div class=\"component\" title=\"Group Icon\" data-alias=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Group_Icon_Buttons.png\">\n                    <div class=\"html-content\"><div class=\"icon buttons ui\"><button class=\"ui button\"><i class=\"icon align left\"></i></button><button class=\"ui button\"><i class=\"icon align center\"></i></button><button class=\"ui button\"><i class=\"icon align justify\"></i></button></div></div>\n                </div>\n                <div class=\"component\" title=\"Vertical\" data-alias=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Buttons.png\">\n                    <div class=\"html-content\"><div class=\"ui buttons vertical\"><button class=\"ui button\">Feed</button><button class=\"ui button\">Messages</button><button class=\"ui button\">Events</button><button class=\"ui button\">Photos</button></div></div>\n                </div>\n                <div class=\"component\" title=\"Vertical Icon\" data-alias=\"button\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Vertical_Icon_Buttons.png\">\n                    <div class=\"html-content\"><div class=\"icon buttons vertical ui\"><button class=\"ui button\"><i class=\"icon align left\"></i></button><button class=\"ui button\"><i class=\"icon align center\"></i></button><button class=\"ui button\"><i class=\"icon align justify\"></i></button></div></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Checkbox, Radio, Toggle\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Checkbox\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Checkbox.png\">\n                    <div class=\"html-content\"><div class=\"ui checkbox match-label-input\"><input type=\"checkbox\" tabindex=\"0\" class=\"hidden\"><label>Label</label></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Checkbox\", \".checkbox:not(.radio)\");\n                            tagReName(\"Input\", \".ui.checkbox input\");\n\n                            designSetting(\"notDraggable\", \".checkbox *\");\n                            designSetting(\"notDroppable\", \".checkbox *\");\n                        </script>\n                        <style>\n                            .ui.checkbox input.hidden {\n                                z-index: 1000;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"checkboxOptions\", \"Options...\", \"\", \"\",  \".ui.checkbox > *\");\n\n                            inEditor.find(\"#checkboxOptions\").click(function (event) {\n                                focusElement(selectedElement().closest(\".ui.checkbox\"));\n                                event.stopPropagation();\n                            });\n\n                            addClassButton(inEditor, \"Fitted\", \"fitted\", \".ui.checkbox\");\n\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // Can not drop inside a checkbox:\n                            if (elmDrop.hasClass(\"checkbox\")) {\n                                isOut = true;\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"matchLabelWithInput\">\n                        <script>\n                            designFrame.find(\".match-label-input\").each(function () {\n                                var input = $(this).find(\"input\");\n                                if (attrExist(input, \"id\") != \"\") {\n                                    var id = input.attr(\"id\");\n                                    $(this).find(\"label\").attr(\"for\",id);\n                                }\n                            });\n\n                            designFrame.find(\".match-label-input\").removeClass(\"match-label-input\");\n                        </script>\n                    </div>\n                    <div class=\"beforeCopy\">\n                        <script>\n                            if (elm.parent().is(\".ui.checkbox\")) {\n                                if (elm.parent().parent().hasClass(\"form-column\")) {\n                                    elm = elm.parent().parent();\n                                }else if (elm.parent().parent().hasClass(\"inline-field\")) {\n                                    elm = elm.parent().parent().parent();\n                                }else{\n                                    elm = elm.parent();\n                                }\n                            }\n                            if (elm.is(\".ui.checkbox\")) {\n                                if (elm.parent().hasClass(\"form-column\")) {\n                                    elm = elm.parent();\n                                }else if (elm.parent().hasClass(\"inline-field\")) {\n                                    elm = elm.parent().parent();\n                                }\n                            }\n                        </script>\n                    </div>   \n                    <div class=\"afterCopy\">\n                        <script>\n                            if ((elm.find(\".ui.checkbox\").length > 0) || (elm.is(\".ui.checkbox\"))) {\n                                if (elm.find(\".ui.checkbox\").length == 0){\n                                    setTimeout(function () {\n                                        var input = selectedElement().find(\"input\");\n                                        if (attrExist(input, \"id\") != \"\") {\n                                            var id = input.attr(\"id\");\n                                            selectedElement().find(\"label\").attr(\"for\",id);\n                                        }\n                                    }, 100);\n                                }else{\n                                    setTimeout(function () {\n                                        selectedElement().find(\".ui.checkbox\").each(function () {\n                                            var input = $(this).find(\"input\");\n                                            if (attrExist(input, \"id\") != \"\") {\n                                                var id = input.attr(\"id\");\n                                                $(this).find(\"label\").attr(\"for\",id);\n                                            }\n                                        });\n                                    }, 100);\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            if (elm.parent().is(\".ui.checkbox\")) {\n                                elm = elm.parent();\n                                delElm = elm;\n                            }\n                        </script>\n                    </div>   \n                </div>\n                <div class=\"component\" title=\"Radio\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Radio.png\">\n                    <div class=\"html-content\"><div class=\"ui radio checkbox match-label-input\"><input type=\"radio\" name=\"radio-group\"><label>label</label></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Radio\", \".checkbox.radio\");\n                        </script>\n                    </div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Slider\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Slider.png\">\n                    <div class=\"html-content\"><div class=\"ui slider checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Slider\", \".checkbox.slider\");\n                        </script>\n                    </div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Toggle\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Toggle.png\">\n                    <div class=\"html-content\"><div class=\"ui toggle checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Toggle\", \".checkbox.toggle\");\n                        </script>\n                    </div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Grouped Checkboxes\" id=\"groupedCheckboxes\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Grouped_Checkboxes.png\">\n                    <div class=\"html-content\"><div class=\"grouped fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"ui checkbox match-label-input\"><input type=\"checkbox\" tabindex=\"0\" class=\"hidden\"><label>Label</label></div></div><div class=\"field form-column\"><div class=\"ui checkbox match-label-input\"><input type=\"checkbox\" tabindex=\"0\" class=\"hidden\"><label>Label</label></div></div><div class=\"field form-column\"><div class=\"ui checkbox match-label-input\"><input type=\"checkbox\" tabindex=\"0\" class=\"hidden\"><label>Label</label></div></div></div></div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            if (elmDrag.hasClass(\"grouped-checkbox\")) {\n                                if (elmDrop.hasClass(\"form-row\")) {\n                                    isOut = true;\n                                }else if (elmDrop.closest(\".form\").length != 0){\n                                    finalShow = false;\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"beforeDrop\">\n                        <script>\n                            // if a form row is not dropped into a form, then wrap the field with a form row:\n                            if (dropFromOutside) {\n                                if (elmDrag.hasClass(\"grouped-checkbox\")) {\n                                    if (injectPoint.element.closest(\".form\").length == 0){\n                                        elmDragCode = '<div class=\"newStuff\"><div class=\"form ui\">' + getControlCode($(this), \"html-content\") + \"</div></div>\";\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"resetGroupedCheckbox\">\n                        <script>\n                            designFrame.find(\".grouped-checkbox\").addClass(\"form-row\").removeClass(\"grouped-checkbox\");\n                        </script>\n                    </div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Inline Checkboxes\" id=\"inlineCheckboxes\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Inline_Checkboxes.png\">\n                    <div class=\"html-content\"><div class=\"inline fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui checkbox match-label-input\"><input type=\"checkbox\" tabindex=\"0\" class=\"hidden\"><label>Label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui checkbox match-label-input\"><input type=\"checkbox\" tabindex=\"0\" class=\"hidden\"><label>Label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui checkbox match-label-input\"><input type=\"checkbox\" tabindex=\"0\" class=\"hidden\"><label>Label</label></div></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"resetGroupedCheckbox\"></div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Grouped Radio\" id=\"groupedRadio\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Grouped_Radio.png\">\n                    <div class=\"html-content\"><div class=\"grouped fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"ui radio checkbox match-label-input\"><input type=\"radio\" name=\"radio-group-x\"><label>label</label></div></div><div class=\"field form-column\"><div class=\"ui radio checkbox match-label-input\"><input type=\"radio\" name=\"radio-group-x\"><label>label</label></div></div><div class=\"field form-column\"><div class=\"ui radio checkbox match-label-input\"><input type=\"radio\" name=\"radio-group-x\"><label>label</label></div></div></div></div>\n                    <div class=\"afterDrop\" id=\"uniqueRadioGroupName\">\n                        <script>\n                            //adds unique name to every new radio group\n                            function uniqueRadioGroup(designFrame, oldName, containerName) {\n\n                                //adds unique name to every new radio group\n                                var namGen = true;\n\n                                var reNam = \"\";\n                                var elm = designFrame.find(\"input[name='\" + oldName + \"x']\");\n                                var fg = elm.closest(containerName);\n\n                                if (fg.length > 0) {\n                                    var rado = fg.find(\"input[type='radio']\");\n\n                                    if (rado.length > 0) {\n                                        var nm = attrExist(rado, \"name\");\n\n                                        if (nm != \"\") {\n                                            if (nm != (oldName + \"x\")) {\n                                                namGen = false;\n                                                reNam = nm;\n                                            }\n                                        }\n                                    }\n                                }\n\n                                if (namGen == true) {\n                                    var i = uniqueAttributeName(oldName);\n                                    reNam = oldName + i;\n                                }\n                                elm.each(function () {\n                                    $(this).attr(\"name\", reNam);\n                                });\n\n                            }\n                            uniqueRadioGroup(designFrame, \"radio-group-\", \".fields\");\n\n                        </script>\n                    </div>\n                    <div class=\"afterDropCopy\" title=\"resetGroupedCheckbox\"></div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Inline Radio\" id=\"inlineRadio\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Inline_Radio.png\">\n                    <div class=\"html-content\"><div class=\"inline fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui radio checkbox match-label-input\"><input type=\"radio\" name=\"radio-group-x\"><label>label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui radio checkbox match-label-input\"><input type=\"radio\" name=\"radio-group-x\"><label>label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui radio checkbox match-label-input\"><input type=\"radio\" name=\"radio-group-x\"><label>label</label></div></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"uniqueRadioGroupName\"></div>\n                    <div class=\"afterDropCopy\" title=\"resetGroupedCheckbox\"></div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Grouped Toggle\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Grouped_Toggle.png\">\n                    <div class=\"html-content\"><div class=\"grouped fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"ui toggle checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div><div class=\"field form-column\"><div class=\"ui toggle checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div><div class=\"field form-column\"><div class=\"ui toggle checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"resetGroupedCheckbox\"></div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Inline Toggle\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Inline_Toggle.png\">\n                    <div class=\"html-content\"><div class=\"inline fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui toggle checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui toggle checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui toggle checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"resetGroupedCheckbox\"></div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Grouped Slider\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Grouped_Slider.png\">\n                    <div class=\"html-content\"><div class=\"grouped fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"ui slider checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div><div class=\"field form-column\"><div class=\"ui slider checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div><div class=\"field form-column\"><div class=\"ui slider checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"resetGroupedCheckbox\"></div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n                <div class=\"component\" title=\"Inline Slider\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Inline_Slider.png\">\n                    <div class=\"html-content\"><div class=\"inline fields grouped-checkbox\"><label>Main label:</label><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui slider checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui slider checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div><div class=\"field form-column\"><div class=\"inline-field\"><div class=\"ui slider checkbox match-label-input\"><input type=\"checkbox\"><label>label</label></div></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"resetGroupedCheckbox\"></div>\n                    <div class=\"afterDropCopy\" title=\"matchLabelWithInput\"></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Input, SearchBox (Autocomplete)\">\n            <div class=\"component divider\" title=\"Input\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Standard Input\" data-alias=\"password,user\" id=\"standardInput\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/standard/Text_Input__Password__Number___.png\">\n                    <div class=\"html-content\"><div class=\"ui input\"><input type=\"text\" placeholder=\"Username...\"></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Input\", \".input\");\n\n                            designSetting(\"notDraggable\", \".input input\");\n                            designSetting(\"noCopy\", \".input input\");\n                        </script>\n                        <style>\n                            .input:empty{\n                                padding-top: 16px !important;\n                                padding-bottom: 16px !important;\n                                width: 100px;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"inputOptions\", \"Options\", \"\", \"\", \".input input\");\n\n                            inEditor.find(\"#inputOptions\").click(function (event) {\n                                if (selectedElement().closest(\".search\") == 0) {\n                                    focusElement(selectedElement().closest(\".input\"));\n                                }else{\n                                    focusElement(selectedElement().closest(\".search\"));\n                                }\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"focus,disabled,error\");\n                            addListButton(inEditor, \"State\", list, \".input\");\n\n                            addClassButton(inEditor, \"Transparent\", \"transparent\", \".input\");\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            // instead of removing INPUT, remove the parent (.input)\n                            if (elm.is(\".input > input\")) {\n                                elm = selectedElement().parent();\n                                delElm = elm;\n                            }\n                        </script>\n                    </div>\n                    <div class=\"whenDrag\">\n                        <script>\n                            // A .input can not be dropped into another .input\n                            if (elmDrop.closest(\".input\").length > 0) {\n                                if (elmDrag.hasClass(\"input\")) {\n                                    if (elmDrop.hasClass(\"input\")) {\n                                        isOut = true;\n                                    }else{\n                                        finalShow = false;\n                                    }  \n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Icon Input\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Input.png\">\n                    <div class=\"html-content\"><div class=\"ui icon input\"><input type=\"text\" placeholder=\"Enter message...\"><i class=\"icon checkmark\"></i></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"notDraggable\", \".input .icon\");\n                            designSetting(\"noMove\", \".ui.icon.input > *\");\n                        </script>\n                        <style>\n                            .icon.input .icon{\n                                pointer-events: auto !important;\n                                cursor: pointer;\n                            }\n                        </style>  \n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"inputIconLeft\", \"Icon Left/Right\", \"\", \"\", \".icon.input .icon\", \"\", \"#2196f3\");\n\n                            inEditor.find(\"#inputIconLeft\").click(function (event) {\n\n                                var elem = selectedElement().closest(\".icon.input\");\n\n                                if (elem.hasClass(\"left\") == true){\n                                    elem.removeClass(\"left\");\n                                    var isOnLeft = false;\n                                }else{\n                                    elem.removeClass(\"icon\");\n                                    elem.addClass(\"left icon\");\n                                    var isOnLeft = true;\n                                }\n                                updateClassValue(elem);\n\n                                undoManager.add({\n                                    undo: function () {\n                                        showIfHidden(elem);\n                                        if (isOnLeft == true){\n                                            elem.removeClass(\"left\");\n                                        }else{\n                                            elem.removeClass(\"icon\");\n                                            elem.addClass(\"left icon\");\n                                        }\n                                        resetBreadcrumbAndProps(elem, false);\n                                    },\n                                    redo: function () {\n                                        showIfHidden(elem);\n                                        if (isOnLeft == false){\n                                            elem.removeClass(\"left\");\n                                        }else{\n                                            elem.removeClass(\"icon\");\n                                            elem.addClass(\"left icon\");\n                                        }\n                                        resetBreadcrumbAndProps(elem, false);\n                                    }\n                                });\n                                undoRedoStatus();\n\n                                event.stopPropagation();\n\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Loading\", \"loading\", \".icon.input\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Labeled Input\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Labeled_Input.png\">\n                    <div class=\"html-content\"><div class=\"ui right labeled input\"><div class=\"ui label\">$</div><input type=\"text\" placeholder=\"Amount\"><div class=\"ui basic label\">.00</div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Label\", \"div.label, span.label\");\n\n                            designSetting(\"notDraggable\", \".input .label\");\n                            designSetting(\"addTextTo\", \"div\");\n                        </script>\n                    </div>\n                    <div class=\"beforeRemove\">\n                        <script>\n                            if (elm.is(\".ui.label\")) {\n                                if (elm.parent().is(\".ui.labeled.input\")) {\n                                    if (elm.is(\":last-child\")) {\n                                        elm.parent().removeClass(\"right\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterAttach\">\n                        <script>\n                            if (elm.is(\".ui.label\")) {\n                                if (elm.parent().is(\".ui.labeled.input\")) {\n                                    if (elm.is(\":last-child\")) {\n                                        elm.parent().removeClass(\"labeled\");\n                                        elm.parent().addClass(\"right labeled\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterMove\">\n                        <script>\n                            //movedElm = the original selected element before it was moved\n                            if (movedElm.parent().is(\".ui.labeled.input\")) {\n                                if (movedElm.parent().find(\".ui.label\").length > 0 ){\n                                    if (movedElm.parent().children().last().is(\".ui.label\")) {\n                                        movedElm.parent().removeClass(\"labeled\");\n                                        movedElm.parent().addClass(\"right labeled\");\n                                    }else{\n                                        movedElm.parent().removeClass(\"right\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Tag Input\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Tag_Input.png\">\n                    <div class=\"html-content\"><div class=\"ui right labeled left icon input\"><i class=\"tags icon\"></i><input type=\"text\" placeholder=\"Enter tags\"><a class=\"ui tag label\">Add Tag</a></div></div>\n                </div>\n                <div class=\"component\" title=\"Corner Labeled\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Corner_Labeled.png\">\n                    <div class=\"html-content\"><div class=\"ui corner labeled input\"><input type=\"text\" placeholder=\"Enter code...\"><div class=\"ui corner label\"><i class=\"asterisk icon\"></i></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            designSetting(\"notSelectable\", \"div.ui.corner.label\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addCustomButton(inEditor, \"cornerLabelLeft\", \"Corner Left/Right\", \"\", \"\", \".corner.input\", \"\", \"#2196f3\");\n\n                            inEditor.find(\"#cornerLabelLeft\").click(function (event) {\n\n                                var elem = selectedElement();\n\n                                if (elem.hasClass(\"left\") == true){\n                                    elem.removeClass(\"left\");\n                                    elem.find(\".ui.corner.label\").removeClass(\"left\");\n                                    var isOnLeft = false;\n                                }else{\n                                    elem.removeClass(\"corner labeled\");\n                                    elem.addClass(\"left corner labeled\");\n                                    elem.find(\".ui.corner.label\").removeClass(\"corner label\").addClass(\"left corner label\")\n                                    var isOnLeft = true;\n                                }\n                                updateClassValue(elem);\n\n                                undoManager.add({\n                                    undo: function () {\n                                        showIfHidden(elem);\n                                        if (isOnLeft == true){\n                                            elem.removeClass(\"left\");\n                                            elem.find(\".ui.corner.label\").removeClass(\"left\");\n                                        }else{\n                                            elem.removeClass(\"corner labeled\");\n                                            elem.addClass(\"left corner labeled\");\n                                            elem.find(\".ui.corner.label\").removeClass(\"corner label\").addClass(\"left corner label\")\n                                        }\n                                        resetBreadcrumbAndProps(elem, false);\n                                    },\n                                    redo: function () {\n                                        showIfHidden(elem);\n                                        if (isOnLeft == false){\n                                            elem.removeClass(\"left\");\n                                            elem.find(\".ui.corner.label\").removeClass(\"left\");\n                                        }else{\n                                            elem.removeClass(\"corner labeled\");\n                                            elem.addClass(\"left corner labeled\");\n                                            elem.find(\".ui.corner.label\").removeClass(\"corner label\").addClass(\"left corner label\")\n                                        }\n                                        resetBreadcrumbAndProps(elem, false);\n                                    }\n                                });\n                                undoRedoStatus();\n\n                                event.stopPropagation();\n\n                            });\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component-group\" title=\"Button Inputs\">\n                    <div class=\"component\" title=\"Button Input\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Button_Input.png\">\n                        <div class=\"html-content\"><div class=\"ui action input\"><input type=\"text\" placeholder=\"Enter message...\"><button class=\"ui button\">Send</button></div></div>\n                    </div>\n                    <div class=\"component\" title=\"Icon Button Input\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Button_Input.png\">\n                        <div class=\"html-content\"><div class=\"ui action input\"><input type=\"text\" placeholder=\"Enter message...\"><button class=\"ui icon button\"><i class=\"checkmark icon\"></i></button></div></div>\n                    </div>\n                    <div class=\"component\" title=\"Labeled Icon Button Input\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Labeled_Icon_Button_Input.png\">\n                        <div class=\"html-content\"><div class=\"ui left action input\"><button class=\"ui teal labeled icon button\"><i class=\"add to cart icon\"></i>Checkout</button><input type=\"text\" value=\"$52.03\"></div></div>\n                    </div>\n                    <div class=\"afterMove\">\n                        <script>\n                            //movedElm = the original selected element before it was moved\n                            if (movedElm.parent().is(\".ui.action.input\")) {\n                                if (movedElm.parent().find(\".ui.button\").length > 0 ){\n                                    if (movedElm.parent().children().first().is(\".ui.button\")) {\n                                        movedElm.parent().removeClass(\"action\");\n                                        movedElm.parent().addClass(\"left action\");\n                                    }else{\n                                        movedElm.parent().removeClass(\"left\");\n                                    }\n                                }\n                            }\n                        </script>\n                    </div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"SearchBox with Autocomplete\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Standard Search\" id=\"StandardSearch\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Standard_Search.png\">\n                    <div class=\"html-content\"><div class=\"ui search\"><input class=\"prompt\" type=\"text\" placeholder=\"Search...\"><div class=\"results\"></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Search\", \".search\");\n                        </script>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticSearch'] = '$(\"?????\").search({\\n        //type: \"category\",\\n        minCharacters: 3,\\n        apiSettings: {\\n            url: \"\"\\n        },\\n        fields: {\\n            results: \"\"\\n        },\\n    });';\n                            eventSnippet['semanticSearchCheck'] = '$(\"?????\").search(';\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticSearchSetup\", \"Search Setup Code\", \"\", \"\", \".search:not(.dropdown)\", \"\", \"#2196f3\");\n                            inEditor.find(\"#semanticSearchSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.search\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticSearch',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Category\", \"category\", \".ui.search\", \".dropdown\");\n                            addClassButton(inEditor, \"Loading\", \"loading\", \".ui.search\", \".dropdown\");\n                            addClassButton(inEditor, \"Fluid\", \"fluid\", \".ui.search\", \".dropdown\");\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Icon Search\" id=\"RightIconSearch\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Right_Icon_Search.png\">\n                    <div class=\"html-content\"><div class=\"ui search\"><div class=\"ui icon input\"><input class=\"prompt\" type=\"text\" placeholder=\"Search...\"><i class=\"search icon\"></i></div><div class=\"results\"></div></div></div>\n                    <div class=\"addButtons\">\n                        <script>\n                            addClassButton(inEditor, \"Transparent\", \"transparent\", \".ui.search\", \"\", 'selectedElement().children(\".input\")');\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Left Icon Search\" id=\"LeftIconSearch\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Left_Icon_Search.png\">\n                    <div class=\"html-content\"><div class=\"ui search\"><div class=\"ui left icon input\"><input class=\"prompt\" type=\"text\" placeholder=\"Search...\"><i class=\"search icon\"></i></div><div class=\"results\"></div></div></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"category\" title=\"Selection Box, Dropdown Menu\">\n            <div class=\"component divider\" title=\"Selection Box\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Dropdown Selection\" id=\"singleSelection\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Dropdown_Selection.png\">\n                    <div class=\"html-content\"><select class=\"ui dropdown selection newDropDown\"><option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option><option value=\"4\">4</option><option value=\"5\">5</option></select></div>\n                    <div class=\"runOnLoad\">\n                        <style>\n                            .ui.disabled.dropdown, .ui.dropdown .menu>.disabled.item {\n                                cursor: pointer !important;\n                                pointer-events: auto !important;\n                                opacity: .6;\n                            }\n                        </style>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"fluid,compact\");\n                            addListButton(inEditor, \"Width\", list, \".dropdown\", \".item\");\n\n                            var list = new listOption(\"loading,error,active,disabled\");\n                            addListButton(inEditor, \"States\", list, \".dropdown\");\n\n                            addClassButton(inEditor, \"Drop on Hover\", \"simple\", \"select\");\n\n                            addClassButton(inEditor, \"Searchable\", \"search\", \".dropdown\");\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"addIDtoSelect\">\n                        <script>\n                            var i = uniqueID(\"select-\");\n                            var elm = designFrame.find(\".newDropDown\").attr(\"id\", \"select-\" + i);\n                            designFrame.find(\".newDropDown\").removeClass(\"newDropDown\");\n                        </script>\n                    </div>\n                </div> \n                <div class=\"component\" title=\"Multiple Selection\" id=\"multipleSelection\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Multiple_Selection.png\">\n                    <div class=\"html-content\"><select multiple=\"multiple\" class=\"ui fluid multiple selection dropdown newDropDown\"><option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option><option value=\"4\">4</option><option value=\"5\">5</option></select></div>\n                    <div class=\"afterDropCopy\" title=\"addIDtoSelect\"></div>\n                    <div class=\"runOnLoad\">\n                        <style>\n                            .ui.multiple.dropdown option{\n                                color: rgba(0,0,0,0);\n                            }\n                        </style>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Dropdown Search Selection\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Dropdown_Search_Selection.png\">\n                    <div class=\"html-content\"><select class=\"ui search dropdown selection newDropDown\"><option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option><option value=\"4\">4</option><option value=\"5\">5</option></select></div>\n                    <div class=\"afterDropCopy\" title=\"addIDtoSelect\"></div>\n                </div>\n                <div class=\"component\" title=\"Multiple Search Selection\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Multiple_Search_Selection.png\">\n                    <div class=\"html-content\"><select multiple=\"multiple\" class=\"ui fluid search multiple selection dropdown newDropDown\"><option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option><option value=\"4\">4</option><option value=\"5\">5</option></select></div>\n                    <div class=\"afterDropCopy\" title=\"addIDtoSelect\"></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Dropdown Menu\"></div>\n            <div class=\"component-group\">\n                <div class=\"component\" title=\"Simple Dropdown\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Simple_Dropdown.png\">\n                    <div class=\"html-content\"><div class=\"ui dropdown\"><div class=\"text\">Dropdown</div><i class=\"dropdown icon\"></i><div class=\"menu\"><div class=\"item\"><span class=\"description\">info</span>Menu Text</div><div class=\"item\"><span class=\"description\">info</span>Menu Text</div><div class=\"item\"><span class=\"description\">info</span>Menu Text</div><div class=\"divider\"></div><div class=\"item\"><img class=\"ui avatar image\" src=\"https://editor.bragndrop.com/assets/images/male.jpg\">Menu Text</div></div></div></div>\n                    <div class=\"runOnLoad\">\n                        <script>\n                            tagReName(\"Dropdown\", \".ui.dropdown:not(select)\");\n\n                            designSetting(\"notDraggable\", \".dropdown > .menu\");\n                            designSetting(\"noCopy\", \".dropdown > .menu\");\n                            designSetting(\"noRemove\", \".dropdown > .menu\");\n                            designSetting(\"isAbsolutePosition\", \".dropdown > .menu\");\n\n                            hideClassFromPropInspector(\"drop-down-active\", false);\n                            hideClassFromPropInspector(\"sub-menu\", true);\n                        </script>\n                        <style>\n\n                            .sub-menu > .left.menu{\n                                display: none !important;\n                            }\n\n                            .drop-down-active.dropdown > .menu, .drop-down-active.item > .menu{\n                                display: block !important;\n                                z-index: 2010 !important;\n                            }\n\n                            .ui.dropdown .menu:empty {\n                                width: 160px;\n                                height: 170px;\n                            }\n\n                            .drop-down-active.dropdown > .menu > .item:empty, .drop-down-active.item > .menu > .item:empty{\n                                width: 100%;\n                            }\n\n                            .ui.dropdown > .menu > .divider, .drop-down-active.item > .menu > .divider{\n                                height: 14px;\n                                margin: 0px;\n                                background-color: transparent;\n                                border-top: 0px !important;\n                                min-width: 80px;\n                            }\n                            .ui.dropdown > .menu > .divider:before, .drop-down-active.item > .menu > .divider:before{\n                                border-top: 1px solid rgba(34,36,38,.1);\n                                display: block;\n                                height: 1px; \n                                content: \" \";\n                                width: 100%;\n                                position: absolute !important;\n                                top: 7px !important;\n                                margin: 0px;\n                            }\n                            .ui.dropdown > .menu > .divider:empty, .drop-down-active.item > .menu > .divider:empty{\n                                padding: 0px !important;\n                                background:none !important;\n                                outline: none;\n                                -webkit-box-shadow: none !important;\n                                -moz-box-shadow: none !important;\n                                box-shadow: none !important; \n                            }\n                        </style>\n                    </div>\n                    <div class=\"eventSnippet\">\n                        <script>\n                            eventSnippet['semanticDropdown'] = '$(\"?????\").dropdown({\\n        // on: \"hover\",\\n        // useLabels: false,\\n        // maxSelections: 3,\\n        // allowAdditions: true,\\n        // apiSettings: {\\n        //     url: \"\"\\n        // }\\n    });';\n                            eventSnippet['semanticDropdownCheck'] = '$(\"?????\").dropdown(';\n                        </script>\n                    </div>\n                    <div class=\"addJStoFinal\" data-check=\".ui.dropdown, .mega-menu[data-html*='dropdown']\">\n                        <script>\n                            $(function () {\n                                $('.ui.dropdown').dropdown();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addCustomButton(inEditor, \"semanticDropdownSetup\", \"Dropdown Setup Code\", \"\", \"\", \".dropdown\", \"\", \"#2196f3\");\n\n                            inEditor.find(\"#semanticDropdownSetup\").click(function (event) {\n\n                                var elm = selectedElement();\n\n                                if (attrExist(elm, \"id\") != \"\") {\n                                    var qry = \"#\" + elm.attr(\"id\");\n                                }else{\n                                    var qry = \".ui.dropdown\";\n                                }\n\n                                goToSourceCode();\n                                handleEvent({\n                                    useSnippet:'semanticDropdown',\n                                    snippetParameters: [qry]\n                                });\n                                event.stopPropagation();\n                            });\n\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n                            var list = new listOption(\"floating,left pointing,right pointing,top left pointing,top right pointing,bottom right pointing,bottom left pointing\");\n                            list.altCaption = {\"floating\": \"floating\",\"left pointing\": \"right\",\"right pointing\": \"left\",\"top left pointing\": \"bottom right\",\"top right pointing\": \"bottom left\",\"bottom left pointing\": \"top right\",\"bottom right pointing\": \"top left\"};\n                            addListButton(inEditor, \"Menu Direction\", list, \".ui.dropdown\", \"select\");\n\n\n                            addClassButton(inEditor, \"Scrolling\", \"scrolling\", \".ui.dropdown\", \"select\");\n\n                            addClassButton(inEditor, \"Inline\", \"inline\", \".ui.dropdown\", \".item, select\");\n                        </script>\n                    </div>\n                    <div class=\"addButtons\">\n                        <script>\n\n                            addClassButton(inEditor, \"Left Menu\", \"left\", \".sub-menu\", \"\", 'selectedElement().children(\".menu, .dropdown.icon\")');\n\n                            addCustomButton(inEditor, \"dropdownSubMenu\", \"Add Sub Menu\", \"\", \"\", \".dropdown > .menu > .item, .sub-menu > .menu > .item\");\n\n                            inEditor.find(\"#dropdownSubMenu\").click(function (event) {\n                                var elm = selectedElement();\n\n                                var code = '<div class=\"newStuff\"><div class=\"item sub-menu\"><i class=\"dropdown icon\"></i><span class=\"text\">Sub Menu</span><div class=\"menu\"><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"divider\"></div><div class=\"item\">Menu Text</div></div></div></div>';\n\n                                elm.after(code);\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n                                designWindow().startDropdown();\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"dropdownAddItem\", \"Add Item\", \"\", \"\", \".dropdown > .menu, .dropdown > .menu > .item\");\n\n                            inEditor.find(\"#dropdownAddItem\").click(function (event) {\n                                var elm = selectedElement();\n\n                                var code = '<div class=\"newStuff\"><div class=\"item\"><span class=\"description\">info</span>Menu Text</div></div>';\n\n                                if (elm.hasClass(\"menu\")){\n                                    elm.append(code);\n                                }else{\n                                    elm.after(code);\n                                }\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"dropdownAddLink\", \"Add Link\", \"\", \"\", \".dropdown > .menu, .dropdown > .menu > .item\");\n\n                            inEditor.find(\"#dropdownAddLink\").click(function (event) {\n                                var elm = selectedElement();\n\n                                var code = '<div class=\"newStuff\"><a class=\"item\"><span class=\"description\">info</span>Menu Text</a></div>';\n\n                                if (elm.hasClass(\"menu\")){\n                                    elm.append(code);\n                                }else{\n                                    elm.after(code);\n                                }\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"dropdownAddHeader\", \"Add Header\", \"\", \"\", \".dropdown > .menu, .dropdown > .menu > .item\");\n\n                            inEditor.find(\"#dropdownAddHeader\").click(function (event) {\n                                var elm = selectedElement();\n\n                                var code = '<div class=\"newStuff\"><div class=\"header\"><i class=\"tags icon\"></i>Header</div></div>';\n\n                                if (elm.hasClass(\"menu\")){\n                                    elm.append(code);\n                                }else{\n                                    elm.after(code);\n                                }\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n\n                                event.stopPropagation();\n                            });\n\n                            addCustomButton(inEditor, \"dropdownAddDivider\", \"Add Divider\", \"\", \"\", \".dropdown > .menu, .dropdown > .menu > .item, .sub-menu > .menu > .item\");\n\n                            inEditor.find(\"#dropdownAddDivider\").click(function (event) {\n                                var elm = selectedElement();\n\n                                var code = '<div class=\"newStuff\"><div class=\"divider\"></div></div>';\n\n                                if (elm.hasClass(\"menu\")){\n                                    elm.append(code);\n                                }else{\n                                    elm.after(code);\n                                }\n\n                                runUndoAddNew(false);\n                                var ifram = editFrameContent();\n                                finishNewElem(ifram, true, true);\n\n                                event.stopPropagation();\n                            });\n                        </script>\n                    </div>\n                    <div class=\"beforeUnHide\">\n                        <script>\n                            //close all dropdowns before executing undo\n                            editFrameContent().find(\".drop-down-active\").removeClass(\"drop-down-active\");\n                        </script>\n                    </div>\n                    <div class=\"afterUnHide\">\n                        <script>\n                            //when we run the undo/redo command we need to open the dropdown menu which holds the edited item\n                            //visibleElm is visible element\n\n                            if (visibleElm.closest(\".ui.dropdown\").length > 0){\n                                if (visibleElm.closest(\".menu\").length > 0){\n                                    visibleElm.closest(\".ui.dropdown\").addClass(\"drop-down-active\");\n\n                                    visibleElm.closest(\".sub-menu\").addClass(\"drop-down-active\");\n\n                                    var subMenus = visibleElm.closest(\".sub-menu\");\n\n                                    while (subMenus.length != 0) {\n                                        subMenus = subMenus.parent().closest('.sub-menu');\n                                        subMenus.addClass(\"drop-down-active\");\n                                    }\n\n                                }\n                            }\n                        </script>\n                    </div>\n                    <div class=\"afterDrop\" id=\"startDropdown\">\n                        <script>\n                            designWindow().startDropdown();\n                        </script>\n                    </div>\n                </div>\n                <div class=\"component\" title=\"Button Dropdown\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Button_Dropdown.png\">\n                    <div class=\"html-content\"><div class=\"ui dropdown button\"><span class=\"text\">Button</span><i class=\"dropdown icon\"></i><div class=\"menu\"><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"divider\"></div><div class=\"item\">Menu Text</div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"startDropdown\"></div>\n                </div>\n                <div class=\"component\" title=\"Combo Dropdown\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Combo_Dropdown.png\">\n                    <div class=\"html-content\"><div class=\"ui teal buttons\"><div class=\"ui button\">Save</div><div class=\"ui combo dropdown icon button\"><i class=\"dropdown icon\"></i><div class=\"menu\"><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"divider\"></div><div class=\"item\">Menu Text</div></div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"startDropdown\"></div>\n                </div>\n                <div class=\"component\" title=\"Icon Button Dropdown\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Icon_Button_Dropdown.png\">\n                    <div class=\"html-content\"><div class=\"ui icon top left pointing dropdown button\"><i class=\"wrench icon\"></i><div class=\"menu\"><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"item\">Menu Text</div><div class=\"divider\"></div><div class=\"item\">Menu Text</div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"startDropdown\"></div>\n                </div>\n                <div class=\"component\" title=\"Search Dropdown\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Search_Dropdown.png\">\n                    <div class=\"html-content\"><div class=\"ui floating dropdown labeled search icon button\"><i class=\"world icon\"></i><span class=\"text\">Select Language</span><div class=\"menu\"><div class=\"item\">Arabic</div><div class=\"item\">Chinese</div><div class=\"item\">Danish</div><div class=\"item\">Dutch</div><div class=\"item\">English</div><div class=\"item\">French</div><div class=\"item\">German</div><div class=\"item\">Greek</div><div class=\"item\">Hungarian</div><div class=\"item\">Italian</div><div class=\"item\">Japanese</div><div class=\"item\">Korean</div><div class=\"item\">Lithuanian</div><div class=\"item\">Persian</div><div class=\"item\">Polish</div><div class=\"item\">Portuguese</div><div class=\"item\">Russian</div><div class=\"item\">Spanish</div><div class=\"item\">Swedish</div><div class=\"item\">Turkish</div><div class=\"item\">Vietnamese</div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"startDropdown\"></div>\n                </div>\n                <div class=\"component\" title=\"Search In-Menu\" data-alias=\"dropdown\" data-thumbnail=\"https://editor.bragndrop.com/assets/js/framework/thumbnails/semanticui2/Search_In_Menu.png\">\n                    <div class=\"html-content\"><div class=\"ui floating labeled icon dropdown button\"><i class=\"filter icon\"></i><span class=\"text\">Filter</span><div class=\"menu\"><div class=\"header\">Search Issues</div><div class=\"ui input icon\"><input type=\"text\" placeholder=\"Search...\" value=\"\"><i class=\"icon search\"></i></div><div class=\"header\"><i class=\"tags icon\"></i>Filter by tag</div><div class=\"divider\"></div><div class=\"item\"><div class=\"ui red empty circular label\"></div>Important</div><div class=\"item\"><div class=\"ui blue empty circular label\"></div>Announcement</div><div class=\"item\"><div class=\"ui black empty circular label\"></div>Discussion</div></div></div></div>\n                    <div class=\"afterDropCopy\" title=\"startDropdown\"></div>\n                </div>\n            </div>\n            <div class=\"component divider\" title=\"Search with Autocomplete\"></div>\n            <div class=\"component-group\">\n                <div class=\"copyComponent\" title=\"StandardSearch\"></div>\n                <div class=\"copyComponent\" title=\"RightIconSearch\"></div>\n                <div class=\"copyComponent\" title=\"LeftIconSearch\"></div>\n            </div>\n        </div>\n        <div class=\"globalOptions\">\n            <div title=\"Form Properties\">\n                <div class=\"runOnLoad\">\n                    <script>\n                        tagReName(\"Form\", \".form\");\n                        tagReName(\"Row\", \".form-row\");\n\n                        hideClassFromPropInspector(\"form-row\", true);\n\n                        designSetting(\"notDraggable\", \".fields\");\n                    </script>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n                        addCustomButton(inEditor, \"addFormRow\", \"Add New Row\", \"\", \"\", \".ui.form, .ui.form *\", \".reply.form, .reply.form *\");\n\n                        inEditor.find(\"#addFormRow\").click(function (event) {\n                            var elm = selectedElement();\n                            var inline = \"\";\n\n                            if (elm.hasClass(\"form\")) {\n\n                                if (elm.children(\".form-row\").last().hasClass(\"inline\")){\n                                    inline = \"inline \";\n                                }\n                                elm.append(\"<div class='newStuff'><div class='\" + inline + \"fields form-row'></div></div>\");\n                            }else{\n                                var selRow = elm.closest(\".form-row\");\n                                if (selRow.hasClass(\"inline\")){\n                                    inline = \"inline \";\n                                }\n                                selRow.after(\"<div class='newStuff'><div class='\" + inline + \"fields form-row'></div></div>\");\n                            }\n\n                            runUndoAddNew(false);\n                            var ifram = editFrameContent();\n                            finishNewElem(ifram, true, true);\n\n                            event.stopPropagation();\n                        });\n                    </script>\n                </div>\n                <div class=\"addButtons\">\n                    <script>\n                        addClassButton(inEditor, \"Equal Width\", \"equal width\", \".ui.form, .form-row\");\n\n                        var list = new listOption(\"loading,success,error,warning\");\n                        addListButton(inEditor, \"States\", list, \".ui.form\");\n                    </script>\n                </div>\n                <div class=\"whenDrag\">\n                    <script>\n                        if (elmDrag.is(\".ui.form\")) {\n                            if (elmDrop.closest(\".ui.form\").length > 0) {\n                                if (elmDrop.is(\".ui.form\")) {\n                                    isOut = true;\n                                }else{\n                                    finalShow = false;\n                                }\n                            }\n                        }\n                    </script>\n                </div>\n            </div>\n            <div class=\"runOnLoad\">\n                <style>\n                    .one.wide:empty:before {\n                        content: \"1 Wide\";\n                    }\n                    .two.wide:empty:before {\n                        content: \"2 Wide\";\n                    }\n                    .three.wide:empty:before {\n                        content: \"3 Wide\";\n                    }\n                    .four.wide:empty:before {\n                        content: \"4 Wide\";\n                    }\n                    .five.wide:empty:before {\n                        content: \"5 Wide\";\n                    }\n                    .six.wide:empty:before {\n                        content: \"6 Wide\";\n                    }\n                    .seven.wide:empty:before {\n                        content: \"7 Wide\";\n                    }\n                    .eight.wide:empty:before {\n                        content: \"8 Wide\";\n                    }\n                    .nine.wide:empty:before {\n                        content: \"9 Wide\";\n                    }\n                    .ten.wide:empty:before {\n                        content: \"10 Wide\";\n                    }\n                    .eleven.wide:empty:before {\n                        content: \"11 Wide\";\n                    }\n                    .twelve.wide:empty:before {\n                        content: \"12 Wide\";\n                    }\n                    .thirteen.wide:empty:before {\n                        content: \"13 Wide\";\n                    }\n                    .fourteen.wide:empty:before {\n                        content: \"14 Wide\";\n                    }\n                    .fifteen.wide:empty:before {\n                        content: \"15 Wide\";\n                    }\n                    .sixteen.wide:empty:before {\n                        content: \"16 Wide\";\n                    }\n                </style>\n            </div>\n            <div class=\"deviceTypeSelectorControl\"><div class=\"form-group\"><label class=\"control-label\">Device Type:</label><select class=\"form-control deviceTypeSelector\"><option value=\"widescreen\">Widescreen</option><option value=\"large screen\" selected>Large Screen</option><option value=\"computer\">Desktop</option><option value=\"tablet\">Tablet</option><option value=\"mobile\">Mobile</option></select></div></div>\n            <div class=\"afterCopy\">\n                <script>\n                    designWindow().runAllFunctions();\n                </script>\n            </div>\n        </div>\n    </div>","include_files":"https://editor.bragndrop.com/assets/js/addOn/meta-settings.js\nhttps://editor.bragndrop.com/assets/js/addOn/html-rules.js\nhttps://editor.bragndrop.com/assets/js/addOn/angular-js.js\nhttps://editor.bragndrop.com/assets/js/addOn/style-edit.js\nhttps://editor.bragndrop.com/assets/js/addOn/google-font-picker.js\nhttps://editor.bragndrop.com/assets/js/addOn/hidden-content.js\nhttps://editor.bragndrop.com/assets/js/addOn/table-edit.js\nhttps://editor.bragndrop.com/assets/js/addOn/jquery-event-handler.js\nhttps://editor.bragndrop.com/assets/js/addOn/manifest.js\nhttps://editor.bragndrop.com/assets/js/addOn/safari-settings.js\nhttps://editor.bragndrop.com/assets/js/addOn/windows-tiles.js\nhttps://editor.bragndrop.com/assets/js/addOn/service-worker.js","property_inspector":"<div class=\"addAttributes\">\n    <script>\n        toggleClassAttribute(\"Basic\", \"no\", [{\"label\": \"Basic\", \"data\": {\"\": \"no\", \"basic\": \"yes\"}}], \"*\", \".ag-text, .ag-text-edit\");\n\n        toggleClassAttribute(\"Color\", \"edit\", [{\"label\": \"Color\", \"data\": {\"\": \"none\", \"red\": \"#DB2828\", \"orange\": \"#F2711C\", \"yellow\": \"#FBBD08\", \"olive\": \"#B5CC18\", \"green\": \"#21BA45\", \"teal\": \"#00B5AD\", \"blue\": \"#2185D0\", \"violet\": \"#6435C9\", \"purple\": \"#A333C8\", \"pink\": \"#E03997\", \"brown\": \"#A5673F\", \"grey\": \"#767676\", \"black\": \"#1B1C1D\"}}], \"*\", \".ag-text, .ag-text-edit, img\");\n\n        toggleClassAttribute(\"Color Inverted\", \"no\", [{\"data\": {\"\": \"no\", \"inverted\": \"yes\"}}], \"*\", \".ag-text, .ag-text-edit\");\n\n        toggleClassAttribute(\"Floated\", \"edit\", [{\"label\": \"Floated\", \"data\": {\"\": \"none\", \"left floated\": \"left\", \"right floated\": \"right\"}}], \"*\", \"body, .ag-text, .ag-text-edit\");\n\n        toggleClassAttribute(\"Fluid\", \"no\", [{\"data\": {\"\": \"no\", \"fluid\": \"yes\"}}], \"*\", \"body, .ag-text, .ag-text-edit\");\n\n        toggleClassAttribute(\"Hor-Alignment\", \"edit\", [{\"label\": \"Horizontal alignment\", \"data\": {\"\": \"none\", \"left aligned\": \"left\", \"center aligned\": \"center\", \"right aligned\": \"right\", \"justified\": \"justified\"}}], \"*\", \"body, .ag-text, .ag-text-edit\");\n\n        toggleClassAttribute(\"Size\", \"edit\", [{\"label\": \"Size\", \"data\": {\"\": \"none\", \"mini\": \"mini\", \"tiny\": \"tiny\", \"small\": \"small\", \"medium\": \"medium\", \"large\": \"large\", \"big\": \"big\", \"huge\": \"huge\", \"massive\": \"massive\"}}], \"*\", \".ag-text, .ag-text-edit\");\n\n        toggleClassAttribute(\"Ver-Alignment\", \"edit\", [{\"label\": \"Vertical alignment\", \"data\": {\"\": \"none\", \"top aligned\": \"top\", \"middle aligned\": \"middle\", \"bottom aligned\": \"bottom\"}}], \"*\", \"body, .ag-text, .ag-text-edit\");\n    </script>\n</div>\n<div class=\"eventSnippet\">\n    <script>\n        eventSnippet['semanticPopup'] = '$(\"?????\").popup({\\n        // position: \"top left\",\\n        // on: \"focus\",\\n        // hoverable: true,\\n        // closable: true,\\n        // variation: \"huge inverted\" // [mini, tiny, small, large, huge] [inverted]\\n    });';\n        eventSnippet['semanticPopupCheck'] = '$(\"?????\").popup(';\n    </script>\n</div>\n<div class=\"onAttributeSelected\" title=\"popup\">\n    <div id=\"popupBox\">\n        <form>\n            <div class=\"form-group\">\n                <div class=\"popover top\" id=\"popupDemo\" style=\"position: relative; display: block; max-width: 100%; font-family: 'Open Sans', sans-serif !important;\">\n                    <div class=\"arrow\"></div>\n                    <div class=\"popover-content\">\n                        <textarea id=\"popupHTMLContent\" placeholder=\"HTML Code\" title=\"Content\" style=\"resize: none; width:100%; height: 120px; border: 1px dotted #cecece; font-size: 13px;\"></textarea>\n                    </div>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <label for=\"popupType\" class=\"control-label\">Type:</label>\n                <select class=\"form-control\" id=\"popupType\">\n                    <option value=\"\" selected=\"selected\">default</option>\n                    <option value=\"basic\">basic</option>\n                    <option value=\"wide\">wide</option>\n                    <option value=\"very wide\">very wide</option>\n                    <option value=\"flowing\">flowing</option>\n                    <option value=\"fluid\">fluid</option>\n                </select>\n            </div>\n            <div class=\"form-group clearfix\">\n                <button class=\"btn btn-primary btn-block\" style=\"margin-top: 20px;\" id=\"updatePopup\" type=\"button\">Update</button>\n            </div>\n            <div class=\"form-group clearfix\" style=\"border-top: 1px solid #d0d0d0; padding-top: 12px; margin-top: 21px;\">\n                <div class=\"pull-right\"><button class=\"btn btn-link btn-xs\" id=\"popupSetupCode\" type=\"button\">Popup Setup Code</button></div>\n            </div>\n        </form>\n        <style>\n            .ui-dark-theme #popupDemo {\n              background-color: #424242;\n            }\n            .ui-dark-theme .popover.top>.arrow:after {\n                border-top-color: #424242;\n            }\n            #popupSetupCode{\n            \tborder-bottom: 1px dotted #000000; \n                color: #000000; \n                background-color: #ffffff !important;\n            }\n            .ui-dark-theme #popupSetupCode {\n              border-bottom: 1px dotted #5c5c5f !important;\n              color: #cccccc !important;\n              background-color: #252526 !important;\n            }\n            .ui-dark-theme #popup-option .form-group.clearfix {\n              border-top-color: #1f1f1f !important;\n            }\n        </style>\n    </div>\n    <script>\n        // build \"popup-option\", if it's not already made:\n        if ($(\"#popup-option\").length == 0) {\n            var propBody = controlLayout.find(\"#popupBox\").html();\n            var popupOption = buildCustomProp(\"#popup-option\", propBody);\n\n            popupOption.find(\"#updatePopup\").click(function (event) {\n                var elm = selectedElement();\n                var popupChange = false;\n\n                var oldAttributesExist = {\n                    \"data-html\": elm.is(\"[data-html]\"),\n                    \"data-variation\": elm.is(\"[data-variation]\")\n                }\n\n                var oldAttributesValue = {\n                    \"data-html\": elm.attr(\"data-html\"),\n                    \"data-variation\": elm.attr(\"data-variation\")\n                }\n\n\n                var popupHTMLContent = popupOption.find(\"#popupHTMLContent\").val().replace(/[\"]+/g, \"'\");;\n                if (attrExist(elm, \"data-html\") != popupHTMLContent){\n                    popupChange = true;\n                    elm.attr(\"data-html\", popupHTMLContent);\n                }\n\n                var popupType = \"\";\n                var setPopupType = false;\n                if (popupOption.find(\"#popupType option:selected\").length == 1) {\n                    popupType = popupOption.find(\"#popupType\").val();\n                    if (attrExist(elm, \"data-variation\") != popupType){\n                        popupChange = true;\n                    }\n                    if (popupType == \"\"){\n                        elm.removeAttr(\"data-variation\");\n                    }else{\n                        elm.attr(\"data-variation\", popupType);\n                    }\n                    setPopupType = true;\n                }\n\n                setTimeout(function(){ \n                    focusElement(elm);\n                }, 100);\n\n                if (popupChange == true){\n                    undoManager.add({\n                        undo: function () {\n                            eastPanelShowContent(\"#popup-option\");\n\n                            if (oldAttributesExist[\"data-html\"] == true){\n                                elm.attr(\"data-html\", oldAttributesValue[\"data-html\"]);\n                                popupOption.find(\"#popupHTMLContent\").val(oldAttributesValue[\"data-html\"]);\n                            }else{\n                                elm.removeAttr(\"data-html\");\n                                popupOption.find(\"#popupHTMLContent\").val(\"\");\n                            }\n\n                            if (oldAttributesExist[\"data-variation\"] == true){\n                                if (oldAttributesValue[\"data-variation\"] == \"\"){\n                                    elm.removeAttr(\"data-variation\");\n                                }else{\n                                    elm.attr(\"data-variation\", oldAttributesValue[\"data-variation\"]);\n                                }\n                                popupOption.find(\"#popupType\").val(oldAttributesValue[\"data-variation\"]);\n                            }else{\n                                elm.removeAttr(\"data-variation\");\n                                popupOption.find(\"#popupType\").val(\"\");\n                            }\n\n                            showIfHidden(elm);\n                            resetBreadcrumbAndProps(elm, false, true);\n\n                        },\n                        redo: function () {\n                            eastPanelShowContent(\"#popup-option\");\n\n                            elm.attr(\"data-html\", popupHTMLContent);\n                            popupOption.find(\"#popupHTMLContent\").val(popupHTMLContent);\n\n                            if (setPopupType == true){\n                                if (popupType == \"\"){\n                                    elm.removeAttr(\"data-variation\");\n                                }else{\n                                    elm.attr(\"data-variation\", popupType);\n                                }\n                                popupOption.find(\"#popupType\").val(popupType);\n                            }\n\n                            showIfHidden(elm);\n                            resetBreadcrumbAndProps(elm, false, true);\n\n                        }\n                    });\n\n                    undoRedoStatus();\n                }\n\n                event.stopPropagation();\n            });\n\n            popupOption.find(\"#popupSetupCode\").click(function (event) {\n\n                popupOption.find(\"#updatePopup\").click();\n\n                var elm = selectedElement();\n\n                if (attrExist(elm, \"id\") != \"\") {\n                    var qry = \"#\" + elm.attr(\"id\");\n                }else{\n                    var qry = \"[data-html]\";\n                }\n\n                goToSourceCode();\n                handleEvent({\n                    useSnippet:'semanticPopup',\n                    snippetParameters: [qry]\n                });\n                event.stopPropagation();\n            });\n\n        }\n\n        $(\"#popup\").click(function (event) {\n            var elm = selectedElement();\n            var popupOption = $(\"#popup-option\");\n\n            var popupHTMLContent = attrExist(elm, \"data-html\");\n            popupOption.find(\"#popupHTMLContent\").val(popupHTMLContent);\n\n            var popupType = attrExist(elm, \"data-variation\");\n            popupOption.find(\"#popupType\").val(popupType);\n\n            eastPanelShowContent(\"#popup-option\");\n            $(\"#popup-option\").find(\"#popupHTMLContent\").focus();\n\n            event.stopPropagation();\n        });\n    </script>\n</div>\n<div class=\"addJStoFinal\" data-check=\"[data-html]:not('.mega-menu')\">\n    <script>\n        $(function () {\n            $(\"[data-html]:not('.mega-menu')\").popup();\n        });\n    </script>\n</div>\n<div class=\"addAttributes\">\n    <script>\n        addAttribute(\"popup\", \"Popup\", \"change\", true);\n    </script>\n</div>\n<div class=\"showAttributes\">\n    <script>\n        showAttribute(inEditor, \"#popup\", \"*\", \"body, .ag-text, .ag-text-edit\");\n    </script>\n</div>\n<div class=\"onAttributeSelected\" title=\"tooltip\">\n    <div id=\"tooltipBox\">\n        <form>\n            <div class=\"form-group\">\n                <style>\n                    #tooltipDemo.tooltip.top.left, #tooltipDemo.tooltip.top.right {\n                        padding: 5px 0 !important;\n                        margin-top: -3px !important;\n                        margin-left: 0px !important;\n                    }\n                    #tooltipDemo.tooltip.top.left .tooltip-arrow, #tooltipDemo.tooltip.top.right .tooltip-arrow {\n                        border-top-color: #3399ff !important;\n                        top: 100% !important;\n                        bottom: 0 !important;\n                        margin-left: -5px !important;\n                        border-width: 5px 5px 0 !important;\n                    }\n                    #tooltipDemo.tooltip.top.left .tooltip-arrow {\n                        left: 20% !important;\n                        border-left-color: transparent !important;\n                    }\n                    #tooltipDemo.tooltip.top.right .tooltip-arrow {\n                        left: 80% !important;\n                        border-right-color: transparent !important;\n                    }\n\n                    #tooltipDemo.tooltip.bottom.left, #tooltipDemo.tooltip.bottom.right {\n                        padding: 5px 0 !important;\n                        margin-top: 3px !important;\n                        margin-left: 0px !important;\n                    }\n                    #tooltipDemo.tooltip.bottom.left .tooltip-arrow, #tooltipDemo.tooltip.bottom.right .tooltip-arrow { \n                        border-bottom-color: #3399ff !important;\n                        top: 0 !important;\n                        left: 50% !important;\n                        margin-top: 0px !important;\n                        margin-left: -5px !important;\n                        border-width: 0 5px 5px !important;\n                    }\n\n                    #tooltipDemo.tooltip.bottom.left .tooltip-arrow {\n                        left: 20% !important;\n                        border-left-color: transparent !important;\n                    }\n                    #tooltipDemo.tooltip.bottom.right .tooltip-arrow {\n                        left: 80% !important;\n                        border-right-color: transparent !important;\n                    }\n                </style>\n                <div class=\"tooltip top\" id=\"tooltipDemo\" role=\"tooltip\" style=\"position: relative !important; opacity: 1 !important;\">\n                    <div class=\"tooltip-arrow\"></div>\n                    <div class=\"tooltip-inner\" style=\"width: 100%; max-width: initial !important;\">\n                        <input type=\"text\" class=\"form-control\" id=\"tooltipText\" value=\"\" style=\"background-color: #4ba5ff; color: #ffffff; border: 1px dotted #0061c1; margin: 5px 0px 5px 0px; text-overflow: ellipsis;\">\n                        <div style=\"width: 100%; height: 24px; padding: 0px; margin: 15px 0px 5px 0px;\">\n                            <div class=\"pull-right\">\n                                <label class=\"checkbox-inline\">\n                                    <input type=\"checkbox\" value=\"\" id=\"tooltipInvert\"><span>Invert</span>\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <label for=\"tooltipPosition\" class=\"control-label\">Position:</label>\n                <select class=\"form-control\" id=\"tooltipPosition\">\n                    <option value=\"top left\" selected=\"selected\">top left</option>\n                    <option value=\"top center\">top center</option>\n                    <option value=\"top right\">top right</option>\n                    <option value=\"left center\">left center</option>\n                    <option value=\"bottom right\">bottom right</option>\n                    <option value=\"bottom center\">bottom center</option>\n                    <option value=\"bottom left\">bottom left</option>\n                    <option value=\"right center\">right center</option>\n                </select>\n            </div>\n            <div class=\"form-group clearfix\">\n                <button class=\"btn btn-primary btn-block\" style=\"margin-top: 20px;\" id=\"updateTooltip\" type=\"button\">Update</button>\n            </div>\n        </form>\n    </div>\n    <script>\n        // build \"tooltip-option\", if it's not already made:\n        if ($(\"#tooltip-option\").length == 0) {\n            var propBody = controlLayout.find(\"#tooltipBox\").html();\n            var tooltipOption = buildCustomProp(\"#tooltip-option\", propBody);\n\n            tooltipOption.find(\"#updateTooltip\").click(function (event) {\n                var elm = selectedElement();\n                var tooltipChange = false;\n\n                var oldAttributesExist = {\n                    \"data-tooltip\": elm.is(\"[data-tooltip]\"),\n                    \"data-inverted\": elm.is(\"[data-inverted]\"),\n                    \"data-position\": elm.is(\"[data-position]\")\n                }\n\n                var oldAttributesValue = {\n                    \"data-tooltip\": elm.attr(\"data-tooltip\"),\n                    \"data-inverted\": elm.attr(\"data-inverted\"),\n                    \"data-position\": elm.attr(\"data-position\")\n                }\n\n\n                var dataTooltip = tooltipOption.find(\"#tooltipText\").val().replace(/[\"]+/g, \"'\");\n                if (attrExist(elm, \"data-tooltip\") != dataTooltip){\n                    tooltipChange = true;\n                }\n                elm.attr(\"data-tooltip\", dataTooltip);\n\n                var tooltipInvert = tooltipOption.find(\"#tooltipInvert\").prop(\"checked\");\n                if (elm.is(\"[data-inverted]\") != tooltipInvert){\n                    tooltipChange = true;\n                    if (tooltipInvert == true) {\n                        elm.attr(\"data-inverted\", \"\");\n                    }else{\n                        elm.removeAttr(\"data-inverted\");\n                    }\n                }\n\n                var tooltipPosition = \"\";\n                var setTooltipPosition = false;\n                if (tooltipOption.find(\"#tooltipPosition option:selected\").length == 1) {\n                    tooltipPosition = tooltipOption.find(\"#tooltipPosition\").val();\n                    if (attrExist(elm, \"data-position\") != tooltipPosition){\n                        tooltipChange = true;\n                    }\n                    elm.attr(\"data-position\", tooltipPosition);\n                    setTooltipPosition = true;\n                }\n\n                setTimeout(function(){ \n                    focusElement(elm);\n                }, 100);\n\n                if (tooltipChange == true){\n                    undoManager.add({\n                        undo: function () {\n                            eastPanelShowContent(\"#tooltip-option\");\n\n                            if (oldAttributesExist[\"data-tooltip\"] == true){\n                                elm.attr(\"data-tooltip\", oldAttributesValue[\"data-tooltip\"]);\n                                tooltipOption.find(\"#tooltipText\").val(oldAttributesValue[\"data-tooltip\"]);\n                            }else{\n                                elm.removeAttr(\"data-tooltip\");\n                                tooltipOption.find(\"#tooltipText\").val(\"\");\n                            }\n\n                            if (oldAttributesExist[\"data-inverted\"] == true){\n                                elm.attr(\"data-inverted\", \"\");\n                                tooltipOption.find(\"#tooltipInvert\").prop(\"checked\", true);\n                            }else{\n                                elm.removeAttr(\"data-inverted\");\n                                tooltipOption.find(\"#tooltipInvert\").prop(\"checked\", false);\n                            }\n\n                            if (oldAttributesExist[\"data-position\"] == true){\n                                elm.attr(\"data-position\", oldAttributesValue[\"data-position\"]);\n                                tooltipOption.find(\"#tooltipPosition\").val(oldAttributesValue[\"data-position\"]);\n                            }else{\n                                elm.removeAttr(\"data-position\");\n                                tooltipOption.find(\"#tooltipPosition\").val(\"top left\");\n                            }\n\n                            showIfHidden(elm);\n                            resetBreadcrumbAndProps(elm, false, true);\n\n                        },\n                        redo: function () {\n                            eastPanelShowContent(\"#tooltip-option\");\n\n                            elm.attr(\"data-tooltip\", dataTooltip);\n                            tooltipOption.find(\"#tooltipText\").val(dataTooltip);\n\n                            if (tooltipInvert == true) {\n                                elm.attr(\"data-inverted\", \"\");\n                                tooltipOption.find(\"#tooltipInvert\").prop(\"checked\", true);\n                            }else{\n                                elm.removeAttr(\"data-inverted\");\n                                tooltipOption.find(\"#tooltipInvert\").prop(\"checked\", false);\n                            }\n\n                            if (setTooltipPosition == true){\n                                elm.attr(\"data-position\", tooltipPosition);\n                                tooltipOption.find(\"#tooltipPosition\").val(tooltipPosition);\n                            }\n\n                            showIfHidden(elm);\n                            resetBreadcrumbAndProps(elm, false, true);\n\n                        }\n                    });\n\n                    undoRedoStatus();\n                }\n\n                event.stopPropagation();\n            });\n\n            tooltipOption.find('#tooltipPosition').on('change', function() {\n                tooltipOption.find('#tooltipDemo').removeClass(\"top bottom left right center\").addClass($(this).val());\n            });\n\n        }\n\n        $(\"#tooltip\").click(function (event) {\n            var elm = selectedElement();\n            var tooltipOption = $(\"#tooltip-option\");\n\n            var dataTooltip = attrExist(elm, \"data-tooltip\");\n            tooltipOption.find(\"#tooltipText\").val(dataTooltip);\n\n\n            tooltipOption.find(\"#tooltipInvert\").prop(\"checked\", elm.is(\"[data-inverted]\"));\n\n            var tooltipPosition = attrExist(elm, \"data-position\");\n            if (tooltipPosition == \"\") {\n                tooltipPosition = \"top left\";\n            }\n            tooltipOption.find(\"#tooltipPosition\").val(tooltipPosition);\n            tooltipOption.find('#tooltipDemo').removeClass(\"top bottom left right center\").addClass(tooltipPosition);\n\n            eastPanelShowContent(\"#tooltip-option\");\n            $(\"#tooltip-option\").find(\"#tooltipText\").focus();\n\n            event.stopPropagation();\n        });\n    </script>\n</div>\n<div class=\"addAttributes\">\n    <script>\n        addAttribute(\"tooltip\", \"Tooltip\", \"change\", true);\n    </script>\n</div>\n<div class=\"showAttributes\">\n    <script>\n        showAttribute(inEditor, \"#tooltip\", \"*\", \"body, .ag-text, .ag-text-edit\");\n    </script>\n</div>\n<div class=\"globalOptions\">\n    <div class=\"runOnLoad\">\n        <style>\n            .floated, .floating, .top.attached, .bottom.attached, .right.attached, .left.attached{\n                z-index: 2000;\n            }\n        </style>\n    </div>\n</div>","blank_page":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta-temp charset=\"utf-8\" />\n        <meta-temp http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n        <meta-temp name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\"/>\n        <title></title>\n        <meta-temp name=\"description\" content=\"\"/>\n        <meta-temp name=\"keywords\" content=\"\"/>\n        <!--CSS BEFORE FRAMEWORK GOES HERE-->\n        <link id=\"mainFrameworkCSS\" href=\"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css\" rel=\"stylesheet\">\n        <!--CSS AFTER FRAMEWORK GOES HERE-->\n        <!--THEME GOES HERE-->\n    </head>\n    <body>\n        <script src=\"//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\"></script>\n        <script src=\"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.js\"></script>\n    </body>\n</html>","blank_page_no_framework":"<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta-temp charset=\"utf-8\"/>\n        <title></title>\n        <meta-temp name=\"description\" content=\"\"/>\n        <meta-temp name=\"keywords\" content=\"\"/>\n    </head>\n    <body>\n    </body>\n</html>","adding_new_files":"<div>\n    <div class=\"addFile\" data-type=\"SemanticUI2\" data-ext=\"html\" data-folder=\"site\"></div>\n    <div class=\"addFile\" data-type=\"JavaScript\" data-ext=\"js\" data-folder=\"site/JavaScript\" data-selected=\"selected\"></div>\n    <div class=\"addFile\" data-type=\"Style Sheet\" data-ext=\"css\" data-folder=\"site/CSS\"></div>\n</div>","frame_work_config":"<div>\n <div id=\"device_types\">\n <script>var viewportSizes = {\"devices\":[\n    {\"name\":\"Browser Width\", \"id\":\"browser_width\", \"selected\":\"yes\"},\n    {\"name\":\"Widescreen\", \"id\":\"wide_screen\", \"width\":\"1930px\"},\n    {\"name\":\"Large Screen\", \"id\":\"large_screen\", \"width\":\"1220px\"},\n    {\"name\":\"Desktop\", \"id\":\"desktop\", \"width\":\"1050px\"},\n    {\"name\":\"Tablet\", \"id\":\"tablet\", \"width\":\"771px\"},\n    {\"name\":\"Mobile\", \"id\":\"mobile\", \"width\":\"400px\"}\n]};</script>\n </div>\n \n <div id=\"onShowPreview\">\n <script>// Get all required argument from the Design View:\ngetArgument['selectedTheme'] = selectedTheme;\ngetArgument['styles'] = myPage[\"styles\"];\ngetArgument['body'] = myPage[\"body\"];\ngetArgument['cssAfterFramework'] = myPage[\"cssAfterFramework\"];\ngetArgument['cssBeforeFramework'] = myPage[\"cssBeforeFramework\"];\ngetArgument['scripts'] = myPage[\"scripts\"];\n\n\nrunInPreview['createPreviewPage'] = function createPreviewPage() {\n\n    // Set all Design arguments in the Preview IFrame\n    if (getArgument['selectedTheme'] != \"\"){\n        $(\"head\").append('<link href=\"' + getArgument['selectedTheme'] + '\" rel=\"stylesheet\">');\n    }\n\n    $(\"head\").append(getArgument['styles']);\n    $(\"body\").prop('outerHTML', getArgument['body']);\n\n    if (getArgument['cssAfterFramework'] != \"\"){\n        $(\"#mainFrameworkCSS\").after(getArgument['cssAfterFramework']);\n    }\n    if (getArgument['cssBeforeFramework'] != \"\"){\n        $(\"#mainFrameworkCSS\").before(getArgument['cssBeforeFramework']);\n    }\n\n    var s = getArgument['scripts'];\n    var jsHack = \"script\";\n\n    if (s != \"\") {\n        var script = '<' + jsHack + ' type=\"text/javascript\">' + s + '</' + jsHack + '>';\n        $(\"body\").append(script);\n    }\n\n};</script>\n </div>\n <div id=\"requiredFiles\">//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.css\n//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js</div>\n <div id=\"onShowSourceCode\">\n <script>// This will replace the outerHTML of <body></body> with myPage[\"body\"]:\ncode = code.replace(/\\<body[\\s\\S]*?\\>/i,function(a, m) { \n    var pos = myPage['body'].lastIndexOf('</body>');\n    return myPage['body'].substring(0, pos); \n});\n\n// This will convert all local image paths to relative\n// code = code.replace(/\\<img[\\s\\S]*?\\>/ig,function(a, m) { \n//     return a = a.replace(/src\\s*=\\s*\"(.+?)\"/ig,function(b, n) { \n//         // Use 'sitePath' to get the full path of the current Project\n//         if (b.indexOf(sitePath()) != -1){\n//             var relativePath = b.replace(sitePath() + \"/\", \"\"); \n//             return relativePath;\n//         }else{\n//             return b;\n//         }\n//     });\n// });\n\n// If a CSS Theme is used, then select it:\nif (selectedTheme != \"\"){\n    var themeTag = '<link href=\"'+selectedTheme+'\" rel=\"stylesheet\">';\n    code = code.replace(/<!--THEME GOES HERE-->/i, themeTag);\n}else{\n    code = code.replace(/<!--THEME GOES HERE-->/i, \"\");\n}\n\n// Remove the ID marker from the main Framework CSS <link>:\ncode = code.replace(/<link id=\"mainFrameworkCSS\" /i, \"<link \");\n\n// Add all CSS Links that need to go before the main Framework CSS Link:\ncode = code.replace(/<!--CSS BEFORE FRAMEWORK GOES HERE-->/i, myPage['cssBeforeFramework']);\n\n// Add all CSS Links that need to go after the main Framework CSS Link:\ncode = code.replace(/<!--CSS AFTER FRAMEWORK GOES HERE-->/i, myPage['cssAfterFramework']);\n\n\n// If the Design page contains any CSS or JavaScript code required for the \"Source Code\" or \"Preview\" page, then add it:\nif (myPage['styles'] != \"\"){\n    code = code.replace(/<\\/head>/i, \"\\n\" + myPage['styles'] + \"\\n</head>\");\n}\n\nif (myPage['scriptURL'] != \"\"){\n    code = code.replace(/<\\/body>/i,\"\\n\" + myPage['scriptURL'] + \"\\n</body>\"); \n}\n\nvar jsHack = \"script\";\nif (myPage['scripts'] != \"\"){\n    code = code.replace(/<\\/body>/i,\"\\n<\" + jsHack + \">\" + myPage['scripts'] + \"</\" + jsHack + \">\\n</body>\"); \n}\n\n</script>\n </div>\n  \n <div id=\"codeUsedForPublishing\">\n <script>var body = pageClone.find(\"body\").prop('outerHTML');\nmyPage[\"body\"] = body;\n\n// Find all components that require additional CSS styles\nvar reqCSS = \"\";\ncontrolLayout.find(\".requireCSS\").each(function () {\n    if (attrExist($(this), \"data-check\") == \"\") {\n        reqCSS = reqCSS + $(this).find(\"style\").text();\n    } else {\n        var checkCondition = $(this).attr(\"data-check\");\n        if (pageClone.find(checkCondition).length > 0) {\n            reqCSS = reqCSS + $(this).find(\"style\").text();\n        }\n    }\n});\nif (reqCSS != \"\") {\n    styles = styles + '<style type=\"text/css\">' + reqCSS + '</style>';\n}\n\nmyPage[\"styles\"] = styles;\n\n// Find all components that require CSS Links\nvar cssBeforeFramework = \"\";\nvar cssAfterFramework = \"\";\n\ncontrolLayout.find(\".requireCSSLink\").each(function () {\n    var cssLink = \"\";\n    // Check if the required CSS File is actually used\n    if (attrExist($(this), \"data-check\") == \"\") {\n        cssLink = $(this).html();\n    } else {\n        var checkCondition = $(this).attr(\"data-check\");\n        if (pageClone.find(checkCondition).length > 0) {\n            cssLink = $(this).html();\n        }\n    }\n    // You can prioritize the style settings by placing it before or after the Framework CSS file respectively\n    if (attrExist($(this), \"data-placeBeforeFramework\") == \"yes\") {\n        cssBeforeFramework = cssBeforeFramework + cssLink;\n    }else{\n        cssAfterFramework = cssAfterFramework + cssLink;\n    }\n});\n\nmyPage[\"cssBeforeFramework\"] = cssBeforeFramework;\nmyPage[\"cssAfterFramework\"] = cssAfterFramework;\n\n\n// Find all components that require additional JavaScript code\nvar scripts = \"\";\n\ncontrolLayout.find(\".addJStoFinalFirst\").each(function () {\n    if (attrExist($(this), \"data-check\") == \"\") {\n        scripts = scripts + $(this).find(\"script\").text();\n    } else {\n        var checkCondition = $(this).attr(\"data-check\");\n        if (pageClone.find(checkCondition).length > 0) {\n            scripts = scripts + $(this).find(\"script\").text();\n        }\n    }\n});\n\n\ncontrolLayout.find(\".addJStoFinal\").each(function () {\n    if (attrExist($(this), \"data-check\") == \"\") {\n        scripts = scripts + $(this).find(\"script\").text();\n    } else {\n        var checkCondition = $(this).attr(\"data-check\");\n        if (pageClone.find(checkCondition).length > 0) {\n            scripts = scripts + $(this).find(\"script\").text();\n        }\n    }\n});\n\nmyPage[\"scripts\"] = scripts;\n\n\n// Find all components that require JavaScript Links\nvar scriptURL = \"\";\nmyPage[\"scriptURL\"] = scriptURL;</script>\n </div>\n <div id=\"saveToDatabase\">\n <script>if (pageClone.find(\"#ag-themeToggle\").length > 0){\n    sendData['theme'] = pageClone.find(\"#ag-themeToggle\").attr(\"href\");\n}else{\n    sendData['theme'] = \"\";\n}\n\npageClone.find('*[style=\"position:relative;\"]').removeAttr(\"style\");\n\nvar body = pageClone.find(\"body\");\n\nif (body.attr(\"class\") == \"\") {\n    body.removeAttr(\"class\");\n}\n\nbody.find(\"*[class='']\").each(function () {\n    $(this).removeAttr(\"class\");\n});\n\nsendData['body'] = body.prop('outerHTML');\n\nsendData['used_addons'] = used_addons;</script>\n </div>\n <div id=\"getFromDatabase\">\n <script>if (typeof getData['theme'] !== \"undefined\"){\n    var cleanTheme = DOMPurify.sanitize(getData['theme'].toString());\n    if (cleanTheme != \"\") {\n        addSelectedTheme(cleanTheme);\n    }\n}\n\nif (typeof getData['body'] !== \"undefined\"){\n    var cleanBody = DOMPurify.sanitize(getData['body'].toString(), {SAFE_FOR_JQUERY: true, WHOLE_DOCUMENT: true, ADD_ATTR: allowed_attributes, ADD_TAGS: allowed_tags});\n    cleanBody = cleanBody.substring(19,cleanBody.length-7);\n    editFrameContent().find(\"body\").prop('outerHTML', cleanBody);\n}\n\nif (typeof getData['used_ScriptFiles'] !== \"undefined\"){\n    var cleanScriptFiles = DOMPurify.sanitize(getData['used_ScriptFiles'].toString(), {SAFE_FOR_JQUERY: true, ADD_ATTR: allowed_attributes, ADD_TAGS: allowed_tags});\n    used_ScriptFiles = cleanScriptFiles;\n}\n\nif (typeof getData['used_addons'] !== \"undefined\"){\n    var clean_used_addons = DOMPurify.sanitize(getData['used_addons'].toString());\n    used_addons = clean_used_addons;\n}\n\ndesignWindow().runAllFunctions();\n</script>\n </div>\n<div id=\"languageDefinitions\"><code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/jquery/index.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-site/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-accordion/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-checkbox/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-dimmer/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-dropdown/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-embed/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-modal/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-nag/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-popup/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-progress/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-rating/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-search/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-shape/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-sidebar/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-sticky/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-tab/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-transition/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-api/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-form/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code>\n<code data-url=\"https://editor.bragndrop.com/assets/js/definitions/v1/semantic-ui/semantic-ui-visibility/global.d.ts\" data-environment=\"javascript\" data-conditional=\"\"></code></div></div>","folder_layout":"<li>site\n    <ul>\n        <li id=\"1DK\">index.html</li>\n        <li>JavaScript\n            <ul>\n                <li id=\"1KE\">index_events.js</li>\n            </ul>\n        </li>\n    </ul>\n</li>","design_area":"<section id=\"designHead\">\n    <link id=\"frameworkCSSinDesign\" href=\"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css\" rel=\"stylesheet\">\n</section>\n\n<section id=\"designBody\">\n    <script>\n        $LAB\n        // Add, edit or remove your Framework Scripts from here:\n            .script(\"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.js\").wait(function () {\n\n            startAccordion = function() {\n                $('.accordion').each(function () {\n                    if (typeof this.isAccordionStarted === 'undefined') {\n                        this.isAccordionStarted = true;\n                        $(this).on( \"click\", \"> .title\", function() {\n                            var accActive = $(this).hasClass(\"active\");\n                            $(this).parent().children().removeClass(\"active\");\n                            if (accActive == true) {\n                                $(this).removeClass(\"active\");\n                                $(this).next().removeClass(\"active\");\n                            } else {\n                                $(this).addClass(\"active\");\n                                $(this).next().addClass(\"active\");\n                            }\n                        });\n                    }\n                });\n            };\n\n            startTabs = function() {\n                $('.ui.tabs').children(\".menu\").each(function () {\n                    if (typeof this.isTabStarted === 'undefined') {\n                        this.isTabStarted = true;\n                        $(this).on( \"click\", \"> .item\", function() {\n                            $(this).parent().children().removeClass(\"active\");\n                            $(this).addClass(\"active\");\n                            var tabID = $(this).attr(\"data-tab\");\n                            $(this).parent().parent().children(\".segment\").children().removeClass(\"active\");\n                            $(this).parent().parent().children(\".segment\").children(\".tab[data-tab='\" + tabID + \"']\").addClass(\"active\");\n                        });\n                    }\n                });\n            };\n\n            startDropdown = function() {\n                $('.ui.dropdown, .sub-menu').not(\"select\").each(function () {\n                    if (typeof this.isDropdownStarted === 'undefined') {\n                        this.isDropdownStarted = true;\n\n                        $(this).on(\"click\", function(){\n                            if ($(this).hasClass(\"drop-down-active\")) {\n                                if (typeof this.menuClick !== 'undefined') {\n                                    if (this.menuClick == false){\n                                        $(this).removeClass(\"drop-down-active\");\n                                    }\n                                }else{\n                                    $(this).removeClass(\"drop-down-active\");\n                                }\n                            }else{\n                                $(this).addClass(\"drop-down-active\");\n                            }\n                            this.menuClick = false;\n                        });\n\n                        $(this).children(\".menu\").on(\"click\", function(){\n                            this.parentNode.menuClick = true;\n                        });\n                    }\n                });\n            };\n\n            startMegaMenu = function() {\n                $('.mega-menu').each(function () {\n                    if (typeof this.isMegaMenuStarted === 'undefined') {\n                        this.isMegaMenuStarted = true;\n\n                        $(this).on(\"click\", function(){\n                            if ($(this).hasClass(\"mega-menu-visible\")) {\n                                if (typeof this.megaMenuClick !== 'undefined') {\n                                    if (this.megaMenuClick == false){\n                                        $(this).removeClass(\"mega-menu-visible\");\n                                    }\n                                }else{\n                                    $(this).removeClass(\"mega-menu-visible\");\n                                }\n                            }else{\n\n                                openMegaMenu($(this));\n\n                            }\n                            this.megaMenuClick = false;\n                        });\n\n                        $(this).children(\".mega-menu-popup\").on(\"click\", function(){\n                            this.parentNode.megaMenuClick = true;\n                        });\n                    }\n                });\n            };\n\n            openMegaMenu = function(selector) {\n                var mainMenu = selector.closest(\".ui.menu\");\n                var megaMenuButton = selector.closest(\".mega-menu\");\n                var megaMenuPopup = selector.children(\".mega-menu-popup\");\n\n                if (mainMenu.is(\".bottom.fixed\")) {\n                    megaMenuPopup.css(\"top\", 0 - megaMenuPopup.outerHeight(false));\n                }else{\n                    megaMenuPopup.css(\"top\", megaMenuButton.outerHeight(true));\n                }\n\n                megaMenuPopup.css(\"left\", -1 * megaMenuButton.position().left);\n\n                selector.addClass(\"mega-menu-visible\");\n\n                megaMenuPopup.css(\"width\", mainMenu.width() + \"px\");\n\n                setTimeout(function(){ \n                    megaMenuPopup.css(\"width\", mainMenu.width() + \"px\");\n                }, 400);\n            };\n\n            hideMegaMenu = function() {\n                $(\".mega-menu-visible\").removeClass(\"mega-menu-visible\");\n            };\n\n            runAllFunctions = function() {\n\n                startAccordion();\n                startTabs();\n                startDropdown();\n                startMegaMenu();\n\n                $(document).on(\"click\", function(){\n                    setTimeout(function(){ \n                        $('.drop-down-active').each(function () {\n                            if (($(this).find(\".ag-focus\").length == 0) && ($(this).hasClass(\"ag-focus\") == false)){\n                                $(this).removeClass(\"drop-down-active\");\n                            };\n                        });\n\n                        $('.mega-menu-visible').each(function () {\n                            if (($(this).find(\".ag-focus\").length == 0) && ($(this).hasClass(\"ag-focus\") == false)){\n                                $(this).removeClass(\"mega-menu-visible\");\n                            };\n                        });\n                    }, 200);\n                });\n\n                $(window).resize(function() {\n                    $('.mega-menu-visible').removeClass(\"mega-menu-visible\");\n                });\n\n                designAreaReady = function () {\n                    return false;\n                };\n            };\n\n            runAllFunctions();\n\n            //<ADD-ON SCRIPTS FOR 'DESIGN VIEW' WILL GO HERE>\n\n        });\n    </script>\n</section>","preview_area":"<section id=\"previewHead\">\n    <link id=\"mainFrameworkCSS\" href=\"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css\" rel=\"stylesheet\">\n</section>\n\n<section id=\"previewBody\">\n    <script>\n        $LAB\n            .script(\"//cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.js\").wait(function () {\n            mainScriptsLoaded = true;\n        });\n\n        var overridePreviewScript = false;\n        //<ADD-ON SCRIPTS FOR 'PREVIEW MODE' WILL GO HERE>\n        runPreviewScripts(overridePreviewScript);\n    </script>\n</section>"};