function ci_NeilChen_WebCombo(id, autoPostBack)
{
	var id = id; // ctrl id
	var autoPostBack = autoPostBack;

	var ctrlCombo = document.getElementById(id + '_combo');
	var ctrlSelectedValue = document.getElementById(id + '_selected_value');
	var ctrlTextBox = document.getElementById(id + '_textbox');
	var ctrlTextBoxContainer = document.getElementById(id + '_textbox_container');
	var ctrlArrowBox = document.getElementById(id + '_arrow_box');
	var ctrlFloat = document.getElementById(id + '_float');
	var ctrlItems = document.getElementById(id + '_items');
	
	// select first item.
	if (ctrlItems.rows.length > 0 && !ctrlTextBox.value && !ctrlSelectedValue.value)
	{
		var firstRow = ctrlItems.rows[0];
		var td = firstRow.cells[0];
		ctrlTextBox.value = td.innerText;
		ctrlSelectedValue.value = td.getAttribute("myvalue");
	}
	
	ctrlFloat.style.display = 'none';
	
	// arrow pressed
	function arrow_mousedown()
	{
		if (ctrlFloat.style.display == 'none') 
		{		
			showFloat();
		} 
		else 
		{
			hideFloat();
			ctrlTextBox.className = 'ci_combo_hilight_item ci_combo_textbox';
		}		
	}
	ctrlArrowBox.onmousedown = arrow_mousedown;
	ctrlTextBoxContainer.onmousedown = arrow_mousedown;

	// item clicked
	ctrlItems.onmousedown = function()
	{
		var src = event.srcElement;
		var text = src.innerText;
		ctrlTextBox.value = text;
		ctrlTextBox.className = 'ci_combo_hilight_item ci_combo_textbox';
		// set the hidden field
		var value = src.getAttribute('myvalue');
		ctrlSelectedValue.value = value;

		hideFloat();

		event.cancelBubble = true;
		
		if (autoPostBack)
		{
			__doPostBack(id, '');
		}
	}

	function showFloat()
	{
		// positioning the div
		
		/* old
		var left = 0; 
		var top = 0;
		for (var e = ctrlCombo; e != null; e = e.offsetParent) 
		{
			left += parseInt(e.offsetLeft);
			top += parseInt(e.offsetTop);
		}
		ctrlFloat.style.left = left;
		ctrlFloat.style.top = top + ctrlCombo.offsetHeight + 3;
		*/
		var pos = LostinetWebCalcPosition(ctrlFloat, ctrlCombo);
		pos.top = pos.top + ctrlCombo.offsetHeight;
		
		LostinetWebAdjustMirror(ctrlFloat, ctrlCombo, pos);
		
		ctrlFloat.style.left = pos.left;
		ctrlFloat.style.top = pos.top;


		ctrlFloat.style.display = '';

		document.attachEvent('onmousedown', function() 
		{
			var src = event.srcElement;

			if (! ctrlFloat.contains(src) && ! ctrlCombo.contains(src)) 
			{
				hideFloat();
				ctrlTextBox.className = 'ci_combo_normal_item ci_combo_textbox';
			}
			
		});	
	}

	function hideFloat()
	{
		ctrlFloat.style.display = 'none';
		document.detachEvent('onmousedown');
	}
	
	//get the position of a element ( by the scroll offset )
	function LostinetWebGetScrollPostion(e)
	{
		var b=e.document.body;
		if(e==b)return {left:0,top:0};
		with(e.getBoundingClientRect())
		{
			return {left:b.scrollLeft+left,top:b.scrollTop+top};
		}
	}
	//get the position of a element ( by the client offset )
	function LostinetWebGetClientPosition(e)
	{
		var b=e.document.body;
		if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop};
		with(e.getBoundingClientRect())
		{
			return {left:left-b.clientLeft,top:top-b.clientTop};
		}
	}
	//get absolute or relative parent
	function LostinetWebGetStandParent(e)
	{
		for(var p=e.parentElement;p!=null;p=p.parentElement)
		{
			var sp=p.currentStyle.position;
			if(sp=='absolute'||sp=='relative')
				return p;
		}
		return e.document.body;
	}
	//calc the position of floate that relative to e
	function LostinetWebCalcPosition(floate,e)
	{
		var epos=LostinetWebGetScrollPostion(e);
		var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate));
		var s=LostinetWebGetStandParent(floate);
		return {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop};
	}
	//get the best position to put the floate
	function LostinetWebAdjustMirror(floate,e,pos)
	{
		//c:Client,f:floate,e:e,p:floate's StandParent,m:Mirror
		var cw=e.document.body.clientWidth;
		var ch=e.document.body.clientHeight;
		var fw=floate.offsetWidth;
		var fh=floate.offsetHeight;
		var ew=e.offsetWidth;
		var eh=e.offsetHeight;
		
		var ecpos=LostinetWebGetClientPosition(e);
		var empos={left:ecpos.left+ew/2,top:ecpos.top+eh/2};
		var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate));
		var fcpos=LostinetWebGetClientPosition(floate);
		var fmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2};
		
		//left<-->right
		if( (fmpos.left<empos.left) ? ((fmpos.left-fw/2<0)&&((empos.left*2-fmpos.left)+fw/2<=cw)) : ((fmpos.left+fw/2>cw)&&((empos.left*2-fmpos.left)-fw/2>=0)) )
			fmpos.left=empos.left*2-fmpos.left;
		
		//top<-->bottom
		if( (fmpos.top<empos.top) ? ((fmpos.top-fh/2<0)&&((empos.top*2-fmpos.top)+fh/2<=ch)) : ((fmpos.top+fh/2>ch)&&((empos.top*2-fmpos.top)-fh/2>=0)) )
			fmpos.top=empos.top*2-fmpos.top;
		
		pos.left=fmpos.left-pcpos.left-fw/2;
		pos.top=fmpos.top-pcpos.top-fh/2;
	}	
}