(function()
{
  require("Transition.js");
  require("ScreenShade.js");
  
  
  /* ************************************************************************ *
   * Constants
   * ************************************************************************ */
   
  var ID_CONTAINER         = "shop_map",
      ID_DOMESTIC_MAP      = "map_domestic",
      ID_MAP_CLOSE_BUTTON  = "map_close",
      CLASS_NAME_LOCAL_MAP = "map-local-region",
      TRANSITION_DURATION = 0.3;
  
  
  /* ************************************************************************ *
   * Fields
   * ************************************************************************ */
  
  var container,
      domesticMap,
      closeButton,
      shadePlaceHolder,
      shopLists = [];
  
  
  /* ************************************************************************ *
   * Event Handlers and Callbacks
   * ************************************************************************ */
  
  /**
   * 支店・営業所マップ上の地域ボタンのクリックを捕捉します。
   * 対応する地域の支店一覧を表示します。
   * @param {MouseEvent} event
   */
  function domesticMap_anchor_click(event)
  {
    var targetId = event.currentTarget.href.substr(event.currentTarget.href.indexOf("#") + 1);
    
    event.preventDefault();
    
    ScreenShade.show(
      container, "#1F9A63", 0.6, TRANSITION_DURATION, null, false, shadePlaceHolder,
      function()
      {
        showLocalRegion(targetId);
      });
  }
  
  
  /* ************************************************************************ *
   * Functions
   * ************************************************************************ */
  
  /**
   * 指定された id を持つ地域の支店一覧を表示します。
   */
  function showLocalRegion(id)
  {
    var target,
        placeHolder;
    
    target = document.getElementById(id);
    
    StyleManager.setOpacity(target, 0);
    StyleManager.setOpacity(closeButton, 0);
    
    target.style.display = "block";
    closeButton.style.display = "block";
    
    Transition.start(TRANSITION_DURATION, null, false, function(pos, loops)
    {
      StyleManager.setOpacity(closeButton, pos);
      StyleManager.setOpacity(target, pos);
      
      if (pos == 1)
      {
        EventManager.addEventListener(closeButton, "click", function(event)
        {
          EventManager.removeEventListener(
            event.currentTarget, event.type, arguments.callee);
          
          ScreenShade.hide(container);
          
          Transition.start(TRANSITION_DURATION, null, false, function(pos, loops)
          {
            StyleManager.setOpacity(closeButton, 1 - pos);
            StyleManager.setOpacity(target, 1 - pos);
            
            if (pos == 1)
            {
              target.style.display = "none";
              closeButton.style.display = "none";
            }
          });
        });
      }
    });
  }
  
  /**
   * 支店一覧のテキストが枠内に収まるように、リストに折り返しを入れます。
   */
  function makeListAppearance()
  {
    var i, j, k, lis, li, itemWidth, itemOffset, currentDisplay;
    
    for (i = 0; i < shopLists.length; i++)
    {
      currentDisplay = shopLists[i].parentNode.style.display;
      shopLists[i].parentNode.style.display = "block";
      
      itemWidth = shopLists[i].clientWidth / 3;
      
      lis = DOMOperator.getChildElements(shopLists[i]);
      
      for (j = 0; j < lis.length; j++)
      {
        li = lis[j];
        
        with (li.style)
        {
          position = "relative";
          top = "0";
          left = "0";
          width = itemWidth + "px";
        }
      }
      
      for (k = 1; true; )
      {
        itemOffset = 0;
        
        for (j = 0; j < lis.length; j++)
        {
          li =  lis[j];
          
          if (li.offsetTop - shopLists[i].offsetTop + li.offsetHeight >= shopLists[i].offsetHeight)
          {
            li.style.top = (-li.offsetTop + shopLists[i].offsetTop + itemOffset) + StyleManager.getComputedStyleValue(li, "top", true) + "px"; 
            li.style.left = itemWidth * k + "px";
            itemOffset += li.offsetHeight;
          }
        }
        
        if (itemOffset == 0)
          break;
        else
          k++;
      }
      
      shopLists[i].parentNode.style.display = currentDisplay;
    }
  }
  
  /**
   * 各地域の支店一覧を初期化します。
   */
  function initLocalRegionMap()
  {
    var i, locals, ul;
    
    locals = DOMOperator.getElementsByClassName(container, CLASS_NAME_LOCAL_MAP);
    
    for (i = 0; i < locals.length; i++)
    {
      with (locals[i].style)
      {
        display = "none";
        position = "absolute";
        top = "0";
        left = "0";
        top = "13px";
        left = "14px";
        maxHeight = StyleManager.getComputedStyleValue(locals[i], "minHeight");
        overflow = "hidden";
        zIndex = ScreenShade.Z_INDEX + 1;
        marginTop = "0";
        marginBottom = "0";
      }
      
      ul = locals[i].getElementsByTagName("UL").item(0);
      ul.style.overflow = "hidden";
      shopLists.push(ul);
    }
    
    makeListAppearance();
    
    EventManager.waitForFontSizeChanging(makeListAppearance);
  }
  
  /**
   * 支店・営業所マップ上の地域ボタンを初期化します。
   */
  function initDomesticMap()
  {
    var i, ac, a;
    
    for (i = 0, ac = domesticMap.getElementsByTagName("A"); i < ac.length; i++)
    {
      a = ac.item(i);
      EventManager.addEventListener(a, "click", domesticMap_anchor_click);
    }
  }
  
	
  /* ************************************************************************ *
   * Entry Point
   * ************************************************************************ */
  
  document.write('<style type="text/css" media="all">.map-local-region{ display:none }</style>');
  
  (function()
  {
    container = document.getElementById(ID_CONTAINER);
    
    if (null == container)
    {
      window.setTimeout(arguments.callee, 1);
      return;
    }
    
    domesticMap = document.getElementById(ID_DOMESTIC_MAP);
    closeButton = document.getElementById(ID_MAP_CLOSE_BUTTON);
    
    if (null == domesticMap || null == closeButton)
      return;
    
    container.style.zIndex = ScreenShade.Z_INDEX;
    closeButton.style.zIndex = ScreenShade.Z_INDEX + 2;
    
    shadePlaceHolder = container.insertBefore(
      document.createTextNode(""),
      DOMOperator.getLastElementChild(container));
    
    initDomesticMap();
    initLocalRegionMap();
    
  })();
  
})();