function ajaxCallToGetPicture(id) {
  var r = $.ajax({  
    type: 'GET',
    url: '/picture/show/id/' + id,
    async: false
    }).responseText;  
  return r; 
}

var f = function(im, r, func) {
  if (im.complete || im.naturalWidth > 0) {
    func(r, im);
  }
  else {
    setTimeout(arguments.callee, 100, arguments);
  }
}

function getPicture(id) {
  $("#overlay").css('height', getTotalDocumentHeight() + 'px');
  $("#overlay").css('top', '0px');
  $('#overlay').show();
  $("#box").html('<div id="prev-pic"></div><div class="innerbox"><img src="/images/ajax-loader.gif" id="loading-img" /></div><div id="next-pic"></div>'); 
  $('#loading-img').css('margin-top', '201px');
  $('#box').css('width', '450px');
  center($('#box'));
  $('#box').show();
  var r = ajaxCallToGetPicture(id);
  var img = new Image();
  img.src = $(r).find('img')[0].src;
  setTimeout(f, 100, img, r, function(r, im) {
    $('#box').html(r);
    $('#box div.innerbox img').css('margin-top', ((460-im.height)/2) + 'px');
  });
}

function hideBox() {
  $('#box').hide();
  $('#overlay').hide();
}

function center(el) {
  var myWidth = getClientWidth();
  var myHeight = getClientHeight();
  var scrollY = getScrollYCoords();

  $(el).css('position', 'absolute');
  $(el).css('z-index', 99);

  var setX = (myWidth  - $(el).width()) / 2;
  var setY = (myHeight - $(el).height()) / 2 + scrollY;

  setX = ( setX < 0 ) ? 0 : setX;
  setY = ( setY < 0 ) ? 0 : setY;

  $(el).css('left', setX + 'px');
  $(el).css('top', setY + 'px');
  $(el).css('display', 'block');
}

function getScrollYCoords() {
  var y;
  if (document.documentElement && document.documentElement.scrollTop) {
    y = document.documentElement.scrollTop;
  }
  else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
  }
  else if (window.pageYOffset) {
    y = window.pageYOffset;
  }
  else if (window.scrollY) {
    y = window.scrollY;
  }
  if (typeof(y) == 'number') {
    return y;
  }
  return 0;
}

function getClientWidth() {
  if (typeof(window.innerWidth) == 'number') {
    return window.innerWidth;
  } 
  else if (document.documentElement &&
          (document.documentElement.clientWidth)) {
    return document.documentElement.clientWidth;
  }
  else if (document.body && (document.body.clientWidth)) {
    return document.body.clientWidth;
  }
}

function getClientHeight() {
  if (typeof(window.innerWidth) == 'number') {
    return window.innerHeight;
  } 
  else if (document.documentElement && 
          (document.documentElement.clientHeight)) {
    return document.documentElement.clientHeight;
  }
  else if (document.body && (document.body.clientHeight)) {
    return document.body.clientHeight;
  }
}

function getTotalDocumentHeight() {
  if (window.innerHeight && typeof(window.scrollMaxY) !== 'undefined') {
    return window.innerHeight + window.scrollMaxY;
  }
  else if (document.body.scrollHeight > document.body.offsetHeight) {
    return document.body.scrollHeight;
  }
  else {
    return document.body.offsetHeight + document.body.offsetTop;
  }
}