function retrieveComputedStyle(element,styleProperty){
	var computedStyle=null;
	if(typeof element.currentStyle != "undefined"){
		computedStyle=element.currentStyle;
	}else{
		computedStyle=document.defaultView.getComputedStyle(element,null);
	}
	return computedStyle[styleProperty];
} 
function showOptions(){
	if(document.getElementById('subjectList').style.display=='block'){
		document.getElementById('subjectList').style.display='none';
		document.getElementById('selectFix').style.display='none';
	}else{
		curX=0;
		curY=0;
		var theElement=document.getElementById('subject');
		var thisheight=parseInt(retrieveComputedStyle(theElement,"height"));
		var thiswidth=parseInt(retrieveComputedStyle(theElement,"width"));
		while(theElement!=null){
			curX+=theElement.offsetLeft;
			curY+=theElement.offsetTop;
			theElement=theElement.offsetParent;
		}
		curY+=thisheight+5;
		
		document.getElementById('selectFix').style.zIndex=4;
		document.getElementById('selectFix').style.width=thiswidth+"px";
		document.getElementById('selectFix').style.left=curX+"px";
		document.getElementById('selectFix').style.top=curY+"px";
		document.getElementById('selectFix').style.display='list-item';
		
		document.getElementById('subjectList').style.zIndex=5;
		document.getElementById('subjectList').style.width=thiswidth+"px";
		document.getElementById('subjectList').style.left=curX+"px";
		document.getElementById('subjectList').style.top=curY+"px";
		document.getElementById('subjectList').style.display='block';
	}
}

function selectSubject(details){
	document.getElementById('subject').value=details;
	showOptions();
}