﻿// Popup class
function Popup(popupWidth){
  // Private variables
  var isIE = (document.all != null);
  var opacity = 100;
  var pLast = {x: 0, y: 0}, moving = false;
  var pScroll = {x: 0, y: 0};
  var width = popupWidth;
  var iframe, container, title, titleText, close, content;
  
  // Build the container
  container = document.createElement('div');
  container.id = 'popup';
  container.style.position = 'absolute';
  container.style.border = '2px outset #D4D0C8';
  container.style.width = popupWidth + (isIE ? '' : 'px'); // IE appears to take exception to specifying pixels
  container.style.backgroundColor = '#FFFFE1';
  container.style.display = 'none';
  
  // If IE is being used, create the iframe
  if (isIE){
    iframe = document.createElement('iframe');
    iframe.style.position = 'absolute';
    iframe.style.frameborder = 0;
    iframe.style.border = 0;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
  }
  
  // Build the title 
  title = document.createElement('div');
  title.style.padding = '0ex 0ex 0ex 1ex';
  title.style.color = '#FFFFFF';
  title.style.backgroundColor = '#A6CAF0';
  title.style.backgroundImage = 'url(/images/styles/popup-background.png)';
  title.style.backgroundRepeat = 'repeat-y';
  title.style.borderBottom = '1px solid #000000';
  title.style.fontWeight = 'bold';
  
  //Build the title text
  titleText = document.createElement('div');
  
  // Build the close button
  close = document.createElement('img');
  close.src = '/images/tools/popup-close.png';
  close.alt = 'Close';
  close.title = 'Close';
  close.onclick = popup_Close;
  close.style.styleFloat = close.style.cssFloat = 'right'; // The styleFloat is needed for IE
  close.style.padding = '.25ex .25ex 0ex 0ex';
  close.style.width = '14px';
  close.style.height = '14px';
  close.style.cursor = 'pointer';
  
  // Build the content
  content = document.createElement('div');
  content.style.position = 'relative';
  content.style.top = '1px';
  content.style.padding = '1ex';

  // Put it all together
  title.appendChild(close);
  title.appendChild(titleText);
  container.appendChild(title);
  container.appendChild(content);
  document.body.appendChild(container);
  
  // Only allow movement of the popup of the browser is not IE
  if (! isIE){
    document.body.onmousemove = moveNow;
    titleText.style.cursor = 'move';
    titleText.onmousedown = moveBegin;
    titleText.onmouseup = moveEnd;
  }

  // Events
  function moveBegin(e){
    if (! e) e = window.event;
    // Exit if the button clicked wasn't left
    if (! isLeft(e)) return true;
    
    // Set the moving flag, and store the current coordinates
    moving = true;
    pLast = getXY(e);
    
    // Set the opacity to 50%
    setOpacity(50);
    
    // Return false so the drag doesn't select any text
    return false;
  }
  
  function moveNow(e){
    if (! e) e = window.event;
    // Exit if the moving flag is not set
    if (! moving) return true;
    
    // Get the current mouse position
    var pCurrent = getXY(e);
    
    // Move the container
    setPosition({
      x: parseInt(container.style.left) + (pCurrent.x - pLast.x),
      y: parseInt(container.style.top) + (pCurrent.y - pLast.y)
    });
    
    // Update the coordinates
    pLast.x = pCurrent.x;
    pLast.y = pCurrent.y;
  }
  
  function moveEnd(e){
    // Unset the moving flag
    moving = false;
    
    // Set the opacity to 100%
    setOpacity(100);
  }
  
  function popup_Close(e){
    closePopup();
  }
  
  function window_OnScroll(e){
    // Get the current position
    p = {x: parseInt(container.style.left), y: parseInt(container.style.top)};
    p.x += document.documentElement.scrollLeft - pScroll.x;
    p.y += document.documentElement.scrollTop - pScroll.y;
    setPosition(p);
    
    window.status = document.documentElement.scrollTop;
    
    // Remember the current scroll position
    pScroll.x = document.documentElement.scrollLeft;
    pScroll.y = document.documentElement.scrollTop;
  }
  
  
  // Private Methods
  function closePopup(immediate){
    if (! immediate){
      // Decrement the opacity by 10%
      opacity -= 10;
    
      if (opacity > 0){
        setOpacity();
        setTimeout(closePopup, 50);
      }else{
        immediate = true;
      }
    }
    
    if (immediate){
      // Reset the opacity to 100% & set display to none
      container.style.display = 'none';
      if (iframe) iframe.style.display = 'none';
      opacity = 100;
      setOpacity();
    
      // Remove the Scroll Handler
      if (window.detachEvent){
        // For IE
        window.detachEvent('onscroll', window_OnScroll);
      }else{
        window.removeEventListener('scroll', window_OnScroll, false);
      }
    }
  }
  
  function getXY(e){
    // Get the mouse coordinates
    var x, y;
    if (isIE){
      x = parseInt(e.clientX) + parseInt(document.documentElement.scrollLeft);
      y = parseInt(e.clientY) + parseInt(document.documentElement.scrollTop);
    }else{
      x = e.pageX;
      y = e.pageY;
    }
    
    // Return the point structure
    return {x: x, y: y};
  }

  function isLeft(e){
    return ((isIE && (e.button == 1)) || (! isIE && (e.button == 0)));
  }

  function setOpacity(value){
    // If the value passed is null, use the class opacity value
    if (value == null) value = opacity;
    
    /* As IE uses the insane "Filter" for opacity, we have to do
       some things differently <sigh> */
    if (isIE){
      container.style.filter = 'alpha(opacity=' + (value) + ')';
      iframe.style.filter = 'alpha(opacity=' + (value) + ')';
    }else{
      container.style.opacity = (value / 100);
    }
  }
  
  function setPosition(p){
    // Make sure the iframe is underneath the container
    if (iframe){
      iframe.style.left = p.x + 'px';
      iframe.style.top = p.y + 'px';
      iframe.style.width = container.offsetWidth + 'px';
      iframe.style.height = container.offsetHeight + 'px';
    }
    container.style.left = p.x + 'px';
    container.style.top = p.y + 'px';
  }
  
  
  // Public Methods
  this.Close = closePopup;
  
  this.Open = function(e, titleHTML, contentHTML, dx, dy){
    // Set the title text
    titleText.innerHTML = titleHTML ? titleHTML : '';
    
    // Set the content
    content.innerHTML = contentHTML ? contentHTML : '';

    // Make the container hidden, and then allow it to be rendered
    // This means the size can be calculated
    container.hidden = true;
    container.style.display = 'block';
    if (iframe){
      iframe.hidden = true;
      iframe.style.display = 'block';
    }
    
    // Now calculate where to put the container
    var p;
    if (e && e.x && e.y){
      // If a point is passed, use it as the container's centre
      p = {x: e.x, y: e.y};
      p.x -= (container.offsetWidth / 2);
      p.y -= (container.offsetHeight / 2);
    }else if (e){
      // Use the cusor position from the event
      p = getXY(e);
    }else{
      // Center on the page
      
      // Get the size of the Window
      var width, height;
      if (window.innerWidth && window.innerHeight){
        width = window.innerWidth;
        height = window.innerHeight;
      }else if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight){
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
      }else if (document.body.clientWidth && document.body.clientHeight){
        width = document.body.clientWidth;
        height = document.body.clientHeight;
      }

      p = {x: width / 2, y: height / 2};
      p.x -= (container.offsetWidth / 2);
      p.y -= (container.offsetHeight / 2);
    }
 
    // Offset the point, if required
    if (dx) p.x += dx;
    if (dy) p.y += dy;
    
    // Add the Scroll position
    p.x += document.documentElement.scrollLeft;
    p.y += document.documentElement.scrollTop;
    
    // Set the location of the popup, and show it
    setPosition(p);
    container.hidden = false;
    if (iframe) iframe.hidden = false;
    
    // Add the Scroll Handler
    if (window.attachEvent){
      // For IE
      window.attachEvent('onscroll', window_OnScroll);
    }else{
      window.addEventListener('scroll', window_OnScroll, false);
    }
  }
}
