/**
 * @class MenuItemType
 *
 * The class MenuItemType represents a type menu item in the main menu.
 */
var MenuItemType = function(parentItem, htmlId, id, label, contentThumbs)
{
  // ---- Constants ---------------------------------------------------

  /** The class name of the normal A element. */
  var CLASSNAME = "mainnavigation_level_1";
  /** The class name of the selected A element. */
  var CLASSNAME_SELECTED = "mainnavigation_level_1_selected";

  // ---- Fields ------------------------------------------------------

  /** The parent menu item. */
  this.parentItem = null;
  /** The HTML id of this menu entry. */
  this.htmlId = htmlId;
  /** The ID of this menu entry. */
  this.id = null;
  /** The local label of this menu entry. */
  this.label = null;
  /** The distinct thumbnail paths of the child menu entries. */
  this.contentThumbs = null;
  /** Indicates whether this menu entry is selected. */
  this.selected = false;
  /** The child menu entries. */
  this.children = null;
  /** The A element that represents this menu entry. */
  var a = null;
  /** The DIV element that represents this menu entry in the content area. */
  this.contentEntryDiv = null;
  /** The DIV element that represents this menu entry in the navigation area. */
  this.menuEntryDiv = null;
  /** The DIV element where the child elements will be attached to in the navigation area. */
  this.menuContainerDiv = null;

  // ---- Constructors ------------------------------------------------

  /**
   * Creates a new type menu item using the given information and existing HTML elements.
   *
   * @param {MenuItemApp} parentItem the parent application menu item
   * @param {String} htmlId the ID of the existing HTML element
   * @param {String} id the ID of this menu entry
   * @param {String} label a label in the local language
   * @param {String[]} contentThumbs the distinct thumbnail paths of the child menu entries
   */
  this.constructor = function(parentItem, htmlId, id, label, contentThumbs)
  {
    this.parentItem = parentItem;
    this.htmlId = htmlId;
    this.id = id;
    this.label = label;
    this.contentThumbs = contentThumbs;

    this.parentItem.addChild(this);

    this.initMenu();
  };

  // ---- Public functions --------------------------------------------

  /**
   * Returns the child with the given ID or null.
   *
   * @public
   * @param {String} id an ID
   * @return {MenuItemRange}
   * The child with the given ID or null.
   */
  this.getChild = function(id)
  {
    if(this.children != null)
    {
      for(var i = 0; i < this.children.length; i++)
      {
        var child = this.children[i];
        if(child.id == id)
        {
          return child;
        }
      }
    }
    return null;
  };

  /**
   * Adds a child to the menu item.
   *
   * @public
   * @param {MenuItemRange} child a range menu item
   */
  this.addChild = function(child)
  {
    if(this.children == null)
    {
      this.children = new Array();
    }
    this.children.push(child);
  };

  /**
   * Unselects this menu entry.
   *
   * @public
   */
  this.close = function()
  {
    if(this.selected)
    {
      if(this.children != null)
      {
        for(var i = 0; i < this.children.length; i++)
        {
          this.children[0].close();
        }
      }

      a.removeClass(CLASSNAME_SELECTED);
      a.addClass(CLASSNAME);

      if(this.menuContainerDiv != null)
      {
        this.menuContainerDiv.animate({height:"hide"}, {duration:page.speed});
      }

      if(this.contentEntryDiv != null)
      {
        this.contentEntryDiv.find("div.typecontent_type_contents").animate({height:"hide"}, {duration:page.speed});
        this.contentEntryDiv.find("div.type_images").animate({opacity:"show"}, {duration:page.speed});
      }

      this.selected = false;
    }
  };

  /**
   * Selected this menu entry and closes all sibling menu entries.
   *
   * @public
   */
  this.open = function()
  {
    if(!this.selected)
    {
      if(this.children == null)
      {
        dwrService.getRanges(page.dealerId, page.locale, page.context, this.parentItem.id, this.id, DWRResultProcessor.processDWRResult);
      }
      else
      {
        for(var i = 0; i < this.parentItem.children.length; i++)
        {
          var child = this.parentItem.children[i];
          if(child != this)
          {
            child.close();
          }
        }

        if(this.contentEntryDiv == null)
        {
          this.parentItem.buildContent();
        }
        if(this.contentEntryDiv.find("div.typecontent_type_contents").length == 0)
        {
          this.buildContent();
        }

        a.removeClass(CLASSNAME);
        a.addClass(CLASSNAME_SELECTED);

        this.menuContainerDiv.animate({height:"show"}, {duration:page.locale});

        if(page.contentDiv != this.parentItem.contentEntryDiv)
        {
          page.contentDiv.animate({opacity:"hide"}, {duration:page.speed / 2, queue:"content"});
          this.parentItem.contentEntryDiv.animate({opacity:"show"}, {duration:page.speed / 2, queue:"content"});
          page.contentDiv = this.parentItem.contentEntryDiv;
        }

        var speed = page.speed;
        if($.browser.msie && $.browser.version < 7.0)
        {
          speed = 0;
        }
        this.contentEntryDiv.find("div.typecontent_type_contents").animate({height:"show"}, {duration:speed,
                                    complete:function(){page.contentDiv.pngFix();}});
        this.contentEntryDiv.find("div.type_images").animate({opacity:"hide"}, {duration:speed});

        this.selected = true;
      }
    }
    else
    {
      if(page.contentDiv != this.parentItem.contentEntryDiv)
      {
        page.contentDiv.animate({opacity:"hide"}, {duration:page.speed / 2, queue:"content"});
        this.parentItem.contentEntryDiv.animate({opacity:"show"}, {duration:page.speed / 2, queue:"content"});
        page.contentDiv = this.parentItem.contentEntryDiv;
      }
    }
  };

  /**
   * Adds the given range menu items and creates the HTML elements for it.
   *
   * @param {MenuItem[]} menuItems an array of type menu items
   */
  this.addChildren = function(menuItems)
  {
    if(menuItems.length > 0)
    {
      this.children = new Array();
      this.menuContainerDiv = $("<div class=\"mainnavigation_type_contents\"/>");
      this.menuContainerDiv.hide();
      for(var i = 0; i < menuItems.length; i++)
      {
        var menuItem = menuItems[i];
        new MenuItemRange(this, menuItem.htmlId, menuItem.id, menuItem.index, menuItem.ippId, menuItem.label, menuItem.thumb);
      }
      this.menuEntryDiv.append(this.menuContainerDiv);
    }
    this.open();
  };

  // ---- Not so public functions -------------------------------------

  /**
   * Inits the menu area for this menu entry.
   */
  this.initMenu = function()
  {
    this.menuEntryDiv = $("#" + htmlId);
    if(this.menuEntryDiv.length == 0)
    {
      this.buildMenu();
    }
    else
    {
      a = this.menuEntryDiv.find("a:first");

      this.menuContainerDiv = this.menuEntryDiv.find("div.mainnavigation_type_contents");
      if(this.menuContainerDiv.length == 0)
      {
        this.menuContainerDiv = null;
      }
    }

    a.attr("href", "javascript:openMenu(\"" + this.parentItem.id + "\", \"" + this.id + "\");");
    this.selected = a.hasClass(CLASSNAME_SELECTED);
  };

  /**
   * Inits the content area for this menu entry.
   */
  this.initContent = function()
  {
    var i;
    var child;

    this.contentEntryDiv = $("#c_" + htmlId);
    if(this.contentEntryDiv.length == 0)
    {
      this.contentEntryDiv = null;
      if(this.children != null)
      {
        for(i = 0; i < this.children.length; i++)
        {
          child = this.children[i];
          if(child.selected)
          {
            child.initContent();
          }
        }
      }
    }
    else
    {
      var headlineDiv = this.contentEntryDiv.find("div.type_headline");
      if(this.contentThumbs != null)
      {
        var imageDiv = $("<div class=\"type_images\">");
        for(i = 0; i < contentThumbs.length; i++)
        {
          var img = $("<img src=\"" + contentThumbs[i] + "\" alt=\"\"/>");
          imageDiv.append(img);
        }
        imageDiv.hide();
        headlineDiv.append(imageDiv);
      }

      var rangeAs = this.contentEntryDiv.find("a.range_a");
      if(this.children != null)
      {
        for(i = 0; i < this.children.length; i++)
        {
          child = this.children[i];
          var a = rangeAs.eq(i);
          var aDiv = $("<div class=\"range_a\"/>");
          aDiv.attr("onclick", "openMenu(\"" + this.parentItem.id + "\", \"" + this.id + "\", \"" + child.id + "\", "
            + child.index + ");");
          aDiv.append(a.children());
          a.replaceWith(aDiv);
        }
      }
    }
  };

  /**
   * Creates the HTML representation of this menu entry in the menu.
   */
  this.buildMenu = function()
  {
    this.menuEntryDiv = $("<div class=\"mainnavigation_type_container\"/>");
    var aDiv = $("<div class=\"mainnavigation_entry_gray\"/>");
    a = $("<a class=\"" + CLASSNAME + "\"/>");
    a.text(this.label);
    aDiv.append(a);
    this.menuEntryDiv.append(aDiv);
    this.parentItem.menuContainerDiv.append(this.menuEntryDiv);
  };

  /**
   * Creates the HTML representation of this menu entry in content area.
   */
  this.buildContent = function()
  {
    var containerDiv = $("<div class=\"typecontent_type_contents\"/>");
    var table = $("<table class=\"ranges\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"/>");
    var row = $("<tr/>");
    var i;
    for(i = 0; i < this.children.length; i++)
    {
      var child = this.children[i];
      var cell = $("<td/>");
      var imagesDiv = $("<div class=\"ranges_images\">");
      var aDiv = $("<div class=\"range_a\"/>");
      aDiv.attr("clickdata", "openMenu(\"" + this.parentItem.id + "\", \"" + this.id + "\", \"" + child.id + "\", "
        + child.index + ");");
      aDiv.click(function(){eval($(this).attr("clickdata"))});
      var labelDiv = $("<div class=\"range_label\"/>");
      labelDiv.text(child.label);
      aDiv.append(labelDiv);
      var thumbDiv = $("<div class=\"range_thumb\"/>");
      var img = $("<img src=\"" + child.thumb + "\" alt=\"\"/>");
      thumbDiv.append(img);
      aDiv.append(thumbDiv);
      imagesDiv.append(aDiv);
      cell.append(imagesDiv);
      row.append(cell);
      if((i + 1) % 6 == 0 && i < this.children.length - 1)
      {
        table.append(row);
        row = $("<tr/>");
      }
    }
    i = i % 6;
    while(i % 6 != 0)
    {
      row.append($("<td><div class=\"ranges_images\"></div></td>"));
      i++;
    }
    table.append(row);
    containerDiv.append(table);
    containerDiv.hide();
    this.contentEntryDiv.append(containerDiv);
  };

  // ---- Constructor call --------------------------------------------

  this.constructor(parentItem, htmlId, id, label, contentThumbs);
};

// register a result function to process the range updae bean
$(document).ready(function()
{
  var processRangeUpdateBean = function(rangeUpdateBean)
  {
    var menuItemApp = page.menuRoot.getChild(rangeUpdateBean.applicationName);
    if(menuItemApp != null)
    {
      var menuItemType = menuItemApp.getChild(rangeUpdateBean.typeName);
      if(menuItemType != null)
      {
        menuItemType.addChildren(rangeUpdateBean.ranges);
      }
    }
  };

  DWRResultProcessor.registerResultFunction("rangeUpdateBean", processRangeUpdateBean);
});

/*
:parent.div <div id="d_${application.id}" class="mainnavigation_application_contents">
              <c:forEach var="type" items="${application.subMenu}">
:entry          <div id="${type.id}" class="mainnavigation_type_container">
                  <div class="mainnavigation_entry_gray">
:a                  <a class="mainnavigation_level_1<c:if test="${type.selected}">_selected</c:if>" href="${type.url}"><c:out value="${type.label}"/></a>
                  </div>
                  <c:if test="${not empty type.subMenu}">
:div                <div class="mainnavigation_type_contents">
                      <c:forEach var="range" items="${type.subMenu}">
:children               <!-- MenuItemRange -->
                      </c:forEach>
                    </div>
                  </c:if>
                </div>
              </c:forEach>
            </div>
*/