/********************************* DECLARATIONS ****************************************/

var iMaxCount = 100;
var sThumbnailFolder = 'thumbnails/';
var constCellCount = 4;
var iPageOption = 1;

var sMenuArray = MultiDimensionalArray(iMaxCount, 1);
var sArtistArray = MultiDimensionalArray(iMaxCount, 3);
var sArtArray = MultiDimensionalArray(iMaxCount, 3);
var sRuleArray = MultiDimensionalArray(iMaxCount, 1);

var staticBaseURL = '';
var staticMenuHTML = '';
var staticArtistHTML = '';
var staticArtHTML = '';

/*********************************    GENERIC    ****************************************/

function MultiDimensionalArray(iRows, iCols) {
  var i;
  var j;
  var a = new Array(iRows);
  for (i=0; i < iRows; i++) {
    a[i] = new Array(iCols);
    for (j=0; j < iCols; j++) {
      a[i][j] = '';
    }
  }
  return(a);
}

function fileCount() {
  var iCount = 0;
  var i;
  for (i=0; (i < iMaxCount) && (sArtArray[i][0] != ''); i++) {
    iCount = iCount + 1;
    }
  return(iCount);
}

function getText(iRowNumber, iCellNumber) {
  if (sArtArray != null) {
    return(sArtArray[iRowNumber][iCellNumber]);
    }
  else {
    return '';
    }
}

function getRule(ruleName, sAttributeName) {
  var styleSheet;
  var intX;
  var intY;
  var retVal = '';
 
  if (sAttributeName != null) {
    for (intX=0; (intX < iMaxCount) && (sRuleArray[intX][0] != ''); intX++) {
      if (sRuleArray[intX][0] == ruleName + '_' + sAttributeName) {
        return(sRuleArray[intX][1]);
        }
      }
    }

  if (retVal == '') {
    styleCount = 0;
    
  for (intX=document.styleSheets.length - 1; (intX >= 0) && (retVal == ''); intX--) {
      styleSheet = document.styleSheets[intX];

      for (intY=0; (intY < styleSheet.rules.length) && (retVal == ''); intY++) {
        if (styleSheet.rules[intY].selectorText == ruleName) {
          retVal = styleSheet.rules[intY];
          }
        }
      }

    if (retVal != '') {
      if (sAttributeName != null) {
        var iSaveSpot = -1;
        for (intX=0; (intX < iMaxCount) && (iSaveSpot < 0); intX++) {
          if ((sRuleArray[intX][0] == '') || (sRuleArray[intX][0] == ruleName + '_' + sAttributeName)) {
            iSaveSpot = intX;
            }
          }
      
        if (iSaveSpot >= 0)  {
          sRuleArray[iSaveSpot][0] = ruleName + '_' + sAttributeName;
          sRuleArray[iSaveSpot][1] = retVal.style.getAttribute(sAttributeName);
           }
        }
      }
    else {
      retVal = document.body
      }
    }

  return (retVal);
}


function buildLocalStylesheet() {
  var oStyle;
  oStyle = document.createElement("STYLE");
  oStyle.type = "text/css";
  oStyle.ID = "myLocalStyle"
  oStyle = document.getElementById('docHead').appendChild(oStyle);
  var oStyleSheet = document.styleSheets.item(document.styleSheets.length - 1);

  var intX;
  var intY;
  var oRule;

  for (intX=0; (intX < document.styleSheets.length); intX++) {
    for (intY=0; (intY < document.styleSheets[intX].rules.length); intY++) {
      oRule = document.styleSheets[intX].rules.item(intY);
      if (oRule.readOnly == false) {
        intY = document.styleSheets[intX].rules.length;
        }
      else if (oRule.selectorText != '.PAGE') {
        var sStyleToAttach = '';
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'BACKGROUND-COLOR');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'COLOR');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'COLOR1');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'COLOR2');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'BORDER');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'BORDER-COLOR');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'PADDING');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'FONT-WEIGHT');
        sStyleToAttach = sStyleToAttach + attachToStylesheet(oRule.selectorText, 'CURSOR');

        if (sStyleToAttach != '') {
          oStyleSheet.addRule(oRule.selectorText, sStyleToAttach);
          }
        }
      }
    }
  }

