var selectedElement; //store the id globally

function Browser() {

	var ua;
	this.isIE = false;
	this.isNS = false;
	
	ua = navigator.userAgent.toLowerCase();

	if (ua.indexOf("msie") >= 0) {
    	this.isIE = true;
    	return;
	}

	s = "netscape6/";
    if (ua.indexOf(s) >= 0) {
    	this.isNS = true;
	    return;
	}

	s = "gecko";
    if (ua.indexOf(s) >= 0) {
    	this.isNS = true;
    	return;
	}
	
}

var browser = new Browser();
var o = new Object();
o.zIndex = 0; //set element's initial zIndex

function dragStart(event, id) {

	var el;
	var x, y;

    o.elementId = document.getElementById(id);
  
	resetAll();
	
	var elChild = o.elementId.getElementsByTagName('li');
	elChild[1].style.border = '1px dotted #cca157';
	elChild[1].style.backgroundColor = '#335ea8';
	
	selectedElement = id; //set the id globally

	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;
  	}

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

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

  	o.elementId.style.zIndex = ++o.zIndex;

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

function dragGo(event) {

	var x, y;

  	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;
  	}

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

  	if (browser.isIE) {
	    window.event.cancelBubble = true;
	    window.event.returnValue = false;
  	}
  	if (browser.isNS)
    	event.preventDefault();
    
  	//setOpacity(document.getElementById(selectedElement), 50); //set opacity to 50% while dragging
    
}

function dragStop(event) {

  	if (browser.isIE) {
    	document.detachEvent("onmousemove", dragGo);
    	document.detachEvent("onmouseup",   dragStop);
  	}
  	if (browser.isNS) {
    	document.removeEventListener("mousemove", dragGo,   true);
    	document.removeEventListener("mouseup",   dragStop, true);
  	}
  
  	//setOpacity(document.getElementById(selectedElement), 100); //set opacity to 100% after dragging
  
}