var _useOpacity = (typeof document.createElement("div").style.opacity != 'undefined');
var _useFilter = !_useOpacity && (typeof document.createElement("div").style.filter != 'undefined');

function dialogCreate(contentElementId, userOptions)
{
  var divContent = document.getElementById(contentElementId);
  if (divContent == null) return;

  var defaultOptions = {
    caption: "",
    captionClass: "popupCaption",
    captionVisible: true,
    closeButtonClass: "popupCloseButton",
    closeButtons: [],
    closeImage: "../Images/webStore/Close.gif",
    containerClass: "popupContainer",
    containerHideBorder: false,
    height: -1,
    isDynamic: false,
    isPermanent: true,
    onDismiss: function () { },
    showButtons: [],
    width: -1,
    zIndex: ""
  };

  // Build the Popup Container
  var divContainer = document.createElement("div");
  divContainer.dialogOptions = dialogSetOptions(defaultOptions, userOptions);
  divContainer.style.visibility = "hidden";
  divContainer.id = contentElementId + "Container";
  divContainer.className = divContainer.dialogOptions.containerClass;

  if (divContainer.dialogOptions.containerHideBorder)
  {
    divContainer.style.border = "none";
  }

  setOpacity(divContainer, 0);

  divContainer.style.position = "absolute";
  divContainer.style.top = "0px";
  divContainer.style.left = "0px";
  divContainer.style.zIndex = divContainer.dialogOptions.zIndex;
  divContainer.contentElementId = contentElementId;
  divContainer.isResizing = false;
  divContainer.isShowing = false;
  divContent.parentNode.insertBefore(divContainer, divContent);

  if (divContainer.dialogOptions.captionVisible)
  {
    // Build the Popup Caption Div.
    var divCaption = document.createElement("div");
    divCaption.id = contentElementId + "Caption";
    divCaption.className = divContainer.dialogOptions.captionClass;
    divCaption.onmousedown = function(event)
    {
      return dialogMouseDown(divContainer.id, event);
    };
    divContainer.appendChild(divCaption);
    divContainer.captionElementId = divCaption.id

    // Build the Close Image
    var imgClose = document.createElement("img");
    imgClose.id = contentElementId + 'CloseImage';
    imgClose.className = divContainer.dialogOptions.closeButtonClass;
    imgClose.src = divContainer.dialogOptions.closeImage;
    divCaption.appendChild(imgClose);

    var spn = document.createElement("span");
    spn.id = contentElementId + "CaptionSpan";
    spn.innerHTML = divContainer.dialogOptions.caption;
    divContainer.captionSpanId = spn.id;
    divCaption.appendChild(spn);

    // Store the actual Width needed for the Caption. 51 is width of padding & Close Button.
    divContainer.captionWidth = spn.offsetWidth + 51;

    if (!divContainer.dialogOptions.isDynamic &&
        divContainer.dialogOptions.width != -1 &&
        divContainer.captionWidth > divContainer.dialogOptions.width)
    {
      // Increase width so caption does not wrap
      divContainer.dialogOptions.width = divContainer.captionWidth;
    }
  }
  else
  {
    divContainer.captionWidth = 0;
  }

  // Remove Content div from it Parent and Add to Dialog Container
  divContent.parentNode.removeChild(divContent);

  if (divContent.tagName.toLowerCase() == "img")
  {
    // Add a Div to center the image in
    var divImgWrapper = document.createElement("div")
    divImgWrapper.style.textAlign = "center";
    divImgWrapper.appendChild(divContent);
    divContainer.appendChild(divImgWrapper);
  }
  else
  {
    divContainer.appendChild(divContent);
  }

  // Set visible for height/width calc
  divContent.style.visibility = "";
  divContent.style.display = "";

  if (!divContainer.dialogOptions.isDynamic && divContainer.dialogOptions.width != -1)
  {
    divContainer.contentWidth = divContainer.dialogOptions.width;
    divContainer.displayWidth = divContainer.dialogOptions.width;
  }
  else
  {
    // Get the width of the Content Element
    divContainer.contentWidth = divContent.offsetWidth;

    // Calculate the required with of the Caption and Content so everything is visible
    // with no wrapping and store on the Container div
    divContainer.displayWidth = (divContainer.contentWidth > divContainer.captionWidth) ?
                                  divContainer.contentWidth : divContainer.captionWidth;

    // Enforce Min Midth
    if (divContainer.displayWidth < divContainer.dialogOptions.width)
    {
      divContainer.displayWidth = divContainer.dialogOptions.width;
    }
  }

  if (!divContainer.dialogOptions.isDynamic && divContainer.dialogOptions.height != -1)
  {
    divContainer.displayHeight = divContainer.dialogOptions.height;
  }
  else
  {
    // Store the required Height of the Dialog on the Content div
    divContainer.displayHeight = (divContainer.offsetHeight < divContainer.dialogOptions.height) ?
                                  divContainer.dialogOptions.height : divContainer.offsetHeight;

    // Set the height of the Div
    divContainer.style.height = divContainer.displayHeight + "px";
  }

  // Move back onscreen and hide
  divContainer.style.left = "0px";
  divContainer.style.height = "0px";
  divContainer.style.width = "0px";
  divContainer.style.display = "none";
  divContainer.style.visibility = "";

  var btn;
  var i;

  if (divContainer.dialogOptions.showButtons.length != 0)
  {
    // Create show function and attach to Show Button onclick events
    var showClick = function() { return dialogShow(divContainer.id, this); };
    for (i = 0; i < divContainer.dialogOptions.showButtons.length; i++)
    {
      btn = document.getElementById(divContainer.dialogOptions.showButtons[i]);
      btn.onclick = showClick;
    }
  }

  var closeClick = function()
  {
    dialogClose(divContainer.id);
    return false;
  };

  if (divContainer.dialogOptions.captionVisible)
  {
    // Create show function and attach to Close onclick events
    imgClose.onclick = closeClick;
  }

  if (divContainer.dialogOptions.closeButtons.length != 0)
  {
    // Attach Close Function to other Close Buttons
    for (i = 0; i < divContainer.dialogOptions.closeButtons.length; i++)
    {
      btn = document.getElementById(divContainer.dialogOptions.closeButtons[i]);
      if (btn != null) btn.onclick = imgClose.onclick;
    }
  }

  return divContainer.id;
}

