YAHOO.util.Event.onDOMReady(function(){

        var Event = YAHOO.util.Event,
            Dom = YAHOO.util.Dom;

        var inBtn = Dom.get("showin");
        var inDialog;
        var inCalendar;
        var inParent = Dom.get("in_calContainer");
	var inBox = Dom.get("indate");
        var outBtn = Dom.get("showout");
        var outDialog;
        var outCalendar;
        var outParent = Dom.get("out_calContainer");
	var outBox = Dom.get("outdate");
	var unavailableInDates = Dom.get("unavailableInDates").value;
	var unavailableOutDates = Dom.get("unavailableOutDates").value;

        Event.on(inBtn, "click", function() {
            showCalClicked(inDialog, inCalendar, inBtn, inParent, inBox, unavailableInDates, 'Check In ');
	});

        Event.on(outBtn, "click", function() {
            showCalClicked(outDialog, outCalendar, outBtn, outParent, outBox, unavailableOutDates, 'Check Out ');
	});

        function showCalClicked(dialog, calendar, showBtn, parent, dateBox, unavailable, headTxt) {
            // Lazy Dialog Creation - Wait to create the Dialog, and setup document click listeners, until the first time the button is clicked.
            if (!dialog) {

                // Hide Calendar if we click anywhere in the document other than the calendar
                Event.on(document, "click", function(e) {
                    var el = Event.getTarget(e);
                    var dialogEl = dialog.element;
                    if (el != dialogEl && !Dom.isAncestor(dialogEl, el) && el != showBtn && !Dom.isAncestor(showBtn, el)) {
                        dialog.hide();
                    }
                });

                function resetHandler() {
                    // Reset the current calendar page to the select date, or 
                    // to today if nothing is selected.
                    var selDates = calendar.getSelectedDates();
                    var resetDate;
        
                    if (selDates.length > 0) {
                        resetDate = selDates[0];
                    } else {
                        resetDate = calendar.today;
                    }
        
                    calendar.cfg.setProperty("pagedate", resetDate);
                    calendar.render();
                }
        
                function closeHandler() {
                    dialog.hide();
                }

                dialog = new YAHOO.widget.Dialog("container", {
                    visible:false,
                    context:["show", "tl", "bl"],
                    buttons:[ {text:"Reset", handler: resetHandler, isDefault:true}, {text:"Close", handler: closeHandler}],
                    draggable:false,
                    close:true
                });
                dialog.setHeader('Pick A ' + headTxt + 'Date');
                dialog.setBody('<div id="cal"></div>');
                dialog.render(parent);

                dialog.showEvent.subscribe(function() {
                    if (YAHOO.env.ua.ie) {
                        // Since we're hiding the table using yui-overlay-hidden, we 
                        // want to let the dialog know that the content size has changed, when
                        // shown
                        dialog.fireEvent("changeContent");
                    }
                });
            }

            // Lazy Calendar Creation - Wait to create the Calendar until the first time the button is clicked.
            if (!calendar) {

                calendar = new YAHOO.widget.Calendar("cal", {
                    iframe:false,          // Turn iframe off, since container has iframe support.
                    hide_blank_weeks:true,  // Enable, to demonstrate how we handle changing height, using changeContent
                    mindate:new Date()

                });
                calendar.cfg.setProperty("MDY_DAY_POSITION", 1);
                calendar.cfg.setProperty("MDY_MONTH_POSITION", 2);
                calendar.cfg.setProperty("MDY_YEAR_POSITION", 3);
                calendar.addRenderer(unavailable, calendar.renderBodyCellRestricted);
                if (dateBox.value != "" ){calendar.select(dateBox.value);}

                calendar.render();

                calendar.selectEvent.subscribe(function() {
                    if (calendar.getSelectedDates().length > 0) {

                        var selDate = calendar.getSelectedDates()[0];

                        // d/m/y output
		        var dStr = selDate.getDate();
		        var mStr = selDate.getMonth() + 1;      // 0-11 for jan-dec. Therefore added 1 to show month correctly
		        var yStr = selDate.getFullYear();
		        dateBox.value = dStr + "/" + mStr + "/" + yStr;
        
                    } else {
                        dateBox.value = "";
                    }
                    dialog.hide();
                });

                calendar.renderEvent.subscribe(function() {
                    // Tell Dialog it's contents have changed, which allows 
                    // container to redraw the underlay (for IE6/Safari2)
                    dialog.fireEvent("changeContent");
                });
            }

            var seldate = calendar.getSelectedDates();

            if (seldate.length > 0) {
                // Set the pagedate to show the selected date if it exists
                calendar.cfg.setProperty("pagedate", seldate[0]);
                calendar.render();
            }

            dialog.show();
        };
    });