var ShopSummary = Class.create();
Object.extend(ShopSummary, {
  closedImg: '/ramen/images/open.gif',
  openedImg: '/ramen/images/close.gif',
  loadingImg: '/ramen/images/loading.gif',
  errorImg: '/ramen/images/summary_error.gif'
});
ShopSummary.prototype = {
  initialize: function(liTag) {
    this.opened = false;
    this.liTag = liTag;
	this.btn = liTag.firstChild;
    this.toggleButton = this.createButton();
    this.summaryContainer = this.createSummaryContainer();
    this.detail = this.createDetail();
    this.tabMenu = this.createTab();
    this.contentCache = null;
    
    this.mid = this.liTag.getAttribute('mid');
    this.sid = this.liTag.getAttribute('sid');

    this.hide();
    this.summaryContainer.appendChild(this.tabMenu);
    this.summaryContainer.appendChild(this.detail);
    this.btn.appendChild(this.toggleButton);
    this.liTag.appendChild(this.summaryContainer);
  },

  createButton: function() {
    var btn = document.createElement('img');
    btn.src = ShopSummary.closedImg;
    btn.style.cursor = 'pointer';
    btn.style.marginLeft = '5';
    Event.observe(this.btn, 'click', this.toggle.bindAsEventListener(this), false);
    return btn;
  },
  
  createSummaryContainer: function() {
    var div = document.createElement('div');
    div.className = 'resultwindow';
    return div;
  },
  
  createTab: function() {
    var ul = document.createElement('ul');
    ul.className = 'detailmenu';
    
    var li1 = document.createElement('li');
    li1.className = 'menuitem';
    li1.style.cursor = 'pointer';
    Event.observe(li1, 'click', this.showDetail.bindAsEventListener(this), false);
    li1.innerHTML = '<img src="/ramen/images/search1_1.gif" height="25" width="75">';
    ul.appendChild(li1);
    
    var li2 = document.createElement('li');
    li2.className = 'menuitem';
    li2.style.cursor = 'pointer';
    Event.observe(li2, 'click', this.showShop.bindAsEventListener(this), false);
    li2.innerHTML = '<img src="/ramen/images/search2_0.gif" height="25" width="75">';
    ul.appendChild(li2);
    
    var li3 = document.createElement('li');
    li3.className = 'menuitem';
    li3.style.cursor = 'pointer';
    Event.observe(li3, 'click', this.showMap.bindAsEventListener(this), false);
    li3.innerHTML = '<img src="/ramen/images/search3_0.gif" height="25" width="75">';
    ul.appendChild(li3);
    
    var li4 = document.createElement('li');
    li4.className = 'menuitem';
    li4.style.cursor = 'pointer';
    Event.observe(li4, 'click', this.showMenu.bindAsEventListener(this), false);
    li4.innerHTML = '<img src="/ramen/images/search4_0.gif" height="25" width="105">';
    ul.appendChild(li4);
    
    this.li1 = li1;
    this.li2 = li2;
    this.li3 = li3;
    this.li4 = li4;
    
    return ul;
  },
  
  createDetail: function() {
    var div = document.createElement('div');
    div.className = 'detail';
    return div;
  },
  
  toggle: function() {
    if (this.opened) {
      this.close();
    } else {
      this.open();
    }
  },
  
  showDetail: function() {
    this.li1.innerHTML='<img src="/ramen/images/search1_1.gif" />';
    this.li2.innerHTML='<img src="/ramen/images/search2_0.gif" />';
    this.li3.innerHTML='<img src="/ramen/images/search3_0.gif" />';
    this.li4.innerHTML='<img src="/ramen/images/search4_0.gif" />';
    this.show('<img src="' + ShopSummary.loadingImg + '" /> Now Loading...', 'center');
    new Ajax.Updater(this.detail, '/ramen/detail/' + this.mid + '/' + this.sid, {asynchronous:true, evalScripts:true});
  },
  
  showShop: function() {
    this.li1.innerHTML='<img src="/ramen/images/search1_0.gif" />';
    this.li2.innerHTML='<img src="/ramen/images/search2_1.gif" />';
    this.li3.innerHTML='<img src="/ramen/images/search3_0.gif" />';
    this.li4.innerHTML='<img src="/ramen/images/search4_0.gif" />';
    this.show('<img src="' + ShopSummary.loadingImg + '" /> Now Loading...', 'center');
    new Ajax.Updater(this.detail, '/ramen/shop/' + this.sid, {asynchronous:true, evalScripts:true});
  },
  
  showMap: function() {
    this.li1.innerHTML='<img src="/ramen/images/search1_0.gif" />';
    this.li2.innerHTML='<img src="/ramen/images/search2_0.gif" />';
    this.li3.innerHTML='<img src="/ramen/images/search3_1.gif" />';
    this.li4.innerHTML='<img src="/ramen/images/search4_0.gif" />';
    this.show('<img src="' + ShopSummary.loadingImg + '" /> Now Loading...', 'center');
    this.show('<iframe src="/ramen/minimap/' + this.sid + '" border="0" width="400" height="250" scrolling="no" hspace="0" vspace="0" marginheight="0" marginwidth="0" frameborder="0"><img src="' + ShopSummary.loadingImg + '" /> Now Loading...</iframe>', 'center');
//    new Ajax.Updater(this.detail, '/ramen/map/' + this.sid, {asynchronous:true, evalScripts:true});
  },
  
  showMenu: function() {
    this.li1.innerHTML='<img src="/ramen/images/search1_0.gif" />';
    this.li2.innerHTML='<img src="/ramen/images/search2_0.gif" />';
    this.li3.innerHTML='<img src="/ramen/images/search3_0.gif" />';
    this.li4.innerHTML='<img src="/ramen/images/search4_1.gif" />';
    this.show('<img src="' + ShopSummary.loadingImg + '" /> Now Loading...', 'center');
    new Ajax.Updater(this.detail, '/ramen/menu/' + this.sid, {asynchronous:true, evalScripts:true});
  },
  
  open: function() {
    if (this.contentCache != null) {
      this.show(this.contentCache);
      return;
    }
    
    this.li1.innerHTML='<img src="/ramen/images/search1_1.gif" />';
    this.li2.innerHTML='<img src="/ramen/images/search2_0.gif" />';
    this.li3.innerHTML='<img src="/ramen/images/search3_0.gif" />';
    this.li4.innerHTML='<img src="/ramen/images/search4_0.gif" />';
    this.show('<img src="' + ShopSummary.loadingImg + '" /> Now Loading...', 'center');
    
    //var durl = this.liTag.getElementsByTagName('a')[0].href;
    new Ajax.Updater({success: this.detail}, '/ramen/detail/' + this.mid + '/' + this.sid, {asynchronous:true, evalScripts:true});
  },
  
  close: function() {
    this.hide();
  },
  
  show: function(text, align) {
    if (!align) align = 'left';
    this.opened = true;
    this.toggleButton.src = ShopSummary.openedImg;
    text = [
            '<div align="' + align + '"><p>',
            text,
            '</p></div>',
           ].join('');
    this.detail.innerHTML = text;
    Element.show(this.summaryContainer);
  },
  
  hide: function() {
    this.opened = false;
    this.toggleButton.src = ShopSummary.closedImg;
    Element.hide(this.summaryContainer);
  }
}

