var tgState;
var tgLayer;
var tgParent;
var tgParentChildren;
var tgXpos;

function findPos(obj) {
    var leftTop = obj.positionedOffset();
    return leftTop['left'];
}
/*
function findPos(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft;
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft;
        }
    }
    return curleft;
}
*/
function toggleSubmenu(obj,srcObj) {

	Element.extend(srcObj);
    tgLayer = $(obj);
    tgParent = tgLayer.parentNode;
    tgParentChildren = tgParent.getElementsByTagName('div');

    tgState = tgLayer.style.display;

    for(i = 0; i < tgParentChildren.length; i++) {
        tgParentChildren[i].style.display = "none";
    }

    if(tgState != 'none'){
        tgLayer.style.display = 'none';
        document.getElementById('smshop').style.display = '';
    }else{
        tgLayer.style.display = '';
        
        /* BEGIN Position Submenu directly below main menu */
        
        //get the left position of the clicked element relative to its POSITIONED parent
		tgXpos = findPos(srcObj);

		//get the element which the arrow (background image) will point to
		var itemToPointTo = tgLayer.select('ul>li').first(); 

		//calculate the loc to place itemToPointTo centered directly below main menu item and place it
		var paddingNeededToAlign = tgXpos - (itemToPointTo.getWidth() - srcObj.getWidth())/2;
        tgLayer.setStyle("padding-left:"+paddingNeededToAlign+"px");
        
        //center arrow within itemToPointTo. 13px is the width of background divider graphic
	    tgLayer.setStyle("background-position:" + (paddingNeededToAlign + (itemToPointTo.getWidth()/2) - (13/2)) + "px 0px");
        
        /* END Position Submenu directly below main menu */

    }

    tgLayer.setStyle("display:"+ (tgState != 'none') ? 'none' : '');
}