<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var aoUsername     = 'cohills';
        var roomId         = '60359';
        var objDate        = new Date();
        var cachePreventor = Math.floor(Math.random()*100001);
        
        var currentMonth   = objDate.getMonth() + 1; // JS months are zero based
        var currentYear    = objDate.getFullYear();
    
        var month          = currentMonth;
        var year           = currentYear;
    
        var strMonth       = '';
        var strYear        = '';

        function nextMonth(){
            month    = month + 1;
            
            strMonth = validateMonth();
            if ( !strMonth ) {
                return false;
            }
            
            loadImage();
        };
        
        function previousMonth(){
            month    = month - 1;
            
            strMonth = validateMonth();
            if ( !strMonth ) {
                return false;
            }
            
            loadImage();
        };
        
        function validateMonth(){
            // Adjust the year if the month goes above 12 or below 1
            if ( month > 12 ) {
                year  = year + 1;
                month = month - 12;
            } else if ( month < 1 ) {
                year  = year - 1;
                month = 12;
            }

            // Make sure that the month selected isn't in the past
            if ( year < currentYear || (year == currentYear && month < currentMonth ) ) {
                year  = currentYear;
                month = currentMonth;
                return false;
            }

            // Make sure month is two digits
            if ( month.length < 2 ) {
                strMonth = '0' + strMonth;
            } else {
                strMonth = month;
            }
            return strMonth;
        }

    </script>





<style type="text/css" media="screen">
        <!--
            #aoLoader {
                border: 1px solid #ccc;
                width: 170px;
                height: 170px;
                overflow: hidden;
            }
    
            #aoLoader.aoLoading {
                background: url(http://ao4.availabilityonline.com/admin/images/ajax-loader-larger.gif) no-repeat center center;
            }
        -->
    </style>

    <script type="text/javascript">
        $(function () {
            loadImage();
        });


        function loadImage(){

            $('#aoLoader').addClass('aoLoading');
            $('#aoLoader').html('');
            
            // cachePreventor = Math.floor(Math.random()*100001); // this line will cause the images to be refreshed on every click instead of once per load of the page
            var url = 'http://images.availabilityonline.com/api/gcal/index.php?un=' + aoUsername + '&year=' + year + '&month=' + strMonth + '&roomId=' + roomId + '&cachePreventor=' + cachePreventor;
            
            var aoCalendarImage = new Image();
            $(aoCalendarImage).load(function () {
                $(this).hide();
                $('#aoLoader').removeClass('aoLoading').append(this);
                $(this).fadeIn();
            }).error(function () {
                // the image wasn't received so display a placeholder
            }).attr('src', url);
        }
    </script>