function attachmentsToggle(e){
var opens = $D.getElementsByClassName('showAttachment');
if($D.hasClass(this, 'close') || $D.hasClass(this, 'closeTxt')){
 if($D.hasClass(opens[0], 'showAttachment')){
 $D.replaceClass(opens[0], 'showAttachment', 'hideAttachment');
 }
 $E.stopEvent(e);
}

else{


 if($D.hasClass(this,'attachmentTrigger')){
 var num = this.getAttribute('num');

 //get mouse coords
 var theX = $D.getXY(this)[0];
 var theY = $D.getXY(this)[1];

 //get height and width of triggering link
 var theW = this.offsetWidth;
 var theH = this.offsetHeight;
 var screenWidth = screen.width;
 var screenHeight = screen.height;
 var currentAttachment = document.getElementById('attachmentBox' + num); //this will refer to the FIRST attachmentBox only

 //do math to place the new box

 if(theX < 800 && theX > 700 ){
 var arw = $D.getElementsByClassName('pointer');
 for(var n = 0; n < arw.length; n++){
 $D.replaceClass(arw[n], 'pointer', 'pointer2');
 }

 var newX = theX + theW - 340;
 var newY = theY + theH - 30;

 }
 else {
 var arw = $D.getElementsByClassName('pointer2');
 for(var m = 0; m < arw.length; m++){
 $D.replaceClass(arw[m], 'pointer2', 'pointer');
 }

 var newX = theX + theW + 15;
 var newY = theY + theH - 30;
 }



 currentAttachment.style.position = 'absolute';
 currentAttachment.style.top = newY + 'px';
 currentAttachment.style.left = newX +'px';

 //close the element that was last opened
 if($D.hasClass(opens[0], 'showAttachment')){
	$D.replaceClass(opens[0], 'showAttachment', 'hideAttachment');
 }

 if($D.hasClass(currentAttachment, 'hideAttachment')){
 $D.replaceClass(currentAttachment, 'hideAttachment', 'showAttachment');
 }

 $E.stopEvent(e);
 }

 }

}

function attachmentsInit(){

 var triggers = $D.getElementsByClassName('attachmentTrigger');
 var attachmentBox = $D.getElementsByClassName('attachment');

 var numOnTrigger = 0;
 var numOnBox = 0;

 var hDefined=0;
 var wDefined=0;

 var closers = $D.getElementsByClassName('close');
 var closersTxt = $D.getElementsByClassName('closeTxt');
 //set attributes to link elements together

 for(var j = 0; j < attachmentBox.length; j++){
	 if(attachmentBox[j].getAttribute("num")!= null &&
		 attachmentBox[j].getAttribute("num")!= '') {
		numOnBox = attachmentBox[j].getAttribute("num");
		attachmentBox[j].setAttribute('id', 'attachmentBox' + numOnBox);
	 } else {
		attachmentBox[j].setAttribute('id', 'attachmentBox' + j);
	 }
	 // now get the height and width if defined.

	 if(attachmentBox[j].getAttribute("hNeed")!= null &&
		 attachmentBox[j].getAttribute("hNeed")!= '') {
		 hDefined = attachmentBox[j].getAttribute("hNeed");
		 attachmentBox[j].style.height=hDefined;
	 }
	 // now get the height and width if defined.
	 if(attachmentBox[j].getAttribute("wNeed")!= null &&
		 attachmentBox[j].getAttribute("wNeed")!= '') {
		 wDefined = attachmentBox[j].getAttribute("wNeed");
		 attachmentBox[j].style.width=wDefined;
	 }

 }

 for(var k = 0; k < closers.length; k++){
 closers[k].setAttribute('num', i);
 $E.addListener(closers[k], "click", attachmentsToggle);
 }

 for(var k = 0; k < closersTxt.length; k++){
 closersTxt[k].setAttribute('num', i);
 $E.addListener(closersTxt[k], "click", attachmentsToggle);
 }

 for(var i = 0;i < triggers.length;i++){
	 if(triggers[i].getAttribute("num") != null && 
		 triggers[i].getAttribute("num") != '') {
		numOnTrigger = triggers[i].getAttribute("num");
		triggers[i].setAttribute('id',"triggerNum" + numOnTrigger);
		triggers[i].setAttribute('num', numOnTrigger);
	 } else {
		triggers[i].setAttribute('id',"triggerNum" + i);
		triggers[i].setAttribute('num', i);
	 }
	 $E.addListener(triggers[i], "click", attachmentsToggle);
 }

}
$E.addListener(window, "load", attachmentsInit);