markup.push({
    
    "InspectorPanel" : {
        nsClass: "GXDrawView",
        gxIntrinsicHeight: -1,
		gxIntrinsicWidth: -1,
		gxDrawSubviewIntoLayer: true,
        gxBackPainter: {
            nsClass: "GXPainter",
            gxFillColor: "name:black"
        }, 
        gxLayout: [
			`H:|-0-[self(>=${Constants.minInspectorWidth})]-0-|`,
            "V:|-0-[inspectorScrollView]-0-|",
			"H:|-0-[disabledOverlay]-0-|",
			"V:|-0-[disabledOverlay]-0-|",
        ],
        gxChildViews: {
            "inspectorScrollView" : { "+" : "InspectorScrollView" },
			"disabledOverlay" : {
				nsClass: "Farrago.IBDesatOverlay",
				gxIntrinsicWidth: -1, // Very important for split view resizing - esp after system theme changes
				gxIntrinsicHeight: -1,
				gxValueKeyPath: "",
				gxShowOnKey: "disabled",
				gxLayerZPosition: 2,
				gxIgnoreMouseClick: true,
				gxBackPainter: {
					nsClass: "GXPainter",
					gxFillColor: "name:tileDisabledOverlay"
				}
			},
        },
    },

    "InspectorScrollView": {
        nsClass: "GXScrollView",
        axIsIgnored: false,
        axRoleDescription: "Inspector", 
		gxBackColor: "name:panelBackground",    // back color for whole panel
        gxVScrollbar: "ScrollBarView",
        gxLayout: ["H:|-0-[self]-0-|"],
		gxIntrinsicHeight: -1,
        gxAutohidesScrollers: true, 
        gxDocumentView: {
            nsClass: "GXDrawView",
			gxIntrinsicWidth: -1, // Very important for split view resizing - esp after system theme changes
			gxIntrinsicHeight: -1,
			gxBackPainter: {
				nsClass: "GXRoundRectPainter",
				gxFillColor: "name:panelBackground"    // back color for whole panel
			},
            gxLayout: [
                "H:|-0-[self]-0-|",
                "H:|-0-[tileInspector]-0-|",
                "V:|-0-[tileInspector]-0-|",
				"H:|-0-[setInspector]-0-|",
                "V:|-0-[setInspector(>=500@700)]-0-|",
				"V:|-0-[self]-(0@500)-|",
            ],
            gxChildViews: {
                "tileInspector": { "+" : "TileInspectorPanel", gxViewName: "tileInspector" },
                "setInspector": { "+" : "SetInspectorPanel", gxViewName: "setInspector"  }, 
            },
        },
    },

    "InspectorButton": {                // so the intrinsic size of the buttons is set in one place
        nsClass: "GXButtonView",
        gxIntrinsicHeight: 24,
        gxIntrinsicWidth: 24,
    },

    "InspectorLabel": {
        "+": "LabelView",
        gxValueKeyPath: "",
    },

    "ColoredImagePainter": {
        nsClass: "GXImagePainter",
        gxTintColor: "name:tileTint",
        "disabled": { gxTintColor: "name:tileTintDisabled" },
		"pressed":  { gxTintColor: "name:tileTintDark" },
        "invertOn": {
            "on": { gxTintColor: "name:white" },
			"pressed":  { gxTintColor: "name:black" },
        },
    },

    "PanelDivider": {
        nsClass: "GXDrawView",
		gxIntrinsicWidth: -1,
        gxLayout : [
            "H:|-1-[self]|",
            "V:[self(1)]"
        ],
        gxBackPainter: {
            nsClass: "GXPainter",            // GXPainter can only fill
            gxFillColor: "name:dividerColor"
        },
    },

    "WaveCropSlider": {
        nsClass: "Farrago.IBWaveCropView",
		"gxIgnoreDoubleClick": true,
        "gxAllowNumericEntry": false,
        gxDrawsFocused: true,
        gxDisableOnKey : "disabled",
        gxLayerZPosition: 10,   // make sure slider draws above waveform
        gxKnobPainter: "WaveCropKnob",
        gxTrackPainter: "",
        gxRangeMin: 0,
        gxRangeMax: 1,
        gxEndGap: 2,
        gxFormatter: { nsClass: "GXTimeFormatter", "fractionalSeconds": true },
        gxKeystrokeStepSizeKeyPath: "sliderStepSize",
    },

    "WaveCropKnob": {
        "+": "SliderKnob",
        gxEdgeInsets: "5.5,0,5.5,0",
        gxDefaultSize: "12,80",
        gxCornerRadii: "0, 0, 0, 0",
        gxFrameColor: "name:tileTintDark",
        gxFillColor: "name:tileTintDark",  
        "focused": {
            gxEdgeInsets: "5,0,5,0", 
            gxShadow: "{1.0, 1.0, 1.0 1.0}, {0.0, -0.0}, 2.0", 
        },
    },

    "WaveCropReadout": {
        "+": "LabelView",
		gxDisableOnKey : "disabled",
        gxLayerZPosition: 20,
        gxForePainter : {
            "+": "LabelFore.right.size105",
			gxFontColor: "name:tileTint",
            gxFillColor: "name:tileTintPale",
            "focused" : {
                gxFontColor: "name:tileTintDark",
            },
			"playbackDisabled" : {
				gxFontColor: "name:tileTintDisabled",
			},
            "disabled" : {
                // prevent drawing when disabled by making empty rect
                gxEdgeInsets: "999,999,999,999",
            }
        },
    },

    "VolumeSlider": {
        "+": "SliderView",
        gxRangeMin: 0.0,
        gxRangeMax: 1.0,
        gxDefaultValue: 1.0,
        gxKeystrokeStepSize: 0.1,
        gxKnobPainter: {
            "+": "ImagePainter.sliderRound.thumb",
            gxTintColor: "name:white",
            gxShadow: "{0.0, 0.0, 0.0 0.7}, {0.0, -0.5}, 2",
            "focused": {
                gxTintColor: "name:tileTint",
            },
            "disabled": {
                gxEdgeInsets: "999,999,999,999"    // hackish, force empty rect to avoid drawing
            }
        },
        gxReadoutTemplate: {
            "+": "SliderReadout",
            gxFormatter: { nsClass: "GXScaledFormatter", "scale": 100, "format": "%.0f%%" },
            gxDisableOnKey : "disabled",
        },
        axFormatter: "PercentageFormatter"
    },

    "FadeTimeSlider": {
        "+": "SliderView",
        gxDisableOnKey : "disabled",
		gxKeystrokeStepSize: 0.1,
        gxRangeMin: 0,
        gxRangeMax: 5,
        gxDefaultValue: 0.5,
        gxIntrinsicHeight: 36,
        gxBaselineOffset: 16,
        gxEndGap: 7,        // approx half knob width, so knob sits at ends nicely
        gxTrackOffset: 5,    // move track up from center so labels have room
        gxDetents: "0, 0.5, 1, 2, 3, 4, 5",
        gxDetentStrings: ["0", "", "1", "2", "3", "4", "5"],
        gxDetentSnapDistance: 2.5,
        gxKnobPainter: "FadeTimeSliderKnob",
        gxLabelTemplate: {
            "+": "InspectorLabel.top.left.secondary.size11",
            //gxForePainter: {
            //    "+": "LabelFore.top.left.secondary.size11",
            //    gxEdgeInsets: "0,3,0,0",
            //},
            gxIntrinsicHeight: 32
        },
        gxDetentPainter: {
            nsClass: "GXPainter",
            gxFillColor: "name:secondary",
            gxDefaultSize: "0.5,36",
            gxEdgeInsets: "0,14,0,19",
            "disabled" : {
                gxFillColor: "name:disabled"
            }
        },
        gxDetentLabelPainter: {
            "+": "LabelFore.secondary.size10",
            gxDefaultSize: "30,36",
            gxHAlign: 0.5,
            gxVAlign: 1,
            gxEdgeInsets: "0,0,0,0",
            "disabled" : {
                gxFontColor: "name:disabled"
            }
        },
        gxReadoutTemplate: {
            "+": "SliderReadout.seconds",
            gxDisableOnKey : "disabled",
        },
        axFormatter: { nsClass: "GXScaledFormatter", "format": "%.1fs" },
    },
	"FadeTimeSliderKnob" : {
		"+": "ImagePainter.sliderPointy.thumb",
		gxTintColor: "name:white",
		gxShadow: "{0.0, 0.0, 0.0 0.7}, {0.0, -0.5}, 2",
		gxEdgeInsets: "0,1,0,-1",  // used as offset, do not reduce size
		"focused": {
			gxTintColor: "name:tileTint",
		},
		"disabled": {
			gxEdgeInsets: "999,999,999,999"    // hackish, force empty rect to avoid drawing
		}
	},
	"ColorSliderMenuItem" : {
		"+" : "ColorSlider",
        gxKnobPainter: {
			"+" : "ColorSliderKnob",
			gxEdgeInsets: "-0.5,0.5,0.5,-0.5",
		},
	},
			
	"ColorSliderKnob" : {
		nsClass: "GXRoundRectPainter",
		gxDefaultSize: "0,0",
		gxEdgeInsets: "-0.5,-0.5,0.5,0.5",
		gxCornerRadius: 9,
		gxFrameColor: "name:disabled",
		gxStrokeWidth: 2,
		gxShadow: "{0.0, 0.0, 0.0 0.7}, {0.0, -0.5}, 2.5",
		"disabled": {
			gxFrameColor: "name:disabled",
			gxEdgeInsets: "999,999,999,999",    // hackish, force empty rect to avoid drawing
		},
		"active": {
			// prevent drawing using zero size when disabled
			gxFrameColor: "name:tileTint",
			gxDefaultSize: "19,19",
		}
	},

    "ColorSlider": {
        nsClass: "Farrago.ColorPickerSlider",
        gxValueKeyPath : "colorIndex",
        gxActiveOnKey : "showColourSelection",
        gxAlwaysSendClicks: true,   // even when the knob isn't moved, we want the model to know. Fixes multi select issue with hidden knob
        "gxAllowNumericEntry": false,
        gxIgnoreDoubleClick: true, // Resetting to a default color when double clicking feels wierd.
        gxRangeMin: 0,
        gxRangeMax: 8,
        gxDefaultValue: 0,
        gxEndGap: 10.5,        // approx half knob width, so knob sits at ends nicely
        gxDetents: "0, 1, 2, 3, 4, 5, 6, 7, 8",
        gxLabelTemplate: "SliderLabel",
        gxKnobPainter: "ColorSliderKnob",
        gxBackPainter: {
            "+": "ImagePainter",
            gxImage: "colorSliderTrack",
            "disabled": {
                gxTintColor: "name:disabled",
            },
            gxEdgeInsets: "-1,0,-1,-1",
        },
    },

    "InspectorTabButton": {
        nsClass: "GXButtonView",
        gxIntrinsicHeight: 24,
        gxIntrinsicWidth: 30,
        axRoleDescription: "Tab",
        axCheckboxRole: true,
        gxBackPainter: "InspectorBarButtonBack",
        gxForePainter: "InspectorBarButtonFore",
    },
		
	"InspectorBarButtonFore": {
		"+": "ControlFore.centerx.size11",
		gxFontColor: "name:tileTintDark",
		"pressed": {
		gxFontColor: "name:tileTintPale"
		},
		"on": {
		gxFontColor: "name:tileTintPale",
		"pressed": { gxFontColor: "name:disabled" },
		},
	},

    "InspectorBarButtonBack": {
        nsClass: "GXRoundRectPainter",
        gxCornerRadii: "4, 4, 4, 4",
        gxEdgeInsets: "2,2,2,2",
        gxFillColor: "name:tileTintPale",
        gxFrameColor: "name:tileTintPale",
        //gxFrameColor: "name:disabled",
        //gxShadow: "{0.0, 0.7}, {0.0, -0.25}, 1.5",
        "leftSegment": {
            gxCornerRadii: "5, 0, 0, 5",
            gxEdgeInsets: "2,2,0,2",
            gxIntrinsicWidth: 28,
        },
		"middleSegment": {
            gxCornerRadii: "0, 0, 0, 0",
            gxEdgeInsets: "2,2,2,2",
            gxIntrinsicWidth: 28,
        },
        "rightSegment": {
            gxCornerRadii: "0, 5, 5, 0",
            gxEdgeInsets: "0,2,2,2",
            gxIntrinsicWidth: 28,
        },
        "pressed" : {
            gxFillColor: "name:tileTint",
            gxFrameColor: "name:tileTint",
            //gxFrameColor: "name:primary",
        },
        "on" : {
            gxFillColor: "name:tileTint",
            gxFrameColor: "name:tileTint",
            "pressed" : {
                gxFillColor: "name:tileTintDark",
                gxFrameColor: "name:tileTintDark",
            },
        },
        "disabled" : {
            gxFillColor: "name:tileBackground",
            gxFrameColor: "name:disabled",
            /* "on" : {
             gxFillColor: "name:disabled",
             gxFrameColor: "name:disabled",
             }*/
        }
    },
    "OutputDeviceSection" : {
        nsClass: "GXDrawView",
		gxIntrinsicWidth: -1, // Very important for split view resizing - esp after system theme changes
        gxLayout: [
			"V:|-0-[outputDivTop]-8-[outputSelector]-12-[channelLabel]-0-|", // sets overall height", // sets overall height
            "H:|-10-[outputSelectorLabel(75)]-5-[outputSelector(>=0@300)]-12-|&alignBaseline",
		"H:|-12-[channelLabel(==outputSelectorLabel@200)]-30-[leftSelectorLabel(>=0@200)]-5-[leftSelector(==rightSelector)]-(-93)-[center]-(10)-[rightSelectorLabel(20@200)]-5-[rightSelector(>=20)]-(12)-|&alignBaseline",
			"V:[self]-(<=0)-[center]&alignCenterX",
			"V:[channelLabel(18)]",
			"H:[center(100)]"
        ],
        gxChildViews: {
			"outputDivTop": { "+": "PanelDivider" },
            "outputSelector" : {
				"+" : "StyledButtonPopup",
                nsClass: "Farrago.IBAudioDevicePopupButton",
				gxValueKeyPath: "outputDevice",
                gxLabelText: "Output Device",
            },
			"channelLabel" : {
                "+" : "LabelView.top.right.secondary.size11",
				gxIntrinsicWidth: -1, // Very important for split view resizing - esp after system theme changes
                gxDefaultValue: "Channels"
            },
            "leftSelector" : {
                "+" : "StyledButtonPopup",
                gxValueKeyPath: "outputChannelLeft",
                gxMenuItemsKeyPath: "outputChannelMenuItems",
				gxLabelText: "L",
            },
			"rightSelector" : {
				"+" : "StyledButtonPopup",
				gxValueKeyPath: "outputChannelRight",
				gxMenuItemsKeyPath: "outputChannelMenuItems",
				gxLabelText: "R",
            },
			"center" : {
				nsClass: "GXDrawView", 
			}
        }
    },

    "MidiLearnSection" : {
        nsClass: "GXDrawView",
		gxIntrinsicWidth: -1,
		gxValueKeyPath: "",
		gxShowOnKey: "showMidiSection",
		gxShowSpeedSeconds: 0.3,
		gxHideSpeedSeconds: 0.1,
        gxLayout: [
            "H:|-0-[self]-0-|",

            "V:|-0-[midiDivTop]-8-[midiLearn(24)]-8-|",     // sets overall height
            "H:|-10-[midiLearn(76)]",

            "V:[midiDivTop]-8-[midiClear(24)]",
            "H:|-12-[midiNoteLabel]-8-[midiClear(42)]-10-|&alignBaseline",
        ],
        gxChildViews : {
            "midiNoteLabel": {
                "+": "InspectorLabel.top.left.secondary.size11",
				gxIntrinsicWidth: -1,
                gxValueKeyPath: "midiNoteText",
                axIsIgnored: false,
                axTitle: "MIDI Note",
            },
            "midiClear": {
                "+": "InspectorTabButton",
                gxShowOnKey: "showMidiClear",
                gxValueKeyPath: "clearMidi",
                gxTitle: "Clear",
                gxLabelTemplate: "InspectorLabel.top.left.secondary.size11",
                gxBackPainter: "InspectorBarButtonBack",
                axTitle: "Clear MIDI"
            },
            "midiDivTop": { "+": "PanelDivider" },
            "midiLearn": {
                "+": "InspectorTabButton",
                gxShowOnKey: "displayMidiLearn",
                gxValueKeyPath: "learnMidi",
                gxActiveOnKey:  "learningMidiEvent",
                gxTitleKeyPath: "learningMIDINoteText",
                gxLabelTemplate: "InspectorLabel.top.left.secondary.size11",
                gxBackPainter: "InspectorBarButtonBack",
            },
        },
    },
			
	"NotesPanel": {
		nsClass: "GXDrawView",
		gxCanDrawSubviewsIntoLayer: true, // Fixes drawing bug 10.13
		gxWantsLayer: true, // Fixes drawing bug 10.13
		gxIntrinsicWidth: -1,
		gxLayout: [
			"H:|-0-[notesFrame]-0-|",
			"V:|-4-[notesFrame]-4-|",
			"H:|-12-[self]-12-|",
			"H:|-0-[scrollContainer]-0-|",
			"V:|-6-[scrollContainer]-6-|",
		],
		gxChildViews: {
			"scrollContainer" : {
				nsClass: "GXDrawView",
				gxIntrinsicWidth: -1,
				gxLayerZPosition: 1,
				gxLayout: [
					"H:|-2-[notesScrollView]-2-|",
					"V:|-0-[notesScrollView]-0-|",
					"H:|-0-[notesContainer]-0-|",
					"V:|-2-[notesContainer(>=self)]",
				],
				gxChildViews : {
					"notesScrollView": {
						nsClass: "GXScrollView",
						gxVScrollbar: "ScrollBarView",
						gxIntrinsicWidth: -1,
						gxAutohidesScrollers: true,
						gxBackColor: "name:backgroundTile",
						gxLayerZPosition: 3,
						gxDocumentView: {
							nsClass: "GXDrawView",
							gxIntrinsicWidth: -1,
							gxValueKeyPath: "",
							gxViewName: "notesContainer",
							gxChildViews: {
								"notesView" : {
									"+" : "TextView",
									gxLayout: [
											"V:|-2-[self]-4-|",
											"H:|-4-[self]-4-|",
									],
									gxFrameRect: "0,0,250,400", // Seems to be imporant for setting up the focus ring correctly
									gxResizeHeightToFitContent: true,
									gxEditable: true,
									gxValueKeyPath : "notes",
									drawsSelected: true,
									gxBackPainter: null,
								}
							}
						}
					},
				}
			},
			"notesFrame": {
				nsClass: "GXDrawView",
				gxIntrinsicWidth: -1,
				gxLayerZPosition: 1,
				gxAddViewBelow: true,   // put below other existing views when created
				gxBackPainter: {
					nsClass: "GXRoundRectPainter",
					gxCornerRadius: 4,
					gxStrokeWidth: 0.5,
					gxFrameColor: "name:tertiary",
				},
			},
		}
	},

});