function dialogClose(containerElementId)
{
  var divContainer = document.getElementById(containerElementId);
  if (divContainer == null) return false;

  divContainer.isResizing = false;
  divContainer.style.overflow = "hidden";

  divContainer.animation.clearSubjects();
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'left', divContainer.startPos.left, divContainer.offsetLeft));
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'top', divContainer.startPos.top, divContainer.offsetTop));
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'width', divContainer.startPos.width, divContainer.displayWidth));
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'height', divContainer.startPos.height, divContainer.displayHeight));
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'opacity', 0, 1));
  divContainer.animation.reverse();

  divContainer.dialogOptions.onDismiss.call(divContainer);

  return false;
}

function dialogMouseDown(containerId, e)
{
  var evt = e || window.event;
  var win = document.getElementById(containerId);
  var startWinX = win.offsetLeft;
  var startWinY = win.offsetTop;
  var startMouseX = evt.clientX;
  var startMouseY = evt.clientY;

  var move = function(e)
  {
    var evt = e || window.event;

    win.style.left = (startWinX - (startMouseX - evt.clientX)) + 'px';
    win.style.top = (startWinY - (startMouseY - evt.clientY)) + 'px';

    if (document.all)
    {
      evt.cancelBubble = true;
      evt.returnValue = false;
    }
    if (evt.preventDefault)
    {
      evt.preventDefault();
    }
  }

  var up = function(e)
  {
    document.onmousemove = null;
    document.onmouseup = null;
  }

  document.onmousemove = move;
  document.onmouseup = up;
}

function dialogSetOptions(defaultOptions, userOptions)
{
  userOptions = userOptions || {};
  var propName
  var resultOptions = {};
  for (propName in defaultOptions)
  {
    resultOptions[propName] = (userOptions[propName] !== undefined) ? userOptions[propName] : defaultOptions[propName];
  }

  return resultOptions;
}

