//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: 'mm/dd/yyyy', 
                closebutton: '&nbsp;', 
                wrapper: container
            }); 
        }
        else
        {
            calendar.updateelement = $(input);
        }

        var date = new Date($F(input));
        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();
    };