var selected_image = 1;
var selected_dbid = 1;

function select_item(id) {
  if (id != selected_image) {
    // set main image 
    document.getElementById('main_image').src = 'file.php?f=Sh1X3q.C0zpaT.' + database_id[id];
    // set greyscale on previously selected thumbnail
    document.getElementById('thumb_image' + selected_image).src = greyscales[selected_image].src;
    document.getElementById('thumb_image' + id).src = colors[id].src;
    selected_image = id;
    selected_dbid = database_id[id];
    show_caption(selected_image);
  }
}

function rollover(id) {
  document.getElementById("thumb_image" + id).src = colors[id].src;
}

function rollout(id) {
  if (selected_image != id) {
    document.getElementById("thumb_image" + id).src = greyscales[id].src;
  }
}

function ImagePopup(xwidth,yheight,xposition,yposition,file_location) {
  var xwidth;
  var yheight;
  var xposition;
  var yposition;
  window_size = "width="+xwidth+",height="+yheight;
  Image = window.open("","",window_size);
  // Image.moveTo(xposition,yposition); // Leave this to the browser
}

function arrow(direction) {
  if ( direction == 'left' ) {
    next_id = selected_image - 1;
    if ( next_id == 0 ) {
      next_id = colors.length-1;
    }
  } 
  if ( direction == 'right' ) {
    next_id = selected_image + 1;
    if ( next_id > (colors.length-1) ) {
      next_id = 1;
    }
  }
  // setting current to grey then change next to color
  document.getElementById('thumb_image' + selected_image).src = greyscales[selected_image].src;
  document.getElementById('thumb_image' + next_id).src = colors[next_id].src;
  // update main picture
  document.getElementById('main_image').src = 'file.php?f=Sh1X3q.C0zpaT.' + database_id[next_id];
  selected_image = next_id;
  show_caption(selected_image);
}


function imageEmbedPopup1(xwidth,yheight,xposition,yposition,window_name,id) {
  // window_name = Image, Sketch
  // db_id == name of associated db
  window_size = "width="+xwidth+",height="+yheight;
  if ( window_name == 'main_image' ) {
    image = window.open('image_popup.php?id='+database_id[id]+'&type='+window_name,"",window_size);
  } 
  if ( window_name == 'sketch' ) {
    image = window.open('image_popup.php?id='+id+'&type='+window_name,"",window_size);
  }
  //image.moveTo(xposition,yposition);
}


function imageEmbedPopup(xposition,yposition,window_name,id) {
  // window_name = Image, Sketch
  // db_id == name of associated db
  if ( window_name == 'main_image' ) {
    image = window.open('image_popup.php?id='+database_id[id]+'&type='+window_name,"",width="100",height="100");
  } 
  if ( window_name == 'sketch' ) {
    image = window.open('image_popup.php?id='+id+'&type='+window_name,"");
  }
}


function show_caption(selected_image){
  // show caption as the main image (selected images) changes
  if (!document.getElementById("image_caption"))
  {
    return;
  }
  document.getElementById("image_caption").firstChild.nodeValue = captions[selected_image];
  return;
}

function setup_main_popup () {
  var main_image = document.getElementById ('main_image');
  if (main_image) {
    if (pop_up_exists[selected_image]) {
      main_image.className = 'clickable';
      main_image.onclick = function () {
        imageEmbedPopup1 (
          image_sizes_x[selected_image],
          image_sizes_y[selected_image],
          0,
          0,
          'main_image',
          selected_image
        );
      }
    } else {
      main_image.onclick = null;
      main_image.className = '';
    }
  }
}