function dialogShow(containerId, sourceElement, caption)
{
  var divContainer = document.getElementById(containerId);
  if (divContainer.isShowing && !divContainer.dialogOptions.isDynamic) return false;

  if (!divContainer.isShowing)
  {
    // Get the Container and clear display to remeasure height/width
    divContainer.style.position = 'absolute';
    divContainer.style.visibility = "hidden"
    divContainer.style.display = "";
  }

  if (caption)
  {
    var spnCaption = document.getElementById(divContainer.captionSpanId);
    if (spnCaption != null)
    {
      spnCaption.innerHTML = caption;
      divContainer.captionWidth = spnCaption.offsetWidth + 51;
    }
  }

  var screenSize = getScreenSize();

  divContainer.isResizing = divContainer.isShowing;

  // Get the Content Element and update the Content Width
  var divContent = document.getElementById(divContainer.contentElementId);

  if (divContainer.dialogOptions.isDynamic)
  {
    divContainer.contentWidth = divContent.offsetWidth;

    // Recalc the Display Width
    divContainer.displayWidth = (divContainer.contentWidth > divContainer.captionWidth) ?
                                  divContainer.contentWidth : divContainer.captionWidth;
  }

  if (divContainer.dialogOptions.isDynamic)
  {
    // Clear the Content Div's Height to get the new height
    var oldHeight = divContainer.style.height;
    divContainer.style.height = "";
    divContainer.displayHeight = divContainer.offsetHeight;
    divContainer.style.height = oldHeight;
  }

  // Calculate the Animation's Start Position. If a source element was supplied, use
  // the element's position and size. Otherwise, grow from the middle of the screen.
  var startPos;

  if (divContainer.isShowing)
  {
    startPos = new StartPosition(divContainer, screenSize);
    divContainer.displayTop = startPos.top;
    divContainer.displayLeft = startPos.left;
  }
  else
  {
    // Calculate the display position centered in the screen
    divContainer.displayTop = Math.round(((screenSize.height - divContainer.displayHeight) / 2), 0);
    divContainer.displayLeft = Math.round(((screenSize.width - divContainer.displayWidth) / 2), 0);

    divContainer.displayTop = ((divContainer.displayTop < 0) ? 0 : divContainer.displayTop) + screenSize.scrollTop;
    divContainer.displayLeft = (divContainer.displayLeft < 0) ? 0 : divContainer.displayLeft;

    startPos = new StartPosition(sourceElement, screenSize);
    divContainer.startPos = startPos;
  }

  // Verify Container's new size will been on screen
  var offScreenX = (divContainer.displayLeft + divContainer.displayWidth) - (screenSize.width - 20);
  if (offScreenX > 0)
  {
    if (divContainer.displayLeft - offScreenX > 0)
    {
      divContainer.displayLeft -= offScreenX;
    }
    else
    {
      divContainer.displayLeft = 20;
    }
  }

  var offScreenY = (divContainer.displayTop + divContainer.displayHeight - screenSize.scrollTop) - (screenSize.height - 20);
  if (offScreenY > 0 && divContainer.displayTop - screenSize.scrollTop - offScreenY > 0)
  {
    divContainer.displayTop -= offScreenY;
  }

  if (divContainer.displayTop < screenSize.scrollTop + 20)
  {
    divContainer.displayTop = screenSize.scrollTop + 20;
  }

  // Set Animation size and position before showing to reduce flicker
  divContainer.style.left = startPos.left + "px";
  divContainer.style.top = startPos.top + "px";
  divContainer.style.width = startPos.width + "px";
  divContainer.style.height = startPos.height + "px";

  if (!divContainer.isShowing)
  {
    setOpacity(divContainer, 0);
  }
  divContainer.style.visibility = ""
  divContainer.style.display = "";

  if (!divContainer.animation)
  {
    divContainer.animation = new Animator({ duration: 300 });
    divContainer.animation.options.onComplete = function()
    {
      var neededHeight = document.getElementById(divContainer.contentElementId).offsetHeight;

      if (divContainer.dialogOptions.captionVisible)
      {
        neededHeight += document.getElementById(divContainer.captionElementId).offsetHeight
      }

      if (divContainer.offsetHeight < neededHeight)
      {
        divContainer.style.height = (divContainer.offsetHeight + (neededHeight - divContainer.offsetHeight + 5)) + "px";
      }

      if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1)
      {
        divContainer.style.overflow = "auto";
      }

      if (!divContainer.isResizing)
      {
        divContainer.isShowing = !divContainer.isShowing;
      }
      else
      {
        divContainer.isResizing = false;
      }

      if (!divContainer.isShowing)
      {
        divContainer.style.display = "none";

        if (!divContainer.dialogOptions.isPermanent)
        {
          document.body.removeChild(divContainer);
        }
      }
    };
  }
  else
  {
    divContainer.animation.clearSubjects();
  }

  divContainer.style.overflow = "hidden";

  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'left', startPos.left, divContainer.displayLeft));
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'top', startPos.top, divContainer.displayTop));
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'width', startPos.width, divContainer.displayWidth));
  divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'height', startPos.height, divContainer.displayHeight));

  if (!divContainer.isShowing)
  {
    divContainer.animation.addSubject(new NumericalStyleSubject(divContainer, 'opacity', 0, 1));
  }

  divContainer.animation.play();
  return false;
}

