$.browser.realsafari = ($.browser.webkit && !/chrome/.test(navigator.userAgent.toLowerCase()));

jQuery(document).ready(function ($) {
  // stick the objects in local vars so jQuery doesn't have to find and wrap them every time resize() is fired.
  var siteborderimageleft = $(".siteborderimageleft");
  var siteborderimageright = $(".siteborderimageright");
  var bodyLeft = $("#BodyLeft");
  var bodyRight = $("#BodyRight");
  var mainbodyWidth = $(".mainbody").width();
  var body = $("body");
  var jwindow = $(window);

  isIE6 = $.browser.msie && $.browser.version.substring(0, 2) == "6.";

  function setupIfImagesLoaded() {
    // Safari 5.0.5. has an irritating bug - the resize event is sometimes fired before the body has been moved to its new position as the result of a resize.  This doesn't happen in Chrome 12.  I don't know if it happens in other versions of Safari. So on Safari we calculate what the bodyleft position should be by hand.  We don't do this on all browsers because position() is the right way to do this and is more accurate.
    function getBodyLeftPositionLeft() {
      if ($.browser.realsafari) {
        var left = Math.floor((body.width() - mainbodyWidth) / 2);
        return left < 0 ? 0 : left;
      }
      else {
        return bodyLeft.position().left;
      }
    }
    function getBodyRightPositionLeft() {
      if ($.browser.realsafari) {
        return getBodyLeftPositionLeft() + mainbodyWidth - bodyRight.width();
      }
      else {
        return bodyRight.position().left;
      }
    }
    // We need to know the height to position the images properly which means the images have to be fully loaded before we position them.  We can't use the jQuery load() event because the docs say it's not reliable which leaves us with the document onload() event or use a timer.  It would be simpler if Sitebuilder passed us the image size, but it doesn't.  Another option would be if we required the image height to be specified in the CMC.    
    // We could also use absolute instead of fixed positioning, but then we'd have to handle scrolling and the user is more likely to scroll than resize their browser window.
    if (siteborderimageleft.height() > 0 && siteborderimageright.height() > 0) {
      // we are using jquery.ba-resize.js so we can get resize events on the body.  This is necessary because if the mainbody gets taller it can cause a horizontal scrollbar to appear.  We bind on the window too because we get a lot more events for that and it makes the repositioning look a lot smoother when resizing the browser window.
      jQuery.resize.throttleWindow = false;
      var lastBodyWidth, lastWinHeight;
      body.add(jwindow).resize(function () {
        var bodyWidth = body.width();
        var winHeight = jwindow.height();
        var scrollTop;
        if (bodyWidth == lastBodyWidth && winHeight == lastWinHeight && !isIE6) {
          // check this because we are biding on both the body and window resize() event.  No sense in doing the calculations twice.
          return;
        }
        lastBodyWidth = bodyWidth;
        lastWinHeight = winHeight;
        var leftTop = (winHeight - siteborderimageleft.height()) / 2;
        var rightTop = (winHeight - siteborderimageright.height()) / 2;
        if (isIE6) {
          scrollTop = $(window).scrollTop();
          leftTop += scrollTop;
          rightTop += scrollTop;
        }
        siteborderimageleft.css({
          right: bodyWidth - getBodyLeftPositionLeft() - bodyLeft.outerWidth() + "px", top: leftTop + "px"
        });
        siteborderimageright.css({
          left: getBodyRightPositionLeft() + bodyLeft.width() - bodyRight.width() + "px", top: rightTop + "px"
        });
      }).resize();
      if (isIE6) {
        // IE6 doesn't support browser fixed so we have to handle scrolling in JavaScript.
        $(window).scroll(function () { body.resize(); })
      }
      siteborderimageleft.css({ display: "block" });
      siteborderimageright.css({ display: "block" });
      return true;
    }
    else {
      return false;
    }
  }
  if (!setupIfImagesLoaded()) {
    var interval = setInterval(function () {
      if (setupIfImagesLoaded()) {
        clearInterval(interval);
      }
    }, 250);
  }
});