var loadingTimer, loadingFrame = 1;

showLoading = function() {
   $("#progress_overlay").css({'width': $(window).width(), 'height': $(document).height(), 'opacity': 0.5}).show();
   clearInterval(loadingTimer);
   var pos = getViewport();
   $("#progress_loading").css({'left': ((pos[0] - 40) / 2 + pos[2]), 'top': ((pos[1] - 40) / 2 + pos[3])}).show();
   $("#progress_loading").bind('click', closeProgress);
   loadingTimer = setInterval(animateLoading, 66);
};

animateLoading = function(el, o) {
   if (!$("#progress_loading").is(':visible')){
      clearInterval(loadingTimer);
      return;
   }
   $("#progress_loading > div").css('top', (loadingFrame * -40) + 'px');
   loadingFrame = (loadingFrame + 1) % 12;
};

getViewport = function() {
   var scroll = getPageScroll();
   return [$(window).width(), $(window).height(), scroll[0], scroll[1]];
};

getPageScroll = function() {
   var xScroll, yScroll;
   if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
   } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
   } else if (document.body) {
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
   }
   return [xScroll, yScroll];
};

closeProgress = function() {
   $("#progress_loading,#progress_overlay").hide();
};