var gMockupTimer = null;
var gMockupAnimTimer = null;
var gMockupOpacity = 0.0;
var gMockupState = "hidden";

var kMockupAnimSteps = 20;
var kMockupAnimDuration = 500;
var kMockupAnimStepSize = kMockupAnimDuration / kMockupAnimSteps;
var kMockupAnimOpacityStepSize = 1 / kMockupAnimSteps;

var kMockupHideDuration = 30000; // 30 seconds
var kMockupShowDuration = 10000; // 10 seconds

function mockupStepAnimation () {
  var frame = document.getElementById("sponsorframe");
  gMockupAnimTimer = null;

  if (gMockupState == "showing") {
    gMockupOpacity += kMockupAnimOpacityStepSize;

    if (gMockupOpacity >= 1) {
      gMockupState = "shown";
      gMockupOpacity = 1;
    }
    else {
      gMockupAnimTimer = setTimeout(mockupStepAnimation, kMockupAnimStepSize);
    }

    frame.setAttribute("style", "opacity: " + gMockupOpacity + ";");
  }
  else if (gMockupState == "hiding") {
    gMockupOpacity -= kMockupAnimOpacityStepSize;

    if (gMockupOpacity <= 0) {
      gMockupState = "hidden";
      gMockupOpacity = 0;
    }
    else {
      gMockupAnimTimer = setTimeout(mockupStepAnimation, kMockupAnimStepSize);
    }

    frame.setAttribute("style", "opacity: " + gMockupOpacity + ";");
  }
}

function mockupChangeState () {
  if (gMockupState == "hidden" || gMockupState == "hiding") {
    gMockupState = "showing";
    mockupStepAnimation();
    gMockupTimer = setTimeout(mockupChangeState, kMockupShowDuration);
  }
  else {
    gMockupState = "hiding";
    mockupStepAnimation();
    gMockupTimer = setTimeout(mockupChangeState, kMockupHideDuration);
  }
}

function initMockup () {
  gMockupTimer = setTimeout(mockupChangeState, kMockupHideDuration);
}

initMockup();
