function DropDown(aWidth, aHeight, anImgFolder, aTargetDiv, aDirection)
{
	this.width = aWidth;
	this.height = aHeight;
	this.imgFolder = anImgFolder;
	this.targetDiv = aTargetDiv;
	this.displayingItems = false;
	this.selectedIndex = 0;
	this.itemsCount = 0;
	this.itemElementHeight = 25;
	this.itemsCanvasPageHeight = 100;
		
	if (aDirection != 3) { this.direction = 'ltr'; } else { this.direction = 'rtl';	}
	this.createContainerDiv();	
	this.items = new Array();
	
	if (navigator.appName.indexOf("Microsoft")!=-1) {
		this.browserType = "IE";
	}else if(navigator.appName == "Opera"){
		this.browserType = "Opera";
	}else{
		this.browserType = "Other";
	}
	
	this.arrowImgOff = document.createElement('img');
	this.arrowImgOff.arrowOff = this;
	this.arrowImgOff.src = this.imgFolder + "dropDown_off.jpg";
	this.arrowImgOff.style.cursor = 'pointer';
	this.arrowImgOff.style.position = 'absolute';
	this.arrowImgOff.style.top = 0 + 'px';
	if (this.direction == 'ltr') { this.arrowImgOff.style.right = 0 + 'px'; } else {this.arrowImgOff.style.left = 0 + 'px';}	
	this.arrowImgOff.style.zIndex = 6;	
	this.containerDiv.appendChild(this.arrowImgOff);
	//this.arrowImgOff.onload = function(event){this.arrowOff.onArrowOffLoadEvent(event);}
	this.arrowImgOff.onmouseover = function(event){this.arrowOff.onArrowOffOverEvent(event)};
	
	this.arrowImgOver = document.createElement('img');
	this.arrowImgOver.arrowOver = this;
	this.arrowImgOver.src = this.imgFolder + "dropDown_over.jpg";
	this.arrowImgOver.style.cursor = 'pointer';
	this.arrowImgOver.onload = function(event){this.arrowOver.onArrowOverLoadEvent(event);}
	this.arrowImgOver.onmouseout = function(event){this.arrowOver.onArrowOverOutEvent(event)};
	this.arrowImgOver.onclick = function(event){this.arrowOver.onArrowOverClickEvent(event)};
	
	this.arrowImgOn = document.createElement('img');
	this.arrowImgOn.arrowOn = this;
	this.arrowImgOn.src = this.imgFolder + "dropDown_on.jpg";
	this.arrowImgOn.style.cursor = 'pointer';
	this.arrowImgOn.onload = function(event){this.arrowOn.onArrowOnLoadEvent(event);}
	this.arrowImgOn.onclick = function(event){this.arrowOn.onArrowOnClickEvent(event)};	
	
	this.dropDownUpArrowImgOff = document.createElement('img');
	this.dropDownUpArrowImgOff.upArrowOff = this;
	this.dropDownUpArrowImgOff.src = this.imgFolder + "dropDown_upArrow_off.jpg";	
	this.dropDownUpArrowImgOff.style.width = 20 + 'px';
	this.dropDownUpArrowImgOff.style.height = 20 + 'px';
	this.dropDownUpArrowImgOff.style.cursor = 'pointer';
	this.dropDownUpArrowImgOff.style.display = 'none';
	this.dropDownUpArrowImgOff.onload = function(event){this.upArrowOff.onUpArrowLoadEvent(event);}
	this.dropDownUpArrowImgOff.onclick = function(event){this.upArrowOff.onUpArrowOnClickEvent(event)};	
	
	this.dropDownDownArrowImgOff = document.createElement('img');
	this.dropDownDownArrowImgOff.downArrowOff = this;
	this.dropDownDownArrowImgOff.src = this.imgFolder + "dropDown_downArrow_off.jpg";	
	this.dropDownDownArrowImgOff.style.width = 20 + 'px';
	this.dropDownDownArrowImgOff.style.height = 20 + 'px';	
	this.dropDownDownArrowImgOff.style.cursor = 'pointer';
	this.dropDownDownArrowImgOff.style.display = 'none';
	this.dropDownDownArrowImgOff.onload = function(event){this.downArrowOff.onDownArrowLoadEvent(event);}
	this.dropDownDownArrowImgOff.onclick = function(event){this.downArrowOff.onDownArrowOnClickEvent(event)};	
	
	this.itemsContainer = document.createElement('div');
	this.itemsContainer.style.width = 200 + 'px';
	this.itemsContainer.style.height = (this.itemsCanvasPageHeight+1) + 'px';	
	this.itemsContainer.style.position = 'absolute';
	this.itemsContainer.style.top = this.height + 'px';
	this.itemsContainer.style.right = 0 + 'px';	
	this.itemsContainer.style.display = 'none';
	this.itemsContainer.style.overflow = 'hidden';
	this.itemsContainer.style.zIndex = '15';
		
	this.itemsCanvasHeight = 0;
	this.itemsCanvasCurrentPos = 0;
	this.itemsCanvasPages = 0;
	this.itemsCanvasCurrentPage = 1;
	
	this.itemsContainerCanvas = document.createElement('div');
	this.itemsContainerCanvas.style.height = 0 + 'px';	
	this.itemsContainerCanvas.style.position = 'absolute';
	this.itemsContainerCanvas.style.top = 0 + 'px';
	this.itemsContainerCanvas.style.right = 0 + 'px';	
	this.itemsContainerCanvas.style.zIndex = '20';	
}

