function CreatePopupPanel(panelname, container) {
	// --- create all elements of the new panel (top down)
	var objPanel = document.createElement('div');
	var objTitlebar = document.createElement('div');
	var objTitlebarclosebutton = document.createElement('img');
	var objPlayercontents = document.createElement('div');
	var objFlashcontainer = document.createElement('div');
	var objAlternatecontent = document.createElement('p');
	var objWindowcontrolbar = document.createElement('div');
	var objCloseplayerbutton = document.createElement('a');
	var objBuynowbutton = document.createElement('a');


	// --- create all attributes for new elements (top down)
	objPanel.setAttribute('id', panelname);
	objPanel.style.cssText = 'display:none;';

	objTitlebar.setAttribute('id', 'titlebar');

	objTitlebarclosebutton.setAttribute('id', 'closeX');
	objTitlebarclosebutton.setAttribute('src', '/images/en_US/local/page_specific/popup/close.gif');
    objTitlebarclosebutton.setAttribute('alt', 'Close');
	objTitlebarclosebutton.style.cssText = 'height:16px; width:47px;';
	objTitlebarclosebutton.onclick = function(e){SendEvent('stop'); Effect.toggle('pnlVideoPlayer','appear',{duration:0.25}); Effect.toggle('pagescreen','appear',{duration:0.25});};

	objPlayercontents.setAttribute('id', 'playercontents');
	objFlashcontainer.setAttribute('id', 'flashContainer');
	objAlternatecontent.innerHTML = 'This content requires JavaScript.';
	objWindowcontrolbar.setAttribute('id', 'windowcontrolbar');

	objCloseplayerbutton.setAttribute('id', 'closeplayer');
	objCloseplayerbutton.style.cssText = 'background-color:#333; border:0; color:#ccc;';
	objCloseplayerbutton.setAttribute('href', '#');
	objCloseplayerbutton.onclick = function(e){SendEvent('stop'); Effect.toggle('pnlVideoPlayer','appear',{duration:0.25}); Effect.toggle('pagescreen','appear',{duration:0.25}); return false;};
	objCloseplayerbutton.innerHTML = 'CLOSE PLAYER';
	
	objBuynowbutton.setAttribute('id', 'buynow');
	objBuynowbutton.style.cssText = 'color:#fff; font-size:14px; margin-left:420px;';
	objBuynowbutton.setAttribute('href', '/category/beauty+%26+fragrance.do');
	objBuynowbutton.onclick = function(e){NewPage('/category/beauty+%26+fragrance.do'); return false;};
	objBuynowbutton.innerHTML = 'BUY NOW »';
	

	// --- add all elements to the container element (bottom up)
	objWindowcontrolbar.appendChild(objCloseplayerbutton);
	objWindowcontrolbar.appendChild(objBuynowbutton);

	objFlashcontainer.appendChild(objAlternatecontent);

	objPlayercontents.appendChild(objFlashcontainer);
	objPlayercontents.appendChild(objWindowcontrolbar);

	objTitlebar.appendChild(objTitlebarclosebutton);
	objPanel.appendChild(objTitlebar);
	objPanel.appendChild(objPlayercontents);
	
	container.insertBefore(objPanel, container.firstChild);	
	ManipulateStyleClass('add', $(panelname), 'popuppanel');
	ManipulateStyleClass('add', $('closeplayer'), 'windowcontrols');
	ManipulateStyleClass('add', $('buynow'), 'windowcontrols');


/* --- HTML output for this function
<div class="popuppanel" id="pnlVideoPlayer" style="display:none;">
	<div id="titlebar"><img src="/text/images/general/close_X.jpg" height="11" width="11" id="closeX" onclick="SendEvent('stop'); Effect.toggle('pnlVideoPlayer','appear',{duration:0.25}); Effect.toggle('pagescreen','appear',{duration:0.25});" /></div>

	<div id="playercontents">
		<div id="flashContainer"><p>This content requires JavaScript.</p></div>
		<div id="windowcontrolbar">
			<a class="windowcontrols" style="background-color:#333; border:0; color:#ccc;" href="#" onclick="SendEvent('stop'); Effect.toggle('pnlVideoPlayer','appear',{duration:0.25}); Effect.toggle('pagescreen','appear',{duration:0.25});" return false;">CLOSE PLAYER</a>
			<a class="windowcontrols" style="color:#fff; font-size:14px; margin-left:420px;" onclick="NewPage('/category/beauty+%26+fragrance.do'); return false;" href="/category/beauty+%26+fragrance.do">BUY NOW &raquo;</a>
		</div>
	</div>
</div>
*/
}

function openPopUpPanel(obj, event_i, x_offset, y_offset, contentID, pagescreen) {

	var iTop, iLeft, contents, pageContentHeight, pageContentWidth, arrContentElements, pageContents;
	
	if (!($(obj)) || ($(obj).style.display == "none" && pagescreen && !($('pagescreen')))) {
		//--- if popuppanel doesn't exist or not visible and a page screen is requested and doesn't exist, get the page content container
		arrContentElements = getElementsByStyleClass('contentbg');
		pageContents = arrContentElements[0];
	}

	if (!($(obj))) {
		//--- if popuppanel doesn't exist, create it
		CreatePopupPanel(obj, pageContents);
	}

	//--- only position and populate the message box if revealing it, not hiding
	if ($(obj).style.display == "none") {
		
		if (contentID) {
			//--- if contents for popup panel are provided on page, use it
			contents = $('contents_'+contentID);
	
			//--- get contents and populate box
			$('contents').innerHTML = contents.innerHTML; //.nodeValue
		}

		if (pagescreen && !($('pagescreen'))) {
			// --- create page screen object if requested and one doesn't already exist
			var objScreen = document.createElement('div');

			objScreen.setAttribute('id', 'pagescreen');
			objScreen.style.cssText = 'display:none;';

			// --- locate the TD object of the main content area to place the screen object inside
			pageContentHeight = pageContents.offsetHeight;
			pageContentWidth = pageContents.offsetWidth;
			
			pageContents.style.cssText = 'position:relative';
			
			pageContents.insertBefore(objScreen, pageContents.firstChild);	

		}
	new Draggable(obj, {handle: 'titlebar', scroll: window});
	}

	//--- reveal the message box w/ effect
	if ($('pagescreen') && $('pagescreen').style.display == "none") {
		// --- if page screen successfully created, set size and display it
		$('pagescreen').style.height = pageContentHeight;
		$('pagescreen').style.width = pageContentWidth;
		Effect.toggle('pagescreen','appear',{duration:.5});
		
		Move.element(obj, 'pagescreen', 'move');

		$(obj).style.left = '30px';
		$(obj).style.top = '50px';
//		$(obj).style.marginleft = '15px';
//		$(obj).style.margintop = '50px';
	} else {
		//--- get location of the mouse pointer
		iLeft = get_mouse_x(event_i) + x_offset;
		iTop = get_mouse_y(event_i) + y_offset;
	
		//--- position the popup panel near the mouse pointer
		$(obj).style.left = iLeft + "px";
		$(obj).style.top = iTop + "px";
	}
	Effect.toggle(obj,'appear',{duration:.5});
}