if(typeof(Yumenosora) == "undefined"){
  Yumenosora = {}
}

Yumenosora.Design = {
  isIE6: function(){
    return Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
  },
  
  initStyle: function(path){
    if(path == null){
      path = "http://static.yumenosora.net/common/stylesheets/common-design.css";
    }
    
    var style = new Element('link', {
      type: 'text/css',
      rel: 'stylesheet',
      href: path
    });
    if(!Yumenosora.Design.isIE6()){
      $$('head')[0].appendChild(style);
    }
  },
  
  drawShadow: function(id, className) {
    if(!Yumenosora.Design.isIE6()){
      //指定されたエレメントを取得
      var target = $(id);
      Yumenosora.Design.drawShadowBox(target, className);
    }
  },
  
  drawShadows: function(selector, className){
    if(!Yumenosora.Design.isIE6()){
      var targets = $$(selector);
      for(var i = 0; i < targets.length; i++){
        Yumenosora.Design.drawShadowBox(targets[i], className);
      }
    }
  },
  
  drawShadowBox: function(target, className){
    //指定エレメントを格納するボックスを生成
    var container = Yumenosora.Design.createShadowDiv(['container']);
    
    var top = Yumenosora.Design.createShadowDiv(['shadow', 'top']);
    var bottom = Yumenosora.Design.createShadowDiv(['shadow', 'bottom']);
    var left = Yumenosora.Design.createShadowDiv(['shadow', 'left']);
    var right = Yumenosora.Design.createShadowDiv(['shadow', 'right']);
    
    var content = Yumenosora.Design.createShadowDiv(['content']);

    target.insert({before: container});
    container.insert(top);
    container.insert(bottom);
    container.insert(left);
    container.insert(right);
    container.insert(content);
    
    //指定エレメントをボックス内に移動
    content.insert(target);
    
    //IDを付け替える
    var id = target.id;
    if(!id == null){
      container.id = id + "-shadowbox";
    }
    
    container.addClassName(target.className);
    
    if(className != null){
      container.addClassName(className);
    }
    return container;
  },
  
  createShadowDiv: function(classNames){
    var element = new Element('div');
    element.addClassName('shadowbox');
    for(var i=0; i < classNames.length; i++){
      element.addClassName(classNames[i]);
    }
    
    return element;
  },
  
  initInputs: function(selector){
    var inputs = $$(selector);
    
    for(var i = 0; i < inputs.length; i++){
      inputs[i].observe('blur', Yumenosora.Design.focus);
      inputs[i].observe('focus', Yumenosora.Design.unfocus);
    }
  },
  
  focus: function(){
    this.parentNode.parentNode.addClassName('unfocus');
  },
  
  unfocus: function(){
    this.parentNode.parentNode.removeClassName('unfocus');
  },
  
  initButtons: function(selector){
    var inputs = $$(selector);
    
    for(var i = 0; i < inputs.length; i++){
      var target = inputs[i];
      var container = new Element('div');
      container.addClassName('glossy-button');
      target.insert({before: container});
      container.insert(target);
      container.addClassName(target.className);
    }
  },
  
  initHeads: function(selector){
    var inputs = $$(selector);
    
    for(var i = 0; i < inputs.length; i++){
      var target = inputs[i];
      var container = new Element('div');
      var length = target.childNodes.length;
      for(var j = 0; j < length; j++){
        container.appendChild(target.childNodes[0]);
      }
      target.appendChild(container);
    }
  }
}

Yumenosora.Selector = {
  init: function(){
    $$('div.selector-box').each(function(box){
      Yumenosora.Selector.initElement(box);
    });
  },
  
  initElement: function(box){
    var open = Yumenosora.Selector.open;
    var close = Yumenosora.Selector.close;
    var select = Yumenosora.Selector.select;
    
    //開くボタン・現在の値表示
    $A(box.getElementsByClassName('display-body')).each(function(e){
      e.observe('click', open);
    });
    
    $A(box.getElementsByClassName('dropdown-open-button')).each(function(e){
      e.observe('click', open);
    });
    
    //閉じるレイヤー
    $A(box.getElementsByClassName('selector-background')).each(function(e){
      e.observe('click', close);
    });
    
    //前セレクタ
    $A(box.getElementsByClassName('selector-element-before')).each(function(e){
      e.observe('click', close);
    });
    
    //セレクタ
    $A(box.getElementsByClassName('selector-element')).each(function(e){
      e.observe('click', select);
      e.observe('click', close);
    });
    
    //後セレクタ
    $A(box.getElementsByClassName('selector-element-after')).each(function(e){
      e.observe('click', close);
    });
  },
  
  open: function(e){
    var box = this.parentNode.parentNode;
    if(!box.hasClassName('selector-box')){
      box = box.parentNode;
    }
    
    var dropdown = box.getElementsByClassName('selector-container')[0];
    var background = box.getElementsByClassName('selector-background')[0];
    
    background.show();
    dropdown.slideDown({duration: 0.2});
    
    box.fire('selector:open');
  },
  
  close: function(e){
    var box = this.parentNode;
    if(box.className != 'selector-box'){
      box = this.parentNode.parentNode.parentNode;
    }
    
    var dropdown = box.getElementsByClassName('selector-container')[0];
    var background = box.getElementsByClassName('selector-background')[0];
    
    dropdown.slideUp({duration: 0.2});
    background.hide();
    
    box.fire('selector:close');
  },
  
  select: function(e){
    var id = this.readAttribute('data-id');
    var value = this.readAttribute('data-value');
    var label = this.innerHTML;
    var box = this.parentNode.parentNode.parentNode;
    var display = box.getElementsByClassName('display-body')[0];
    var oldId = box.readAttribute('data-id');
    
    if(id != oldId){
      box.writeAttribute('data-id', id);
      box.writeAttribute('data-value', value);
      display.update(label);
      
      box.fire('selector:change');
    }
  }
}