var SideDrawer = new Class({
  Implements: [Options,Events],
  options: {
    classname:null,
    side:"left",//possible values are left, right
    scroll:{x:false,y:false},
    width:"auto",
    height:"auto",
    top:20,
    swf:true,//false,
    contents:"(empty)"
  },
  name:"", //becomes the ID of the container element and acts as the identifyer for a future managment class
  drawer:{},
  handle:{},
  contents:{},

  initialize:function(name,options){
    this.name = name;
    this.setOptions(options);

    this.drawer = new Element("div",{
      "class":"sideDrawer",
      "styles":{
        "position":"absolute",
        "top":this.options.top
      }
    }).inject(document.body);
    this.drawer.setStyle(this.options.side,0);
    if($chk(this.options.classname))this.drawer.addStyle(this.options.classname);

    this.handle = new Element("div",{
      "class":"drawerHandle",
      "styles":{
        "position":"absolute"
      }
    }).inject(this.drawer);
    this.handle.set("html","<span>"+this.name+"</span>");
    this.handle.setStyle(this.options.side == "left" ? "right" : "left",-(this.handle.getSize().x+(this.handle.getStyle("border-"+this.options.side+"-width").toInt())));
    this.handle.setStyle("margin-top","-"+this.handle.getStyle("border-top-width"));
    this.handle.setStyle("margin-bottom","-"+this.handle.getStyle("border-bottom-width"));

    this.handle.addEvent('click',this.toggle.bind(this));

    this.contents = new Element("div",{
      "class":"contents",
      "styles":{
        "width":this.options.width,
        "height":this.options.height,
        "overflow-x":this.options.scroll.x ? "scroll" : "hidden",
        "overflow-y":this.options.scroll.y ? "scroll" : "hidden"
      }
    }).inject(this.drawer);

    this.setContents(this.options.contents);

    this.contents.set('morph', {
      duration: this.options.duration || 'long',
      transition: this.options.transition || "bounce:out"
    });

    this.hide();
  },
  open:function(){
    this.drawer.addClass("open");
    this.contents.morph({
      width: this.options.width == "auto" ? this.contents.getScrollSize().x : this.options.width,
      height: this.options.height == "auto" ? this.contents.getScrollSize().y : this.options.height
    });
    return this;
  },
  shut:function(){
    this.drawer.removeClass("open");

    var height = this.contents.getSize().y;
    if(this.handle.getSize().y < height)height = this.handle.getSize().y;

    this.contents.morph({
      width: this.options.swf ? 1 : 0,
      height: height
    });
    return this;
  },
  toggle:function(){
    if(this.drawer.hasClass("open")){
      return this.shut();
    }else{
      return this.open();
    }
  },
  hide:function(){
    var height = this.contents.getSize().y;
    if(this.handle.getSize().y < height)height = this.handle.getSize().y;

    this.contents.setStyles({
      width: this.options.swf ? 1 : 0,
      height: height
    });
    this.drawer.removeClass("open");

    return this;
  },
  show:function(){
    this.contents.setStyles({
      width: this.options.width == "auto" ? this.contents.getScrollSize().x : this.options.width,
      height: this.options.height == "auto" ? this.contents.getScrollSize().y : this.options.height
    });
    this.drawer.addClass("open");

    return this;
  },
  setContents:function(contents){
    this.options.contents = contents;

    if(this.options.swf){
      this.contents.adopt(this.options.contents);
    }else{
      this.contents.set('html',this.options.contents);
    }

    if(this.drawer.hasClass("open")){
      this.show();
    }
    return this;
  },
  setHandle:function(yummyfilling){
    this.handle.set('html',yummyfilling);
    return this;
  }
});