// create dummy console necessary
(function () {
  if (typeof console == 'undefined') {
    var nullFunction = function () {};
    console = {
      log: nullFunction,
      error: nullFunction,
      debug: nullFunction
    };
  }
})();

// add some console shorthands
var _log = console.log;
var _error = console.error;
var _debug = console.debug;

// ============================================================================
var FcMainMenu = Class.create({
  createdElements: [],
  subMenu: null, // ul element with columns
  bgStyles: null, // dimension of column container
  
  open: function (link) {
    link = $(link);
    link.addClassName('fc_over');
    
    this.subMenu = link.next('ul');
    if (!this.subMenu) return;
    
    // if menu is activated...
    var topMenuIsActiv = link.hasClassName('active');
    if (topMenuIsActiv) {
      // ...set active class to subMenu
      this.subMenu.addClassName('fc_active');
    }
    
    var columns = this.subMenu.childElements();
    if (columns.length == 0) return;
    
    var subMenuPosition = this.subMenu.positionedOffset();
    
    // create dimension object for background box
    var maxHeight = 0;
    var totalWidth = 0;
    for (var i = 0; i < columns.length; i++) {
      var height = columns[i].getHeight();
      var width = columns[i].getWidth();
      // give li elements an explicit width
      columns[i].setStyle({
        width: width + 'px'
      });
      totalWidth += width;
      //~ alert(width);
      if (height > maxHeight) {
        maxHeight = height;
      }
    }
    this.bgStyles = {
      left: subMenuPosition.left,
      top: subMenuPosition.top,
      width: totalWidth,
      height: maxHeight
    };
    
    // set explicit subMenu width
    this.subMenu.setStyle({
      width: this.bgStyles.width + 'px'
    });
    
    this.createBgBox('fc_main_menu_bg');
    this.createBgBox('fc_main_menu_shadow_bottom', {left: 2, height: 3, width: -2});
    this.createBgBox('fc_main_menu_shadow_right', {top: 7, width: 3, height: -7});
    this.createBgBox('fc_main_menu_shadow_right_bottom', {width: 3, height: 3});
    this.createBgBox('fc_main_menu_shadow_left_bottom', {left: -1, height: 3});
    this.createBgBox('fc_main_menu_shadow_right_top', {width: 3});
    this.createBgBox('fc_main_menu_shadow_left', {left: -1});
    
    for (var i = 0; i < (columns.length - 1); i++) {
      this.createSeperator(i, columns[i]);
    }
    
    if (!topMenuIsActiv) {
      this.createDownArrow(link);
    }
  },
  
  close: function (link) {
    link = $(link);
    link.removeClassName('fc_over');
    
    var bgBox = null;
    while (bgBox = this.createdElements.pop()) {
      bgBox.remove();
    }
  },
  
  // private
  // first created bg box is on top, second is behind and so on
  createBgBox: function (id, offset) {
    var defaultOffset = {
      left: 0,
      top: 0,
      width: 0,
      height: 0
    };
    if (typeof offset == 'undefined') {
      offset = defaultOffset;
    } else {
      offset = Object.extend(defaultOffset, offset);
    }
    
    var bgNumber = this.createdElements.length + 1;
    
    this.subMenu.insert({after: '<div id="' + id + '"></div>'});
    var bgBox = $(id);
    bgBox.setStyle({
      position: 'absolute',
      left: (this.bgStyles.left + offset.left) + 'px',
      top: (this.bgStyles.top + offset.top) + 'px',
      width: (this.bgStyles.width + offset.width) + 'px',
      height: (this.bgStyles.height + offset.height) + 'px',
      zIndex: 900 - bgNumber
    });
    this.createdElements.push(bgBox);
  },
  
  // private
  createSeperator: function (num, column) {
    var columnPosition = column.positionedOffset();
    var columnWidth = column.getWidth();
    var id = 'seperator_' + num;
    this.subMenu.insert({after: '<div class="fc_seperator" id="' + id + '"></div>'});
    var seperator = $(id);
    seperator.setStyle({
      position: 'absolute',
      left: (columnPosition.left + columnWidth + 3) + 'px',
      top: (this.bgStyles.top + 15) + 'px',
      width: 2 + 'px',
      height: (this.bgStyles.height - 30) + 'px',
      zIndex: 1000 + num
    });
    this.createdElements.push(seperator);
  },
  
  // private
  createDownArrow: function (link) {
    var id = 'fc_down_arrow';
    this.subMenu.insert({bottom: '<li id="' + id + '"></li>'});
    var arrow = $(id);
    arrow.setStyle({
      position: 'absolute',
      left: (link.getWidth() / 2 - 3).round() + 'px',
      top: '0px',
      width: 7 + 'px',
      height: 4 + 'px',
      zIndex: 1000 + 100
    });
    this.createdElements.push(arrow);
  }
});
FcMainMenu.instance = null;
FcMainMenu.getInstance = function () {
  if (this.instance == null) {
    this.instance = new FcMainMenu();
  }
  return this.instance;
}