function showColourGrey ( imgName, imgId, mode )
{
  imgEl = document.getElementById ( imgId );
  var imgPath = '/img/scl/' + imgName + '-' + mode + '.jpg';
  imgEl.src = imgPath;
}

function showLargeImg ( imgName, imgTitle )
{
  // hide video box if necessary
  videoBoxContainerEl = document.getElementById ( 'videoBoxContainer' );
  if ( videoBoxContainerEl.style.visibility == 'visible' )
  {
    videoBoxContainerEl.style.visibility = 'hidden';
    videoBoxContainerEl.style.display = 'none';
  }
  videoBoxEl =  document.getElementById ( 'videoBox' );
  if ( videoBoxEl.style.visibility == 'visible' )
  {
    videoBoxEl.style.visibility = 'hidden';
    videoBoxEl.style.display = 'none';
  }

  // hide content text if necessary
  textDivEl = document.getElementById ( 'ctnText' );
  if ( textDivEl.style.visibility == 'visible' )
  {
    textDivEl.style.visibility = 'hidden';
    textDivEl.style.display = 'none';
  }

  // show large image box if necessary
  imgDivEl =  document.getElementById ( 'imgLrg' );
  if ( imgDivEl.style.visibility == 'hidden' )
  {
    imgDivEl.style.visibility = 'visible';
    imgDivEl.style.display = 'block';
  }

  // show new large image
  imgEl = document.getElementById ( 'imgLarge' );
  var imgPath = '/img/pht/' + imgName + '.jpg';
  imgEl.src = imgPath;
  imgEl.alt = imgTitle;
  imgEl.title = imgTitle;

  // change title image
  imgEmlTtl = document.getElementById ( 'imgTtl' );
  var imgPathTtl = '/img/ttl/' + imgName + '.jpg';
  imgEmlTtl.src = imgPathTtl;
  imgEmlTtl.alt = imgTitle;
  imgEmlTtl.title = imgTitle;
}


function showMovie ()
{
  // hide large image box
  imgLrgDivEl =  document.getElementById ( 'imgLrg' );
  imgLrgDivEl.style.visibility = 'hidden';
  imgLrgDivEl.style.display = 'none';

  // hide content text
  textDivEl = document.getElementById ( 'ctnText' );
  textDivEl.style.visibility = 'hidden';
  textDivEl.style.display = 'none';

  // show video box
  videoBoxContainerEl = document.getElementById ( 'videoBoxContainer' );
  videoBoxContainerEl.style.visibility = 'visible';
  videoBoxContainerEl.style.display = 'block';
  videoBoxEl = document.getElementById ( 'videoBox' );
  videoBoxEl.style.visibility = 'visible';
  videoBoxEl.style.display = 'block';
}


function showBio ()
{
  // hide large image box
  imgLrgDivEl =  document.getElementById ( 'imgLrg' );
  imgLrgDivEl.style.visibility = 'hidden';
  imgLrgDivEl.style.display = 'none';

  // hide video box
  videoBoxContainerEl = document.getElementById ( 'videoBoxContainer' );
  videoBoxContainerEl.style.visibility = 'hidden';
  videoBoxContainerEl.style.display = 'none';
  videoBoxEl =  document.getElementById ( 'videoBox' );
  videoBoxEl.style.visibility = 'hidden';
  videoBoxEl.style.display = 'none';

  // show content text
  textDivEl = document.getElementById ( 'ctnText' );
  textDivEl.innerHTML = '<div class="ctnTextScroll"><img src="/img/lyt/biography.jpg" title="BIOGRAPHY" alt="BIOGRAPHY" /></div>';
  textDivEl.style.visibility = 'visible';
  textDivEl.style.display = 'block';
}


