//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();
    },

	_click: function(event,cellIndex) {
		this.element.select('.dayselected').invoke('removeClassName', 'dayselected');
		(event.target.hasClassName('daybox') ? event.target : event.target.up()).addClassName('dayselected');
		this._setCurrentDate(this.dateRange[cellIndex]);
		this._updateExternal();
		this.toggleCalendar(); // Close calendar.
	}
});

//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 singleton calendar is created.
        calendar = new scal(element, $(input), 
        {
            updateformat: 'mm/dd/yyyy', 
            closebutton: '<img src="images/close.jpg" />', 
            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();
};