var Sidebar = Class.create();
Sidebar.prototype = {
  initialize: function(target, handle, loader){
    this.target = $(target);
    this.handle = $(handle);
    this.loader = $(loader);
    this.show = true;
    this.ongoing = false;
    this.img_rep = ['right', 'left'];
    this.title_rep = ['사이드 바를 다시 가져옵니다', '사이드 바를 숨깁니다'];
    
    $(this.handle).setStyle({
      cursor: 'pointer'
    });

	if ( Prototype.Browser.IE )
      $('content').setStyle({float: 'left'}); /* fix layout. IE sucks too */

    
    Event.observe(this.handle, "click", this.toggle.bindAsEventListener(this));
  },
  foldToggle: function(event) {
    var target = Event.element(event);
    var next = Element.next(Element.up(target));
    
    new Effect.toggle(next, 'blind', {
      duration: 0.3,
      beforeStart: this.foldStart.bindAsEventListener(this),
      afterFinish: this.foldFinish.bindAsEventListener(this)
    });
  },
  foldStart: function(e) {
    this.loader.setStyle({display: 'block'});
  },
  foldFinish: function(e) {
    this.loader.setStyle({display: 'none'});
  },
  mouseover: function(e) {
    var elm = Event.element(e);
    elm.setStyle( {background: '#ddd'});
  },
  mouseout: function(e) {
    var elm = Event.element(e);
    elm.setStyle( {background: 'transparent'});
  },
  registerFold: function(elm) {
    elm.setStyle({ cursor: 'pointer' });
    
    elm.firstDescendant().writeAttribute('title', 'Toggle');
    
    Event.observe(elm, "click", this.foldToggle.bindAsEventListener(this));
    Event.observe(elm, "mouseover", this.mouseover.bindAsEventListener(this));
    Event.observe(elm, "mouseout", this.mouseout.bindAsEventListener(this));
  },
  fold: function() {
    /* each sub menu toggle */
    $$('div.sidebar_hd').each( this.registerFold.bind(this) );
  },
  changeImg: function(e){
    var img = $(this.handle).getElementsBySelector('img')[0];
    var prev_img_src = $(img).readAttribute('src');
    var next_img_src = null;
    var title = null;
    
    if (prev_img_src.include(this.img_rep[0])) {
      next_img_src = prev_img_src.sub(this.img_rep[0], this.img_rep[1]);
      title = this.title_rep[0];
    }
    else {
      next_img_src = prev_img_src.sub(this.img_rep[1], this.img_rep[0]);
      title = this.title_rep[1];
    }
    
    $(img).writeAttribute('src', next_img_src);
    $(img).writeAttribute('title', title);
  },
  ready: function(e){
    this.ongoing = true;
  },
  done: function(e){
    if (this.show) {

    }
    else {      
      /* position check */
      $(this.target).setStyle({
        position: 'relative',
        top: '0px',
        left: '0px'
      });
    }
    $(this.loader).setStyle({
      display: 'none'
    });
    
    this.ongoing = false;
    this.changeImg();
    this.show = !this.show;    
  },
  toggle: function(e){
    if (this.ongoing) 
      return;
    
    if (this.show) {
      $(this.loader).setStyle({
        display: 'block'
      });
      new Effect.Parallel([new Effect.MoveBy(this.target, 0, 600, {
        duration: 0.7,
        from: 0,
        to: 1
      }), new Effect.Fade(this.target, {
        duration: 1,
        from: 1,
        to: 0
      })], {
        afterFinish: this.done.bindAsEventListener(this)
      });
    }
    else {
      $(this.loader).setStyle({
        display: 'block'
      });
      new Effect.Parallel([new Effect.MoveBy(this.target, 0, -600, {
        duration: 0.7,
        from: 0,
        to: 1
      }), new Effect.Appear(this.target, {
        duration: 1,
        from: 0,
        to: 1
      })], {
        afterFinish: this.done.bindAsEventListener(this)
      });
      
    }
  }
}

Event.observe(window, 'load', function(){
  var sidebar = new Sidebar("sidebar", "sidebar_handle", "loader");
  sidebar.fold();
});