anchor.diff:  					}
   				}
   			}
  -		  
  -			// Add the selected text/values in reverse order.
  +		      // Add the selected text/values in reverse order.
   			// This will add the Options to the 'to' Select
   			// in the same order as they were in the 'from' Select.
  +			
   			for(i=selectedCount-1; i>=0; i--)
   			{
   				addOption(theSelTo, selectedText[i], selectedValues[i]);
   			}
   		}
  -    }
  +        if(document.getElementById("lstAttributeNames").offsetWidth >=250)
  +		   {
  +		     e=document.getElementById("elementList");
  +             e.style.border =1+'px solid';
  +			}
  +			else
  +			{
  +			  e=document.getElementById("elementList");
  +             e.style.border =0+'px solid';
  +			
  +			}
  +	     OnDivScroll();
  +	}
      	function moveOptionsLeft(theSelFrom, theSelTo)
   	{
   		var selLength = theSelFrom.length;
  
positive.code: <%@ page import="edu.wustl.common.tree.QueryTreeNodeData"%>
  <%@ page import="edu.wustl.query.actionForm.CategorySearchForm"%>
  <%@ page import="edu.wustl.common.beans.NameValueBean"%>
  <html>
  <head>
  
  <meta http-equiv="Content-Language" content="en-us">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  </head>
  
negative.code: 	<tr>
  		<td width="1px">&nbsp;	</td>
  		<td valign="top"  width="90%" height="90%">
  			<div id="treeBox" style="background-color:white;overflow:auto;height:378;width:240;border-left:solid 1px;border-right:solid 1px;border-top:solid 1px;border-bottom:solid 1px;"></div>
  		</td>
  		<td width="1%"> &nbsp; </td>
  		   <td align="center" valign="center" style="padding-left:10px;padding-right:10px;">
  			<img src="images/advancequery/b_add.gif"  align="absmiddle" hspace="3" property="shiftRight" styleId ="shiftRight" onclick="moveOptionsRight(document.forms[0].columnNames,document.forms[0].selectedColumnNames);"/>
  			<br><br/>
  			<img src="images/advancequery/b_remove.gif"  align="absmiddle" hspace="3" onclick="moveOptionsLeft(document.forms[0].selectedColumnNames, document.forms[0].columnNames);"/>
  		</td>
  		<td width="1%"> &nbsp; </td>
  		<td class="" valign="top" width="60" height="85%">
  <!-- Mandar : 434 : for tooltip -->
  		   <div id="emptyList" style="height:378;width:250;overflow:hidden;"> 
  		   <select name="heg" style="height:378;width:250;" multiple="true">
  				<option value="">
  			</select></div>	
  			
  		 <div id="elementList" style="OVERFLOW: auto;WIDTH:250px;HEIGHT: 378px;border:0px solid;" onscroll="OnDivScroll();"> 
  			 <select  id="lstAttributeNames" name="selectedColumnNames" styleClass="" size="22" multiple="true" style="" onfocus="OnSelectFocus();">
  			  <logic:iterate id="columnNameValue" name="selectedColumnNameValueBeanList">	
  				<option value="${columnNameValue.value}"/><span class="content_txt"> <bean:write name="columnNameValue" property="name"/></span>
                </logic:iterate> 
  			</select>
  		   </div> 
  		</td>
  		<td width="1%"> &nbsp; </td>
  		 <td align="center" valign="center" style="padding-left:10px;padding-right:10px;">
  				<img src="images/advancequery/ic_up.gif" align="absmiddle"  onclick="moveUp(document.forms[0].selectedColumnNames);"/>  
  			<br><br/>
  			<img src="images/advancequery/ic_down.gif"  align="absmiddle" onclick="moveDown(document.forms[0].selectedColumnNames);"/> 
  		</td>
  </tr>
  <tr><td> &nbsp;
  </td>
  </tr>					
  
  </table>
  </body>
  </html:form>
  
  <script> 
        
     if( "<%= selectedColumnNameValueBeanList.size() %>" == 0)
     {
        document.getElementById("emptyList").style.display="block";
        document.getElementById("elementList").style.display="none";
     }
     else
     {
        
  	  document.getElementById("emptyList").style.display="none";
        document.getElementById("elementList").style.display="block";
     }
  </script>
  
  <SCRIPT LANGUAGE="JavaScript">
  
     function OnDivScroll()
  {
     	var lstAttributeNames = document.getElementById("lstAttributeNames");
  
      //The following two points achieves two things while scrolling
      //a) On horizontal scrolling: To avoid vertical
      //   scroll bar in select box when the size of 
      //   the selectbox is 8 and the count of items
      //   in selectbox is greater than 8.
      //b) On vertical scrolling: To view all the items in selectbox
  
      //Check if items in selectbox is greater than 8, 
      //if so then making the size of the selectbox to count of
      //items in selectbox,so that vertival scrollbar
      // won't appear in selectbox
      if (lstAttributeNames.options.length > 22)
      {
            
  		lstAttributeNames.size=lstAttributeNames.options.length;
      }
      else
      {
          lstAttributeNames.size=22;
      }
  }
  	
  	function OnSelectFocus()
  {
      //On focus of Selectbox, making scroll position 
      //of DIV to very left i.e 0 if it is not. The reason behind
      //is, in this scenario we are fixing the size of Selectbox 
      //to 8 and if the size of items in Selecbox is greater than 8 
      //and to implement downarrow key and uparrow key 
      //functionality, the vertical scrollbar in selectbox will
      //be visible if the horizontal scrollbar of DIV is exremely right.
      if (document.getElementById("elementList").scrollLeft != 0)
      {
          document.getElementById("elementList").scrollLeft = 0;
      }
  
      var lstCollegeNames = document.getElementById('lstAttributeNames');
      //Checks if count of items in Selectbox is greater 
      //than 8, if yes then making the size of the selectbox to 8.
      //So that on pressing of downarrow key or uparrowkey, 
      //the selected item should also scroll up or down as expected.
      if( lstCollegeNames.options.length > 22)
      {
          lstCollegeNames.focus();
          lstCollegeNames.size=22;
      }
     removeBorder();
  }
  	
  	function addOption(theSel, theText, theValue)
      {
  	    var newOpt = new Option(theText, theValue);
  	    var selLength = theSel.length;
  