var changing = false;
var shrinking = 2;
var growing = 0;
var wid = 1036;
var hi = 702;
var border = 12;
var center_x = wid / 2;
var center_y = hi / 2;
var max_wwid = 900;
var max_whi = 650;//600;
var min_wwid = 500;
var min_whi = 333;
var TO;
var auto_hi = 0;
var auto_wid = 0;
var cborder_x = 0;
var cborder_y = 0;
var pr_img = new Array(4);
var nimage = 0;
var imgbasename = "image";
function checkPreload(){
  var finished = true;
  for(i=1;i<=4;i++){
    if(!pr_img[i].complete) finished = false;
    break;
  }
  if(!finished){
    //alert("not finished");
    setTimeout("checkPreload()", 100);
  }
  //else alert("done");
}
function preloadImages(imgbasename, nimage){
  this.imgbasename = imgbasename;
  this.nimage = nimage;
  //alert("preload start");
  for(nr=1;nr<=nimage;nr++){
    pr_img[nr] = new Image();
    if(nimage != 1) pr_img[nr].src = imgbasename+nr+".jpg";
    else pr_img[nr].src = imgbasename+".jpg";
  }
  setTimeout("checkPreload()", 100);
}
function loadImg(imgnr){
  if(nimage != 1){
    imgname = "image"+imgnr;
    document.getElementById(imgname).src = imgbasename+imgnr+".jpg";
  }
  else{
    imgname = imgbasename;
    //alert(imgname+" "+imgbasename+".jpg");
    document.getElementById(imgname).src = imgbasename+".jpg";
    //alert(document.getElementById(imgname).width+" "+document.getElementById(imgname).height);
    min_wwid = document.getElementById(imgname).width;
    min_whi = document.getElementById(imgname).height;
  }
}
function sizeImages(){
  if(auto_wid != 1){
    wwid1 = center_x - border / 2 - border;
    left1 = border;
  }
  else{
    wwid1 = whi1 * (max_wwid / max_whi);
    left1 = center_x - border / 2 - wwid1;
  }
  if(auto_hi != 1){
    whi1 = center_y - border / 2 - border;
    top1 = border;
  }
  else{
    whi1 = wwid1 * (max_whi / max_wwid);
    top1 = center_y - border / 2 - whi1;
  }
  var imagename = imgbasename+"1";
  if(nimage == 1) imagename = imgbasename;
  document.getElementById(imagename).width = wwid1;
  document.getElementById(imagename).height = whi1;
  document.getElementById(imagename).style.left = cborder_x + left1;
  document.getElementById(imagename).style.top = cborder_y + top1;  
  
  if(nimage == 1) return;

  if(auto_wid != 2) wwid2 = wid - center_x - border / 2 - border;
  else wwid2 = whi2 * (max_wwid / max_whi);
  if(auto_hi != 2){
    whi2 = center_y - border / 2 - border;
    top2 = border;
  }
  else{
    whi2 = wwid2 * (max_whi / max_wwid);
    top2 = center_y - whi2 - border / 2;
  }
  left2 = center_x + border / 2;

  document.getElementById("image2").width = wwid2;
  document.getElementById("image2").height = whi2;
  document.getElementById("image2").style.left = cborder_x + left2;
  document.getElementById("image2").style.top = cborder_y + top2;  

  if(auto_wid != 3){
    wwid3 = center_x - border / 2 - border;
    left3 = border;
  }
  else{
    wwid3 = whi3 * (max_wwid / max_whi);
    left3 = center_x - border / 2 - wwid3;
  }
  if(auto_hi != 3) whi3 = hi - center_y - border / 2 - border;
  else whi3 = wwid3 * (max_whi / max_wwid);
  top3 = center_y + border / 2;  
  document.getElementById("image3").width = wwid3;
  document.getElementById("image3").height = whi3;
  document.getElementById("image3").style.left = cborder_x + left3;
  document.getElementById("image3").style.top = cborder_y + top3;  

  if(auto_wid != 4) wwid4 = wid - center_x - border / 2 - border;
  else wwid4 = whi4 * (max_wwid / max_whi);
  if(auto_hi != 4) whi4 = hi - center_y - border / 2 - border;
  else whi4 = wwid4 * (max_whi / max_wwid);
  left4 = center_x + border / 2;
  top4 = center_y + border / 2;
  document.getElementById("image4").width = wwid4;
  document.getElementById("image4").height = whi4;
  document.getElementById("image4").style.left = cborder_x + left4;
  document.getElementById("image4").style.top = cborder_y + top4;  
}
function sizeImg(imgnr, size){
  imgname = imgbasename+imgnr;
  if(nimage == 1) imgname = imgbasename;
  if(size == 1){
    document.getElementById(imgname).width = 500;
    document.getElementById(imgname).height = 333;  
  }
  else if(size == 2){
    document.getElementById(imgname).width = 900;
    document.getElementById(imgname).height = 600;  
  }
}
function doOnLoad(){
  for(i=1;i<=nimage;i++) loadImg(i);
  win_width = window.innerWidth;
  win_height = window.innerHeight;
  if(win_width == null){
    win_width = document.body.clientWidth;
    win_height = document.body.clientHeight;
  }
  cborder_x = (win_width - wid) / 2;
  cborder_y = (win_height - hi) / 2;
  sizeImages();
}
function doOnLoad2(imgnr){
  imgname = "image"+imgnr;
  document.getElementById(imgname).src = "IMG_0066done1024.jpg";
  document.getElementById(imgname).width = 99;
  document.getElementById(imgname).height = 54;  
}
function doShrink(imgnr){
  imgname = imgbasename+imgnr;
  if(nimage == 1) imgname = imgbasename;
  w = document.getElementById(imgname).width;
  h = document.getElementById(imgname).height;
  w = w * 0.98;
  h = h * 0.98;
  if(w < min_wwid){
    w = min_wwid;
    h = min_whi;
  }
  if(imgnr == 1){
    center_x = w + border + border / 2;
    center_y = h + border + border / 2;
  }
  else if(imgnr == 2){
    center_x = wid - w - border - border/ 2;
    center_y = h + border + border / 2; 
  }  
  else if(imgnr == 3){
    center_x = w + border + border / 2;
    center_y = hi - h - border - border / 2;
  } 
  else if(imgnr == 4){    
    center_x = wid - w - border - border/ 2;
    center_y = hi - h - border - border / 2;
  }
  sizeImages();
  if(w > min_wwid){
    TO = window.setTimeout("doShrink("+imgnr+")", 20);
  }
  // SHRUNK TO MIN
  else{
    shrinking = 2;
    growing = 0;
    changing = false;
    sizeImg(imgnr,1);
  }
}
function doGrow(imgnr){
  imgname = imgbasename+imgnr;
  if(nimage == 1) imgname = imgbasename;
  w = document.getElementById(imgname).width;
  h = document.getElementById(imgname).height;
  w = w * 1.02;
  h = h * 1.02;  
  if(w > max_wwid){
    w = max_wwid;
    h = max_whi;
  }
  if(imgnr == 1){
    center_x = w + border + border / 2;
    center_y = h + border + border / 2;
    auto_hi = 2;
    auto_wid = 3;
  }
  else if(imgnr == 2){
    center_x = wid - w - border - border/ 2;
    center_y = h + border + border / 2; 
    auto_hi = 1;
    auto_wid = 4;
  }
  else if(imgnr == 3){
    center_x = w + border + border / 2;
    center_y = hi - h - border - border / 2;
    auto_hi = 4;
    auto_wid = 1;
  }
  else if(imgnr == 4){    
    center_x = wid - w - border - border/ 2;
    center_y = hi - h - border - border / 2;
    auto_hi = 3;
    auto_wid = 2;
  }
  sizeImages();
  if(w < max_wwid){
    TO = window.setTimeout("doGrow("+imgnr+")", 20);
  }
  // GROWN TO MAX
  else{
    growing = 2;
    shrinking = 0;
    sizeImg(imgnr, 2);
  }
}
function shrink(imgnr){
  if(shrinking == 1 || !changing) return;
  shrinking = 1;
  clearTimeout(TO);
  doShrink(imgnr);
}
function grow(imgnr){
  if(growing == 1 || changing) return;
  growing = 1;
  clearTimeout(TO);
  changing = true;
  doGrow(imgnr);
}