DropDown.prototype.createContainerDiv = function()
{
	// IE fix Borders are counted as part of width/height
	var offSet = 0;
	
	if (navigator.appName.indexOf("Microsoft")!=-1) 
	{
		offSet = 0;
	}
	else
	{
		offSet = 2;
	}
	
	this.containerDiv;
	this.containerDiv = document.createElement('div');
	this.containerDiv.style.width = this.width;
	this.containerDiv.style.height = this.height;
	this.containerDiv.style.border = 0 + 'px';
	this.containerDiv.style.borderColor = 'red';
	this.containerDiv.style.borderStyle = 'solid';
	this.containerDiv.style.position = 'absolute';
	this.containerDiv.style.top = 270 + 'px';
	this.containerDiv.style.left = 0 + 'px';
	this.containerDiv.style.zIndex = 10;
	this.containerDiv.id = 'itemsContainer';
	
	this.myContainerDivBorder = document.createElement('div');
	this.myContainerDivBorder.style.width = this.width - offSet;
	this.myContainerDivBorder.style.height = this.height - offSet;
	if (this.direction == 'ltr') 
	{ 
		this.myContainerDivBorder.style.textAlign = 'left'; 
	} 
	else 
	{
		this.myContainerDivBorder.style.textAlign = 'right';	
	}
	this.myContainerDivBorder.style.fontSize = 14 + 'px';
	this.myContainerDivBorder.style.fontFamily = 'serif';
	this.myContainerDivBorder.style.border = 1 + 'px';
	this.myContainerDivBorder.style.whiteSpace = 'nowrap';
	this.myContainerDivBorder.style.overflow = 'hidden';
	this.myContainerDivBorder.style.borderColor = '#000000';
	this.myContainerDivBorder.style.borderStyle = 'solid';
	this.myContainerDivBorder.style.backgroundColor = '#FFF4DB';
	this.myContainerDivBorder.style.position = 'absolute';
	this.myContainerDivBorder.style.top = 0 + 'px';
	this.myContainerDivBorder.style.left = 0 + 'px';
	this.myContainerDivBorder.id = 'itemsContainerBorder';
	
	this.containerDiv.appendChild(this.myContainerDivBorder);
	
}
DropDown.prototype.updateSelectedItemTitle = function()
{
	this.myContainerDivBorder.innerHTML = ' ' + this.items[this.selectedIndex].name + ' ';
}
DropDown.prototype.appendElement = function()
{	
	var targetDiv = document.getElementById(this.targetDiv);
	
	this.updateSelectedItemTitle();
		
	for ( i = 0; i < this.items.length; i++)
	{		
		var itemElement = document.createElement('div');
		itemElement.ddItems = this;		
		if (this.browserType == "IE") {
			itemElement.style.width = 118 + 'px';
		} else {
			itemElement.style.width = 113 + 'px';
		}
		itemElement.style.height = this.itemElementHeight + 'px';
		itemElement.style.textDecoration = 'none';
		if (this.direction == 'ltr') 
		{ 
			itemElement.style.textAlign = 'left'; 
			itemElement.style.paddingLeft = 3 + 'px';
		} 
		else 
		{
			itemElement.style.textAlign = 'right';
			itemElement.style.paddingRight = 3 + 'px';
		}
		itemElement.style.fontFamily = 'serif';
		itemElement.style.fontSize = '13px';
		itemElement.style.position = 'absolute';
		itemElement.style.right = 0 + 'px';
		itemElement.style.top = (i*this.itemElementHeight) + 'px';
		itemElement.style.border = 1 + 'px';
		itemElement.style.borderColor = '#FFE9B6';
		itemElement.style.borderStyle = 'solid';		
		itemElement.style.zIndex = 15;
		itemElement.style.cursor = 'pointer';
		itemElement.style.lineHeight = .85;
		//itemElement.style.whiteSpace = 'nowrap';
		itemElement.style.backgroundColor = '#FFF4DB';
		itemElement.link = this.items[i].value;
		itemElement.onclick = function(event){this.ddItems.onDdItemClickEvent(event)};
		itemElement.onmouseover = function(event){this.ddItems.onDdItemMouseOverEvent(event)};
		itemElement.onmouseout = function(event){this.ddItems.onDdItemMouseOutEvent(event)};	
		itemElement.innerHTML = this.items[i].name;
		
		this.itemsContainerCanvas.appendChild(itemElement);
	}
	this.itemsContainer.appendChild(this.itemsContainerCanvas);
	this.containerDiv.appendChild(this.itemsContainer);
	
	if (this.itemsCanvasHeight > this.itemsCanvasPageHeight)
	{
		this.dropDownDownArrowImgOff.style.display = '';
		
		this.itemsContainerLine = document.createElement('div');
		this.itemsContainerLine.style.width = 2 + 'px';
		this.itemsContainerLine.style.height = 95 + '%';	
		this.itemsContainerLine.style.position = 'absolute';
		this.itemsContainerLine.style.backgroundColor = '#A47A3A';
		this.itemsContainerLine.style.top = 2 + 'px';
		if (this.direction == 'ltr') { this.itemsContainerLine.style.right = 10 + 'px'; } else { this.itemsContainerLine.style.right = 108 + 'px'; }		
		this.itemsContainerLine.style.display = '';
		this.itemsContainerLine.style.zIndex = '21';
		this.itemsContainer.appendChild(this.itemsContainerLine);
	}
	
	if ( targetDiv.childNodes.length > 0) { targetDiv.removeChild(targetDiv.firstChild);}
	targetDiv.appendChild(this.containerDiv);
		
}
DropDown.prototype.onDdItemClickEvent = function (evt)
{
	this.itemsContainer.style.display = 'none';
	this.arrowImgOff.style.zIndex = 5;
	this.arrowImgOver.style.zIndex = 4;
	this.arrowImgOn.style.zIndex = 3;
	
	var target;
	if (this.browserType == "IE"){
		target = event.srcElement;
	}else{
		target = evt.target;
	}
	
	target.style.backgroundColor = 'blue';
	eval(target.link);
	
}
DropDown.prototype.onDdItemMouseOverEvent = function (evt)
{
	var target;
	if (this.browserType == "IE"){
		target = event.srcElement;
	}else{
		target = evt.target;
	}
	
	target.style.backgroundColor = '#CC3300';
	target.style.color = '#FFFFFF';
}
DropDown.prototype.onDdItemMouseOutEvent = function (evt)
{
	var target;
	if (this.browserType == "IE"){
		target = event.srcElement;
	}else{
		target = evt.target;
	}
	
	target.style.backgroundColor = '#FFF4DB';
	target.style.color = '#000000';
}
DropDown.prototype.onArrowOffLoadEvent = function (evt)
{
	this.arrowImgOff.style.position = 'absolute';
	this.arrowImgOff.style.top = 0 + 'px';
	if (this.direction == 'ltr') { this.arrowImgOff.style.right = 0 + 'px'; } else {this.arrowImgOff.style.left = 0 + 'px';}	
	this.arrowImgOff.style.zIndex = 5;	
	this.containerDiv.appendChild(this.arrowImgOff);	
}
DropDown.prototype.onArrowOverLoadEvent = function (evt)
{
	this.arrowImgOver.style.position = 'absolute';
	this.arrowImgOver.style.top = 0 + 'px';
	if (this.direction == 'ltr') { this.arrowImgOver.style.right = 0 + 'px'; } else {this.arrowImgOver.style.left = 0 + 'px';}
	this.arrowImgOver.style.zIndex = 4;	
	this.containerDiv.appendChild(this.arrowImgOver);	
}
DropDown.prototype.onArrowOnLoadEvent = function (evt)
{
	this.arrowImgOn.style.position = 'absolute';
	this.arrowImgOn.style.top = 0 + 'px';
	if (this.direction == 'ltr') { this.arrowImgOn.style.right = 0 + 'px'; } else {this.arrowImgOn.style.left = 0 + 'px';}
	this.arrowImgOn.style.zIndex = 3;	
	this.containerDiv.appendChild(this.arrowImgOn);	
}
DropDown.prototype.onUpArrowLoadEvent = function (evt)
{
	this.dropDownUpArrowImgOff.style.position = 'absolute';
	this.dropDownUpArrowImgOff.style.top = 1 + 'px';
	if (this.direction == 'ltr') { this.dropDownUpArrowImgOff.style.right = 1 + 'px'; } else {this.dropDownUpArrowImgOff.style.right = 98 + 'px';}
	this.dropDownUpArrowImgOff.style.zIndex = 22;	
	this.itemsContainer.appendChild(this.dropDownUpArrowImgOff);	
}
DropDown.prototype.onDownArrowLoadEvent = function (evt)
{
	this.dropDownDownArrowImgOff.style.position = 'absolute';
	this.dropDownDownArrowImgOff.style.top = 80 + 'px';
	if (this.direction == 'ltr') { this.dropDownDownArrowImgOff.style.right = 1 + 'px'; } else {this.dropDownDownArrowImgOff.style.right = 98 + 'px';}
	this.dropDownDownArrowImgOff.style.zIndex = 22;	
	this.itemsContainer.appendChild(this.dropDownDownArrowImgOff);	
}
DropDown.prototype.onDownArrowOnClickEvent = function (evt)
{
	if (this.itemsCanvasCurrentPos > ((this.itemsCanvasHeight * -1) + this.itemsCanvasPageHeight)) 
	{ 
		this.itemsCanvasCurrentPos = this.itemsCanvasCurrentPos - this.itemsCanvasPageHeight;	
		
		if ((this.itemsCanvasCurrentPos*-1) >= (this.itemsCanvasHeight - (this.itemsCanvasPageHeight)))
		{
			this.dropDownDownArrowImgOff.style.display = 'none';
		}
	}	
	this.itemsContainerCanvas.style.top = this.itemsCanvasCurrentPos + 'px';
	this.dropDownUpArrowImgOff.style.display = '';	
}
DropDown.prototype.onUpArrowOnClickEvent = function (evt)
{
	if (this.itemsCanvasCurrentPos < 0)	
	{ 
		this.itemsCanvasCurrentPos = this.itemsCanvasCurrentPos + this.itemsCanvasPageHeight;	
		
		if (this.itemsCanvasCurrentPos >= 0)	
		{
			this.dropDownUpArrowImgOff.style.display = 'none';
		}
	}	
	this.dropDownDownArrowImgOff.style.display = '';
	this.itemsContainerCanvas.style.top = this.itemsCanvasCurrentPos + 'px';
}
DropDown.prototype.onArrowOffOverEvent = function (evt)
{
	this.arrowImgOff.style.zIndex = 4;
	this.arrowImgOver.style.zIndex = 5;
	this.arrowImgOn.style.zIndex = 3;
}
DropDown.prototype.onArrowOverOutEvent = function (evt)
{
	if ( this.displayingItems == false )
	{
		this.arrowImgOff.style.zIndex = 5;
		this.arrowImgOver.style.zIndex = 4;
		this.arrowImgOn.style.zIndex = 3;
	}
}
DropDown.prototype.onArrowOverClickEvent = function (evt)
{
	this.arrowImgOff.style.zIndex = 3;
	this.arrowImgOver.style.zIndex = 4;
	this.arrowImgOn.style.zIndex = 5;	
	
	this.displayingItems = true;
	
	this.displayItems();
}
DropDown.prototype.onArrowOnClickEvent = function (evt)
{
	this.arrowImgOff.style.zIndex = 5;
	this.arrowImgOver.style.zIndex = 4;
	this.arrowImgOn.style.zIndex = 3;
	
	this.displayingItems = false;
	this.itemsContainer.style.display = 'none';
}
DropDown.prototype.displayItems = function ()
{
	this.itemsContainer.style.display = '';
}
DropDown.prototype.addItem = function (aLink, aContent)
{
	var anItem = new Object();
	anItem.value = aLink;
	anItem.name = aContent;
	
	this.itemsCanvasHeight = this.itemsCanvasHeight + this.itemElementHeight;
	this.itemsContainerCanvas.style.height = this.itemsCanvasHeight + 'px';	
		
	this.itemsCanvasPages = Math.ceil(this.itemsCanvasHeight / this.itemsCanvasPageHeight);
	
	this.items[this.itemsCount] = anItem;
	this.itemsCount++;
}
DropDown.prototype.updateItem = function (anIndex, aLink, aContent)
{
	var anItem = new Object();
	anItem.value = aLink;
	anItem.name = aContent;
		
	this.items[anIndex] = anItem;
}