/** 
Use jQuery to display popup divs on a page
Dependencies: jQuery, jQuery UI Effects Core, and jQuery UI specific effects used
* Requires an anchor tag link <a> and an existing <div> element within the page
 * When the link is clicked, the div element appears as a pop-up box
 * To prevent the link from being clicked, set the shifttop to a negative value to conceal the link under the box
 * Example implementation:
 * <a href="#" onMouseOver="return toggle_div_popup(this,'div_element_id',304,'2px solid orange',-145,-5, 'drop',300);">click here</a>
<div id="div_element_id" style="display:none;"></div>
 * 
 * Fn position_div sets position of the div element relative to the calling link
 */
function position_div (an, box, offsetleft, offsettop) {
  var cleft = offsetleft;
  var ctop = offsettop;
  var obj = an;
  while (obj.offsetParent) {
    cleft += obj.offsetLeft;
    ctop += obj.offsetTop;
    obj = obj.offsetParent;
  }
  box.style.left = cleft + 'px';
// replace 0 with an integer to offset the vertical position 
  ctop += an.offsetHeight + 0;
  if (document.body.currentStyle &&
    document.body.currentStyle['marginTop']) {
    ctop += parseInt(
      document.body.currentStyle['marginTop']);
  }
  box.style.top = ctop + 'px';
}

// 1st var should always be "this", eg., onClick="return toggle_div_popup(this,'div_element_id',304,'2px solid orange',-115,0,'drop',300)"
function toggle_div_popup (an, div_id, width, borderStyle, shiftleft, shifttop, selectedEffect, speedms) {
  var boxdiv = document.getElementById(div_id);
// if boxdiv (var representing div element) exists, display it; for browsers that conform to W3C DOM
  if (boxdiv != null)
  {
    if (boxdiv.style.display=='none') 
	{
	// set the div element parameters
	boxdiv.style.position = 'absolute';
	boxdiv.style.width = width + 'px';
	// boxdiv.style.height = height + 'px';
	boxdiv.style.border = borderStyle;
	// position div element and display
	position_div(an, boxdiv, shiftleft, shifttop);
	//boxdiv.style.display='block';
    }
	//most effect types need no options passed by default
	var options = {};
	//check if it's scale, transfer, or size - they need options explicitly set
	if(selectedEffect == 'scale'){  options = {percent: 0}; }
	else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
//run the effect
	div_id = '#' + div_id;
	$(div_id).toggle(selectedEffect,options,speedms);
    return false;
  }
  return false;
}

//run toggle effect
// e.g.,  <a href="#" id="button" onClick="toggleDisplayAnObject('blind','thediv',300);">Run Effect</a>
function toggleDisplayAnObject(selectedEffect, targetid, speedms)
{
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options explicitly set
if(selectedEffect == 'scale'){  options = {percent: 0}; }
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }

//run the effect
targetid = '#' + targetid;
$(targetid).toggle(selectedEffect,options,speedms);
return false;
}