function attachToStylesheet(sSelectorText, sAttributeName) {
  var oAttrib;
  var sAttrib1='';
  var sAttrib2;
  var sRetVal = '';
  
  if (sAttributeName != '') {
    oAttrib = getRule(sSelectorText);

    if ((oAttrib != null) && ((oAttrib != ''))) {
      sAttrib1 = oAttrib.style.getAttribute(sAttributeName.replace(/-/g, ''));

      if (sAttrib1 != null) {
        if (sAttrib1.indexOf('_') > 0) {
          sAttrib2 = sAttrib1.substring(sAttrib1.indexOf('_') + 1, sAttrib1.length);
          sAttrib1 = sAttrib1.substring(0, sAttrib1.indexOf('_'));

          sRetVal = sAttributeName + ': ' + getRule(sAttrib1).style.getAttribute(sAttrib2) + ';';        
          }
        }
      }
    }
  return(sRetVal);
  }

function getBaseURL() {
  if (staticBaseURL == '') {
    staticBaseURL = document.location.href;

    if (staticBaseURL.indexOf('?') > 0) {
      staticBaseURL = staticBaseURL.substring(0, staticBaseURL.indexOf('?'));
      }

    if (staticBaseURL.indexOf('.htm') > 0) {
      staticBaseURL = staticBaseURL.substring(0, staticBaseURL.indexOf('.htm'));
      }

    if (staticBaseURL.lastIndexOf('/') > 0) {
      staticBaseURL = staticBaseURL.substring(0, staticBaseURL.lastIndexOf('/') + 1);
      }
    else if (staticBaseURL.lastIndexOf('\\') > 0) {
      staticBaseURL = staticBaseURL.substring(0, staticBaseURL.lastIndexOf('\\') + 1);
      }
    }
  return(staticBaseURL);
} 

