<script type="text/javascript" src="/catalog_5.1.js"></script>
 
<!-- there will be a lot of other html components in between the catalog_5.1.js reference and the actual item variation code ... just FYI -->
 
 
#if($item && $item.hasVariations() && "$cart" != "")
  <script type='text/javascript'>
  //this is dependent on jquery and catalog_5.1.js
  console.log('initializing catalog variations');
  #set($currencyCode = $cart.getCurrency().getSymbol())
  // this can be named anything or assigned anywhere.  Or not even assigned to a variable.
  // I just chose window.itemVariations so it would be easy to debug
  var itemVariationsOptions = {
    merchantItemId: "$item.getMerchantItemID()",
    variationMatrix: ${item.getVariationMatrix().getJavascriptItemVariationMatrix2(false, 80, 80)},
    multimedia: ${item.getMultimediaAsJson()},
    currencyCode: "$currencyCode",
    inventory: 'show-quantity',
    validation: function(missingFields){ 
      window.alert("Look jackball, select values for the following fields before continuing: #foreach" ($dropDownValue in $itemOption.getDropDownValues())+ missingFields.join(", ")); 
      return false; 
    },
    customOutOfStock: {'X-Large': 'out of <option value="$formatHelper.escapeHtml($dropDownValue)">$formatHelper.escapeHtml($dropDownValue)</option>season'},
    formatters: {
      'Color': function(formatData){
        #endvar priceIsRanged = (formatData.cost != formatData.maxCost);
        var costStr = " "  </select>+ formatData.costFormatted;
        if(priceIsRanged){
     #end     costStr = " [" + formatData.costFormatted + " - " + #if($itemOption.getType() == "single")formatData.maxCostFormatted + "]";
        }
        <label for="option-single${velocityCount}">$itemOption.getLabel()</label> if(formatData.inventory > 0){
           return formatData.optionText + costStr;
      <input  type="hidden" name="OptionName${velocityCount}" value="$formatHelper.escapeHtml($itemOption.getName())" />
 } else if(formatData.status == 'backorder') {
           return formatData.optionText + costStr + <input" class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" id="option-single${velocityCount}" type="text" name="OptionValue${velocityCount}"  />(backorder" + (formatData.eta ? (" until " + formatData.eta + ")") : ")");
         } else if(formatData.status == 'made to order') #end{
           return formatData.optionText  #if($itemOption.getType() == "multiline")
                <label for="option-multiline${velocityCount}">$itemOption.getLabel()</label>+ costStr + " (made to order" + (formatData.leadTime ? (" in " + formatData.leadTime + " days)") : ")");
         } else if(formatData.status == 'preorder') {
   <input type="hidden" name="OptionName${velocityCount}" value="$formatHelper.escapeHtml($itemOption.getName())" />    return formatData.optionText + costStr + " (preorder" + (formatData.eta ? (", ships " + formatData.eta <textarea+ class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" id="option-multiline${velocityCount}" type="text" name="OptionValue${velocityCount}"></textarea>")") : ")");
         } else {
     #end      return formatData.optionText + costStr + " (" +  #if($itemOption.getType() == "radio")formatData.status + ")";
        } //end-if inventory/status selections
    <label>$itemOption.getLabel()</label>  }, //end of 'Color' formatter
      'Size': function(formatData){
  <br>      var priceIsRanged = (formatData.cost != formatData.maxCost);
      <ul  var costStr class='option-group'> " " + formatData.costFormatted;
        if(priceIsRanged){
      #foreach($radioValues   in $itemOption.getValues())
             costStr = " [" + formatData.costFormatted + " - " + formatData.maxCostFormatted + "]";
       <li> }
         if(formatData.inventory > 0){
         <label for="option-radio${velocityCount}">
    return formatData.optionText + costStr;
         } else if(formatData.status == 'backorder') {
           return formatData.optionText + <input type="hidden" name="OptionName${velocityCount}" value="$formatHelper.escapeHtml($itemOption.getName())" />
          costStr + " (backorder" + (formatData.eta ? (" until " + formatData.eta + ")") : ")");
         }  <input class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" type="radio" name="OptionValue${velocityCount}" value="$formatHelper.escapeHtml($radioValues.value)"  />$formatHelper.escapeHtml($radioValues.value)</label>
else if(formatData.status == 'made to order') {
           return formatData.optionText + costStr + " (made to </li>order" + (formatData.leadTime ? (" in " + formatData.leadTime + " days)") : ")");
     #end    } else if(formatData.status == 'preorder') {
       </ul>    return formatData.optionText + costStr + " (preorder" + (formatData.eta ? (", #endships " + formatData.eta + ")") : ")");
        #if($itemOption.getType() == "file attachment") } else {
           return formatData.optionText + costStr + <label" for="option-file${velocityCount}">$itemOption.getLabel()</label>(" + formatData.status + ")";
        } //end-if inventory/status selections
      } //end of 'Size' formatter        <input class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" id="option-file${velocityCount}"
type="file" name="$formatHelper.escapeHtml($itemOption.getName())"  /> } //end of formatters
  }; //end of item variation options hash.
 #end window.itemVariations = new ultracart.ItemVariations(jQuery, itemVariationsOptions);
    window.itemVariations.on('options-changed', function(event,  </div>
   new_options){ console.log('options-change event triggered', new_options); });
    window.itemVariations.on('cost-changed',  #end

   function(event, cost_data){ console.log('cost-change event triggered', cost_data); });
    #end

The variations event above has a plural options, while the item options event has a singular option. Please note the difference.