gistfile1.coffee

class views.GraphToggleMenu
  # note this template is pseudocode and will not work inline like this
  template: """
    <div class="selected-option"></div>
    <div class="dropdown-arrow"></div>
    <ul class="graph-menu"></ul>
  """

  initialize: (options) ->
    # if model is not manually set (probably doesn't need to be) then
    # instantiate a new one
    @model ||= new models.GraphToggleMenu
    if options.options?
      @model.addOption(option) for option of options.options
    @model.on 'change:options', @render
    @model.on 'change:visible', @updateVisibility
    @model.on 'change:selected', @updateSelected
  
  render: ->
    # draw current option
    # draw arrow button
    for option of @model.get('options')
      optionView = new views.GraphMenuOption model:option
      optionView.render()
      @$(".graph-menu").append(option.el)

  updateVisibility: ->
    @$("ul.graph-menu").css('visibility', @model.visible)

  updateSelected: ->
    # change the displayed option to match the currently selected one on the model

  events:
    'click:.dropdown-arrow': 'toggleMenu'
    'click:li.graph-menu-item': 'itemSelected'
  
  toggle: -> @model.toggleVisibility()

  itemSelected: (event) ->
    @model.set('selected', getItemClassName)   # kinda tricky, let me know if you need help with this, you'll need to get it from the event


class views.GraphMenuOption extends Backbone.View
  tagName: 'li'
  className: 'graph-menu-item'
  render: ->
    @$el.addClass @model.get('className')
    @$el.html @model.get('label')




class models.GraphToggleMenu extends Backbone.Model
  defaults:
    visible: false
    selected: 0
    options: []
  initialize: ->
    @set 'menu', new models.GraphMenu
  addOption: (optionDesc) ->
    @get('options').push(new models.GraphMenuOption optionDesc)
    @trigger 'change:options'
  toggleVisibility: ->    
    @model.set('visible', [email protected]('visible'))

class models.GraphMenuOption extends Backbone.Model
  defaults:
    className: ''
    label: ''



lineToggleMenu = new views.GraphToggleMenu
  options: [
    { label:'solid', className:'option-solid' }
    { label:'dashed', className:'option-dashed' }
  ]
lineToggleMenu.render()
@$el.append lineToggleMenu.el