function init() {

    $('.BoatThumb').hover(function() {
        $(this).addClass('BoatThumbHover');
        GetBoatDetails($(this).attr('boatID'));
    }, function() {
        $(this).removeClass('BoatThumbHover');
    });
    $('.BoatThumbBooked').hover(function() {
        GetBoatDetails($(this).attr('boatID'));
    });
    $('.BoatThumbBooked').click(function() {
        alert($(this).attr('name') + ' is unavailable for this date');
    });
    $('.BoatThumb').click(function() {
        $('.BoatThumb').removeClass('BoatThumbSelected');
        $(this).addClass('BoatThumbSelected');
    });

}


function GetBoatDetails(BoatID) {
    WebService.GetBoatDetails(BoatID, GetBoatDetails_Success, GetBoatDetails_Error);
}

function GetBoatDetails_Success(result) {
    $('#divBoatDetails').html(result);
}

function GetBoatDetails_Error() {
    $('#divBoatDetails').html('<p>Unable to get Boat Details</p>');
}