markup.push({

	"LCD": {
		nsClass: "GXDrawView",
		gxValueKeyPath: "",
		gxCanDrawSubviewsIntoLayer: true,
		gxWantsLayer: true, // Needed for animations on 10.13
        gxIntrinsicWidth: -1,
		gxBackPainter: {
			nsClass: "GXRoundRectPainter",
            gxEdgeInsets: "0,-1,0,0",
			gxCornerRadius: 0,
			gxFillColor: "name:lcdTop",
			gxFillEndColor: "name:lcdBottom",	// use gradient
            gxFrameColor: "name:lcdBorder",
			gxHiliteColor: "name:lcdHilite",
		},
			
		// These layout strings are referenced in code and loaded dynamically depending on what the current set list mode is
		layoutStringList: "H:[volumeSection]-0-[nowPlaying(>=0)]-20-[prev(20)]-36-[pause(20)]-33-[stop(20)]-36-[fade(20)]-26-[next(20)]-25-|",
		layoutStringGrid: "H:[volumeSection]-0-[nowPlaying(>=0)]-0-[prev(0)]-36-[pause(20)]-33-[stop(20)]-36-[fade(20)]-26-[next(0)]-0-|",
		gxLayout: [
			// horizontally space most buttons, and align vertically
			"H:|-10-[volumeSection(146)]",
			"V:|-1-[nowPlaying]-6-|",
			// place labels centered under controls
			"V:|-5-[pause]",		// set distance from top for all buttons
			"V:[prev(20)]-3-[prevLabel]&alignCenterX",
			"V:[pause(20)]-3-[pauseLabel]&alignCenterX",
			"V:[stop(20)]-3-[stopLabel]&alignCenterX",
			"V:[next(20)]-3-[nextLabel]&alignCenterX",
			"V:[fade(20)]-3-[fadeLabel]&alignCenterX",
			"H:[prev]-(>=0)-[pause]-(>=0)-[stop]-(>=0)-[fade]-(>=0)-[next]&alignCenterY",
			"V:|-0-[volumeSection]-0-|",
			
		],
		gxChildViews: {
			"volumeSection": {
				"+": "MasterVolumeView",
			},
			"volumeModeLabel": {
				"+" : "LabelView.left.tertiary.size105",
				gxDefaultValue: "Master Volume",
			},
			"nowPlaying" : {
				"+" : "NowPlayingView"
			},
			"prev" : {
				"+": "ImageBarButton",
				gxValueKeyPath : "prevBtn",
				gxShowOnKey: "fullTransportShowing",
				gxShowSpeedSeconds: 0.3,
				gxForePainter: "ImagePainter.tintLight.prevTrack",
                axTitle: "Previous Track",
                axHelp: "Plays previous track in playlist",
			},
			"pause": {
				"+": "ImageBarButton",
				gxValueKeyPath : "pauseBtn",
				gxForePainter: "ImagePainter.tintLight.pause",
                axTitleKeyPath : "pauseBtnText",
                axHelp: "Pause all playing tiles, or resume all paused tiles",
			},
			"stop": {
				"+": "ImageBarButton",
				gxValueKeyPath : "stopBtn",
				gxForePainter: "ImagePainter.tintLight.stop",
                axTitle: "Stop All",
                axHelp: "Stop all playing tiles.",
			},
			"next" : {
				"+": "ImageBarButton",
				gxValueKeyPath : "nextBtn",
				gxForePainter: "ImagePainter.tintLight.nextTrack",
                axTitle: "Next Track",
                axHelp: "Plays next track in playlist",
				gxShowOnKey: "fullTransportShowing",
			},
			"fade": {
				"+": "ImageBarButton",
				gxValueKeyPath : "fadeBtn",
				gxForePainter: "ImagePainter.tintLight.fade",
                axTitle: "Fade All",
                axHelp: "Fade out and stop all playing tiles.",
				gxViewFlipped: false // Fixes focus ring
			},
			"prevLabel": {
				"+": "LCDButtonLabelView",
                gxIntrinsicWidth: 70,
				gxShowOnKey: "fullTransportShowing",
				gxShowSpeedSeconds: 0.3,
				gxDefaultValue: "Previous",
                gxDisableOnKey : "prevBtnDisabled",
			},
			"pauseLabel": {
				"+": "LCDButtonLabelView",
                gxIntrinsicWidth: 70,
				gxDefaultValue: "Pause All",
                gxValueKeyPath : "pauseBtnText",
                gxDisableOnKey : "pauseBtnDisabled",
			},
			"stopLabel": {
				"+": "LCDButtonLabelView",
				gxDefaultValue: "Stop All"
			},
			"nextLabel": {
				"+": "LCDButtonLabelView",
                gxIntrinsicWidth: 70,
				gxDefaultValue: "Next",
                gxDisableOnKey : "nextBtnDisabled",
				gxShowOnKey: "fullTransportShowing",
			},
			"fadeLabel": {
				"+": "LCDButtonLabelView",
				gxDefaultValue: "Fade All"
			},
		},
	},

	"MasterVolumeView": {
        nsClass: "Farrago.IBMasterVolumeSliderView",
		gxValueKeyPath: "",
		gxCanDrawSubviewsIntoLayer: true,
		gxWantsLayer: true,
		disabledTextColor: "name:secondaryBluish",
		gxLayout: [
			"V:|-7-[volumeSliderA(15)]",
			"H:|-18-[volumeSliderA]-5-|",
			"H:|-0-[volumeIndicator]-(<=0)-[volumeSliderA]&alignCenterY",
			"V:[volumeMode(20)]-4-|",
			"H:|-4-[MasterVolumeLabel]-(-10)-[volumeMode(40)]-4-|",
			"V:[MasterVolumeLabel]-4-|",
			"H:[volumeSliderB(==volumeSliderA)]", 
			   
			"H:[volumeSliderB(==volumeSliderA)]",
			"V:[volumeSliderB(==volumeSliderA)]",
			"H:[volumeSliderB]-(<=0)-[volumeSliderA]&alignCenterY",
			"V:[volumeSliderB]-(<=0)-[volumeSliderA]&alignCenterX",
			"H:[volumeSliderBack(==volumeSliderA)]",
			"V:[volumeSliderBack(==volumeSliderA)]",
			"H:[volumeSliderBack]-(<=0)-[volumeSliderA]&alignCenterY",
			"V:[volumeSliderBack]-(<=0)-[volumeSliderA]&alignCenterX", 
		],
		gxChildViews: {
			"volumeMode": {
				"+" : "VolumeModeSwitch"
			},
			"volumeIndicator" : {
				nsClass: "GXVolumeIndicator",
				gxStylesKeyPath: "masterVolumeSliderStyles",
				gxLayerZPosition: 20,
				gxValueKeyPath:"volumeIndicator",
				gxForePainter: {
					nsClass: "GXPainter",
					gxFillColor : "name:secondaryBluish",
					"muted" : {
						gxFillColor: "name:muted"
					}
				},
				gxIntrinsicWidth: 22,
				gxIntrinsicHeight: 13,
			},
			"volumeSliderA" : {
				"+" : "MasterVolumeSlider",
				gxTrackPainter: "",
				gxDisableOnKey: "masterVolumeDucked",
				gxValueKeyPath : "volumeA",
				gxLayerZPosition: 2,
			},
			"volumeSliderB" : {
				"+" : "MasterVolumeSlider",
				gxLayerZPosition: 2,
				gxEnableOnKey: "masterVolumeDucked",
				gxTrackPainter: "",
				gxValueKeyPath : "volumeB",
			},
			"volumeSliderBack" : {
				"+" : "MasterVolumeSlider",
				gxKnobPainter: "",
				gxValueKeyPath : "",
			},
			"MasterVolumeLabel": {
				"+" : "LCDButtonLabelView",
				gxDisableOnKey : null,
				gxDefaultValue: "Master Volume",
			}, 
		}
    },
	
	"MasterVolumeSlider" : {
		"+": "VolumeSlider",
		nsClass: "GXSliderView",
		gxIgnoreTrackClicks: false,
		gxIgnoreDoubleClick: true,  
		axTitle: "Master Volume",
		gxShowSpeedSeconds: 0.2,
		gxHideSpeedSeconds: 0.2,
		gxKnobPainter: {
			nsClass: "GXRoundRectPainter",
			gxCornerRadius: 6,
			gxDefaultSize: "12,12",
			gxFillColor: "name:white",
			gxShadow: "{0.0, 0.0, 0.0 1.0}, {0.0, -0.5}, 2",
			"disabled" : {
				gxFillColor:"name:secondaryBluish",
			},
			"focused": {
				gxFillColor: "name:hiliteLCD",
			},
			"muted" : {
				gxFillColor: "name:secondaryBluish"
			}
		},
		gxKnobPainterExtra: {
			"+" : "LabelFore.size9.centerX.bold",
			gxEdgeInsets: "0,0,0,-1",
			gxShadow: "{0.0, 0.0, 0.0 0.5}, {0.0, -0.5}, 1",
			gxFontColor:"name:invisible",
			"disabled" : {
				gxFontColor:"name:black",
			},
			"B" : { // Current style is B - show A!
				gxDefaultValue: "A",
			},
			"A" : { // Current style is A - show B!
				gxDefaultValue: "B",
			},
		},
		gxTrackPainter: {
			"+" : "MasterVolumeTrack",
		},
		gxStylesKeyPath: "masterVolumeSliderStyles"
	},

	"MasterVolumeTrack" : {
		"+": "SliderTrack",
		gxDefaultSize: "3,3",
		gxCornerRadius: "1, 1, 1, 1",
		gxFrameColor: "name:disabled",
		gxFillColor: "name:disabled",
		gxCornerRadius: "1, 1, 1, 1",
		"on": {
			gxFrameColor: "name:hiliteLCD",
			gxFillColor: "name:hiliteLCD", 
			gxCornerRadius: "1, 0, 0, 1",
		},
		"disabled" : {
			gxFrameColor: "name:disabled",
			gxFillColor: "name:disabled",
		},
		"muted" : {
			gxFrameColor: "name:disabled",
			gxFillColor: "name:disabled",
		}
	},

    // MARK: - lcd label template

    "LCDButtonLabelView": {
        "+": "LabelView",
        gxValueKeyPath: "",
        gxDisableOnKey : "nothingPlaying",
        gxForePainter: {
            "+" :"LabelFore.centerx.size10",
            gxFontColor: "name:white",
            "disabled": {
                gxFontColor: "name:lcdDisabled"
            },
        },
    },
			
	"VolumeModeSwitch" : {
		nsClass: "GXSwitchView",
		gxImageBaseName: "switch",
		gxValueKeyPath : "masterVolumeDucked",
		gxViewFlipped: false, // Fixes focus ring
		gxLayerZPosition: 4,
		axTitle: "Volume A-B Toggle",
		gxTooltip: "Toggle A Volume",
		gxPressedTooltip: "Toggle B Volume",
		gxBackPainter: {
			nsClass: "GXRoundRectPainter",
			gxFillColor: "name:secondaryBluish",
			gxEdgeInsets: "4,3,4,3",
			gxCornerRadius: 3,
		},
		gxForePainter: {
			"+" : "LabelFore.center.medium",
			gxFontSize: 13.5,
			gxDefaultValue: "A  B",
			"on" : {},
			gxVAlign: 0.5,
			gxFontKerning: -0.2,
			gxFontColor: "rgba:54,54,54,100",
			gxEdgeInsets: "2,0,2,0",
			
		},
		gxThumbPainter: {
			nsClass: "GXRoundRectPainter",
			gxDefaultSize: "18,18",
			gxFillColor: "name:white",
			gxShadow: "{0.2, 0.2, 0.2 0.4}, {0.1, -0.1}, 2.0",
			"pressed" : {
				gxFillColor: "rgba:220,220,220,100",
			},
			gxCornerRadius: 4,
		},
		gxThumbPainterExtra: {
			"+" : "LabelFore.center.medium",
			gxFontSize: 13.5,
			"off" : {
				gxDefaultValue: "A",
			},
			"on" : {
				gxDefaultValue: "B",
			},
			gxFontColor:"rgba:114,52,220,100",
		},
	}

});