function checkAllThumbnails() {    
  for(var i=0;i<document.images.length;i++) {
    var regExp;
    var cpyImg = new Image();
    cpyImg.src = document.images[i].src;

    if ((!cpyImg.width) || ((cpyImg.height == 30) && (cpyImg.width == 28))) {
      if (document.images[i].src.lastIndexOf(sThumbnailFolder.replace(/\//g, '\\')) > 0) {
        regExp = new RegExp(sThumbnailFolder.replace(/\//g, '\\'), 'g');
        }
      else {
        regExp = new RegExp(sThumbnailFolder, 'g');
        }

      document.images[i].src = document.images[i].src.replace(regExp, '');
      }
    }
}

function iif(psdStr, trueStr, falseStr) {
  var retVal;
  if (psdStr) {
    retVal = trueStr
    }
  else {
    retVal = falseStr
  }
  return(retVal);
}

/*********************************     MENU     ****************************************/

function addMenuItem(sMenuTitle, sHyperlink) {
  var iSaveSpot = -1;
  var i;
  for (i=0; (i < iMaxCount) && (iSaveSpot < 0); i++) {
    if ((sMenuArray[i][0] == '') || (sMenuArray[i][0] == sMenuTitle)) {
      iSaveSpot = i;
      }
    }
  
  if (iSaveSpot >= 0)  {
    sMenuArray[iSaveSpot][0] = sMenuTitle;
    sMenuArray[iSaveSpot][1] = sHyperlink;
    }
  return(iSaveSpot);
}

function addMenuArtists() {
  for (i=0; i < iMaxCount; i++) {
    if (sArtistArray[i][0] != '') {
      if (sArtistArray[i][1] == '') {
        addMenuItem('   ' + sArtistArray[i][0], sArtistArray[i][0] + '/index.html');
        }
      else {
        addMenuItem('   ' + sArtistArray[i][0], sArtistArray[i][1]);
        }
      }
    }
}

function buildMenuTable() {
  var i;

  if (staticMenuHTML == '') {
    staticMenuHTML = '<TABLE width="100%" onmousemove="highlightMenuCell(1)" onmouseout="highlightMenuCell(0)">';
    
    for (i=0; i < iMaxCount; i++) {
      if (sMenuArray[i][0] != '') {
        staticMenuHTML = staticMenuHTML + '<TR><TD class="MENUPLAIN" onClick="menuItem_OnClick(\'' + sMenuArray[i][1].replace(/\'/g, '\'\'') + '?ARTIST=' + sMenuArray[i][0].replace(/\'/g, '\'\'') + '\')">';
        staticMenuHTML = staticMenuHTML + sMenuArray[i][0].replace(/ /g, '&nbsp;');
        staticMenuHTML = staticMenuHTML + '</TD></TR>';
        }
      }
    staticMenuHTML = staticMenuHTML + '</TABLE>';
    }
  return(staticMenuHTML);
}

function highlightMenuCell(iHighlightFlag) {
  var tdCurrentCell = window.event.srcElement;
  var tdCurrentTable = null;

  while ((tdCurrentCell.tagName != 'TD') && (tdCurrentCell.parentElement != null)) {
    tdCurrentCell = tdCurrentCell.parentElement;
    }

  if ((tdCurrentCell.tagName == 'TD') && (tdCurrentCell.id != 'tdMenu')) {
    if (iHighlightFlag == 1) {
      if (tdCurrentCell.onclick.toString().indexOf('menuItem_OnClick(\'INVALID') < 0) {
        tdCurrentCell.className = 'MENUSELECT';
        }
      else {
        tdCurrentCell.className = 'MENUINVALID';
        }
      }
    else {
      tdCurrentCell.className = 'MENUPLAIN';
      }
    }
}

function menuItem_OnClick(sMenuHyperlink) {
  if (sMenuHyperlink.indexOf('INVALID?') != 0) {
    if (parent.document != null) {
      if (parent.document.frames.length > 0) {
        if (parent.document.frames('rightFrame') != null) {
      
          parent.document.frames('rightFrame').location = sMenuHyperlink;
          }
        }
      else if (top.location.href == document.location.href) {
        document.location.href = sMenuHyperlink;
        }
      }
    }
}

/*********************************    HEADER    ****************************************/

function highlightHeaderCell(iHighlightFlag) {
  var tdCurrentCell = window.event.srcElement;
  var tdCurrentTable = null;

  while ((tdCurrentCell.tagName != 'TD') && (tdCurrentCell.parentElement != null)) {
    tdCurrentCell = tdCurrentCell.parentElement;
    }

  if ((tdCurrentCell.tagName == 'TD') && (tdCurrentCell.id.substring(0, 2) == 'td')) {
    if (iHighlightFlag == 1) {
      tdCurrentCell.className = 'HEADERSELECT';
      }
    else {
      tdCurrentCell.className = 'HEADERPLAIN';
      }
    }
}

/*********************************    ARTIST    ****************************************/

function addArtistItem(sArtistTitle, sHyperlink, sThumbnailImage, sArtistDescription) {
  var iSaveSpot = -1;
  var i;
  for (i=0; (i < iMaxCount) && (iSaveSpot < 0); i++) {
    if ((sArtistArray[i][0] == '') || (sArtistArray[i][0] == sArtistTitle)) {
      iSaveSpot = i;
      }
    }
  
  if (iSaveSpot >= 0)  {
    sArtistArray[iSaveSpot][0] = sArtistTitle;
    if (sHyperlink == '') {
      sArtistArray[iSaveSpot][1] = sArtistTitle + '/index.html';
      }
    else {
      sArtistArray[iSaveSpot][1] = sHyperlink;
      }
    sArtistArray[iSaveSpot][2] = sThumbnailImage;
    sArtistArray[iSaveSpot][3] = sArtistDescription.replace(/<euro>|<EURO>/g, '&#128;');
    }
  return(iSaveSpot);
}

function buildArtistTable() {
  var i;
  
  if (staticArtistHTML == '') {
    staticArtistHTML = '<TABLE width="100%" onmousemove="highlightArtistCell(1)" onmouseout="highlightArtistCell(0)" style="BACKGROUND-COLOR: ' + getRule(".ITEMPLAIN").style.backgroundColor + ';">';

    for (i=0; i < iMaxCount; i++) {
      if (sArtistArray[i][0] != '') {
        staticArtistHTML = staticArtistHTML + '<TR><TD class="ITEMPLAIN" onClick="artistItem_OnClick(\'' + sArtistArray[i][1].replace(/\'/g, '\'\'') + '\')">';
        staticArtistHTML = staticArtistHTML + '<TABLE width="100%" height="100%"><TR><TD align="center" colSpan="2" style="color: ' + getRule(".ITEMPLAIN").style.getAttribute("COLOR1") + ';"><FONT size=4><STRONG>';
        staticArtistHTML = staticArtistHTML + sArtistArray[i][0].replace(/ /g, '&nbsp;');
        staticArtistHTML = staticArtistHTML + '</STRONG></FONT></TD></TR><TR><TD align="center" width="150px">';
        staticArtistHTML = staticArtistHTML + '<IMG src="' + getBaseURL() + sArtistArray[i][2] + '" width="100px" height="100px">';
        staticArtistHTML = staticArtistHTML + '</TD><TD align="left" valign="top" style="color: ' + getRule(".ITEMPLAIN").style.getAttribute("COLOR2") + ';">';
        staticArtistHTML = staticArtistHTML + sArtistArray[i][3].replace(/ /g, '&nbsp;');
        staticArtistHTML = staticArtistHTML + '</TD></TR><TR><TD colSpan="2">&nbsp;</TD></TR></TABLE>';
        staticArtistHTML = staticArtistHTML + '</TD></TR>';
        }
      }
  
    staticArtistHTML = staticArtistHTML + '</TABLE>';
    }
  
  return(staticArtistHTML);
}

function highlightArtistCell(iHighlightFlag) {
  var tdCurrentCell = window.event.srcElement;
  var tdCurrentTable = null;

  while (((tdCurrentCell.tagName != 'TD') || (tdCurrentCell.className.substring(0, 4) != 'ITEM')) && (tdCurrentCell.parentElement != null)) {
    tdCurrentCell = tdCurrentCell.parentElement;
    }

  if ((tdCurrentCell.tagName == 'TD') && (tdCurrentCell.id != 'tdArtist')) {
    if (iHighlightFlag == 1) {
      if (tdCurrentCell.onclick.toString().indexOf('artistItem_OnClick(\'INVALID\')') < 0) {
        tdCurrentCell.className = 'ITEMSELECT';
        }
      else {
        tdCurrentCell.className = 'ITEMINVALID';
        }
      }
    else {  
      tdCurrentCell.className = 'ITEMPLAIN';
      }
    }
}

function artistItem_OnClick(sArtistHyperlink) {
  if (sArtistHyperlink != 'INVALID') {
    staticArtHTML = '';
    document.location.href = sArtistHyperlink;
    }
}

function extractArtistFromURL() {
  var sURL = document.location.href;
  var sArtist = '';

  if (sURL.lastIndexOf('ARTIST=') > 0) {
    sArtist = sURL.substring(sURL.lastIndexOf('ARTIST=') + 7);

    if (sArtist.indexOf('&') > 0) {
      sArtist = sArtist.substring(0, sArtist.indexOf('&'));
      }

    if (sArtist.indexOf('%26') > 0) {
      sArtist = sArtist.substring(0, sArtist.indexOf('%26'));
      }
    }
  else {
    sArtist = sURL;
    if (sArtist.indexOf('?') > 0) {
      sArtist = sArtist.substring(0, sArtist.indexOf('?'));
      }
    if (sArtist.lastIndexOf('.htm') > 0) {
      sArtist = sArtist.substring(0, sArtist.lastIndexOf('.htm'));
      if (sArtist.lastIndexOf('/') > 0) {
        sArtist = sArtist.substring(0, sArtist.lastIndexOf('/'));
        }
      else if (sArtist.lastIndexOf('\\') > 0) {
        sArtist = sArtist.substring(0, sArtist.lastIndexOf('\\'));
        }
        
      if (sArtist.lastIndexOf('/') > 0) {
        sArtist = sArtist.substring(sArtist.lastIndexOf('/') + 1);
        }
      else if (sArtist.lastIndexOf('\\') > 0) {
        sArtist = sArtist.substring(sArtist.lastIndexOf('\\') + 1);
        }
      }
    }

  if (sArtist.indexOf('#') > 0) {
    sArtist = sArtist.substring(0, sArtist.indexOf('#'));
    }
    
  sArtist = sArtist.replace(/%20/g, ' ');
  sArtist = sArtist.replace(/^\s*|\s*$/g,'');

  return(sArtist);
}

/*********************************      ART      ****************************************/

function addArtItem(sImageName, sOrientation, sArtName, sArtDescription1, sArtDescription2, sArtDescription3, sArtDescription4, sArtDescription5, sArtDescription6, sArtDescription7, sArtDescription8) {
  var sArtDescription = '';
  var iSaveSpot = -1;
  var i;
  for (i=0; (i < iMaxCount) && (iSaveSpot < 0); i++) {
    if ((sArtArray[i][0] == '') || (sArtArray[i][0] == sImageName)) {
      iSaveSpot = i;
      }
    }
  
  if (iSaveSpot >= 0)  {
    sArtArray[iSaveSpot][0] = sImageName;

    if (sArtName == '') {
      sArtArray[iSaveSpot][1] = sImageName;
      }
    else {
      sArtArray[iSaveSpot][1] = sArtName;
      }
    
    if (sArtDescription1 != null) {
      sArtDescription = sArtDescription + sArtDescription1 + '<BR>';
      }
    if (sArtDescription2 != null) {
      sArtDescription = sArtDescription + sArtDescription2 + '<BR>';
      }
    if (sArtDescription3 != null) {
      sArtDescription = sArtDescription + sArtDescription3 + '<BR>';
      }
    if (sArtDescription4 != null) {
      sArtDescription = sArtDescription + sArtDescription4 + '<BR>';
      }
    if (sArtDescription5 != null) {
      sArtDescription = sArtDescription + sArtDescription5 + '<BR>';
      }
    if (sArtDescription6 != null) {
      sArtDescription = sArtDescription + sArtDescription6 + '<BR>';
      }
    if (sArtDescription7 != null) {
      sArtDescription = sArtDescription + sArtDescription7 + '<BR>';
      }
    if (sArtDescription8 != null) {
      sArtDescription = sArtDescription + sArtDescription8 + '<BR>';
      }

    if (sArtDescription.substring(sArtDescription.length - 4, sArtDescription.length) == '<BR>') {
      sArtDescription = sArtDescription.substring(0, sArtDescription.length - 4);
      }
            
    sArtArray[iSaveSpot][2] = sArtDescription.replace(/<euro>|<EURO>/g, '&#128;');
    sArtArray[iSaveSpot][3] = sOrientation;
    }
  return(iSaveSpot);
}

function buildArtTable() {
  var i;
  
  if (staticArtHTML == '') {
    staticArtHTML = '<TABLE width="100%" onmousemove="highlightArtCell(1)" onmouseout="highlightArtCell(0)" style="BACKGROUND-COLOR: ' + getRule(".ITEMPLAIN").style.backgroundColor + ';">';
  
    for (i=0; i < iMaxCount; i++) {
      if (sArtArray[i][0] != '') {
        staticArtHTML = staticArtHTML + '<TR><TD class="ITEMPLAIN" onClick="gotoPicture(' + i + ')">';
        staticArtHTML = staticArtHTML + '<TABLE width="100%" height="100%"><TR><TD align="center" colSpan="2" style="color: ' + getRule(".ITEMPLAIN").style.getAttribute("COLOR1") + ';"><FONT size=4><STRONG>';
        staticArtHTML = staticArtHTML + '<A NAME="' + sArtArray[i][0].replace(/ /g, '%20') + '">' + sArtArray[i][1].replace(/ /g, '&nbsp;') + '</A>';
        staticArtHTML = staticArtHTML + '</STRONG></FONT></TD></TR><TR><TD align="center" width="20%">';
        staticArtHTML = staticArtHTML + '<IMG src="' + getBaseURL() + sThumbnailFolder + sArtArray[i][0] + '"';
        if (sArtArray[i][3] == 'PORTRAIT') {
          staticArtHTML = staticArtHTML + ' height="100px">';
          }
        else if (sArtArray[i][3] == 'LANDSCAPE') {
          staticArtHTML = staticArtHTML + ' width="100px">';
          }
        else {
          staticArtHTML = staticArtHTML + ' width="100px" height="100px">';
          }
        staticArtHTML = staticArtHTML + '</TD><TD width="80%" align="left" valign="top" style="color: ' + getRule(".ITEMPLAIN").style.getAttribute("COLOR2") + ';">';
        staticArtHTML = staticArtHTML + sArtArray[i][2].replace(/ /g, '&nbsp;');
        staticArtHTML = staticArtHTML + '</TD></TR><TR><TD colSpan="2">&nbsp;</TD></TR></TABLE>';
        staticArtHTML = staticArtHTML + '</TD></TR>';
        }
      }
    staticArtHTML = staticArtHTML + '</TABLE>';
    }
    
  window.setTimeout('checkAllThumbnails();', 100, 'javascript');
  
  return(staticArtHTML);
}

function highlightArtCell(iHighlightFlag) {
  var tdCurrentCell = window.event.srcElement;
  var tdCurrentTable = null;

  while (((tdCurrentCell.tagName != 'TD') || (tdCurrentCell.className.substring(0, 4) != 'ITEM')) && (tdCurrentCell.parentElement != null)) {
    tdCurrentCell = tdCurrentCell.parentElement;
    }

  if ((tdCurrentCell.tagName == 'TD') && (tdCurrentCell.id != 'tdListView')) {
    if (iHighlightFlag == 1) {
      tdCurrentCell.className = 'ITEMSELECT';
      }
    else {
      tdCurrentCell.className = 'ITEMPLAIN';
      }
    }
}

/*********************************     BACK     ****************************************/

function cmdBack_OnClick() {
  var sCurrentURL = document.location.href;
  var oImage;
  
  if (iPageOption == 1) {
    var sImage = '';
    if (document.getElementById('trPicture').style.display != 'none') {
      sImage = getText(document.getElementById('hdnPictureNumber').value, 0);
      }

    if (sImage != '') {
      if (sCurrentURL.indexOf('#') > 0) {
        sCurrentURL = sCurrentURL.substring(0, sCurrentURL.indexOf('#'));
        }
      if (sCurrentURL.indexOf('?') < 0) {
        sCurrentURL = sCurrentURL + '?';
        }
    
      sCurrentURL = sCurrentURL + '#' + sImage;
      }
    else {
      sCurrentURL = '../artists.html';
      }
    }
  else {
    sCurrentURL = '../artists.html';
    }

  document.location.href = sCurrentURL;
}

function cmdSwitch_OnClick() {
  if (iPageOption == 1) {
    iPageOption = 2;
    }
  else {
    iPageOption = 1;
    }

  goBackToPage();
}

function goBackToPage() {

  if (document.getElementById('hdnPictureNumber').value < 0) {
    document.getElementById('hdnPictureNumber').value = 0;
    }

  if (iPageOption == 1) {
    var sCurrentURL = document.location.href;
    var sImage = '';
    if (document.getElementById('trPicture').style.display != 'none') {
      sImage = getText(document.getElementById('hdnPictureNumber').value, 0);
      }

    if (sImage != '') {
      if (sCurrentURL.indexOf('#') > 0) {
        sCurrentURL = sCurrentURL.substring(0, sCurrentURL.indexOf('#'));
        }
      if (sCurrentURL.indexOf('?') < 0) {
        sCurrentURL = sCurrentURL + '?';
        }
      sCurrentURL = sCurrentURL + '#' + sImage;

      document.location.href = sCurrentURL;
      }
    else {
      document.getElementById('divListView').innerHTML = buildArtTable();

      document.getElementById('cmdSwitch').innerHTML = '<FONT size=2><STRONG>Thumbnails</STRONG></FONT>';
  
      document.getElementById('trListView').style.display = 'block';
      document.getElementById('trThumbnails').style.display = 'none';
      document.getElementById('trPicture').style.display = 'none';
      }
    }
  else { //if (iPageOption == 2)
    gotoPage(Math.floor((document.getElementById('hdnPictureNumber').value) / (constCellCount * constCellCount)) + 1);
    document.getElementById('cmdSwitch').innerHTML = '<FONT size=2><STRONG>List View</STRONG></FONT>';
  
    document.getElementById('trListView').style.display = 'none';
    document.getElementById('trThumbnails').style.display = 'block';
    document.getElementById('trPicture').style.display = 'none';
    }
}