function showContact ()
{
  // hide large image box if necessary
  imgLrgDivEl =  document.getElementById ( 'imgLrg' );
  imgLrgDivEl.style.visibility = 'hidden';
  imgLrgDivEl.style.display = 'none';

  // hide video box
  videoBoxContainerEl = document.getElementById ( 'videoBoxContainer' );
  videoBoxContainerEl.style.visibility = 'hidden';
  videoBoxContainerEl.style.display = 'none';
  videoBoxEl =  document.getElementById ( 'videoBox' );
  videoBoxEl.style.visibility = 'hidden';
  videoBoxEl.style.display = 'none';

  // show content text
  textDivEl = document.getElementById ( 'ctnText' );
  var innerHTMLCode = '<div class="ctnTextScroll">';
  innerHTMLCode += '<img class="none" src="/img/lyt/contact.jpg" title="CONTACT" alt="CONTACT" usemap="#contactMap" />';
  innerHTMLCode += '<map name="contactMap" id="contactMap">';
  var uNameEm1  = 'con' + 'tac' + 't';
  var kaNameEn1 = '&#64;';
  var kaSrvEn1  = 'in' + 'stin' + 'ct' + 'pho' + 'tog' + 'rap' + 'hy.c' + 'om';
  innerHTMLCode += '<area shape="rect" coords="103,167,343,191" href="' + 'mai' + 'lto' + ':' + uNameEm1 + kaNameEn1 + kaSrvEn1 + '" o' + 'nmou' + 'seov' + 'er="wi' + 'ndow.st' + 'atus=' + '\'' + uNameEm1 + kaNameEn1 + kaSrvEn1 + '\'' + '; return true;" onmo' + 'useo' + 'ut="wind' + 'ow.sta' + 'tus=' + '\'\'' + '; return true;" alt="' + uNameEm1 + kaNameEn1 + kaSrvEn1 + '" />';
  innerHTMLCode += '<area shape="rect" coords="63,301,168,318" href="http://www.ip-division.net/" target="_blank" alt="www.ip-division.net" />';
  innerHTMLCode += '<area shape="rect" coords="241,301,348,318" href="http://www.ole-lentfer.com/" target="_blank" alt="www.ole-lentfer.com" />';
  innerHTMLCode += '<area shape="rect" coords="395,301,544,318" href="http://www.alexandraharfield.com/" target="_blank" alt="www.alexandraharfield.com" />';
  var uNameEm2  = 'in' + 'fo';
  var kaNameEn2 = '&#64;';
  var kaSrvEn2  = 'ip' + '-' + 'divi' + 'si' + 'o' + 'n.' + 'ne' + 't';
  innerHTMLCode += '<area shape="rect" coords="63,320,175,337" href="' + 'mai' + 'lto' + ':' + uNameEm2 + kaNameEn2 + kaSrvEn2 + '" o' + 'nmou' + 'seov' + 'er="wi' + 'ndow.st' + 'atus=' + '\'' + uNameEm2 + kaNameEn2 + kaSrvEn2 + '\'' + '; return true;" onmo' + 'useo' + 'ut="wind' + 'ow.sta' + 'tus=' + '\'\'' + '; return true;" alt="' + uNameEm2 + kaNameEn2 + kaSrvEn2 + '" />';
  var uNameEm3  = 'co' + 'nta' + 'ct';
  var kaNameEn3 = '&#64;';
  var kaSrvEn3  = 'ol' + 'e-' + 'len' + 'tfe' + 'r.c' + 'om';
  innerHTMLCode += '<area shape="rect" coords="241,320,365,337" href="' + 'mai' + 'lto' + ':' + uNameEm3 + kaNameEn3 + kaSrvEn3 + '" o' + 'nmou' + 'seov' + 'er="wi' + 'ndow.st' + 'atus=' + '\'' + uNameEm3 + kaNameEn3 + kaSrvEn3 + '\'' + '; return true;" onmo' + 'useo' + 'ut="wind' + 'ow.sta' + 'tus=' + '\'\'' + '; return true;" alt="' + uNameEm3 + kaNameEn3 + kaSrvEn3 + '" />';
  var uNameEm4  = 'ale' + 'xand' + 'rahar' + 'fie' + 'ld';
  var kaNameEn4 = '&#64;';
  var kaSrvEn4  = 'ho' + 'tma' + 'il.' + 'co' + 'm';
  innerHTMLCode += '<area shape="rect" coords="395,320,559,337" href="' + 'mai' + 'lto' + ':' + uNameEm4 + kaNameEn4 + kaSrvEn4 + '" o' + 'nmou' + 'seov' + 'er="wi' + 'ndow.st' + 'atus=' + '\'' + uNameEm4 + kaNameEn4 + kaSrvEn4 + '\'' + '; return true;" onmo' + 'useo' + 'ut="wind' + 'ow.sta' + 'tus=' + '\'\'' + '; return true;" alt="' + uNameEm4 + kaNameEn4 + kaSrvEn4 + '" />';
  var uNameEm5  = 'rse' + 'ba' + 'lj';
  var kaNameEn5 = '&#64;';
  var kaSrvEn5  = 'go' + 'og' + 'lem' + 'ai' + 'l.' + 'c' + 'om';
  innerHTMLCode += '<area shape="rect" coords="63,412,191,429" href="' + 'mai' + 'lto' + ':' + uNameEm5 + kaNameEn5 + kaSrvEn5 + '" o' + 'nmou' + 'seov' + 'er="wi' + 'ndow.st' + 'atus=' + '\'' + uNameEm5 + kaNameEn5 + kaSrvEn5 + '\'' + '; return true;" onmo' + 'useo' + 'ut="wind' + 'ow.sta' + 'tus=' + '\'\'' + '; return true;" alt="' + uNameEm5 + kaNameEn5 + kaSrvEn5 + '" />';
  var uNameEm6  = 'robe' + 'rtb' + 'ina';
  var kaNameEn6 = '&#64;';
  var kaSrvEn6  = 'we' + 'b.d' + 'e';
  innerHTMLCode += '<area shape="rect" coords="241,412,341,429" href="' + 'mai' + 'lto' + ':' + uNameEm6 + kaNameEn6 + kaSrvEn6 + '" o' + 'nmou' + 'seov' + 'er="wi' + 'ndow.st' + 'atus=' + '\'' + uNameEm6 + kaNameEn6 + kaSrvEn6 + '\'' + '; return true;" onmo' + 'useo' + 'ut="wind' + 'ow.sta' + 'tus=' + '\'\'' + '; return true;" alt="' + uNameEm6 + kaNameEn6 + kaSrvEn6 + '" />';
  innerHTMLCode += '</map>';
  innerHTMLCode += '</div>';

  textDivEl.innerHTML = innerHTMLCode;
  textDivEl.style.visibility = 'visible';
  textDivEl.style.display = 'block';
}