function ge(id) {
  const el = document.getElementById(id);
  if (!el) {
    console.error(`id not found: ${id}`);
  }
  return el;
}

const aGripData = [
  {
    top: 'Boot Grip',
    left: 'J frame<br>round butt<br><br>S Cocobolo<br>(a darker shade)',
    right: 'Centennial<br><br>S+<br><br>Cocobolo<br>(almost<br> S++ grade)',
    img: '2_13a - 0608604-R1-030-13A_013.jpg'
  },
  {
    top: 'J Frame',
    left: 'J frame<br>round butt<br><br>"Full size"<br>Granadillo',
    right: 'J frame<br>square butt<br>BOOT GRIP<br>BTS Birdseye<br> Maple',
    img: '2_14a - 0608604-R1-032-14A_014.jpg'
  },
  {
    top: 'K, L frame square butt',
    left: 'S+ Bolivian<br>Rosewood',
    right: 'S Bolivian<br>Rosewood',
    img: '2_18a - 0608604-R1-040-18A_018.jpg'
  },
  {
    top: 'K frame square butt',
    left: 'BOOT GRIP<br><br>S Bolivian<br>Rosewood',
    right: 'BOOT GRIP<br>w/ext<br>S+ Bolivian<br>Rosewood',
    img: '2_16a - 0608604-R1-036-16A_016.jpg'
  },
  {
    top: 'K, L frame round butt',
    left: 'BOOT GRIP<br>S+ Cocobolo',
    right: 'BOOT GRIP<br>w/ext<br>S++ Cocobolo',
    img: '2_23a - 0608604-R1-046-21A_021.jpg'
  },
  {
    top: 'Round to Square butt conversion',
    left: 'S Macassar<br>Ebony',
    right: 'S Macassar<br>Ebony',
    img: '2_21a - 0608604-R1-050-23A_023.jpg'
  },
  {
    top: 'Full Size Straight Grip',
    left: 'Presentation<br>Black Walnut<br>( both pairs<br>darker than<br>typical )',
    right: 'B.T.S.<br>Black Walnut',
    img: '2a - 0608603-R1-006-1A_002.jpg'
  },
  {
    top: 'Full Size Grip with Fancy Checkering',
    left: 'S grade<br>Black Walnut',
    right: 'S++<br>Bolivian<br>Rosewood',
    img: '4a - 0608603-R1-012-4A_005.jpg'
  },
  {
    top: '',
    left: 'Canary Wood',
    right: 'S+',
    img: '9a - 0608603-R1-020-8A_009.jpg'
  },
  {
    top: 'Black Walnut color examples',
    left: 'Top row<br>S grade<br><br>Bottom left<br>S++',
    right: '<br><br><br>Bottom right<br>S+',
    img: 'p10 - 0548679-R1-052-24A_026.jpg'
  },
  {
    top: 'Colt "D" frame "Boot Grip"',
    left: 'These grips do<br>come down about<br>1/2" below due to<br>the short grip frame',
    right: '',
    img: 'p11 - 0Spegel-R3-005-1_049.jpg'
  },
  {
    top: 'J frame Square butt',
    left: 'Full size J Square<br>versus',
    right: '"Boot Grip"',
    img: 'p12 - 0Spegel-R2-040-18A_043.jpg'
  },
  {
    top: 'J frame Round Butt',
    left: 'Birdseye Maple<br>This photo shows<br>the color of<br>Maple better',
    right: '',
    img: 'p13 - 0Spegel-R2-038-17A_042.jpg'
  },
  {
    top: 'French Walnut<br>examples',
    left: '',
    right: '',
    img: 'p14 - 0083481-R1-016-6A_006.jpg'
  },
  {
    top: 'Centennial "Boot Grip"',
    left: 'Large logo relief',
    right: 'Black Walnut<br>S++',
    img: 'p15 - 0083481-R1-008-2A_002.jpg'
  },
  {
    top: 'Fiddleback<br>Black Walnut',
    left: '',
    right: '',
    img: 'p16 - 0548679-R1-016-6A_008.jpg'
  },
  {
    top: 'Centennial',
    left: 'Cocobolo<br>B.T.S.<br>Fancy<br>checkering',
    right: '',
    img: 'p17 - 0Spegel-R1-036-16A_016.jpg'
  },
  {
    top: '',
    left: 'Macassar<br>Ebony',
    right: 'Fancy<br>checkering',
    img: 'p18 - 0083481-R1-006-1A_001.jpg'
  },
  {
    top: 'K frame Round butt',
    left: '"Boot Grip"<br>with extension',
    right: 'S++ Bolivian',
    img:  'p19 - 0083481-R1-010-3A_003.jpg'
  },
  {
    top: 'K frame Round butt',
    left: 'French Walnut',
    right: '',
    img: 'p20 - 0Spegel-R2-020-8A_033.jpg'
  },
  {
    top: 'K frame Square butt',
    left: 'Full size<br>3 Finger grooves<br>S++ Bolivian<br>Fancy checkering',
    right: 'Full size<br>Straight<br>S++ Bolivian<br>Fancy checkering',
    img: 'p21 - 0Spegel-R3-027-12_060.jpg'
  },
  {
    top: 'N frame Square butt',
    left: 'H.G.<br>French<br>Walnut',
    right: 'Fancy<br>Checkering',
    img: 'p22 - 0Spegel-R1-028-12A_012.jpg'
  },
  {
    top: 'H.G. French Walnut',
    left: '',
    right: 'Checkering<br>with Border<br>and Diamond',
    img: 'a5 -  0Spegel-R2-014-5A_030.jpg'
  },  
  {
    top: '1911\'s',
    left: 'Cocobolo',
    right: 'S+ thru H.G.',
    img: 'a6 - 0Spegel-R3-035-16_064.jpg'
  },  
  {
    top: '1911',
    left: 'Triple<br>Diamond',
    right: 'High Grade<br>French Walnut',
    img: 'a7 - 0Spegel-R2-018-7A_032.jpg'
  },  
  {
    top: '1911',
    left: 'High Grade',
    right: 'Black<br>Walnut',
    img: 'a8 - 0548679-R1-E019_045.jpg'
  },  
  {
    top: 'Colt model 1903/08',
    left: 'S. Cocobolo',
    right: 'High Grade<br>Cocobolo',
    img: 'a9 - 0548679-R1-E024_050.jpg'
  },
  {
    top: '',
    left: '<br>Hi-Power<br>',
    right: 'S Black Walnut',
    img: '6a - 0608603-R1-016-6A_007.jpg',
    photo: 'A1'
  },
  {
    top: '',
    left: '"Original" Style 1911',
    right: 'S grade<br>Black Walnut<br>only',
    img: '11a - 0608603-R1-024-10A_011.jpg',
    photo: 'A2'
  },  
  {
    top: 'S (dark) S+ S++ S++ BTS',
    left: '<br>All of these Hi-Power grips<br>are Cocobolo',
    img: '2_4a - 0608604-R1-006-1A_001.jpg',
    photo: 'A3'
  },  
  {
    top: 'Top Row is Kingwood',
    left: 'Macassar<br>Ebony',
    right: 'Delrin | S Panama<br>Cocobolo',
    img: '21a - 0608603-R1-046-21A_022.jpg',
    photo: 'A4'
  },  
  {
    top: 'Winchester 1873',
    left: 'Dust',
    right: 'Covers',
    img: 'Winchester 1873 Dust Covers.jpg',
    photo: 'W1'
  },
];

