gistfile1.js

(function(){
  
  Channels.UI.TimezonePulldown = Class.create(ZenUIView); 
  Channels.UI.TimezonePulldown.addMethods({
    
    initialize : function($super, options){
      this.klassName = 'Channels.UI.TimezonePulldown';
      this.defaultTimezone = 'America/New_York';
      this.callbacks = {
        normal : [
        ]
      };
      this.templates = {
        button : '<div class="button pulldown right"><span></span></div>',
        menu   : '<div id="timezone_pulldown_menu" class="dialog menu canvas" style="position:absolute;top:-5000px;left:-5000px">\
                    <div id="timezone_pulldown_menu_content">\
                      <div class="scroller">\
                        <ul class="scroller_content dialog_content">\
                        </ul>\
                      </div>\
                    </div>\
                  </div>'
      };
      $super(options);
      return this;
    },
    
    render : function(timezone){
      this.el.update(this.templates.button);
      this.button = this.el.down('.button');
      DrawButton.extend(this.button);
      this.menu = this._findOrCreateMenu();
      Pulldown.extend(this.menu, {
        pos : '-left bottom',
        onShow : function() {this.menu.draw();}.bind(this)
      }).attachTo(this.button);
      this.menu.singleListener('click', this._onMenuClick.bind(this));
      this.setTimezone(this.model.get('time_zone') || this.defaultTimezone);
      return this;
    },
    
    setTimezone : function(newTimezone){
      this.timezone = newTimezone;
      this.button.down('span').update(window.RAILS_TZ_FORMAT_TO_TZ_STRING_MAPPING.get(newTimezone));
      this.button.draw();
    },
    
    getTimezone : function(){
      return this.timezone;
    },
    
    timeZoneChanged : function(newZone){
      this.setTimezone(newZone);
    },
    
    _findOrCreateMenu : function(){
      var menu = $('timezone_pulldown_menu');
      if (!menu) menu = this._createMenu();
      return menu;
    },

    _createMenu : function(){
      $(document.body).insert({bottom:this.templates.menu});
      var menu = $('timezone_pulldown_menu');
      DrawDialog.extend(menu);
      menu.scroller = new Scroller(menu.down('.scroller'));
      menu.down('.sb_tray').singleListener('click', function(e){Event.stop(e);});
      var content = menu.down('.dialog_content');
      content.innerHTML = '';
      // load in the time zones
      window.TZ_STRING_TO_RAILS_TZ_FORMAT_MAPPING.keys().sort(function(a, b){
        if (a && a.toString) a = a.match(/US/) ? 'a' + a.toString() : 'z' + a.toString();
        if (b && b.toString) b = b.match(/US/) ? 'a' + b.toString() : 'z' + b.toString();
        return a < b ? -1 : (b < a ? 1 : 0);
      }).each(function(zone,i) {
        var zoneCode = zone.toIdString().gsub(/__.*/,'');
        content.insert('<li class="menu_item" id="'+zoneCode+'">'+zone+'</li>');
        if (i==3) content.insert('<hr />');
      });
      return menu;
    },

    // ==================
    // = Event Handlers =
    // ==================
    _onMenuClick : function(e){
      var eventElem = Event.element(e);
      var newTimezone = eventElem.innerHTML;
      if (!eventElem.hasClassName('menu_item') || newTimezone.strip().blank() || this.menu.attachedTo != this.button) return false;
      this.model.set('time_zone', window.TZ_STRING_TO_RAILS_TZ_FORMAT_MAPPING.get(newTimezone.unescapeHTML()));
    }
  });
  
})();