//Extend the scal library to add draggable calendar support.
    //This script block can be added to the scal.js file.
    Object.extend(scal.prototype,
    {
        toggleCalendar: function()
        {
            var element = $(this.options.wrapper) || this.element;
            this.options[element.visible() ? 'onclose' : 'onopen'](element);
            this.options[element.visible() ? 'closeeffect' : 'openeffect'](element, {duration: 0.5});
        },

        isOpen: function()
        { 
            return ( $(this.options.wrapper) || this.element).visible();
        }
    });

    //this is a global variable to have only one instance of the calendar
    var calendar = null;
    
    //@element   => is the <div> where the calender will be rendered by Scal.
    //@input     => is the <input> where the date will be updated.
    //@container => is the <div> for dragging.
    //@source    => is the img/button which raises up the calender, the script will locate the calenar over this control.
    function showCalendar(element, input, container, source)            
    {
        if (!calendar)
        {
            container = $(container);
            //the Draggable handle is hard coded to "rtop" to avoid other parameter.
//            new Draggable(container, {handle: "rtop", starteffect: Prototype.emptyFunction, endeffect: Prototype.emptyFunction});
            
            //The singleton calendar is created.
            calendar = new scal(element, $(input), 
            {
                updateformat: 'yyyy-mm-dd', 
                closebutton: '&nbsp;', 
                wrapper: container
            }); 
        }
        else
        {
            calendar.updateelement = $(input);
        }

//        var date = new Date($F(input));
	var date_pc=$F(input).split("-");
	if(date_pc.length==3) var date = new Date(parseInt(date_pc[0]), parseInt(date_pc[1])-1, parseInt(date_pc[2]), 0, 0, 0);

        calendar.setCurrentDate(isNaN(date) ? new Date() : date);
        
        //Locates the calendar over the calling control  (in this example the "img").
        if (source = $(source))
        {
//            Position.clone($(source), container, {setWidth: false, setHeight: false, offsetLeft: source.getWidth() + 2});
        }
        
        //finally show the calendar =)
        calendar.openCalendar();
    };
    
    var imgCalendar_Click = function(e, input)
    {
        showCalendar("calendar", input, "calendar-container", Event.element(e));
    };

    Event.observe(window, "load", function(e)
    {
      if($("imgjsDate")){
        Event.observe("imgjsDate", "click", imgCalendar_Click.bindAsEventListener(this, "jsDate"));
        Event.observe("jsDate", "focus", imgCalendar_Click.bindAsEventListener(this, "jsDate"));
      }
    });