var Draggable =
{
	init: function()
	{
		Core.addEventListener(document, "mousedown", incrementz_Index);
		/*Core.addEventListener(document, "mousedown", startDrag);*/
		Core.addEventListener(document, "mouseup", stopDrag);	
		var z_index = 1;
		
		//increase z-index of the div being dragged
		function incrementz_Index(e)
		{
			// determine event object
			if(!e){var e=window.event};
			// determine target element
			var targ=e.target?e.target:e.srcElement;
			if (targ.className == 'OnePxTransparent')
			{
				var targ=targ.parentNode.parentNode.parentNode.parentNode.parentNode;
			}
			else if (targ.className == 'HeaderSection1' || targ.className == 'HeaderSection2' || targ.className == 'HeaderSection2b' || targ.className == 'HeaderSection3')
			{
				var targ=targ.parentNode.parentNode.parentNode;
			}
			if(targ.className!='draggable'){return};
			
			if(typeof prevTarg == "undefined")
			{
				prevTarg = null;
			}
			if(prevTarg != targ)
			{
				targ.style.zIndex = z_index++;
			}
			prevTarg = targ;
			startDrag(e);
		}
		function startDrag(e)
		{
			// determine event object
			/*if(!e){var e=window.event};*/
			// determine target element
			var targ=e.target?e.target:e.srcElement;
			if (targ.className == 'OnePxTransparent')
			{
				var targ=targ.parentNode.parentNode.parentNode.parentNode.parentNode;
			}
			else if (targ.className == 'HeaderSection1' || targ.className == 'HeaderSection2' || targ.className == 'HeaderSection2b' || targ.className == 'HeaderSection3')
			{
				var targ=targ.parentNode.parentNode.parentNode;
			}
			if(targ.className!='draggable'){return};
			// calculate event X,Y coordinates
			offsetX=e.clientX;
			offsetY=e.clientY;
			// assign default values for top and left properties
			if(!targ.style.left){targ.style.left='0px'};
			if(!targ.style.top){targ.style.top='0px'};
			// calculate integer values for top and left properties
			coordX=parseInt(targ.style.left);
			coordY=parseInt(targ.style.top);
			drag=true;
			// move div element
			document.onmousemove=dragDiv;
		}
		// continue dragging
		function dragDiv(e)
		{					
			if(!drag){return};
			if(!e){var e=window.event};
			var targ=e.target?e.target:e.srcElement;
			if (targ.className == 'OnePxTransparent')
			{
				var targ=targ.parentNode.parentNode.parentNode.parentNode.parentNode;
			}
			else if (targ.className == 'HeaderSection1' || targ.className == 'HeaderSection2' || targ.className == 'HeaderSection2b' || targ.className == 'HeaderSection3')
			{
				var targ=targ.parentNode.parentNode.parentNode;
			}
			//var targ=e.target?e.target:e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode;
			// move div element
			targ.style.left=coordX+e.clientX-offsetX+'px';
			targ.style.top=coordY+e.clientY-offsetY+'px';
			return false;
		}
		// stop dragging
		function stopDrag(e)
		{
			drag=false;
		}
		/*window.onload=function()
		{
			document.onmousedown=startDrag;
			document.onmouseup=stopDrag;
		}*/
	}
};

Core.start(Draggable);