<!--
// Sauder School of Business JavaScript tools
// January 23, 2008.

// BEGIN OVERLAY FUNCTIONS

  // Find the left edge of an object.
  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  // Find the top edge of an object.
  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }


  // Display an object, typically a DIV, as an overlay.
  //
  // Our overlay is defined as having a transparent area over the entire screen, defined in this routine, with a z-index of 100
  // with a colour of #CDCDCD and with 60% opacity. This makes whatever else was on the screen non-clickable although still
  // visible. The object that is displayed, as specified by 'data' is then displayed with 100% opacity with a black drop shadow
  // that is 20 pixels wide. The shadow is positioned with a z-index of 101 and with 25% opacity. The data object is positioned
  // with a z-index of 102 with 100% opacity.
  //
  // Since this routine is specifically designed for the Sauder School of Business, the data object is positioned 10 pixels to
  // the right and 10 pixels from the top of the standard content area as defined by the Content Management System. The CMS
  // will always give this standard content area an ID="MainContent".
  //
  // Typical calling sequence:
  //
  //   <div id="div id name" style="width: 100px; height: 200px; visibility: hidden">
  //       some content
  //   </div>
  //   <a href="#" onclick="showOverlay( 'the div id name' )">link</a>
  //
  //
  // To close the overlay one needs to put a link or something clickable within the overlay which calls hideOverlay.
  //
  // Typical calling sequence:
  //
  //   <a href="#" onclick="hideOverlay( 'the div id name' )">link</a>
  //
  function showOverlay( data )
  {
    var overlayData                          = document.getElementById( data );
    var overlayContentArea                   = document.getElementById( "MainContent" );
    var overlayTop                           = findPosY( overlayContentArea );
    var overlayLeft                          = findPosX( overlayContentArea );

    var overlayBackground                    = document.createElement( "div" );
    var overlayShadow                        = document.createElement( "div" );
    document.body.appendChild( overlayBackground );
    document.body.appendChild( overlayShadow );

    overlayData.style.top                    = ( overlayTop + 10 )+ "px";
    overlayData.style.left                   = ( overlayLeft + 10 ) + "px";
    overlayData.style.zIndex                 = "102";
    overlayData.style.visibility             = "hidden";

    overlayBackground.setAttribute( "id", "overlaybackground" );
    overlayBackground.style.position         = "absolute";
    overlayBackground.style.top              = "0px";
    overlayBackground.style.left             = "0px";
    overlayBackground.style.width            = "100%";
    overlayBackground.style.height           = "100%";
    overlayBackground.style.backgroundColor  = "#cdcdcd";
    overlayBackground.style.opacity          = "0.6";
    overlayBackground.style.filter           = "alpha(opacity=60)";
    overlayBackground.style.zIndex           = "100";
    overlayBackground.style.visibility       = "hidden";


    overlayShadow.setAttribute( "id", "overlaydropshadow" );
    overlayShadow.style.position             = "absolute";
    overlayShadow.style.top                  = ( overlayTop + 20 ) + "px";
    overlayShadow.style.left                 = ( overlayLeft + 20 ) + "px";
    overlayShadow.style.width                = overlayData.offsetWidth + "px";
    overlayShadow.style.height               = overlayData.offsetHeight + "px";
    overlayShadow.style.backgroundColor      = "black";
    overlayShadow.style.opacity              = "0.25";
    overlayShadow.style.filter               = "alpha(opacity=25)";
    overlayShadow.style.zIndex               = "101";
    overlayShadow.style.visibility           = "hidden";

    overlayBackground.style.visibility       = "visible";
    overlayShadow.style.visibility           = "visible";
    overlayData.style.visibility             = "visible";
  }

  function hideOverlay( data )
  {
    var overlayData                   = document.getElementById( data );
    overlayData.style.visibility      = "hidden";
    var theParent                     = document.getElementById( "overlaydropshadow" ).parentNode;
    var overlayShadow                 = document.getElementById( "overlaydropshadow" );
    theParent.removeChild( overlayShadow );
    var theParent                     = document.getElementById( "overlaybackground" ).parentNode;
    var overlayBackground             = document.getElementById( "overlaybackground" );
    theParent.removeChild( overlayBackground );
  }

// END OF OVERLAY FUNCTIONS

// BEGINNING OF MOUSE FUNCTIONS

  // Global variables to capture mouse movements
  var mouseX      = 0;
  var mouseY      = 0;

  // Global variables to enable drag and drop of elements
  var grabObjectX = 0;
  var grabObjectY = 0;
  var oriX        = 0;
  var oriY        = 0;
  var eleX        = 0;
  var eleY        = 0;

  var dragObj     = null;

  function falsefunc() { return false; } // used to block cascading events

  function initMouse()
  {
    document.onmousemove = getMouseXY; // getMouseXY(event) implied on NS, getMouseXY(null) implied on IE
    getMouseXY();
  }

  function getMouseXY(e) // works on IE6,FF,Moz,Opera7
  {
    if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

    if (e)
    {
      if (e.pageX || e.pageY)
      { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
        mouseX = e.pageX;
        mouseY = e.pageY;
      }
      else if (e.clientX || e.clientY)
      { // works on IE6,FF,Moz,Opera7
        mouseX = e.clientX + document.body.scrollLeft;
        mouseY = e.clientY + document.body.scrollTop;
      }
    }
  }

  function grabObject(context)
  {
    document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
    dragObj = context;
    dragObj.style.zIndex = 10; // move it to the top
    document.onmousemove = dragObject;
    document.onmouseup = dropObject;
    grabObjectX = mouseX;
    grabObjectY = mouseY;
    eleX = oriX = dragObj.offsetLeft;
    eleY = oriY = dragObj.offsetTop;
  }

  function dragObject(e) // parameter passing is important for NS family
  {
    if (dragObj)
    {
      eleX = oriX + (mouseX-grabObjectX);
      eleY = oriY + (mouseY-grabObjectY);
      dragObj.style.position = "absolute";
      dragObj.style.left = (eleX).toString(10) + 'px';
      dragObj.style.top  = (eleY).toString(10) + 'px';
    }
    getMouseXY(e);
    return false; // in IE this prevents cascading of events, thus text selection is disabled
  }

  function dropObject()
  {
    if (dragObj)
    {
      dragObj.style.zIndex = 0;
      dragObj = null;
    }
    getMouseXY();
    document.onmousemove = getMouseXY;
    document.onmouseup   = null;
    document.onmousedown = null;   // re-enables text selection on NS
  }


