//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: 'dd/mm/yyyy', 
                closebutton: '&nbsp;', 
                wrapper: container
            }); 
        }
        else
        {
            calendar.updateelement = $(input);
        }
		/* added by Fanie Smth to change the laoded date format from mm/dd/yyyy to dd/mm/yyy 
		  * See http://scal.fieldguidetoprogrammers.com/forums/scal-forums/scal-bug-reports/ddmmyyyy-date-format-issue
		  * for more info 
		  */
		var dateStr = $F(input);
		var arr1 = dateStr.split('/');
		var arr2 = new Array(arr1[1],arr1[0],arr1[2]);
		var dateStr2 = arr2.join('/');
		
        // var date = new Date($F(input)); // changed this line for the dateformat dd/mm/yyyy
		var date = new Date(dateStr2);
        calendar.setCurrentDate(isNaN(date) ? new Date() : date);
        
        //Locates the calendar over the calling control  (in this example the "img").
        if (source = $(source))
        {
            /* added position selection based on element to be updated. */
			if (source = 'imgDateFrom') {
				Position.clone($(source), container, {setWidth: false, setHeight: false, offsetLeft: -90, offsetTop: 25});
			} 
			else {
				Position.clone($(source), container, {setWidth: false, setHeight: false, offsetLeft: -190, offsetTop: 25 });
			}
        }
        
        //finally show the calendar =)
        calendar.openCalendar();
    };