//add the element to the screen. When this gets mousedover a new div will show right underneath it with more details
function addElement(x, y, pk, display)
{
	var ref=document.getElementById("element1");		//find the place to add widget to
	var uid='YM_ID'+pk;		//create a unique ID for the widget

	var element_str='<div onMouseOut="removeInfo()" onMouseOver="moreInfo('+uid+')" onClick="clickedElement('+uid+')" id="'+uid+'" class="ym_element" style="position: absolute; top: '+y+'px; left:'+x+'px;  background-color: #99CC00;">'+display+'</div>';
	ref.innerHTML+=element_str;	//place the widget on screen
};

//after making the call to the server side PHP this adds the details to the screen
function showInfo(name, style, pk)
{
	log('id,x,y: '+pk+','+info_x+','+info_y);
	//show a new div element at that x,y with high Z-index		
	var ref=document.getElementById("element1");		//find the place to add widget to	
	
	var css_style = 'position: absolute; top: '+info_y+'px; left:'+info_x+'px; width: '+info_width+'px; height:'+info_height+'px; z-index: 1000; background-color: #99CC00;'
	var div_name = "Name:"+name;
	var div_style = "Style:"+style;
		
	var info_str='<div onMouseOut="removeInfo()" onClick="clickedInfo('+pk+')" id="info" class="ym_info" style="'+css_style+'">'+div_style+'</div>';
	ref.innerHTML+=info_str;	//place the widget on screen
};


///this is called with 'info' to remove the element after a mouseout event

function removeInfo()
{
		removeElement('info');
};

//remove an element by ID
function removeElement(id){
	var root=document.getElementById('element1');
	var node=document.getElementById(id);
	root.removeChild(node);
};