// JavaScript Document
/***************** [ INTRO ] ******************************
This Drag and Drop code was heavily inspired by the 'Javascript Drag and Drop Tutorial' on 
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx.
Although this guy uses asp, i'll forgive him this once for making an intelligent tutorial.
Thanks for the help!
**********************************************************/


//***************** [ GLOBAL VARS ] ************************
var _startX = 0;
var _startY = 0;
var _offsetX = 0;
var _offsetY = 0;
var _dragElement;
var _oldZindex = 0;

function InitDragDrop()
{
	var draggers = getElementsByClass('dragHandle');
	for (i =0; i < draggers.length; i++)
	{
		draggers[i].onmousedown = OnMouseDown;
		draggers[i].onmouseup = OnMouseUp;
	}
	var noDraggers = getElementsByClass('noDrag');
	for (a=0; a < noDraggers.length; a++)
	{
		noDraggers[a].onmousedown = test;
	}
	//document.onmousedown = OnMouseDownSelecter;
	//document.onmouseup = OnMouseUp;
}

function test(eve)
{
	eve.stopPropagation();
}

function OnMouseDown(e)
{
	// get event object for IE
	if (e == null)
		e = window.event;
	
	//Another IE issue, IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;
	var parTest = target;
	var checker = false;

	while (parTest)
	{
		if (parTest.className == 'dragHandle')
		{
			target = parTest;
			checker = true;
			break;
		} else {
			parTest = parTest.parentNode;
		}
	}
	
	var wholeTarget = target.parentNode;

	
	if (checker) {
		while (parTest.parentNode)
		{	
			wholeTarget = parTest.parentNode;
			if (wholeTarget.className == 'drag')
			{
				break;
			} else {
				parTest = parTest.parentNode;
			}
		}
		//Oh look IE difference
		//for IE, click == 1
		//for Firefox, left click == 0
		if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'dragHandle' && wholeTarget.className == 'drag')
		{
			//grab the moust coords
			_startX = e.clientX;
			_startY = e.clientY;
			
			//grab target element's position
			//_offsetX = ExtractNumber(wholeTarget.style.left);
			//_offsetY = ExtractNumber(wholeTarget.style.top);
			var posObject = getElementPosition(wholeTarget);
			
			_offsetX = posObject.left;
			_offsetY = posObject.top;
			
			//sets targeted element to front (z = 10000)
			_oldZIndex = wholeTarget.style.zIndex;
			wholeTarget.style.zIndex = 10000;
			
			//we need to access the element in OnMouseMove
			_dragElement = wholeTarget;
			
			//tell our code to start moving the element with the mouse
			document.onmousemove = OnMouseMove
			
			//cancel out any text selections
			document.body.focus();
			
			//prevent text selection in IE
			document.onselectstart = function () { return false; };
			
			//prevent text selection (except IE)
			return false;
		}
	}
}

function OnMouseMove(e)
{
	if (e == null)
		var e = window.event;
	
	//this is the actual 'drag code'
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
}

function OnMouseUp(e)
{
	if (_dragElement != null)
	{
		_dragElement.style.zIndex = _oldZIndex;
		
		
		//we're done with these events until the net OnMouseMove
		document.onmousemove = null;
		document.onselectstart = null;
		
		//this is how we know we're not dragging
		_dragElement = null;
		

		
	}
}


//**************** [ readStyle Func ] *********************
// this function was taken from ToolMan by Tim Taylor
// Consulting <http://tool-man.org/> Copyright (c) 2005
// this function reads a property from the CSS and returns
// the value of the requested property, very useful for
// dynamic pages, thanks Tim!!!!
function readStyle (element, property) {
	if (element.style[property]) {
		return element.style[property]
	} else if (element.currentStyle) {
		return element.currentStyle[property]
	} else if (document.defaultView && document.defaultView.getComputedStyle) {
		var style = document.defaultView.getComputedStyle(element, null)
		return style.getPropertyValue(property)
	} else {
		return null
	}
}

//what an awesome idea, thanks Luke Breuer. (Taken from general tutorial)
function $(id) 
{ 
	return document.getElementById(id); 
}

function getElementPosition(elemID) {
    var offsetTrail = elemID;
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}