// MARK: Now Playing

markup.push({
	
	"NowPlayingView" : {
		nsClass: "Farrago.IBNowPlayingView",
		gxWantsLayer: true, // Important for animations on 10.13
		gxIntrinsicWidth: -1,
		gxLayout: [
			"H:[extraPlayingBubble(30)]-10-|",
			"V:|-4-[extraPlayingBubble]",
		], 
		gxChildViews: { 
			"extraPlayingBubble" : {
				"+" : "LabelView.center.white.size105",
				gxHideSpeedSeconds: 0.2,
				gxIntrinsicHeight: 15,
				gxBackPainter : {
					nsClass: "GXRoundRectPainter",
					gxFillColor: "name:backgroundBubble",
					gxCornerRadius: 3,
				},
				gxDefaultValue: "+N" ,
			}
		}
	},
			
	"NowPlayingBubble" : {
		nsClass: "Farrago.IBNowPlayingBubbleView",
		gxValueKeyPath: "",
		axIsIgnored:false,
		axRoleDescription: "Now Playing Bubble",
		axTitleKeyPath: "title",
		selectable: true,
		drawsSelected: true,
		gxIntrinsicWidth: -1,
		gxIntrinsicHeight: -1,
		gxShowSpeedSeconds: 0.1,
		gxHideSpeedSeconds: 0.1,
		"titleMeasurementPainter":    // this name is referenced in code
		{
			"+": "LabelFore.centery.left.bold.size11", // should match title forepainter below 
		},
		backLayer: makeBubbleLayers({foreground: false}), // Built with function
		foreLayer: makeBubbleLayers({foreground: true}), // Bu ilt with function
	}
});

