var Menu = {
  
  initialize : function() {
    this.el = get('.the_menu');
    this.edge = get('.left_edge');
    this.template = new Template(Templates.menuPage);
    this.visible = false;
    
    Page.each(function(page) {
      this.addMenuItem(page);
    }.bind(this));
    
    this.edge.observe('mouseenter', this.fadeIn.bind(this));
    get('.the_page').observe('mouseover', this.fadeOut.bind(this));
    this.setSortable();
    
    Dock.initialize();
  },
  
  addMenuItem : function(page) {
    var html = this.template.evaluate({title : page.get('title'), 
                                       id : page.id });
    this.el.insert(html);
    var item = $('menu_page_' + page.id);
    item.down('.title').observe('click', function(){Typewriter.loadPage(page);});
    this.setSortable();
  },
  
  removeMenuItem : function(page) {
    $('menu_page_' + page.id).remove();
    this.setSortable();
  },
  
  updateMenuItem : function(page) {
    var el = get('#menu_page_' + page.id);
    el.down('.title').update(page.get('title'));
  },
  
  setSortable : function() {
    Sortable.destroy(this.el);
    Sortable.create(this.el, {handle:".grabber", onUpdate : this.onMenuOrderChange.bind(this)});
  },
  
  onMenuOrderChange : function() {
    var ids = Sortable.serialize('the_menu', {name:'id'}).gsub(/&/,'').split('id[]=');
    ids.shift();
    ids.each(function(id, i) {
      var page = Page.get(id);
      page.set('menu_position', i);
      page.save();
    });    
  },
  
  fadeIn : function(e) {
    this.el.setStyle({opacity:1});
    this.visible = true;
  },
  
  fadeOut : function(e) {
    this.el.setStyle({opacity:0});
    this.visible = false;
  }
  
};