### Initialize GENI JS Client SDK

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/last_name_directory.html

Initializes the GENI JS Client SDK with provided application ID, cookie settings, and logging preferences. This is a prerequisite for using other SDK functionalities.

```javascript
Geni.init({
  app_id: 'GTFF5ZmAkEDMykFAd6EtazPzWZpJA0rm0eCZerNj',
  cookie: false,
  logging: false
});
```

--------------------------------

### Connect to GENI and Load Family Directory

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/last_name_directory.html

Handles the connection to GENI, checks authorization status, and triggers the loading of family names if authorized. It also manages UI element visibility based on the connection status.

```javascript
function connectWithGeni() {
  Geni.connect(function(response) {
    if(response.status == 'authorized') {
      $("login_link").style.display = "none";
      $("loading").style.display = "";
      loadFamilyNames();
    } else {
      $("login_link").style.display = "";
    }
  });
}
```

--------------------------------

### Load Family Names from GENI API

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/last_name_directory.html

Recursively loads family name data from the GENI API. It processes profiles to count last names and makes subsequent calls if more pages are available, eventually triggering directory generation.

```javascript
function loadFamilyNames(url) {
  if (!url) {
    url = '/user/max-family';
  }
  url = url.replace("https://www.geni.com/api", "");
  Geni.api(url, function (response) {
    for (var i=0; i<response.results.length; i++) {
      var profile = response.results[i];
      var name = profile.last_name;
      if (!name_counts[name]) {
        name_counts[name] = 0;
      }
      name_counts[name] = name_counts[name] + 1;
    }
    if (response.next_page) {
      loadFamilyNames(response.next_page);
    } else {
      generateDirectory();
    }
  });
}
```

--------------------------------

### Helper Function to Get Element by ID

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/last_name_directory.html

A simple helper function to retrieve a DOM element by its ID. This is commonly used for manipulating UI elements based on user interactions or data loading.

```javascript
function $(id) { return document.getElementById(id); }
```

--------------------------------

### Get Profile Tree Matches via Geni.api()

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Demonstrates how to fetch tree matches for a specific profile ID using the `Geni.api()` method. The first argument specifies the API path, and a callback function handles the response.

```javascript
Geni.api('/profile-101/tree_matches', function(response) {
  // returns a list of tree matches for profile with id 101
});
```

--------------------------------

### Generate Family Name Directory

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/last_name_directory.html

Generates an HTML directory of family members based on last name counts. It sorts names, calculates font sizes based on counts, and displays the directory and a summary of family members.

```javascript
var name_counts = {};
function generateDirectory() {
  html = [];
  var names = Object.keys(name_counts);
  names.sort();
  var total_count = 0;
  for (var i=0; i<names.length; i++) {
    var name = names[i];
    total_count = total_count + name_counts[name];
    var font_size = 10 + (name_counts[name]*5);
    var title = name_counts[name] + (name_counts[name] == 1 ? " member of your family has this last name" : " members of your family have this last name");
    html.push("<div><a href='http://www.geni.com/surnames/" + name + "' title='" + title + "'>" + name + "</a>" + " <span style='font-size:12px;color:#666;'>(" + name_counts[name] + ")</span></div>");
  }
  var summary = "<div style='padding:20px;'>Your family has " + total_count + " members.</div> ";
  $("name_directory").innerHTML = summary + html.join(" ");
  $("loading").style.display = "none";
}
```

--------------------------------

### Helper Function: Get Element by ID

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/first_name_cloud.html

A simple JavaScript helper function to retrieve an HTML element by its ID. This is commonly used for DOM manipulation in web applications.

```javascript
function $(id) {
  return document.getElementById(id);
}
```

--------------------------------

### Get Specific Profile Fields via Geni.api()

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Illustrates how to request specific fields of the current user's profile. The second argument to `Geni.api()` is an object containing parameters like 'fields', followed by a callback function to handle the partial data.

```javascript
Geni.api('/profile', { fields : 'first_name'}, function(data) {
  // only returns first name of profile current users profile
  alert("Welcome + " " + response.first_name);
});
```

--------------------------------

### Get Current User's Profile Data via Geni.api()

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Shows how to retrieve the current user's profile data by omitting IDs in the API path. The `Geni.api()` method with '/profile' returns the user's information, processed by the provided callback function.

```javascript
Geni.api('/profile', function(response) {
  // returns current user's profile data
  // alert(response.name)
});
```

--------------------------------

### Initialize Geni SDK

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Initializes the Geni JavaScript SDK with your application key. Optional parameters include host, cookie settings for access token storage, and logging for debugging. Place this script at the bottom of your page before the closing </body> tag.

```javascript
<script src="http://geni.com/jsdk.js"></script>
<script>
  Geni.init({
    app_id: 'YOUR_APP_KEY'
  });
</script>
```

```javascript
<script src="http://geni.com/jsdk.js"></script>
<script>
  Geni.init({
    app_id: 'YOUR_APP_KEY',
    host: 'http://sandbox.geni.com',    // change host if needed
    cookie: true,                       // enables saving the access token to a cookie on the users machine
    logging:true                        // enable log messages to help in debugging
  });
</script>
```

