/*****************************************************************
MENU EXTENTION LIB
this section defines the js funcitons which provice the select menu 
behaviour.

For this to work, a hidden, styled div of class menuExtentionDiv must be defined
ie

<style type="text/css">
    div.menuExtensionDiv {
    position:absolute; 
    overflow:auto; 
    visibility: hidden;
    z-index:999; 
    width:auto; 
    height:auto;
    background-color:#ffffff;
    border:1px #000000 solid;
    } 	     
</style>
<div class="menuExtensionDiv" name="menuExtensionDiv" id="menuExtensionDiv">
    &nbsp;
</div>

Also, these functions are to be tied to the onMouseMove events of the select
elements using them ie
 
<select  onmousemove="drawMenuExtension('stateSelect');" onblur="clearMenuExtention();" onclick="setRegions()" id="stateSelect">				
</select>

*****************************************************************/

var offX = 0;          // X offset from mouse position
var offY = 0;          // Y offset from mouse position	
function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft,curtop];
}	   
/**
* places the contents of the select menu of id : parentSelectElementId
* inside a hidden div. this div is then displayed beside the given select menu
* 
*/
function drawMenuExtension(parentSelectElementId){
    var messageDiv = document.getElementById('menuExtensionDiv');							
    var selectObj = document.getElementById(parentSelectElementId);	
    if(selectObj.selectedIndex >= 0){		    
        messageDiv.innerHTML = selectObj.options[selectObj.selectedIndex].text;
    }else{
        messageDiv.innerHTML = "Please Select";
    }
    messageDiv.style.visibility = 'visible';		
    //need to get the div to appear to the right of the select element
    var selectObjLeft = findPos(selectObj)[0];
    var selectObjTop = findPos(selectObj)[1];
    if(parentSelectElementId == "territoryList" || parentSelectElementId == "stateList" || parentSelectElementId == "regionList"){
        var textLength = selectObj.options[selectObj.selectedIndex].text.length;
        if(textLength < 30){
            messageDiv.style.display = 'none';
        } else {
            selectObjLeft -= 300;
            selectObjTop -= 20;
            //alert(textLength);
            if(textLength > 45 && textLength <=55){
                selectObjLeft -= 40;
            }
            if(textLength > 55 && textLength<=60){
                selectObjLeft -= 60;
            }
            if(textLength > 60){
                selectObjLeft -= 100;
            }
            messageDiv.style.display = 'block';
        }
    }
    messageDiv.style.left = (selectObjLeft + selectObj.offsetWidth) + 'px';
    messageDiv.style.top = selectObjTop + 'px';		    				
//alert(messageDiv.offsetWidth);
}
/**
* clears the select menu extention div
*/
function clearMenuExtension(){
    var messageDiv = document.getElementById('menuExtensionDiv');
    var obj = messageDiv.style; 
    obj.visibility = 'hidden';	    
}