var Items = {};

Items.Panel = {
   cgi: 'items.cgi',

   initialize: function(options) {
      this.option = options;
      this.div = this.option.div;
      var self = this;
      addEvent(document.body, 'mousedown', function(e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            while(element.id == '')
               element = element.parentNode;
            if(element.id != 'item_panel')
               self.hide();
      });
   },

   hide: function() {
      this.div.style.display = 'none';
   },

   show: function(btn) {
      var pos = Position.positionedOffset(btn);
      with(this.div.style) {
         display = 'block';
         top  = (pos[1]-150) + 'px';
         left = (pos[0]-300) + 'px';
      }
      if(!this._loaded) {
         var conn = new Ajax.Request(this.cgi+'?'+(new Date).getTime(), {
               method: 'GET',
               onComplete: this._complete
            });
         this._loaded = true;
      }
   },

   _complete: function(res) {
      var self = Items.Panel;
      var option = self.option;
      option.panel = self.div;
      option.data = eval(res.responseText)
      Items.List.initialize(option);
   }
};

Items.List = {
   default_val: '\u9078\u629E\u3057\u3066\u4E0B\u3055\u3044',

   initialize: function(options) {
      this.option = options;
      this.lists  = options.data;
      this.elm    = options.panel;
      var sel = this.elm.getElementsByTagName('select');
      this.sel_category = sel[0];
      this.sel_name = sel[1];
      this.set_category();
   },

   set_category: function() {
      var category = new Array;
      var select = this.sel_category;
      var loaded = {};

      for(var e, i = 0; e = this.lists[i]; i++) {
         if(loaded[e.item_category]) continue;
         category.push(e.item_category);
         loaded[e.item_category] = true;
      }

      select.options.length = category.length + 1;
      select.options[0].value = '';
      select.options[0].text  = this.default_val;

      for(var v, i = 0; v = category[i]; i++) {
         select.options[i+1].value = v;
         select.options[i+1].text  = v;
      }

      this.change_category();
   },

   add: function() {
      var category = this.category();
      var name = this.name();
      if(category == '') return;
      if(name == '') return;
      Items.Panel.hide();

      var field = document.createElement('input');
      field.name = 'items';
      field.type = 'hidden';
      field.value = name;
      this.option.form.appendChild(field);
      this.update_table();
      this.sel_category.selectedIndex = 0;
      this.change_category();
   },

   update_table: function() {
      var items = new Array;
      var iis = this.option.form.getElementsByTagName('input');
      for(var it, i = 0; it = iis[i]; i++) {
         if(it.name == 'items')
            items.push(it);
      }

      var wt = '';
      wt += '<table id="product">';
      for(var e, i = 0; e = items[i]; i++) {
         wt += '<tr><td>'+e.value+'</td></tr>'
      }
      wt += '</table>';
      this.option.target.innerHTML = wt;
   },

   category: function() {
      return this.sel_category.options[this.sel_category.selectedIndex].value;
   },

   name: function() {
      return this.sel_name.options[this.sel_name.selectedIndex].value;
   },

   change_category: function() {
      var items = {};
      var select = this.sel_name;
      var category = this.category();

      for(var e, i = 0; e = this.lists[i]; i++) {
         if(e.item_category == category)
            items[e.item_name] = true;
      }

      items = to_array(items).sort();

      select.options.length = items.length+1;
      select.options[0].value = '';
      select.options[0].text  = this.default_val;

      for(var v, i = 0; v = items[i]; i++) {
         select.options[i+1].value = v;
         select.options[i+1].text  = v;
      }

      this.sel_name.selectedIndex = 0;
      this.change_name();
   },
 
   change_name: function() {
      this.elm.getElementsByTagName('input')[0].disabled = (this.name() == '');
   }
};

function to_array(hash) {
   var ary = new Array;
   for(var i in hash)
      ary.push(i);
   return ary;
}

addEvent(window, 'load', function() {
      Items.Panel.initialize({
            div:     $('item_panel'),
            target:  $('product_table'),
            form:    $('product_form')
         });
   });