$(document).ready(function() {
    
//    var contentHeight = $('#content-container').height();
//    $('#content-bg').height(contentHeight);
//    $('#content-container').height(contentHeight);
//    $('#content').css('top','-'+contentHeight+'px');
    // THE CODE ABOVE is for re-sizing divs so we can have a transparent background for the main content, without using background images
    // But it stuffs up because it calculates the size before images have finished loading and so the size is too small

    /* set global variable for boxy window */
    var bookingBoxy = null;
    var timeout = null;
    /* what to do when click on contact us link */
    $('.request-a-booking').click(function(){
	var retreat = $(this).attr('rel');
	var url = "/bookings/email_us/";
	
	/* Set the content as a blank div, but with height/width so we don't see it re-size when it gets it's initial content further down. */
        var boxy_content = '<div style=\"width: 800px; height: auto\"></div>';
        bookingBoxy = new Boxy(boxy_content, {
            title: "Booking Details",
            draggable: false,
            modal: true,
	    y: 100,
	    unloadOnHide: true,
            behaviours: function(c) {
                  c.find('#BookingEmailUsForm').submit(function() {
                    $.post(url, $('#BookingEmailUsForm').serialize(),
                    function(data){

                        /*set boxy content to data from ajax call back*/
                        bookingBoxy.setContent("<div style=\"width: 800px; height: auto\">"+data+"</div>");

			/* If the fomr submits successfully, then fade out the pop-up so user can continue browsing */
			if (data.indexOf('id="success-msg"')!=-1) {
			    bookingBoxy.setTitle("Success!");
			    timeout = setTimeout(function() {$(".boxy-wrapper, .boxy-modal-blackout").fadeOut(3000, function() {$(".boxy-wrapper, .boxy-modal-blackout").remove()})}, 2000);
			    //$(".boxy-wrapper, .boxy-modal-blackout").fadeOut(2000);
			    
			}
                    });
                    return false;
                });
            }
        });

	$.post(url, {dummy : ''}, function(initialContent){
		 // For some reason, without the params {dummy : ''} then in Safari and Opera, the form
		 // doesn't load properly - in the contacts_controller.php, $this->data ends up having an XML object in it when it should be empty.
		 // We tried passing null as the second param, but that didn't work either. Joss Nov 09

		/* do the initial rendering of the BOXY content */
		bookingBoxy.setContent("<div style=\"width: 800px; height: auto\">"+initialContent+"</div>");
		$('#BookingRetreat').attr('value',retreat);

	    });
        return false;
    });
});