var Menu = function() {
  this.$red = $("#menu #folder-red");
  this.$redUl = $("> ul", this.$red);
  this.$redLi = $("> li", this.$redUl);
  this.$redBack = $(".folder-back", this.$red);

  this.$black = $("#menu #folder-black");
  this.$blackUl = $("> ul", this.$black);
  this.$blackLi = $("> li", this.$blackUl);
  this.$blackBack = $(".folder-back", this.$black);

  this.largeSideMargin = this.$red.css("left");
  this.smallSideMargin = this.$black.css("right");
  this.largeZIndex = this.$red.css("zIndex");
  
  this.largeDivSizes =  {width: this.$red.css("width"),
                         height: this.$red.css("height"),
                         marginTop: this.$red.css("marginTop"),
                         fontSize: this.$red.css("fontSize")};
  this.largeUlSizes =   {height: this.$redUl.css("height"),
                         marginTop: this.$redUl.css("marginTop"),
                         marginRight: this.$redUl.css("marginRight"),
                         marginLeft: this.$redUl.css("marginLeft")};
  this.largeLiSizes =   {paddingTop: this.$redLi.css("paddingTop"),
                         paddingBottom: this.$redLi.css("paddingBottom")};
  this.largeBackSizes = {bottom: this.$redBack.css("bottom")};

  this.smallDivSizes =  {width: this.$black.css("width"),
                         height: this.$black.css("height"),
                         marginTop: this.$black.css("marginTop"),
                         fontSize: this.$black.css("fontSize")};
  this.smallUlSizes =   {height: this.$blackUl.css("height"),
                         marginTop: this.$blackUl.css("marginTop"),
                         marginRight: this.$blackUl.css("marginRight"),
                         marginLeft: this.$blackUl.css("marginLeft")};
  this.smallLiSizes =   {paddingTop: this.$blackLi.css("paddingTop"),
                         paddingBottom: this.$blackLi.css("paddingBottom")};
  this.smallBackSizes = {bottom: this.$blackBack.css("bottom")};

  this.duration = 500;
  this.fadeSpeed = 100;

  this.setup();
}
Menu.prototype = {
  setup: function() {
    var self = this;
    $("a", self.$redUl).click(function() { self.clickHandle(this); return false; });
    $("a", self.$blackBack).click(function() { self.hideBlack(true, function() { self.showRed(true, function() { self.$blackUl.fadeOut(self.fadeSpeed, function() { self.$blackUl.empty().show(); }) }); }); return false; });
    $(".active > a", self.$red).each(function() { self.hideRed(false, function() { self.loadSubmenu(false); }) });
  },
  clickHandle: function(a) {
    var self = this;
    var $a = $(a);
    $(".active", self.$red).removeClass("active");
    $a.parent().addClass("active");
    self.hideRed(true, function() { self.loadSubmenu(true); });
  },
  loadSubmenu: function(animate) {
    var self = this;
    if (animate) {
      self.$blackUl.fadeOut(self.fadeSpeed, function() {
        self.$blackUl.html($(".active ul", self.$red).html()).fadeIn(self.fadeSpeed);
        self.showBlack(animate);
      });
    } else {
      self.$blackUl.hide().html($(".active ul", self.$red).html()).show();
      self.showBlack(animate);
    }
  },
  showRed: function(animate, callback) {
    callback = callback || nothing;
    var self = this;
    var duration = (animate) ? self.duration : 0;
    self.$red.animate($.extend({}, self.largeDivSizes, { left: self.largeSideMargin }), { duration: duration, complete: callback });
    self.$redUl.animate(self.largeUlSizes, { duration: duration });
    self.$redLi.animate(self.largeLiSizes, { duration: duration });
    self.$redBack.animate(self.largeBackSizes, { duration: duration });
  },
  hideRed: function(animate, callback) {
    callback = callback || nothing;
    var self = this;
    var duration = (animate) ? self.duration : 0;
    self.$red.animate($.extend({}, self.smallDivSizes, { left: self.smallSideMargin }), { duration: duration, complete: callback });
    self.$redUl.animate(self.smallUlSizes, { duration: duration });
    self.$redLi.animate(self.smallLiSizes, { duration: duration });
    self.$redBack.animate(self.smallBackSizes, { duration: duration });
  },
  showBlack: function(animate, callback) {
    callback = callback || nothing;
    var self = this;
    var duration = (animate) ? self.duration : 0;
    self.$black.css({zIndex: self.largeZIndex + 1}).animate($.extend({}, self.largeDivSizes, { right: self.largeSideMargin }), {duration: duration, complete: callback });
    self.$blackUl.animate(self.largeUlSizes, { duration: duration });
    self.$blackLi.animate(self.largeLiSizes, { duration: duration });
    self.$blackBack.animate(self.largeBackSizes, { duration: duration });
  },
  hideBlack: function(animate, callback) {
    callback = callback || nothing;
    var self = this;
    var duration = (animate) ? self.duration : 0;
    self.$black.animate($.extend({}, self.smallDivSizes, { right: self.smallSideMargin }), { duration: duration, complete: function() { self.$black.css({zIndex: self.largeZIndex - 1}); callback(); } });
    self.$blackUl.animate(self.smallUlSizes, { duration: duration });
    self.$blackLi.animate(self.smallLiSizes, { duration: duration });
    self.$blackBack.animate(self.smallBackSizes, { duration: duration });
  }
};

var nothing = function() { return false; };