var AllOpenButton = Class.create();
AllOpenButton.prototype = {
  initialize: function(shopSummaryButtons) {
    if (!shopSummaryButtons
        || shopSummaryButtons.length == 0
        || !$('all-open')) return;
    this.closedImg = '/ramen/images/open.gif';
    this.openedImg = '/ramen/images/close.gif';
    this.opened = false;
    this.shopSummaryButtons = shopSummaryButtons;
    $('all-open').appendChild(this.createButton());
  },
  
  createButton: function() {
    this.icon = document.createElement('img');
    this.icon.src = this.closedImg;
    this.icon.style.cursor = 'pointer';
    
    this.msg = document.createElement('span');
    this.msg.appendChild(document.createTextNode('全て開く'));;
    
    var btn = document.createElement('span');
    btn.className = 'all-toggle-button';
    btn.style.cursor = 'pointer';
    btn.appendChild(this.icon);
    btn.appendChild(this.msg);
    
    Event.observe(btn, 'click', this.toggle.bindAsEventListener(this), false);
    return btn;
  },
  
  toggle: function() {
    if (this.opened) {
      this.close();
    } else {
      this.open();
    }
    this.opened = !this.opened;
  },
  
  open: function() {
    this.shopSummaryButtons.each(function(btn) {
      btn.open();
    });
    this.icon.src = this.openedImg;
    this.msg.innerHTML = '全て閉じる';
  },
  
  close: function() {
    this.shopSummaryButtons.each(function(btn) {
      btn.close();
    });
    this.icon.src = this.closedImg;
    this.msg.innerHTML = '全て開く';
  }
}