if (typeof(Prototype)!='undefined') {
	
	Event.observe(window, 'load', function() {
		/*looping through all span tags with rel="ad_micro" to create functionality of microsite
		  popup*/
		$$('span[rel="ad_micro"]').each(function(node){
			var item_id  = 'micro_' + node.id;
			var text	 = 'text_' + node.id;
			var text_top = 'top_' + node.id;
			
			//creating css for text to hover
			$(node.id).style.textDecoration = 'underline';
			$(node.id).style.borderBottom 	= '1px dotted blue';
			$(node.id).style.fontWeight 	= 'bold';
			$(node.id).style.cursor 		= 'pointer';
			
			//hiding text field from view but will retrieve the innerHTML later
			$(text).style.display = 'none';
			
			
			var newdiv = document.createElement('div');
			newdiv.id	= item_id;
			 
			//creating style for new div containing hover content
			newdiv.style.background = 'url(/images/top_bg.jpg) repeat-x #c2defb';
			newdiv.style.display	= 'none';
			newdiv.style.border	 	= '1px solid #333';
			newdiv.style.width	 	= '350px';
			newdiv.style.height	 	= '170px';
			
			newdiv.innerHTML = '<div style="height:20px;" id="' + text_top + '" ><img src="/images/exit.jpg" style="float:right; cursor:pointer;" onclick="$(\''+ item_id +'\').fade({delay: .5, duration: 3});" alt="click here to exit" /></div>';
			newdiv.innerHTML += '<div style="clear:both; overflow: auto; height:150px; padding:0 5px 0 5px;">'+ $(text).innerHTML +'</div>';
			
			var pos		   = $(node.id).positionedOffset();
			var dimDoc	   = $(document.body).getDimensions();
			
			var left = pos[0] + 30;
			var top  = pos[1] - (dimDoc.height + 200);

			newdiv.style.position = 'relative';
			newdiv.style.left	  = left + 'px';
			newdiv.style.top	  = top + 'px';
			
			document.body.appendChild(newdiv);

			//activate hover div when you mouseover respective hover link
			Event.observe(node.id, 'mouseover', function () {
				//hiding all divs that are not current hover mode
				$$('span[rel="ad_micro"]').each(function(node_del){
					if (node_del.id != node.id) {
						var newId = 'micro_' + node_del.id;
						if ($(newId) !== null) {
							$(newId).hide();
						}
						
					}
				});
				
				//show hiddeng content in draggabel container
				Effect.Appear(newdiv,{
					delay: .5,
					duration: 2
				 });
			 });
			
			//on mouseout make the blue area be able to drag content container
			Event.observe(node.id, 'mouseout', function () {
				new Draggable(newdiv, {
					handle: text_top
				});
				$(text_top).style.cursor = 'move';
			});
		});
	});
}