var initializeUI = function(frontImage) {
  var drawUI = function(ctx, addImage, asShadow) {
    var drawPageBody = function(ctx, w, h, inset, radius, indicatorPosition) {
      ctx.save();
      ctx.beginPath();
      if (asShadow) {
        if (Browser.Engine.webkit && Browser.Engine.version >= 420 
            || Browser.Engine.gecko && Browser.Engine.version >= 19 && !/Firefox\/3\.0/.test(navigator.userAgent)) {
          ctx.shadowColor = "rgba(0,0,0,0.7)";
          ctx.shadowOffsetX = 1;
          ctx.shadowOffsetY = 1;
          ctx.shadowBlur = 4;
        } else {
          ctx.fillStyle = "#999";
          ctx.translate(1.5, 1.5);
        }
        ctx.globalCompositeOperation = "destination-over";
      } else {
        gradient = ctx.createLinearGradient(30, 0, 30, 45);
        gradient.addColorStop(0, "#d5d5d5");
        gradient.addColorStop(1, "#c6c6c6");
        ctx.fillStyle = gradient;
        ctx.strokeStyle = "rgba(255,255,255,0.7)";
        ctx.lineWidth = 1;
      }
      
      ctx.moveTo(inset + radius, inset);
      // top right
      ctx.lineTo(w - inset, inset);
      ctx.quadraticCurveTo(w, inset, w, inset + radius);
      // bottom right
      ctx.lineTo(w, h - inset - radius);
      ctx.quadraticCurveTo(w, h - inset, w - radius, h - inset);
      // page indicator
      ctx.lineTo(indicatorPosition + inset, h - inset);
      ctx.lineTo(indicatorPosition + inset - 18, h - inset + 28);
      ctx.lineTo(indicatorPosition + inset - 36, h - inset);
      // bottom left
      ctx.lineTo(inset + radius, h - inset);
      ctx.quadraticCurveTo(inset, h - inset, inset, h - radius - inset);
      // top left
      ctx.lineTo(inset, inset + radius);
      ctx.quadraticCurveTo(inset, inset, inset + radius, inset);
      ctx.fill();
      ctx.closePath();

      if (!asShadow) ctx.stroke();
      if (addImage) {
        ctx.globalCompositeOperation = "source-atop";
        ctx.drawImage(frontImage, 15, -20);
      }
      ctx.restore();
    };

    var indicatorPosition = 0;
    switch (document.body.id) {
      case "index":
        indicatorPosition = 110; break;
      case "about-me":
        indicatorPosition = 320; break;
      case "my-projects":
        indicatorPosition = 480; break;
      case "contact-me":
        indicatorPosition = 655; break;
    }

    drawPageBody(ctx, 810, 435, 15, 15, indicatorPosition);
  };
  
  var drawGradient = function(ctx) {
    ctx.save();
    ctx.globalCompositeOperation = "source-atop";
    gradient = ctx.createRadialGradient(150, 15, 38, 250, 15, 800);
    gradient.addColorStop(0, "rgba(255,255,255,0.25)");
    gradient.addColorStop(1, "rgba(148,148,148,0.25)");
    ctx.fillStyle = gradient;
    ctx.scale(1, 0.2);
    ctx.fill();
    ctx.restore();
  };

  var ctx = null;
  var contentNode = document.body.getFirst("article");
  if (Browser.Engine.webkit && Browser.Engine.version >= 525 && !isMobileSafari) {
    ctx = document.getCSSCanvasContext("2d", "bg", contentNode.clientWidth, contentNode.clientHeight);
  } else {
    var canvas = new Element("canvas", { width: contentNode.clientWidth, height: contentNode.clientHeight });
    contentNode.adopt(canvas);
    ctx = canvas.getContext("2d");
  }
  
  var hasImage = (document.body.id == "index");

  drawUI(ctx, hasImage, false);
  if (!hasImage) drawGradient(ctx);
  drawUI(ctx, false, true);
};

window.addEvent('domready', function() {
  window.isMobileSafari = (navigator.userAgent.toLowerCase().indexOf('iphone') >= 0);
  
  if (document.body.id == "index") {
    var img = new Image();
    img.addEvent("load", initializeUI.bind(this, img));
    img.src = "/assets/images/me.jpg";
  } else if (document.body.id != "standards-compliant" && !isMobileSafari) {
    initializeUI();
  }
});