Proto.UI.switcher=Class.create({
        state:"off",
        distance:false,
        move:false,
        initialize: function() 
        {
          
        this.options = Object.extend({
                className:'Proto_switcher',
                element:false,
                valueOn:1,
                valueOff:0,
                colorOn:"#FF7E02",
                colorOff:"#c0c0c0",
                onOn:function(){},
                onOff:function(){}
                }, arguments[0] || { });
        if(!this.options.element){ throw("Element no found for switcher"); }
        this.create();
        if(this.options.element.value==this.options.valueOn){this._switch();}
        },
        create:function()
        {
          this.wrapper = new Element("div",{'class':this.options.className+"-wrapper"});
          this.options.element.wrap(this.wrapper);
          this.options.element=Proto.replaceInputType(this.options.element,"hidden");
          this.container = new Element("div",{'class':this.options.className,style:'background-color:'+((this.options.element.value==this.options.valueOn)?this.options.colorOn:this.options.colorOff)});
          this.wrapper.insert(this.container);
          this.button = new Element("div",{'class':this.options.className+"-button"});
          this.container.insert(this.button);

          this.container.observe("mousedown",function(e){Event.stop(e);this._switch();}.bind(this));
          this.container.observe("click",function(e){Event.stop(e);}.bind(this));
          
          
        },
        _switch:function()
        {
        	
          if(this.move){return;}
            this.move=true;
            if(this.state=="on"){this.off();}else{this.on();}
        },
        on:function()
        {
            this.state="on";this.options.element.value=this.options.valueOn;
            this.distance=this.container.getWidth()-
            this.container.style.marginLeft.replace("px","")-
            this.button.getWidth()-this.button.style.borderRightWidth.replace("px","")-4;
          new Effect.Move(this.button, { x: this.distance,
            y: 0, mode: 'relative', duration:0.2,afterFinish:function(){this.move=false; }.bind(this)});
          this.container.morph('background-color:'+this.options.colorOn+';',{duration:0.2});
          this.options.onOn();
        },
        off:function()
        {
          this.state="off";this.options.element.value=this.options.valueOff;
          new Effect.Move(this.button, { x: 0-this.distance,
            y: 0, mode: 'relative', duration:0.2,afterFinish:function(){this.move=false; }.bind(this) });
          this.container.morph('background-color:'+this.options.colorOff+';',{duration:0.2});
          this.options.onOff();
        }
    })
    