Metro-like ScriptUI Demo

MetroUIDemo.jsx

#include 'doEx.jsx'
#targetengine 'MetroUIDemo'
(function () {
var metro = {
	'Magenta': [255, 0, 151],
	'Purple': [162, 0, 255],
	'Teal': [0, 171, 169],
	'Lime': [140, 191, 38],
	'Brown': [160, 80, 0],
	'Pink': [230, 113, 184],
	'Orange': [240, 150, 9],
	'Blue': [27, 161, 226],
	'Red': [229, 20, 0],
	'Green': [51, 153, 51]
},
	colorName,
	btn,
	i = 1,
	j = 1,
	w = new Window('palette');

w.spacing = 0;
w.margins = 0;
for (colorName in metro) {
	btn = w.add('button', undefined, colorName);
	btn.preferredSize = [200, 30];
	btn.onDraw = function () {
		var color = metro[this.text];
		drawRact(this, [0, 0, 200, 30, [color[0] / 255, color[1] / 255, color[2] / 255]]);
		drawText(this, {
			text: this.text,
			color: [0, 0, 0, 1]
		}, [50, 10])
	};
	btn.onClick = function () {
		var g;
		for (colorName in metro) {
			g = w.findElement('g' + colorName);
			g.visible && colorName != this.text && (g.maximumSize = [0, 0], g.visible = false);
		}
		g = w.findElement('g' + this.text);
		g.maximumSize = g.visible ? [0, 0] : [1000, 1000];
		g.visible ^= 1;
		w.layout.layout(1);
	}

	g = w.add('group', undefined, {
		name: 'g' + colorName
	});
	g.margins = 5;
	g.orientation = 'column';

	j += 5;
	for (; i < j; i++) {
		g.add('button', undefined, i)
	}
	g.visible = false;
	g.maximumSize = [0, 0];
}
w.show();
})()