--------------------------------

### Connect to Geni and Load Name Cloud

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/first_name_cloud.html

Establishes a connection with the Geni platform and handles the response. If authorized, it hides the login link, shows a loading indicator, and initiates loading the name cloud. Otherwise, it displays the login link.

```javascript
function connectWithGeni() {
  Geni.connect(function(response) {
    if(response.status == 'authorized') {
      $("login_link").style.display = "none";
      $("loading").style.display = "";
      loadNameCloud();
    } else {
      $("login_link").style.display = "";
    }
  });
}
```

--------------------------------

### Initialize Geni JS Client SDK

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/first_name_cloud.html

Initializes the Geni JS SDK with provided application credentials. It can be configured to manage cookies and logging behavior. Ensure you replace 'PROVIDE YOUR APP KEY HERE' with your actual application ID.

```javascript
Geni.init({
  app_id: 'PROVIDE YOUR APP KEY HERE',
  cookie: false,
  logging: false
});
```

--------------------------------

### Prompt Geni User Login and Authorization

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Prompts the user to log in to Geni and authorize your application by opening a popup window. It uses a callback function to handle the response, indicating if the user authorized the application or canceled the popup. This method should be called in response to a user action.

```javascript
Geni.connect(function(response) {
  if(response.status == 'authorized') {
    // User is logged in and has authorized your application.
    // You can now make authorized calls to the API.
  } else {
    // User canceled the popup
  }
});
```

--------------------------------

### Update User Profile via POST Request with Geni.api()

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Explains how to perform a POST request to update user profile information using `Geni.api()`. The second argument object must include 'method: 'post'', along with the data to be updated and a callback for the response.

```javascript
Geni.api('/profile', {
    method:'post',
    first_name: 'John'
  }, function(response) {
    // the current users first name is now set to 'John'
});
```

--------------------------------

### Load Family First Names from Geni API

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/first_name_cloud.html

Fetches family first names from the Geni API, optionally using a provided URL. It recursively calls itself for subsequent pages if available and then triggers the generation of the name cloud once all data is loaded.

```javascript
function loadNameCloud(url) {
  if (!url) {
    url = '/user/max-family';
  }
  url = url.replace("https://www.geni.com/api", "");
  Geni.api(url, function (response) {
    for (var i=0; i<response.results.length; i++) {
      var profile = response.results[i];
      var name = profile.first_name;
      if (!name_counts[name]) {
        name_counts[name] = 0;
      }
      name_counts[name] = name_counts[name] + 1;
    }
    if (response.next_page) {
      loadNameCloud(response.next_page);
    } else {
      generateNames();
    }
  });
}
```

--------------------------------

### Generate Name Cloud Visualization

Source: https://github.com/geni/geni-js-sdk/blob/master/samples/first_name_cloud.html

Generates an HTML name cloud visualization based on first name counts. It calculates font sizes dynamically based on the frequency of each name and displays a summary of the total family members.

```javascript
var name_counts = {};

function generateNames() {
  html = [];
  var names = Object.keys(name_counts);
  var total_count = 0;
  for (var i=0; i<names.length; i++) {
    var name = names[i];
    total_count = total_count + name_counts[name];
    var font_size = 10 + (name_counts[name]*5);
    var title = name_counts[name] + (name_counts[name] == 1 ? " member of your family has this first name" : " members of your family have this first name");
    html.push("<span style='padding:5px;color:#666;font-size:" + font_size + "px;' title='" + title + "'>" + name + "</span>");
  }
  var summary = "<div style='padding:20px;'>Your family has " + total_count + " members. The following name cloud shows your family first name distribution.</div> ";
  $("name_cloud").innerHTML = summary + html.join(" ");
  $("loading").style.display = "none";
}
```

--------------------------------

### Subscribe to Geni Authentication Status Changes

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Subscribes to the 'auth:statusChange' event, which fires whenever the user's authentication status changes as a result of SDK methods like Geni.getStatus() or Geni.connect(). The callback function receives the new status ('authorized', 'unauthorized', or 'unknown').

```javascript
Geni.Event.bind('auth:statusChange',function(status) {
  // status will be either 'authorized', 'unauthorized' or 'unknown'
});
```

--------------------------------

### Check Geni Authentication Status

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Checks the current authentication status of the user with Geni. It uses a callback function to process the response, which can be 'authorized', 'unauthorized', or 'unknown'. This is useful for determining if API calls can be made.

```javascript
Geni.getStatus(function(response) {
  if (response.status == 'authorized') {
    // User is logged in and has authorized your application.
    // You can now make authorized calls to the API.
  } else {
    // User is either logged out, has not authorized the app or both.
  }
});
```

--------------------------------

### Log Out User from Geni

Source: https://github.com/geni/geni-js-sdk/blob/master/README.markdown

Logs the current user out of Geni. After this method is called, your application will no longer be able to make API calls on behalf of the user until they log back in. It takes a callback function that executes once the logout is complete.

```javascript
Geni.logout(function() {
  // The user is now logged out of Geni
  // Your application will no longer be able to make api calls on the users behalf until they log back in
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.