gistfile1.txt

/*globals MyApp*/

MyApp.ColorPicker = SC.PickerPane.design({
  layout: { width: 250, height: 195 },
  theme: "popover",

  contentView: SC.WorkspaceView.design({
    topToolbar: SC.ToolbarView.design({
      layout: { top: 0, left: 0, right: 0, height: 32 },
      childViews: "label colorSwatch".w(),

      label: SC.LabelView.design({
        layout: { left: 10, centerY: 0, height: 21, width: 200 },
        value: "Edit color",
        classNames: "embossed edit-color-label".w()
      }),

      colorSwatch: d3SC.d3SwatchView.create({
        layout: { left: 210, centerY: 0, width: 24, height: 24 },
        backgroundColorBinding: 'MyApp.editColorController.content'
      })
    }),

    bottomToolbar: null,

    //theme: 'myapp',

    contentView: SC.View.design({
      layout: { left: 0, right: 0, top: 40, bottom: 0 },
      childViews: 'redView greenView blueView cancelButton doneButton'.w(),

      redView: SC.View.design({
        layout: { left: 0, right: 0, top: 5, height: 30 },
        childViews: "redLabel redSlider redAmount".w(),
        classNames: ["end-time-view"],

        redLabel: SC.LabelView.design({
          layout: { left: 0, width: 60, height: 20, top: 5 },
          classNames: ["red-label"],
          value: 'Red:',
          textAlign: SC.ALIGN_RIGHT
        }),

        redSlider: SC.SliderView.design({
          layout: { left: 80, right: 55, top: 0, height: 30 },
          minimum: 0,
          maximum: 255,
          step: 1,
          valueBinding: 'MyApp.editColorController.red'
        }),

        redAmount: SC.LabelView.design({
          layout: { right: 13, width: 25, height: 20, top: 5 },
          classNames: ["red-amount"],
          valueBinding: 'MyApp.editColorController.red',
          textAlign: SC.ALIGN_RIGHT
        })
      }),

      greenView: SC.View.design({
        layout: { left: 0, right: 0, top: 40, height: 30 },
        childViews: "greenLabel greenSlider greenAmount".w(),
        classNames: ["end-time-view"],

        greenLabel: SC.LabelView.design({
          layout: { left: 0, width: 60, height: 20, top: 5 },
          classNames: ["green-label"],
          value: 'Green:',
          textAlign: SC.ALIGN_RIGHT
        }),

        greenSlider: SC.SliderView.design({
          layout: { left: 80, right: 55, top: 0, height: 30 },
          minimum: 0,
          maximum: 255,
          step: 1,
          valueBinding: 'MyApp.editColorController.green'
        }),

        greenAmount: SC.LabelView.design({
          layout: { right: 13, width: 25, height: 20, top: 5 },
          classNames: ["green-amount"],
          valueBinding: 'MyApp.editColorController.green',
          textAlign: SC.ALIGN_RIGHT
        })
      }),

      blueView: SC.View.design({
        layout: { left: 0, right: 0, top: 75, height: 30 },
        childViews: "blueLabel blueSlider blueAmount".w(),
        classNames: ["end-time-view"],

        blueLabel: SC.LabelView.design({
          layout: { left: 0, width: 60, height: 20, top: 5 },
          classNames: ["blue-label"],
          value: 'Blue:',
          textAlign: SC.ALIGN_RIGHT
        }),

        blueSlider: SC.SliderView.design({
          layout: { left: 80, right: 55, top: 0, height: 30 },
          minimum: 0,
          maximum: 255,
          step: 1,
          valueBinding: 'MyApp.editColorController.blue'
        }),

        blueAmount: SC.LabelView.design({
          layout: { right: 13, width: 25, height: 20, top: 5 },
          classNames: ["blue-amount"],
          valueBinding: 'MyApp.editColorController.blue',
          textAlign: SC.ALIGN_RIGHT
        })
      }),

      cancelButton: SC.ButtonView.design({
        layout: { right: 90, bottom: 10, width: 70, height: 24 },
        title: 'Cancel',
        action: 'cancelColorPicker'
      }),

      doneButton: SC.ButtonView.design({
        layout: { right: 10, bottom: 10, width: 70, height: 24 },
        title: 'Done',
        action: 'doneWithColorPicker',
        isDefault: YES
      })
    })
  })
});

var pastels = {"Snow":[255,250,250],
               "Snow 2":[238,233,233],
               "Snow 3":[205,201,201],
               "Snow 4":[139,137,137],
               "Ghost White":[248,248,255],
               "White Smoke":[245,245,245],
               "Gainsboro":[220,220,220],
               "Floral White":[255,250,240],
               "Old Lace":[253,245,230],
               "Linen":[240,240,230],
               "Antique White":[250,235,215],
               "Antique White 2":[238,223,204],
               "Antique White 3":[205,192,176],
               "Antique White 4":[139,131,120],
               "Papaya Whip":[255,239,213],
               "Blanched Almond":[255,235,205],
               "Bisque":[255,228,196],
               "Bisque 2":[238,213,183],
               "Bisque 3":[205,183,158],
               "Bisque 4":[139,125,107],
               "Peach Puff":[255,218,185],
               "Peach Puff 2":[238,203,173],
               "Peach Puff 3":[205,175,149],
               "Peach Puff 4":[139,119,101],
               "Navajo White":[255,222,173],
               "Moccasin":[255,228,181],
               "Cornsilk":[255,248,220],
               "Cornsilk 2":[238,232,205],
               "Cornsilk 3":[205,200,177],
               "Cornsilk 4":[139,136,120],
               "Ivory":[255,255,240],
               "Ivory 2":[238,238,224],
               "Ivory 3":[205,205,193],
               "Ivory 4":[139,139,131],
               "Lemon Chiffon":[255,250,205],
               "Seashell":[255,245,238],
               "Seashell 2":[238,229,222],
               "Seashell 3":[205,197,191],
               "Seashell 4":[139,134,130],
               "Honeydew":[240,255,240],
               "Honeydew 2":[244,238,224],
               "Honeydew 3":[193,205,193],
               "Honeydew 4":[131,139,131],
               "Mint Cream":[245,255,250],
               "Azure":[240,255,255],
               "Alice Blue":[240,248,255],
               "Lavender":[230,230,250],
               "Lavender Blush":[255,240,245],
               "Misty Rose":[255,228,225],
               "White":[255,255,255]};