function initSelectWidget(el) {
	
	var pos = GetPos(el);
	var dim = GetDim(el);
	var bpadding = 3;
	var padding2 = bpadding+bpadding;
	
	// create select box
	var box = document.createElement("DIV");
	
	// set style
	with(box.style) {
		border = "1px dotted red";
		position = "absolute";
		left = pos.x-bpadding+"px";
		top = pos.y-bpadding+"px";
		width = (dim.width+padding2)+"px";
		height = (dim.height+padding2)+"px";
		display = "none";
		opacity = "0.2";
		backgroundColor = "white";
	}
	
	// append to element to span region
	document.body.appendChild(box);
	el.outlinebox = box;
	box.outlinebox = el;
	
	el.onmouseover = function() {
		this.outlinebox.style.display = "block";
	}
	
	box.onmouseout = function() {
		this.style.display = "none";
	}

	
}


function GetPos(el) {
	
	var x = 0;
	var y = 0;
	
	if (el.offsetParent) {
		x = el.offsetLeft;
		y = el.offsetTop;
	}
	
	while (el = el.offsetParent) {
		x += el.offsetLeft;
		y += el.offsetTop;
	}
	
	return {"x":x,"y":y};
	
}


function GetDim(el) {
	
	return {"width":el.offsetWidth,"height":el.offsetHeight};
	
}

function initwidgets() {
	el = oniongetelementsbyclass("onionwidgetcontainer");
	
	for(var i=0;i<el.length;i++) {
		
		initSelectWidget(el[i]);
		
	}
	
}