markup.push({
    
    "TileInspectorPanel": {
        nsClass: "GXSettingsView",
		gxIntrinsicWidth: -1,
		gxIntrinsicHeight: -1,
        gxCanDrawSubviewsIntoLayer: true,
        gxWantsLayer: true,
        axIsIgnored: false,
        axRoleDescription: "Inspector",
        axHelp: "Inspect and edit settings of a selected Tile", 
        gxLayout: [ 
            "V:|-12-[title(21)]",
            "H:|-12-[titleLabel(>=33)]-8-[title]-15-|&alignBaseline",

            "H:[titleLabel]-5-[titleFrame]-12-|",
            "V:|-10-[titleFrame(25)]",

            "V:[title]-13-[waveArea(160)]",
            "H:|-0-[waveArea]-0-|",

            "H:[self]-(<=0)-[center]&alignCenterY",
            "V:[self]-(<=0)-[center]&alignCenterX",

            "V:[title]-21-[playStop(28)]",
            "H:|-50@300-[back(24)]-50-[playStop(24)]-54-[fade(24)]&alignCenterY", // Allows for a little bit of compression on the left side when the scroll bar is visible and the inspector is at it's minimum  width.
			"H:[back]-(>=65@350)-[center]", // Ensures the transport section gets centered correctly when the scroll bar appears and the inspector is at it's minimum  width.
            "V:[back]-3-[backLabel]&alignCenterX",
            "V:[playPause(28)]-1-[playLabel]&alignCenterX",
			"V:[playStop(28)]-1-[playLabel]&alignCenterX",
            "V:[fade]-3-[fadeLabel]&alignCenterX",

            "V:[backLabel]-8-[waveform(72)]",
            "H:|-12-[waveform]-12-|",

            "V:[backLabel]-4-[startPosition(80)]",
            "V:[backLabel]-4-[endPosition(80)]",
            "H:|-10-[startPosition]-10-|", // Note! Accounting for the end gap on the sliders - hence the 2px difference between the margin for the sliders vs waveform
            "H:|-10-[endPosition]-10-|", // Note! Accounting for the end gap on the sliders - hence the 2px difference between the margin for the sliders vs waveform

            "V:[waveform]-6-[remainingReadout]",
            "V:[center]-(<=0)-[remainingReadout]&alignCenterX",
            "H:[startReadout]-(>=0)-[remainingReadout(100)]-(>=0@300)-[endReadout]&alignBaseline",
            "H:|-12-[startReadout]",
            "H:[endReadout]-12-|",

            "V:[waveArea]-14-[settings]",
            "H:|-48-[settings]-(-1)-[notes(==settings)]-46-|&alignCenterY",
            "V:[settings(23)]-5-[settingsPanel]",
            "V:[notes(23)]-5-[notesPanel]-5-[div6]",

            "V:[settingsPanel]-(>=0)-[div6]-(>=0)-[replace(24)]-8-|",
			`V:[div6]-${Constants.footerHeight-1}-|`,
            "H:|-12-[replaceLabel]-4-[fileName]-5-[replace(68)]-10-|&alignBaseline",
        ],
        gxChildViews:
        { 
            "center" : { nsClass: "GXDrawView" },
            "titleFrame": {
                nsClass: "GXDrawView",
				gxIntrinsicWidth: -1,
                gxBackPainter: {
                    nsClass: "GXRoundRectPainter",
                    gxCornerRadius: 3.5,
					gxStrokeWidth: 0.5,
					gxFrameColor: "name:tertiary",
                },
            },
            "title": {
                "+": "TextField",
				gxIntrinsicWidth: -1,
                gxValueKeyPath : "title",
                gxLabelTemplate: "InspectorLabel.left.secondary.size11",
                gxDisableOnKey : "disableSingle",
                gxBaselineOffset: -5,
                gxLabelText: "Name",
                axTitle: "Name",
                axDescription: "The name of the currently selected tile."
            },
            "waveArea" : {
                // this is the colored area behind the waveform, containing
                // back/play/fadeout buttons and readouts below the waveform
                "+": "waveArea",
            },
            "waveform" : {
                // this is the waveform itself, positioned over the waveArea backdrop
                "+": "Waveform",
            },
            "settings": {
                "+": "InspectorTabButton.toggleFill.leftSegment",
				gxIntrinsicWidth: -1,
                gxValueKeyPath : "settingsPanelShown",
                gxDisableOnKey : "disableSingle",
                gxTitle: "Settings",
            },
            "notes": {
                "+": "InspectorTabButton.toggleFill.rightSegment",
				gxIntrinsicWidth: -1,
                gxValueKeyPath : "notesPanelShown",
                gxDisableOnKey : "disableSingle",
                gxTitle: "Notes",
            },
            "settingsPanel" : {
                // panel shown for the settings tab
                "+": "SettingsPanel",
            },
            "notesPanel" : {
                // panel shown for the notes tab
                "+": "NotesPanel",
            },
            "fileName": {
                "+": "LabelView.top.left.secondary.size11",
                gxIntrinsicWidth: -1,
                gxValueKeyPath : "fileName",
                gxDisableOnKey : "disableSingle",
                axIsIgnored: false,
                axDescription: "Original filename"
            },
            "replace": {
                "+": "InspectorTabButton",
                gxValueKeyPath : "replaceFile",
                gxDisableOnKey : "disableSingle",
                gxTitle: "Replace",
                gxLabelTemplate: "InspectorLabel.top.left.secondary.size11",
                gxLabelText: "File:",
                axDescription: "Replace File",
                axHelp: "Change the audio file played by this tile",
            },
            "div6": { "+": "PanelDivider", gxIntrinsicWidth: -1 },
        },
    },
    
    "waveArea": {
        nsClass: "Farrago.IBWaveArea",
		gxIntrinsicWidth: -1,
        gxValueKeyPath: "", // receive update for tint color changes
        gxAddViewBelow: true,
        gxBackPainter: {
            nsClass: "GXPainter",
            gxFillColor: "name:tileTintPale",
            "disabled" : {
                gxFillColor: "name:disabled",
            }
        },
        gxChildViews:
        {
            "back": {
                "+": "InspectorButton",
                gxValueKeyPath : "backBtn",
                //gxDisableOnKey : "disabled",
                gxForePainter: "ColoredImagePainter.back",
                gxTitle: "Skip Back",
                axDescription: "Skip back to the beginning of this tile's audio."
            },
            "playStop": {
                "+": "InspectorButton",
                gxValueKeyPath : "playBtn",
                gxShowOnKey : "dontResume",
                gxForePainter: "ColoredImagePainter.playStop",
				gxDisableOnKey : "waveformDisabled",
                gxTitleKeyPath : "playBtnText",
                axHelp: "Play or Stop the selected Tile."
            },
            "playPause": {
                "+": "InspectorButton",
                gxValueKeyPath : "playBtn",
                gxShowOnKey : "resume",
                gxForePainter: "ColoredImagePainter.playPause",
                axTitle: "Play",
                gxDisableOnKey : "waveformDisabled",
                gxTitleKeyPath : "playBtnText",
                axHelp: "Play or Pause the selected Tile."
            },
            "fade": {
                "+": "InspectorButton",
                gxValueKeyPath : "fadeBtn",
                //gxDisableOnKey : "disabled",
                gxForePainter: "ColoredImagePainter.fade",
                gxTitle: "Fade",
                axHelp: "Fade out and stop the selected Tile."
            },
            "backLabel": {
                "+": "InspectorLabel.centerx.tileTint.size10",
                gxForePainter: { "+": "LabelFore", "disabled": { gxFontColor: "name:tileTintDisabled" } },
                gxDisableOnKey : "backBtnDisabled",
                gxDefaultValue: "Back"
            },
            "playLabel": {
                "+": "InspectorLabel.centerx.tileTint.size10",
                gxForePainter: { "+": "LabelFore", "disabled": { gxFontColor: "name:tileTintDisabled" } },
                gxIntrinsicWidth: 50,
                gxDisableOnKey : "waveformDisabled",
                gxValueKeyPath : "playBtnText",
                gxDefaultValue: "Play"
            },
            "fadeLabel": {
                "+": "InspectorLabel.centerx.tileTint.size10",
                gxForePainter: { "+": "LabelFore", "disabled": { gxFontColor: "name:tileTintDisabled" } },
                gxDisableOnKey : "fadeBtnDisabled",
                gxDefaultValue: "Fade Out"
            },
            "startPosition": {
                "+": "WaveCropSlider",
                gxValueKeyPath : "startPosition",
                gxDisableOnKey : "disableSingle",
				gxShowOnKey: "waveformEnabled",
                axTitle: "Start time",
                axValueDescriptionKeyPath: "axStartPosition",
                "leftSide": true,
                axHelp: "Set where playback begins in the audio clip", 
            },
            "endPosition": {
                "+": "WaveCropSlider",
                gxValueKeyPath : "endPosition",
                gxDisableOnKey : "disableSingle",
				gxShowOnKey: "waveformEnabled",
                axTitle: "End time", 
                axValueDescriptionKeyPath: "axEndPosition",
                "leftSide": false,
                axHelp: "Set where playback ends in the audio clip"
            },
            "startReadout": {
                "+": "WaveCropReadout.left",
                gxIntrinsicWidth: 65,
                gxValueKeyPath : "startTime",
                gxFormatter: { nsClass: "GXTimeFormatter", "fractionalSeconds": true, "format": "In: %@" },
                gxDisableOnKey : "disableSingle",
            },
            "remainingReadout": {
                "+": "WaveCropReadout.centerx",
                gxValueKeyPath : "remainingTime",
                gxAnimateOnKey : "playing",
                gxFormatter: { nsClass: "GXTimeFormatter", "fractionalSeconds": true, "format": "Remaining: %@" },
                gxDisableOnKey : "disableSingle",
            },
            "endReadout": {
                "+": "WaveCropReadout.right",
                gxIntrinsicWidth: 75,
                gxValueKeyPath : "endTime",
                gxFormatter: { nsClass: "GXTimeFormatter", "fractionalSeconds": true, "format": "Out: %@" },
                gxDisableOnKey : "disableSingle",
            },
        },
    },
    
    "Waveform":
    {
        nsClass: "Farrago.IBWaveView",
        gxFrameRect: "0,0,250,72",    // initial size sublayers are relative to
        gxValueKeyPath: "",
        "backLayer": // this name is referenced in code
        {
            nsClass: "GXDrawLayer",
            gxFrameRect: "0,0,250,72",    // initial size sublayers are relative to
            gxValueKeyPath: "fullWaveData", // receive update for tint color changes
            gxHideOnNilValue: true,
            gxBackPainter: {
                nsClass: "GXPainter",
                gxFillColor: "name:tileTintPale",
            },
            "gxSublayers":
            {
                "fullWave": { 
                    nsClass: "GXWaveLayer",
                    gxValueKeyPath: "fullWaveData",
                    gxHideOnNilValue: true, 
                    gxFrameRect: "0,6,250,60",    // initial size sublayers are relative to
                    "gxResizeMask": 2,
                    gxNeedsDisplayOnResize: false,
                    gxBackPainter: {
                        nsClass: "GXWavePainter",
                        gxFillColor: "name:tileTintDisabled",
                    },
                },
                "shapedWave": {
                    nsClass: "GXWaveLayer",
                    gxLayerZPosition: 1,
                    gxValueKeyPath: "shapedWaveData",
                    gxHideOnNilValue: true,
                    gxFrameRect: "0,6,250,60",    // initial size sublayers are relative to
                    "gxResizeMask": 2,
                    gxNeedsDisplayOnResize: false,
					gxShowOnKey: "waveformEnabled",
                    gxBackPainter: {
                        nsClass: "GXWavePainter",
                        gxFillColor: "name:tileTint",
                    },
                },
            },
        },
        "foreLayer": // this name is referenced in code
        {
            nsClass: "GXMeterLayer",
            gxValueKeyPath: "", // receive update for tint color changes
            gxFrameRect: "0,0,250,72",    // initial size sublayers are relative to
            gxBackPainter: {
                nsClass: "GXPainter",
                gxFillColor: "name:tileTint",
            },
            "gxSublayers":
            {
                "fullWave": {
                    nsClass: "GXWaveLayer",
                    gxValueKeyPath: "fullWaveData",
                    gxFrameRect: "0,6,250,60",    // initial size sublayers are relative to
                    "gxResizeMask": 2,
                    gxNeedsDisplayOnResize: false,
                    gxBackPainter: {
                        nsClass: "GXWavePainter",
                        gxFillColor: "name:tileTintPale",
                    },
                },
                "shapedWave": {
                    nsClass: "GXWaveLayer",
                    gxValueKeyPath: "shapedWaveData",
					gxLayerZPosition: 2,
                    gxFrameRect: "0,6,250,60",    // initial size sublayers are relative to
                    "gxResizeMask": 2,
                    gxNeedsDisplayOnResize: false,
                    gxBackPainter: {
                        nsClass: "GXWavePainter",
                        gxFillColor: "name:backgroundTile",
                    },
                },
            },
        },
    },
    
    "SettingsPanel":
    {
        nsClass: "GXDrawView",
		gxIntrinsicWidth: -1,
		gxIntrinsicHeight: -1,
        gxWantsLayer: true,
        gxLayout:
        [
            "H:|-0-[self]-0-|",
            "V:|-4-[volumeA]-6-[volumeB]-7-[fadeIn]-6-[fadeOut]-7-[color]-11-[div3]-0-[gridModeSettings]-0-[deviceArea]-10-[midiArea]-0-|",
            "H:|-0-[deviceArea]-0-|",
            "H:|-10-[volumeAButton(74)]-8-[volumeA]-2-[volumeAReadout(32)]-12-|",
            "V:[volumeA]-(-23)-[volumeAButton]-(-20)-[volumeAReadout]",

            "H:|-10-[volumeBButton(74)]-8-[volumeB]-2-[volumeBReadout(32)]-12-|",
            "V:[volumeB]-(-23)-[volumeBButton]-(-20)-[volumeBReadout]",

            "H:|-12-[fadeInLabel(72)]-8-[fadeIn]-2-[fadeInReadout(32)]-12-|",
            "V:[fadeIn]-(-33)-[fadeInLabel]-(-34)-[fadeInReadout]",

            "H:|-12-[fadeOutLabel(72)]-8-[fadeOut]-2-[fadeOutReadout(32)]-12-|",
            "V:[fadeOut]-(-33)-[fadeOutLabel]-(-34)-[fadeOutReadout]",

            "H:|-12-[colorLabel(74)]-2-[color(165)]",
            "V:[color]-(-19)-[colorLabel]",
		 
			"H:|-12-[gridModeSettings]-12-|" 
		 
        ],
        gxChildViews: {
            "volumeAButton": {
                "+": "RadioButtonView.colored",
                gxTitle: "Volume A",
                gxValueKeyPath : "volumeABtn",
                axHelp: "Use volume A for playback"
            },
            "volumeA": {
                "+": "VolumeSlider",
                gxDefaultValue: 1,
                gxValueKeyPath : "fullVolume",
                gxReadoutKeyPath : "fullVolume",
				gxActiveOnKey: "volumeBBtn",
                axTitle: "Volume A",
                axHelp: "Volume A and Volume B are preset volumes to switch between",
            },
            "volumeBButton": {
                "+": "RadioButtonView.colored",
                gxTitle: "Volume B",
                gxValueKeyPath : "volumeBBtn",
                axHelp: "Use volume B for playback"
            },
            "volumeB": {
                "+": "VolumeSlider",
                gxDefaultValue: 0.4,
                gxValueKeyPath : "duckVolume",
                gxReadoutKeyPath : "duckVolume",
				gxActiveOnKey: "volumeABtn",
                axTitle: "Volume B",
                axHelp: "Volume A and Volume B are preset volumes to switch between",
            },
            "fadeIn": {
                "+": "FadeTimeSlider",
                gxLabelText: "Fade In\nDuration",
                gxDefaultValue: 0.1,
                gxValueKeyPath : "fadeInTime",
                gxReadoutKeyPath : "fadeInTime",
                axHelp: "Fade in time in seconds",
            },
            "fadeOut": {
                "+": "FadeTimeSlider",
                gxLabelText: "Fade Out\nDuration",
                gxDefaultValue: 0.5,
                gxValueKeyPath : "fadeOutTime",
                gxReadoutKeyPath : "fadeOutTime",
                axHelp: "Fade out time in seconds",
            },
            "color": {
                "+": "ColorSlider",
                gxDisableOnKey : "disabled",
                gxLabelTemplate: "InspectorLabel.centery.left.secondary.size11",
                gxLabelText: "Color",
            },
            "div3": { "+": "PanelDivider", gxValueKeyPath: "", gxShowOnKey: "isGridMode" },
			"gridModeSettings" : {
				nsClass: "GXDrawView",
				gxValueKeyPath: "",
				gxShowOnKey: "isGridMode",
				gxShowSpeedSeconds: 0.3,
                gxIntrinsicHeight: 120,
                gxIntrinsicWidth: -1,
				gxLayout: [
				    "V:|-10-[loop]-4-[solo]-4-[resume]-4-[pressed]",
				    "H:|-0-[loop(65)]",
				    "H:|-0-[solo(65)]",
				    "H:|-0-[resume(185)]",
				    "H:|-0-[pressed(185)]",
				],
				gxChildViews: {
					"loop": {
						"+": "CheckboxView.colored",
						gxValueKeyPath : "loop",
						
						gxDisableOnKey : "disabled",
						gxTitle: "Loop",
						axCheckboxRole: true,
						axHelp: "Automatically loop this tile's audio"
					},
					"solo": {
						"+": "CheckboxView.colored",
						gxValueKeyPath : "solo",
						gxDisableOnKey : "disabled",
						gxTitle: "Solo",
						axCheckboxRole: true,
						axHelp: "Stop other tiles when this tile is played"
					},
					"resume": {
						"+": "CheckboxView.colored",
						gxValueKeyPath : "resume",
						gxDisableOnKey : "disabled",
						gxTitle: "Allow Pausing",
						axCheckboxRole: true,
						axHelp: "Pause this tile by default, rather than stop and reset to start",
					},
					"pressed": {
						"+": "CheckboxView.colored",
						gxValueKeyPath : "holdToPlay",
						gxDisableOnKey : "disabled",
						gxTitle: "Only Play While Pressed",
						axCheckboxRole: true,
					},
				}
			},
            "deviceArea": {
                "+": "OutputDeviceSection",
            },
            "midiArea" : {
                "+" : "MidiLearnSection"
            },
        },
    },  
});
