Proto.UI.datetime = Class.create({
        initialize: function() 
        {
           
        this.options = Object.extend({
                className:'Proto_datetime',
                format:"yyyy-mm-dd hh:nn",
                noClock:false,
                now:true,
                element:false
                }, arguments[0] || { });
        if(!this.options.element){ throw("Element no found for datetime"); }
        this.create();
        
        },
        shhpick:function(e){
         
      Event.stop(e);
         if(this.notepad.visible())
          {
             new Effect.Puff(this.notepad,{duration:0.2});
                
          }
          else
          {
                Position.clone(this.but,this.notepad,{
                setWidth:false,
                setHeight:false/*,
                offsetLeft:this.but.getWidth()+1*/
                });
                //this.notepad.show();
                this.notepad.toFront();
                new Effect.Appear(this.notepad,{duration:0.3, afterFinish:function(){this.cal.fixscroll();}.bind(this)});
                
                
          }
        },
        create:function()
        {
          this.wrapper = new Element("div",{'class':this.options.className});
          this.options.element.wrap(this.wrapper);
          
          this.but = new Element("button",{'class':this.options.className+"_button"});
          this.wrapper.insert(this.but);
          
          this.notepad = new Element("div",{'class':this.options.className+"_notepad","style":'display:none'});
          _(document.body).insert(this.notepad);
          this.closebox = new Element("div",{'class':this.options.className+"_close"});
          this.notepad.insert(this.closebox);
 /*FIXME*/         this.cal = new Proto.UI.cal({'renderTo':this.notepad,now:this.options.now,format:this.options.format, 'field':this.options.element,onChange:function(){ new Effect.Puff(this.notepad,{duration:0.2});try{this.clock.stopTyping();}catch(x){};}.bind(this),onDblClick:function(){
           new Effect.Puff(this.notepad,{duration:0.2});
          }.bind(this)});
          
          if(!this.options.noClock){
          this.clock = new Proto.UI.Clock({
            				renderTo:this.notepad,
            				comboInput:this.options.element,
                            digits:["","","3","","","6","","","9","","","12"],
                            calendar:this.cal,
                            minuteRound:1,
                            ClockRadius:90,
                            
                backgroundColor:"r#c0c0c0-#101010",
                borderColor:"#000",
                hourHandColor:"#000000",
                tagColor:"#ff0000",
                minuteHandColor:"#000000",
                secondHandColor:"#000000",
                showDiditClock:true,
                digitClockColor:"#c0c0c0",
                digitClockFont:"Arial",
                digitClockBg:"",
                logoText:"",
                logoColor:"#000",
                logoFont:"Arial",
                digitsColor:"#909090",
                digitsFont:"Arial"
                
            });
          }
          this.but.observe("mousedown",this.shhpick.bind(this));
         this.closebox.observe("click",this.shhpick.bind(this));
          this.options.element.observe("focus",function(){
         new Effect.Puff(this.notepad,{duration:0.2});
          }.bind(this));
          
        }
    })