// END OF MOUSE FUNCTIONS

// BEGIN OF FLOATING INFORMATION BOX FUNCTIONS

  // Display a floating message akin to ALT= which give some supplimentary information.
  //
  // Typical calling sequence:
  //
  //       <script>initMouse();</script>
  //
  //   some HTML
  //
  //       <span onmouseover="showInfo( 'some message' )" onmouseout="hideInfo()">text</span>
  //
  // Notes: (1) initMouse(); _MUST_ be called before showInfo otherwise the Netscape and FireFox web browses
  //            will not know that we want to track mouse movements. (i.e. nothing shows up)
  //        (2) width, background colour, text colour, offset, opacity and padding can be specified for
  //            each information box.
  //        (3) initInfo( width, bgcolor, tcolor, offset, opacity, padding ) can be called to re-define
  //            the defaults of ( 150, "lightyellow", "blue", 10, 85, 5 ) for the page.
  //        (4) the information box has a 1 pixel black boarder, dotted on the left and top sides and solid
  //            on the right and bottom sides.
  //

  // Global Variables for supplimentary information display.
  var infoWidth     = 150;
  var infoBGColor   = "lightyellow";
  var infoTextColor = "blue";
  var infoOffset    = 10;
  var infoOpacity   = 85;
  var infoPadding   = 5;

  function initInfo( width, bgcolor, tcolor, offset, opacity, padding )
  {
    if ( bgcolor != undefined )
      infoBGColor = bgcolor;
    if ( tcolor != undefined )
      infoTextColor = tcolor;
    if ( width != undefined )
      infoWidth = width;
    if ( offset != undefined )
      infoOffset = offset;
    if ( opacity != undefined )
      infoOpacity = opacity
    if ( padding==undefined )
      infoPadding = padding;
  }

  function showInfo( message, width, bgcolor, tcolor, offset, opacity, padding )
  {
    if ( message == undefined )
      var infoMessage = "No information available";
     else
      var infoMessage = message;
    if ( bgcolor == undefined )
      var backgroundcolour = infoBGColor;
     else
      var backgroundcolour = bgcolor;
    if ( tcolor == undefined )
      var textcolour = infoTextColor;
     else
      var textcolour = tcolor;
    if ( width == undefined )
      var InfoWidth = infoWidth;
     else
      var InfoWidth = width;
    if ( offset == undefined )
      {
        var deltaX = infoOffset;
        var deltaY = infoOffset;
      }
     else
      {
        var deltaX = offset;
        var deltaY = offset;
      }
    if ( opacity == undefined )
      var mytransparency = infoOpacity;
     else
      var mytransparency = opacity
    if ( padding == undefined )
      var mypadding = infoPadding;
     else
      var mypadding = padding;

    hideInfo(); // Just in case it's open somewhere already.

    var myInfoArea                    = document.createElement( "div" );
    document.body.appendChild( myInfoArea );
    myInfoArea.setAttribute( "id", "myInfoArea" );
    myInfoArea.style.visibility       = "hidden";
    myInfoArea.style.position         = "absolute";
    myInfoArea.style.width            = InfoWidth + "px";
    myInfoArea.style.backgroundColor  = backgroundcolour;
    myInfoArea.style.opacity          = (mytransparency / 100 );
    myInfoArea.style.filter           = "alpha(opacity=" + mytransparency + ")";
    myInfoArea.style.zIndex           = "200";
    myInfoArea.style.borderColor      = "black";
    myInfoArea.style.borderWidth      = "1px";
    myInfoArea.style.borderStyle      = "dotted solid solid dotted";
    myInfoArea.style.color            = textcolour;
    myInfoArea.style.padding          = mypadding + "px";
    myInfoArea.innerHTML              = message;
    myInfoArea.style.top              = ( mouseY + deltaY ) + "px";
    myInfoArea.style.left             = ( mouseX + deltaX ) + "px";
    myInfoArea.style.visibility       = "visible";
  }

  function hideInfo()
  { // Since all of the items created by showInfo are called 'myInfoArea' it's easy to nuke it.
    var myInfoArea                    = document.getElementById( "myInfoArea" );
    if ( myInfoArea ) // check to see if it exists first
    {
      var theParent                   = document.getElementById( "myInfoArea" ).parentNode;
      theParent.removeChild( myInfoArea );
    }
  }

// END OF FLOATING INFORMATION BOX FUNCTIONS

// -->