function makeBubbleLayers({foreground})
{
	
	let textBackColor = {
		gxFontColor: foreground ? "name:backgroundBubble" : "name:tileTintBubble",
		gxBackColor: foreground ? "name:tileTintBubble" : "name:backgroundBubble",
	}
	
	return {
		nsClass: "GXDrawLayer",
            gxValueKeyPath: "",                         // receive update for tint color changes
			gxFrameRect: "0,0,80,15",					// initial size sublayers are relative to
			gxBackPainter: 	{
				nsClass: "GXRoundRectPainter",
				gxCornerRadius: 3,
				gxFillColor: foreground ? "name:tileTintBubble" : "name:backgroundBubble",
                gxDefaultSize: "80,15",        // the size of content image
			},
            "gxSetLayerContentImage": true,         // make an image for layer content
            gxNeedsDisplayOnResize: false,          // don't redraw when stretched
			gxContentsCenter: "0.5, 0.5, 0, 0",     // resize by stretching center pixel h and v
			"gxContentsGravity": "resize",  // resize content
			gxLayerZPosition: foreground ? 20 : 10,
			gxSublayers: {
				"title": {
					nsClass: "GXStringLayer",
					gxValueKeyPath: "title",
					gxLayerZPosition: 2,
					gxFrameRect: "3,0,70,14",
					"gxResizeMask": 0,
					gxNeedsDisplayOnResize: false,
					gxBackPainter: "",
					gxForePainter: merge({
						"+": "LabelFore.centery.left.bold.size11",
						gxLineBreakMode: 2,
					}, textBackColor),
				},
			}
	};
};

