
markup.push({


// MARK: popover template

PopoverTemplate: {
	nsClass: "NKPopover",
	gxContentView: "PopoverContentView",
	gxValueKey: "popoverState",
},

	
PopoverContentView: {
	nsClass: "GXDrawView",
	gxWantsLayer: true,
	gxLayout: [
		"H:|-23-[closeBtn(20)]-5-[detachBtn(20)]-5-[pinBtn(20)]",
		"V:|-24-[closeBtn(20)]",
		"V:|-24-[detachBtn(20)]",
		"V:|-24-[pinBtn(20)]"
	],
	gxChildViews:
	{
		popoverForeground: { "+": "PopoverForeShape" },
		popoverBackground: { "+": "PopoverBackShape" },
		closeBtn: { "+": "CloseButton" },
		detachBtn: { "+": "DetachButton" },
		pinBtn: { "+": "PinButton" },
	},
},

	
// -------------------------------------------------
// MARK: popover shape layers

PopoverForeShape:
{
	nsClass: "GXLayerHostingView",
	gxIsFlipped: false,
	gxLayout: [
		"H:|-0-[self]-0-|",
		"V:|-0-[self]-0-|"
	],
	gxRootLayer: {
		nsClass: "GXShapeLayer",
		gxLayerZPosition: 10,
		gxPainter: {    // for colors only
			nsClass: "GXPainter",
			gxStrokeWidth: 1.0,
			gxFrameColor: colorMono(100, 20),
		},
	},
},

	
PopoverBackShape:
{
	nsClass: "GXLayerHostingView",
	gxIsFlipped: false,
	gxLayout: [
		"H:|-0-[self]-0-|",
		"V:|-0-[self]-0-|"
	],
	gxRootLayer: {
		nsClass: "GXShapeLayer",
		gxLayerZPosition: -10,
		//gxStylesKeyPath: "payloadView.raModelObject.styles",    // CRAZY AND UGLY ++++
		gxPainter: {    // for colors only
			nsClass: "GXPainter",
			gxFillColor: "BackColor1",
			darkMode: {
				gxFrameColor: colorMono(0, 100),
				gxShadow: "{0, 0, 0, 0.4}, {0, -1}, 6",
			},
			lightMode: {
				gxFrameColor: colorMono(75, 100),
				gxShadow: "{0, 0, 0, 0.275}, {0, -1}, 5.5",
			},
			gxStrokeWidth: 1.0,
		},
	},
},

	
// -------------------------------------------------
// MARK: popover buttons

RoundIconButton:
{
	nsClass: "GXButtonView",
	gxBackPainter: {
		"+": "ControlBack",
		nsClass: "GXCirclePainter",
		gxDiameter: 20,
	},
	gxForePainter: {
		nsClass: "GXImagePainter",
		gxTintColor: "ForeColor2",
		keyWindow: {
			gxTintColor: "ForeColor1",
		},

		gxHAlign: 0.5,
		gxVAlign: 0.5,
	}
},

	
CloseButton:
{
	"+": "RoundIconButton.popover.close",
	gxValueKey: "closeBtn",
    gxHideOnNilValue: true,
	gxToolTip: "Close this popover",
	axTitle: "Close",
	axHelp: "Close this popover, escape key also closes",
},

DetachButton:
{
	"+": "RoundIconButton.noOn.popover.detach",
	gxValueKey: "detachBtn",
    gxHideOnNilValue: true,
	gxToolTip: "Detach this popover",
	gxOnToolTip: "Reattach this popover",
	axTitle: "Detach",
	axHelp: "Detach this popover",
},
	
PinButton:
{
	"+": "RoundIconButton",
	gxValueKey: "pinBtn",
	gxHideOnNilValue: true,
	gxToolTip: "Pin this popover to make it float above all windows",
	gxOnToolTip: "Unpin this popover, to stop it from floating above all windows",
	axTitle: "Pin",
	axHelp: "Detaches and pins this popover open above all windows on the system",
	gxChildViews:
	{
		layerHost:
		{
			nsClass: "GXLayerHostingView",
			gxIsFlipped: false,	
			gxLateLayout: [
				"V:|-0-[self]-0-|",
				"H:|-0-[self]-0-|",
			],
			gxRootLayer:
			{
				nsClass: "GXCaarLayer",
				gxViewName: "pinBtnLayer",
				gxValueKey: "pinBtn",
				gxUseOnStyle: true,
				gxCaarPainter: {
					nsClass: "GXCaarPainter",
					gxAsset: "pin",
					gxAssetDuration: 0.5,
					gxEdgeInsets: "2, 2, 2, 2",
					gxTintColor: "ForeColor2",
					keyWindow: {
						gxTintColor: "ForeColor1",
					},
					on: {
						gxTintColor: "ForeColorTheme1",
					},
					gxHAlign: 0.5,
					gxVAlign: 0.5,
				},
				gxTransition: {
					nsClass: "GXUnitTransition",
					gxDuration: 0.25,
					gxReversed: true,
				},
			},
		},
	},
},

	
PopoverOnOffSwitch:
{
	nsClass: "GXSwitchView",
	gxLayerZPosition: 20,
	gxToolTip: "This effect is currently enabled; click to disable, causing audio not be modified",
	gxOffToolTip: "This effect is currently disabled; click to enable it",
	gxValueKey: "isEnabled",
	axTitle: "Enable effect node",
	axHelp: "When disabled this effect does not modify the audio ",
	gxLayout: [
		"H:[self]-11-|",
		"V:|-12-[self]"
	],
	gxForePainter: "SwitchPainter.noPressed.noBlockDisabled.small",
},


// -------------------------------------------------
// MARK: popover editable title
	
PopoverTitle:
{
	// A textfield that looks like a title, but with an edit pencil.
	// Changes appearance to look like a textfield and has a clear button during editing.
	"nsClass": "NKEditableLabel",
	gxValueKey: "displayName",
	gxNilWhenEmpty: true,
	axTitle: "Effect nickname",
    nkLabelDescription: "Effect Nickname",
	axHelp: "VO space bar to edit the nickname of this effect",
	gxTextPainter: {
		"+": "LabelFore.foreColor2.size135.noPressed",
	},
	gxLayout: [
        "H:|-48-[self]-48-|",
		"V:|-11-[self]"
	],
    gxBackPainter: {
        nsClass: "GXPainter",
        gxFillColor: "BackColor1",
        gxStrokeWidth: 0.0,
    },
    gxAllowsEditingKeyPath: "config.canRename",
    gxInsertionPointColor: "InsertionPointColor",
    gxSelectionColor: "TextSelectionColor",

},

})
