/*****************************
  * Author: Steve Hardie
  * Created:  2008-05-21
  * Description:
  *   This file contains the functions required to drag & drop an element.
  *   
  *   Usage: 	<div id="myDiv" onmousedown="dragStart(event,object)">...</div>
  *
  *	  Requires: 	ctxBrowser.js
  *					
  * CHANGE HISTORY:
  * Date       Changed By        Description
  * ---------- ----------------- -----------------------------------------------
  * 
  ******************************************************************************/

function Browser() {

      var ua, s, i;

      this.isIE    = false;
      this.isNS    = false;
      this.version = null;

      ua = navigator.userAgent;

      s = "MSIE";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
      }

      s = "Netscape6/";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
      }

      // Treat any other "Gecko" browser as NS 6.1.

      s = "Gecko";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = 6.1;
        return;
      }
}

var browser=new Browser();


// ******* Drag & Drop Code ********
	// Check for Browser
	if (typeof(browser)=='undefined') var browser=new Browser();
  
    // Global object to hold drag information.

    var dragObj = new Object();
    dragObj.zIndex = 0;

    function dragStart(event, id) {

      var el;
      var x, y;

      // If an element id was given, find it. Otherwise use the element being
      // clicked on.
	  if (dragObj==null) dragObj = new Object();
      if (id)
        dragObj.elNode = document.getElementById(id);
      else {
        if (browser.isIE)
          dragObj.elNode = window.event.srcElement;
        if (browser.isNS)
          dragObj.elNode = event.target;

        // If this is a text node, use its parent element.

        if (dragObj.elNode.nodeType == 3)
          dragObj.elNode = dragObj.elNode.parentNode;
      }

      // Get cursor position with respect to the page.

      if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
          + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
          + document.body.scrollTop;
      }
      if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
      }

      // Save starting positions of cursor and element.

      dragObj.cursorStartX = x;
      dragObj.cursorStartY = y;
      dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
      dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

      if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
      if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

      // Update elements z-index.

      dragObj.elNode.style.zIndex = ++dragObj.zIndex;

      // Capture mousemove and mouseup events on the page.

      if (browser.isIE) {
        document.attachEvent("onmousemove", dragGo);
        document.attachEvent("onmouseup",   dragStop);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
      }
      if (browser.isNS) {
        document.addEventListener("mousemove", dragGo,   true);
        document.addEventListener("mouseup",   dragStop, true);
        event.preventDefault();
      }
    }

    function dragGo(event) {

      var x, y;

      // Get cursor position with respect to the page.

      if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
          + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
          + document.body.scrollTop;
          
      }
      if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
      }

      // Move drag element by the same amount the cursor has moved.

      dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
      dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

      if (browser.isIE) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
      }
      if (browser.isNS)
        event.preventDefault();
    }

    function dragStop(event) {

      // Stop capturing mousemove and mouseup events.

      if (browser.isIE) {
        document.detachEvent("onmousemove", dragGo);
        document.detachEvent("onmouseup",   dragStop);
      }
      if (browser.isNS) {
        document.removeEventListener("mousemove", dragGo,   true);
        document.removeEventListener("mouseup",   dragStop, true);
      }
    }
    

// ************ CENTRE ELEMENT **************************
function centreElement(obj){
        // Find the Scroll Offset
        var scrolledX, scrolledY; 
        if( self.pageYOffset ) { scrolledX = self.pageXOffset; scrolledY = self.pageYOffset; 
        } else if( document.documentElement && document.documentElement.scrollTop ) { 
            scrolledX = document.documentElement.scrollLeft; scrolledY = document.documentElement.scrollTop; 
        } else if( document.body ) { scrolledX = document.body.scrollLeft; scrolledY = document.body.scrollTop; 
        } 
        
        // Next, determine the coordinates of the center of browser's window 
        var centerX, centerY; 
        if( self.innerHeight ) { centerX = self.innerWidth; centerY = self.innerHeight; 
        } else if( document.documentElement && document.documentElement.clientHeight ) { 
            centerX = document.documentElement.clientWidth; centerY = document.documentElement.clientHeight; 
        } else if( document.body ) { centerX = document.body.clientWidth; centerY = document.body.clientHeight; } 

        // div passed as arguments to the function: 
        var leftOffset = scrolledX + (centerX - $(obj).width()) / 2; 
        var topOffset = scrolledY + (centerY - $(obj).height()) / 2; 
        // The initial width and height of the div can be set in the 
        // style sheet with display:none; divid is passed as an argument to // the function 
        var r=obj.style; 
        r.position='absolute'; 
        r.top = topOffset + 'px'; 
        r.left = leftOffset + 'px'; 
        r.display = "block"; 
    }