function renderGrips() {
  let html = '<div class="flex ma">';

  aGripData.forEach(
    function (oData, idx) {
      html += '<table class="flexItem tblBdr">';

      if (oData.top) {
        html += `  
<tr>
  <td colspan="100%" class="ac bold ucase bgYellow">
    ${oData.top}
  </td>
</tr>`;
      } // top

      html += '<tr>';

      if (oData.left) {
        html += `
<td class="bgYellow ac" width="150">
  ${oData.left}
</td>`;
      } // left

      html += `
<td class="ac bgYellow">
  <img 
    onclick="showLargeImg('${oData.img}');"
    src="images/Previews/${oData.img}" 
    class="imgPreview fh"
    title="Click to Enlarge"/>
</td>`;

      if (oData.right) {
        html += `
<td class="bgYellow ac" width="150">
  ${oData.right}
</td>`;
      } // right

      html += '</tr>';

      if (oData.bottom) {
        html += `
<tr>
  <td colspan="100%" class="ac bgYellow">
    ${oData.bottom}
  </td>  
</tr>`;
      } // bottom

      html += `
<td class="ac bgYellow" colspan="100%">
  Photo ${oData.photo ? oData.photo : idx + 1}
</td>`;

      html += '</table>';
    } // end function
  ); // for Each data item

  html += '</div>';

  ge('divGrips').innerHTML = html;
}

function renderHeaders() {
  tmpl = `
<center>
  <table class="tblHeader">
      <tr colspan="3">
        <td class="hdrC">
          <b class="large">Craig Spegel</b>
          <br>
          <br>
          <b>
            P.O. Box 269, 
            <br>
            Kooskia, Idaho
            <br>
            83539-0269
            <br>
            <br>
            208-935-8685
            <br>
            (8 AM to 5 PM Pacific Time)
          </b>
          <br>
          <br>
          <b class="smaller i">
            This business is made possible by talent on loan from God
          </b>
          <br>
          <br>
        </td>
      </tr>
  </table>
</center>`;

  const aEl = Array.from(document.getElementsByClassName('header'));
  aEl.forEach(
    function(el, idx) {
      el.innerHTML = tmpl;
    }
  );
}

function onPageLoad() {
  renderHeaders();
  renderGrips();
}

function showLargeImg(src) {
  window.open(`images/Large/${src}`, 'fullSize');
}

function printOrderForm() {
  window.open('orderForm.pdf', 'orderForm');
}