function dialogShowError(errorMessage, dialogCaption)
{
  if (errorMessage == null ||
      errorMessage.length == 0)
  {
    errorMessage = "An error has occurred. Please reload the page and try again";
  }

  var div = document.createElement("div");
  div.style.display = "none";
  div.style.width = "440px";
  div.innerHTML = "<div style=\"padding: 20px; text-align: center;\">" + errorMessage +
                    "<br><br><br><input id=\"btnErrorClose\" type=\"image\" value=\"OK\" src=\"../Images/webStore/ok.jpg\" /></div>";
  div.id = "divError1234";
  document.body.appendChild(div);

  if (!dialogCaption)
  {
    dialogCaption = "Error";
  }

  var containerId = dialogCreate(div.id, {
    caption: dialogCaption,
    closeButtons: ['btnErrorClose'],
    isPermanent: false
  });

  dialogShow(containerId);
  return false;
}

function dialogShowReplacement(sourceElement, caption, replacementUrl)
{
  var divContent = document.createElement("div");
  divContent.id = "divReplace1234";
  divContent.style.display = "none";
  divContent.innerHTML = "<iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"yes\" src=\"" +
                    replacementUrl + "\" height=\"470\" width=\"100%\"></iframe>";

  var dialogOptions = {
    caption: "Replacement Item: " + caption,
    isPermanent: false,
    height: 500,
    width: 818
  };

  dialogShow(divContent.id, sourceElement);
  return false;
}

function getAbsoluteLeft(oElement)
{
  var elementLeft = 0;
  while (oElement != null)
  {
    elementLeft += oElement.offsetLeft;
    oElement = oElement.offsetParent;
  }
  return elementLeft;
}

function getAbsolutePosition(oElement)
{
  var elementLeft = 0;
  var elementTop = 0;
  while (oElement != null)
  {
    elementLeft += oElement.offsetLeft;
    elementTop += oElement.offsetTop;
    oElement = oElement.offsetParent;
  }
  return { left: elementLeft, top: elementTop };
}

function getAbsoluteTop(oElement)
{
  var elementTop = 0;
  while (oElement != null)
  {
    elementTop += oElement.offsetTop;
    oElement = oElement.offsetParent;
  }
  return elementTop;
}

function getScreenSize()
{
  var screenWidth = 0
  var screenHeight = 0;

  // Get the Browser Dimensions
  if (typeof (window.innerWidth) == 'number')
  {
    //Non-IE
    screenWidth = window.innerWidth;
    screenHeight = window.innerHeight;
  }
  else if (document.documentElement &&
           (document.documentElement.clientWidth ||
            document.documentElement.clientHeight))
  {
    //IE 6+ in 'standards compliant mode'
    screenWidth = document.documentElement.clientWidth;
    screenHeight = document.documentElement.clientHeight;
  }
  else if (document.body &&
           (document.body.clientWidth ||
            document.body.clientHeight))
  {
    //IE 4 compatible
    screenWidth = document.body.clientWidth;
    screenHeight = document.body.clientHeight;
  }

  return {
    height: screenHeight,
    width: screenWidth,
    scrollTop: document.documentElement.scrollTop >= document.body.scrollTop ?
                        document.documentElement.scrollTop : document.body.scrollTop
  }
}

function setOpacity(el, value)
{
  // let el be either an element object or an id string
  if (typeof el == 'string')
    el = document.getElementById(el);

  // ensure value is in [0-1] range
  value = Math.min(1, Math.max(value, 0));

  // set opacity or filter alpha depending on what's supported
  if (_useOpacity)
    el.style.opacity = value;
  else if (_useFilter)
    el.style.filter = "alpha(opacity=" + (value * 100) + ")";
}

function StartPosition(sourceElement, screenSize)
{
  screenSize = screenSize || getScreenSize();
  var elementPosition = (sourceElement) ? getAbsolutePosition(sourceElement) : null;
  this.top = (elementPosition) ? elementPosition.top : screenSize.height / 2;
  this.left = (elementPosition) ? elementPosition.left : screenSize.width / 2;
  this.height = (sourceElement) ? sourceElement.offsetHeight : 1;
  this.width = (sourceElement) ? sourceElement.offsetWidth : 1;
}

jQuery.fn.center = function ()
{
  this.css("position", "absolute");
  this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
  this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
  return this;
}