/*
    function findPos - get the real position of any element
*/
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

/* 
    function positionFloatingLayerMiddle - adds handler to link class specified, timeout functionality, and 
    positions the rollover layer using manual offsets. 
    
    thisClass  - class of the item you want handle 
    thisLayer  - name of the layer you wish to manipulate
    thisEl     - the original target
    topOffset  - top offset of the rollover layer
    leftOffset - left offset of the rollover layer            
*/
function positionFloatingLayerMiddle(thisClass, thisLayer, thisEl, topOffset, leftOffset) {
    // get offset for the main container 
    var showLayer = "div#"+thisLayer;
    var contentoffset = $("#main").offset();
    var targetoffset = $(thisEl).offset();
    
        
    // hide unnecessary modules for this specific layer
    $(showLayer + " div.info_module").hide();    

    // which info_module do we show? needs to go first to get height
    var targetName = "div#"+$(thisEl).attr("name");
    $(targetName).show();   
    
    // determine correct offsets based on the contents container - centers on the middle of the anchor
    var leftDiff = Math.round(Math.abs(contentoffset.left-targetoffset.left)-(leftOffset/2)+($(thisEl).outerWidth()/2));
    var topDiff = Math.abs(contentoffset.top-targetoffset.top)-parseInt($("#"+thisClass).css("height"))-topOffset;
    
    // set the positions    
    $(showLayer).css("position","absolute").css("left", leftDiff).css("top", topDiff);
    
    // add arrow container as necessary
    if (!(document.getElementById(thisLayer+"_arrow"))) {
        $(showLayer).append("<div id='"+thisLayer+"_arrow' class='arrow'"+"></div>");
    }    
    // position arrow to the middle horizontally and take into account border thickness              
    var arrowMiddle = parseInt($("#"+thisClass).css("width"))/2-parseInt($("#"+thisLayer+"_arrow").css("width"))/2+4;        
    var arrowOffset = -(parseInt($("#"+thisClass).css("border-bottom-width")))-6;        
    $("#"+thisLayer+"_arrow").css("margin-left", arrowMiddle).css("margin-top", arrowOffset);
    
    // show the layer 
    $(showLayer).show();        
}  

/* 
    function positionFloatingLayerAuto - adds handler to link class specified, timeout functionality, and 
    positions the rollover layer using auto positioning (and allows for extra offsets). 
    
    thisClass  - class of the item you want handle 
    thisLayer  - name of the layer you wish to manipulate
    thisEl     - the original target
    topOffset  - top offset of the rollover layer
    leftOffset - left offset of the rollover layer            
*/
function positionFloatingLayerAuto(thisClass, thisLayer, thisEl, topOffset, leftOffset) {
    // get offset for the main container 
    var showLayer = "div#"+thisLayer;
    var contentoffset = $("#main").offset();
    var targetoffset = findPos(thisEl);
        
    // hide unnecessary modules for this specific layer
    $(showLayer + " div.info_module").hide();    

    // which info_module do we show? needs to go first to get height
    var targetName = "div#"+$(thisEl).attr("name");
    $(targetName).show();   
    
    // determine the box height based on the class            
    var boxWidth = parseInt($("#"+thisClass).css("width"));
    var boxHeight = parseInt($("#"+thisClass).css("height"));
        
    // determine correct offsets based on the contents container - centers on the middle of the anchor
    var leftDiff = Math.abs(contentoffset.left-targetoffset[0])-6;
    var topDiff = Math.abs(contentoffset.top-targetoffset[1])-parseInt($("#"+thisClass).css("height"))-topOffset;
        
    // initial positions    
    $(showLayer).css("position","absolute").css("left", leftDiff).css("top", topDiff);
    
    // re-position if necessary (get right edge of container and link plus box width)
    var contentRight = $("#content").offset().left+$("#content").width();    
    var floatingLayerRight = targetoffset[0]+boxWidth;
    
    // add arrow container as necessary
    if (!(document.getElementById(thisLayer+"_arrow"))) {
        $(showLayer).append("<div id='"+thisLayer+"_arrow' class='arrow'"+"></div>");
        var arrowOffset = -(parseInt($("#"+thisClass).css("border-bottom-width")))-6;  
    }    
        
    if (floatingLayerRight > contentRight) {      
        var offsetDifference = (floatingLayerRight-contentRight);
        $(showLayer).css("left", leftDiff-boxWidth+48);                
        $("#"+thisLayer+"_arrow").removeClass().addClass("arrow_right").css("margin-top", arrowOffset);
    } else {        
        $("#"+thisLayer+"_arrow").removeClass().addClass("arrow").css("margin-left", "35px").css("margin-top", arrowOffset);
    }
    
    // show the layer 
    $(showLayer).show();  
}

/* 
    function addRolloverLayer - adds handler to link class specified, timeout functionality, and 
    positions the rollover layer using manual offsets. 
    
    linkClass  - class of the item you want handle (assumes it's an anchor link)
    layerId    - name of the layer you wish to manipulate
    topOffset  - top offset of the rollover layer
    leftOffset - left offset of the rollover layer            
*/
function addRolloverLayer(linkClass, layerId, topOffset, leftOffset, popLocation) {
    var t;
    $("a." + linkClass).hover(function() {            
        clearTimeout(t);
        var cumLeftOffset = parseInt($("#" + linkClass).css("width"))+leftOffset; // add the offset to the base width
        //var cumTopOffset = parseInt($("#" + linkClass).css("height"))+topOffset;  // add the offset to the base height
        
        // position the element and show        
        switch (popLocation) {
            case "middle": positionFloatingLayerMiddle(linkClass, layerId, this, topOffset, cumLeftOffset);
            break;
            case "auto"  : positionFloatingLayerAuto(linkClass, layerId, this, topOffset, cumLeftOffset);
            break;
        }        
    }, function() {
        t = setTimeout(function() {$("#" + layerId).hide()}, 800);
    });
  
    $("#"+layerId).hover(function() {
        clearTimeout(t);
    }, function() {
        t = setTimeout(function() {$("#" + layerId).hide()}, 800);  
    });
}