var artworks = new Array();
  var current_artwork = new Number();
  var images_path = new String();
  var int_max_height = new Number();
  var int_max_width = new Number();
  var int_big_max_width = new Number();
  var int_big_max_height = new Number();
  
   function update_image() {
     var counter_layer = document.getElementById("display_artwork_number");
     counter_layer.innerHTML = current_artwork + '/' + artworks.length;

     var description_layer = document.getElementById("artwork_display_secondary_area");
     var str_description = new String();

     str_description = '<p>' + artworks[current_artwork -1]['name'] + '</p>';
     str_description += artworks[current_artwork -1]['description'];
     description_layer.innerHTML = str_description;

     var image_layer = document.getElementById("artwork_display_area");
     if (artworks[current_artwork -1]['height'] > artworks[current_artwork -1]['width']) {
       if (artworks[current_artwork -1]['height'] > int_max_height) str_size = 'height="' + int_max_height + '"';
       else str_size = '';
     } else {
       if (artworks[current_artwork -1]['width'] > int_max_width) str_size = 'width="' + int_max_width + '"';
       else str_size = '';
     }
     image_layer.innerHTML = '<img style="cursor:pointer" onclick="openImage(event);" ' + str_size + ' id="current_image" src="' + images_path + artworks[current_artwork -1]['image'] + '" title="' + artworks[current_artwork -1]['name'] + '" alt="' + artworks[current_artwork -1]['name'] + '">';
   }

   function preload_images() {
     var artwork_images = new Array();

     for(x = 0;x < artworks.length;x++) {
       artwork_images[x] = new Image();
       artwork_images[x].src = images_path + artworks[x]['image'];
     }
   }

   function set_first_artwork() {
     if (artworks.length == 0) return false;
     
     document.write('<div id="slide_large_window">');
     document.write('<div id="image_container">');
     document.write('<div id="slide_header"></div>');
     document.write('<div id="slide_large_window_image"></div>');
     document.write('<div id="image_title"></div>');
     document.write('<div id="image_description"></div>');
     document.write('</div>');
     document.write('</div>');
     current_artwork = 1;
     update_image();
     preload_images();
   }

   function previous_artwork() {
     if (current_artwork == 1) {
       current_artwork = artworks.length;
     } else current_artwork--;
     update_image();
   }

   function next_artwork() {
     if (current_artwork == (artworks.length)) {
       current_artwork = 1;
     } else current_artwork++;
     update_image();
   }
   
   function openImage(e) {

     var image_window = document.getElementById('slide_large_window');
     var image_container = document.getElementById('image_container');
     var image_layer = document.getElementById('slide_large_window_image');
     var header_layer = document.getElementById('slide_header');
     var image_title_layer = document.getElementById('image_title');
     var image_description_layer = document.getElementById('image_description');
     var myArtwork = new Array();
     
     myArtwork = artworks[current_artwork -1];
     image_window.style.height = (Number(myArtwork['height']) + 200) + 'px';
     image_container.style.width = (Number(myArtwork['width']) + 2) + 'px';
     image_container.style.marginLeft = '-' + ((Number(myArtwork['width']) + 2)/2) + 'px';
     image_container.style.marginRight =  '-' + ((Number(myArtwork['width']) + 2)/2) + 'px';
     image_layer.innerHTML = '<br><img onclick="closeImage();" width="' + myArtwork['width'] + '" height="' + myArtwork['height'] + '" id="big_image" src="' + images_path + myArtwork['image'] + '" title="' + myArtwork['name'] + '" alt="' + myArtwork['name'] + '">';
     header_layer.innerHTML = '<img src="' + myArtwork['header_logo'] + '">';
     //image_title_layer.innerHTML = myArtwork['name'];
     image_description_layer.innerHTML = '<br><br><font size="2"><a href="javascript:void(0);" onclick="closeImage();">' + myArtwork['back_text'] + '</a></font>';
     //showAtCenter(e,'slide_large_window');
     image_window.style.display = 'block';
     image_window.style.visibility = 'visible';
   }
   
   function getBigSize(artwork) {
     var ratio = Number();

     if (int_big_max_width < artwork['width'] && artwork['width'] > artwork['height']) {
       ratio = artwork['height']/artwork['width'];
       artwork['width'] = int_big_max_width;
       artwork['height'] = ratio * int_big_max_width;
     } else if (int_big_max_height < artwork['height'] && artwork['height'] >= artwork['width']) {
       ratio = artwork['width']/artwork['height'];
       artwork['height'] = int_big_max_height;
       artwork['width'] = ratio * int_big_max_height;
     } else if ((int_big_max_height < artwork['height'] || int_big_max_width < artwork['width']) && artwork['height'] == artwork['width']) {
       ratio = artwork['width']/artwork['height'];
       artwork['height'] = int_big_max_height;
       artwork['width'] = ratio * int_big_max_height;
     }
     return artwork;
   }
   
   
   function closeImage() {
     var image_layer = document.getElementById('slide_large_window');
     
     image_layer.style.display = 'none';
     image_layer.style.visibility = 'hidden';
   }
   
   function showAtCenter(e,strLayer) {
      if (window.event) e = window.event;
      var oLayer = top.document.getElementById(strLayer);

      if (window.event) {
        var intClientWidth = top.document.body.clientWidth;
        var intClientHeight = top.document.body.clientHeight;
      } else {
        var intClientWidth = top.innerWidth;
        var intClientHeight = top.innerHeight;
      }

      var intWidth = top.document.body.scrollLeft + top.document.documentElement.scrollLeft + (intClientWidth / 2);
      var intHeight = top.document.body.scrollTop + top.document.documentElement.scrollTop + (intClientHeight / 2);

      var intLayerWidth = oLayer.style.width.substr(0,oLayer.style.width.length - 2);
      var intLayerHeight = oLayer.style.height.substr(0,oLayer.style.width.length - 2);

      var intNewLeft = (intWidth) - (intLayerWidth / 2);
      var intNewTop = (intHeight) - (intLayerHeight / 2);

      oLayer.style.left = intNewLeft + "px";
      oLayer.style.top = intNewTop + "px";
    }