var animation = require("alloy/animation");

function IndexOpen(e) {
 
    $.logo.init({ image: '/images/alloy.png', width: 216, height: 200, opacity: 0.1 });
    $.buttongrid.relayout(e);    
}

var red = "#900A05";
var brightred = "#B00C07";
var black = "#000000";
var gray = '#888888';

$.buttongrid.init({
    buttons: [
        { id: 'Cloudy', title: "Cloudy", backgroundColor: black, backgroundSelectedColor: gray },
        { id: 'Drizzle', title: "Drizzle" },
        { id: 'Haze', title: 'Haze' },
        { id: 'MostlyCloudy', title: "Mostly Cloudy" },
        { id: 'SlightDrizzle' },
        { id: 'Snow', title: 'Snow' },
        { id: 'Sunny', title: 'Sunny' },
        { id: 'Thunderstorms', title: 'Thunderstorms', click: function (e) { alert("Thunder!"); } }
    ],
    buttonWidth: Alloy.isTablet ? 200: 100,
    buttonHeight: Alloy.isTablet ? 200 : 100,
    backgroundColor: red,
    backgroundSelectedColor: brightred,
    duration: 1000
});

$.index.open();

@@ -17,17 +17,17 @@
 require(
-%22
+'
 alloy/an
@@ -33,17 +33,17 @@
 nimation
-%22
+'
 );%0A%0Afunc
@@ -203,17 +203,17 @@
 d = 
-%22
+'
 #900A05
-%22
+'
 ;%0Ava
@@ -230,17 +230,17 @@
 d = 
-%22
+'
 #B00C07
-%22
+'
 ;%0Ava
@@ -253,17 +253,17 @@
 k = 
-%22
+'
 #000000
-%22
+'
 ;%0Ava
@@ -353,16 +353,16 @@
 le: 
-%22
+'
 Cloudy
-%22
+'
 , ba
@@ -452,17 +452,17 @@
 le: 
-%22
+'
 Drizzle
-%22
+'
  %7D,%0A
@@ -537,17 +537,17 @@
  title: 
-%22
+'
 Mostly C
@@ -551,17 +551,17 @@
 y Cloudy
-%22
+'
  %7D,%0A    
@@ -577,32 +577,57 @@
  'SlightDrizzle'
+, title: 'Slight Drizzle'
  %7D,%0A        %7B id
@@ -781,17 +781,17 @@
 ert(
-%22
+'
 Thunder!
 %22); 
@@ -790,9 +790,9 @@
 der!
-%22
+'
 ); %7D

Fix missing label on button