SettingGroupObj = function(settingContainer, settingName)
{
	this.titleArea = document.createElement("h3");
	this.titleArea.className = "SettingGroupObj_TitleArea";

	this.titleName = document.createElement("span");
	this.titleName.className = "SettingGroupObj_TitleName";

	this.titleName.innerHTML = settingName;
	this.titleArea.appendChild(this.titleName);
	
	this.settingContainer = settingContainer;
	
	// add title line
	settingContainer.appendChild(this.titleArea);
}

SettingGroupObj.prototype = 
{
	addContent:function(newContent)
	{
		//newContent.className = "SettingGroupObj_Content";
		this.settingContainer.appendChild(newContent);
	}
}


TabsContainerObj = function(container)
{
	// Selected tab
	this.selectedTabIndex = 0;
	
	// Tabs variables
	this.tabsArray = new Array();
	
	// Contents variables
	this.contentsArray = new Array();

	// overall container
	this.divContainer = container;
	
	// tabs area background
	this.divTabsAreaBg = document.createElement("div");
	this.divTabsAreaBg.className = "TabsContainerObj_TabsAreaBg";
	this.divContainer.appendChild(this.divTabsAreaBg);
	
	// tabs area
	this.divTabsArea = document.createElement("div");
	this.divTabsArea.className = "TabsContainerObj_TabsArea";
	this.divContainer.appendChild(this.divTabsArea);
	
	// content area
	this.divTabContent = document.createElement("div");
	this.divTabContent.className = "TabsContainerObj_TabContent";
	this.divContainer.appendChild(this.divTabContent);
}

TabsContainerObj.prototype = 
{
	addTab:function(name, content)
	{
		// --TAB NAME--
		var newTab = document.createElement("span");
		
		var self = this;
		var tabIndex = this.tabsArray.length;
		newTab.onclick = function() {self.switchTab(tabIndex)};
		
		// apply differences between selected and unselected tabs
		if (this.tabsArray.length == 0)
		{
			// selected tab
			newTab.className = "TabsContainerObj_SelectedTab";
		}
		else
		{
			// unselected tab
			newTab.className = "TabsContainerObj_UnselectedTab";
			newTab.onmouseenter = function() {self.mouseEnterTab(tabIndex)};
			newTab.onmouseleave = function() {self.mouseLeaveTab(tabIndex)};
		}
		
		newTab.innerHTML = name;
		this.divTabsArea.appendChild(newTab);		

		// -- CONTENT -- 
		var newContent = content;
		
		// apply differences between selected and unselected tabs
		if (this.tabsArray.length == 0)
		{
			newContent.className = "TabsContainerObj_SelectedContent"; 
		}
		else
		{
			newContent.className = "TabsContainerObj_UnselectedContent"; 
		}
		
		this.divTabContent.appendChild(newContent);
		
		// add tab name and content to arrays
		this.tabsArray.push(newTab);
		this.contentsArray.push(newContent);
	},
	
	switchTab:function(newTabIndex)
	{
		this.contentsArray[this.selectedTabIndex].className = "TabsContainerObj_UnselectedContent"; 
		this.tabsArray[this.selectedTabIndex].className = "TabsContainerObj_UnselectedTab"; 
		var tabIndex = this.selectedTabIndex;
		var self = this;
		this.tabsArray[this.selectedTabIndex].onmouseenter = function() {self.mouseEnterTab(tabIndex)};
		this.tabsArray[this.selectedTabIndex].onmouseleave = function() {self.mouseLeaveTab(tabIndex)};
		this.selectedTabIndex = newTabIndex;
		this.contentsArray[this.selectedTabIndex].className = "TabsContainerObj_SelectedContent"; 
		this.tabsArray[this.selectedTabIndex].className = "TabsContainerObj_SelectedTab"; 
		this.tabsArray[this.selectedTabIndex].onmouseenter = "";
		this.tabsArray[this.selectedTabIndex].onmouseleave = "";
	},
	
	mouseEnterTab:function(tabIndex)
	{ 
		this.tabsArray[tabIndex].className = "TabsContainerObj_MouseOverTab"; 
	},
	
	mouseLeaveTab:function(tabIndex)
	{
		this.tabsArray[tabIndex].className = "TabsContainerObj_UnselectedTab"; 
	}
}


OptionObj = function(localizedName, value, img)
{
	this.localizedName = localizedName;
	
	if (value !== undefined)
	{
		this.value = value;
	}
	
	if (img !== undefined)
	{
		this.img = img;
	}
}


SelectorWithImgObj = function()
{
	this.container = document.createElement("div");
	this.container.className = "SelectorWithImgObj_Container";
	
	this.imgContainer = document.createElement("img");
	this.imgContainer.className = "SelectorWithImgObj_ImgContainer";
	this.container.appendChild(this.imgContainer);
	
	this.container.appendChild(document.createElement("br"));
	this.container.appendChild(document.createElement("br"));
		
	var self = this;
	
	this.imgPrevious = document.createElement("img");
	this.imgPrevious.id = "Previous";
	this.imgPrevious.src = "icons/settings/settings_left_disabled.png";
	this.imgPrevious.className = "SelectorWithImgObj_ImgButtons";
	this.imgPrevious.onmouseenter = function() {self.buttonOnMouseEnter()};
	this.imgPrevious.onmouseleave = function() {self.buttonOnMouseLeave()};
	this.imgPrevious.onmousedown = function() {self.buttonOnMouseDown()};
	this.imgPrevious.onmouseup = function() {self.buttonOnMouseUp()};
	this.container.appendChild(this.imgPrevious);
	
	this.optionName = document.createElement("span");
	this.optionName.className = "SelectorWithImgObj_LocalizedOption";
	this.container.appendChild(this.optionName);
	
	this.imgNext = document.createElement("img");
	this.imgNext.id = "Next";
	this.imgNext.src = "icons/settings/settings_right_disabled.png";
	this.imgNext.className = "SelectorWithImgObj_ImgButtons";
	this.imgNext.onmouseenter = function() {self.buttonOnMouseEnter()};
	this.imgNext.onmouseleave = function() {self.buttonOnMouseLeave()};
	this.imgNext.onmousedown = function() {self.buttonOnMouseDown()};
	this.imgNext.onmouseup = function() {self.buttonOnMouseUp()};
	this.container.appendChild(this.imgNext);
	
	this.selectedOption = -1;
	
	this.options = new Array();
}

SelectorWithImgObj.prototype =
{
	addOption:function(newOption)
	{
		if (this.options.length == 0)
		{
			this.selectedOption = 0;
		}
		else if (this.options.length == 1)
		{
			this.imgNext.src = "icons/settings/settings_right_rest.png";
		}
		
		this.options.push(newOption);
		this.refresh();
	},
	
	refresh:function()
	{
		this.imgContainer.src = this.options[this.selectedOption].img;
		this.optionName.innerHTML = this.options[this.selectedOption].localizedName + " (" + (this.selectedOption + 1) + "/" + this.options.length + ")";
	},
	
	getDiv:function()
	{
		return this.container;
	},
	
	getValue:function()
	{
		return this.options[this.selectedOption].value;
	},
	
	setCurrentValue:function(currentValue)
	{
		for (index in this.options)
		{
			if (this.options[index].value == currentValue)
			{
				this.selectedOption = Number(index);
				break;
			}
		}
		
		if (this.selectedOption == (this.options.length - 1))
		{
			this.imgNext.src = "icons/settings/settings_right_disabled.png";
			this.imgPrevious.src = "icons/settings/settings_left_rest.png";
		}
		else if (this.selectedOption > 0 && this.selectedOption < (this.options.length - 1))
		{
			this.imgNext.src = "icons/settings/settings_right_rest.png";
			this.imgPrevious.src = "icons/settings/settings_left_rest.png";
		}
		else if (this.selectedOption == 0)
		{
			this.imgNext.src = "icons/settings/settings_right_rest.png";
			this.imgPrevious.src = "icons/settings/settings_left_disabled.png";
		}
		
		this.refresh();
	},
	
	next:function()
	{
		
		this.selectedOption++;
		this.refresh();
		
		if (this.selectedOption == (this.options.length - 1))
		{
			this.imgNext.src = "icons/settings/settings_right_disabled.png";
		}
		else if (this.selectedOption == 1)
		{
			this.imgPrevious.src = "icons/settings/settings_left_rest.png";
		}
	},
	
	previous:function()
	{
		this.selectedOption--;
		this.refresh();
		
		if (this.selectedOption == 0)
		{
			this.imgPrevious.src = "icons/settings/settings_left_disabled.png";
		}
		else if (this.selectedOption == this.options.length - 2)
		{
			this.imgNext.src = "icons/settings/settings_right_rest.png";
		}
	},
	
	buttonOnMouseEnter:function()
	{
		if (event.srcElement.id == "Previous" && this.selectedOption != 0)
		{
			this.imgPrevious.src = "icons/settings/settings_left_hover.png";
		}
		else if (event.srcElement.id == "Next" && this.selectedOption != this.options.length - 1)
		{
			this.imgNext.src = "icons/settings/settings_right_hover.png";
		}
	},
	
	buttonOnMouseLeave:function()
	{
		if (event.srcElement.id == "Previous" && this.selectedOption != 0)
		{
			this.imgPrevious.src = "icons/settings/settings_left_rest.png";
		}
		else if (event.srcElement.id == "Next" && this.selectedOption != this.options.length - 1)
		{
			this.imgNext.src = "icons/settings/settings_right_rest.png";
		}
	},
	
	buttonOnMouseUp:function()
	{
		if (event.srcElement.id == "Previous" && this.selectedOption != 0)
		{
			this.imgPrevious.src = "icons/settings/settings_left_hover.png";
			this.previous();
		}
		else if (event.srcElement.id == "Next" && this.selectedOption != this.options.length - 1)
		{
			this.imgNext.src = "icons/settings/settings_right_hover.png";
			this.next();
		}
	},
	
	buttonOnMouseDown:function()
	{
		if (event.srcElement.id == "Previous" && this.selectedOption != 0)
		{
			this.imgPrevious.src = "icons/settings/settings_left_pressed.png";
		}
		else if (event.srcElement.id == "Next" && this.selectedOption != this.options.length - 1)
		{
			this.imgNext.src = "icons/settings/settings_right_pressed.png";
		}
	}
}

RadioSelectorObj = function(radioGroupName)
{
	this.radioGroupName = radioGroupName;
	this.container = document.createElement("div");
	this.container.className = "RadioSelectorObj_Container";
	
	this.selectedOption = -1;
	this.selectedValue = null;
	
	this.options = new Array();
	this.radioItems = new Array();

	this.onSelectedValueChanged = null;
	
}

RadioSelectorObj.prototype =
{
	addOption:function(newOption)
	{
		// add option to list
		this.options.push(newOption);
		
		// create div for option
		var optionDiv = document.createElement("div");
		// allow to click on text and select option
		var self = this;
		var currentOptionValue = this.options[this.options.length - 1].value;
		optionDiv.onclick = function() {self.setCurrentValue(currentOptionValue)};
		
		// create radio button
		var newOption = document.createElement("<input name='" + this.radioGroupName + "'>");
		newOption.type = "radio";
		// add new option button reference to list
		this.radioItems.push(newOption);
		
		// create node for localized text
		var localizedText = document.createElement("span");
		localizedText.innerHTML = this.options[this.options.length - 1].localizedName;

		// add button and localized text to div
		optionDiv.appendChild(newOption);
		optionDiv.appendChild(localizedText);

		// set first as default selected
		if (this.options.length == 1)
		{
			newOption.defaultChecked = true;
			this.selectedOption = 0;
		}
		
		// add option to container
		this.container.appendChild(optionDiv);

		// wire-up event to detect when the option is selected
		if (this.onSelectedValueChanged != null)
		{
			newOption.onpropertychange = function() {self.optionPropertyChange()};
		}
	},
	
	getDiv:function()
	{
		// return container div
		return this.container;
	},
	
	getValue:function()
	{
		// return currently selected value
		for (index in this.radioItems)
		{
			if (this.radioItems[index].checked)
			{
				this.selectedOption = Number(index);
				break;
			}
		}
		
		return this.options[this.selectedOption].value;
	},
	
	setCurrentValue:function(currentValue)
	{
		for (index in this.options)
		{
			if (this.options[index].value == currentValue)
			{
				this.selectedOption = Number(index);
				break;
			}
		}

		this.radioItems[this.selectedOption].checked = true;
	},

	optionPropertyChange:function()
	{
		if (event.propertyName == "checked" && event.srcElement.checked == true)
		{
			this.selectedValue = this.getValue();
			this.onSelectedValueChanged(this);			
		}
	}
}

StatusDropDownObj = function(defaultFixedText)
{
	this.container = document.createElement("div");
	this.container.className = "StatusDropDownObj_Container";
	
	
	
	this.currentValueContainer = document.createElement("div");
	this.currentValueContainer.className = "StatusDropDownObj_CurrentValueContainer_OnMouseLeave";
	var self = this;
	this.currentValueContainer.onmouseenter = function() {self.dropDownOnMouseEnter()};
	this.currentValueContainer.onmouseleave = function() {self.dropDownOnMouseLeave()};
	this.currentValueContainer.onmouseup = function() {self.dropDownOnMouseUp()};
	this.currentValueContainer.onmousedown = function() {self.dropDownOnMouseDown()};
	this.currentValueContainer.onclick = function() {self.dropDownOnClick()};
	this.container.appendChild(this.currentValueContainer);
	
	this.fixedText = document.createElement("span");
	this.currentText = defaultFixedText; //used for resizing
	if (defaultFixedText !== undefined)
	{
		this.fixedText.innerHTML = defaultFixedText;
	}
	this.currentValueContainer.appendChild(this.fixedText);
	
	this.currentValue = document.createElement("span");
	this.currentValueContainer.appendChild(this.currentValue);
	
	this.dropDownArrow = document.createElement("img");
	this.dropDownArrow.src = "icons/selectorArrow.png";
	this.dropDownArrow.className = "StatusDropDownObj_Arrow";
	this.currentValueContainer.appendChild(this.dropDownArrow);
	
	
	this.optionsContainer = document.createElement("div");
	this.optionsContainer.className = "StatusDropDownObj_OptionsContainer_Closed";

	this.container.appendChild(this.optionsContainer);
	
	this.options = new Array();
	this.dropDownItems = new Array();
	
	// Events
	this.onclick = null;
	this.value = null;
}

StatusDropDownObj.prototype =
{
	addOption:function(newOption)
	{
		// add option to list
		this.options.push(newOption);
		
		// create div for option
		var optionDiv = document.createElement("div");
		optionDiv.className = "StatusDropDownObj_Option_MouseLeave";
		// allow to click on text and select option
		var self = this;
		var currentOptionValue = this.options[this.options.length - 1].value;
		optionDiv.onclick = function() {self.optionOnClick(currentOptionValue)};
		
		// create radio button
		var newOption = document.createElement("div");
		//newOption.className = "DropDownObj_Item_MouseOut";
		// add new option button reference to list
		this.dropDownItems.push(newOption);
		
		// create node for localized text
		var localizedText = document.createElement("span");
		localizedText.innerHTML = this.options[this.options.length - 1].localizedName;

		// add button and localized text to div
		optionDiv.appendChild(newOption);
		optionDiv.appendChild(localizedText);
		
		// add events to option div
		optionDiv.onmouseenter = function() {self.optionOnMouseEnter()};
		optionDiv.onmouseleave = function() {self.optionOnMouseLeave()};
		
		// add option to container
		this.optionsContainer.appendChild(optionDiv);
	},
	
	openDropDown:function()
	{
		this.optionsContainer.className = "StatusDropDownObj_OptionsContainer_Open";
	},
	
	closeDropDown:function()
	{
		this.optionsContainer.className = "StatusDropDownObj_OptionsContainer_Closed";
	},
	
	isDropDownOpen:function()
	{
		return this.optionsContainer.className == "StatusDropDownObj_OptionsContainer_Open";
	},
	
	dropDownOnMouseEnter:function()
	{
		this.dropDownArrow.className = "StatusDropDownObj_Arrow_OnMouseEnter";
		//this.optionsContainer.className = "StatusDropDownObj_OptionsContainer_Open";
	},
	
	dropDownOnMouseLeave:function()
	{
		this.dropDownArrow.className = "StatusDropDownObj_Arrow";
		//this.optionsContainer.className = "StatusDropDownObj_OptionsContainer_Close";
	},
	
	dropDownOnMouseUp:function()
	{
		//event.srcElement.style.border = "solid 1px blue";
		//this.openDropDown();
		
	},
	
	dropDownOnMouseDown:function()
	{
		//event.srcElement.style.border = "";
		
	},
	
	dropDownOnClick:function()
	{
		
		if (this.isDropDownOpen())
		{
			//this.currentValueContainer.releaseCapture();
			this.closeDropDown();
		}
		else
		{
			//this.container.setCapture(false);
			var self = this;
			//this.container.onclick = function() {self.dropDownOnClick()};
			this.openDropDown();
		}
	},
	
	optionOnMouseEnter:function()
	{
		event.srcElement.className = "StatusDropDownObj_Option_MouseEnter";
	},
	
	optionOnMouseLeave:function()
	{
		event.srcElement.className = "StatusDropDownObj_Option_MouseLeave";
	},
	
	optionOnClick:function(currentOptionValue)
	{
		this.setCurrentValue(currentOptionValue);
		this.closeDropDown();
		
		if (this.onclick != null)
		{
			this.onclick();
		}
	},
	

	
	setFixedText:function(newFixedText)
	{
		this.currentText = newFixedText;
		this.fixedText.innerHTML = "";
		this.fixedText.appendChild(document.createTextNode(newFixedText));
		
		if (this.container.offsetHeight > 20 && this.currentText != null)
		{
			var currentName = this.currentText.substr(0, this.currentText.length - 1);
			this.fixedText.innerHTML = currentName + "..";
			
			while (this.container.offsetHeight > 20)
			{
				currentName = currentName.substr(0, currentName.length - 1);
				this.fixedText.innerHTML =  currentName + "..";
			}
		}
	},
	
	getDiv:function()
	{
		// return container div
		return this.container;
	},
	
	
	setCurrentValue:function(currentValue)
	{
		this.value = currentValue;
		
		for (index in this.options)
		{
			if (this.options[index].value == currentValue)
			{
				this.currentValue.innerHTML = "&nbsp;&nbsp;(" + this.options[index].localizedName + ")&nbsp;&nbsp;";
				break;
			}
		}
	}
}


NumberBoxObj = function(option)
{
	this.container = document.createElement("div");
	this.container.className = "NumberBoxObj_Container";
	
	// create div for option
	var optionDiv = document.createElement("div");
	
	// create checkbox
	this.textbox = document.createElement("input");
	this.textbox.type = "text";
	this.textbox.className = "NumberBoxObj_TextBox";
	
	// check min when value is changed
	var self = this;
	this.textbox.onkeyup = function() {self.onChangeNumber()};
	
	// add button and localized text to div
	optionDiv.appendChild(this.textbox);
	optionDiv.appendChild(document.createTextNode(option.localizedName));
	
	// show warning if min is passed
	this.warning = document.createElement("div");
	this.warning.className = "NumberBoxObj_Warning";
	
	// add option to container
	this.container.appendChild(optionDiv);
	this.container.appendChild(this.warning);
}

NumberBoxObj.prototype =
{	
	getDiv:function()
	{
		// return container div
		return this.container;
	},
	
	getValue:function()
	{
		// return current value
		if (this.minValue !== undefined && this.textbox.value < this.minValue)
		{
			return this.minValue;
		}
		else if (this.maxValue !== undefined && this.textbox.value > this.maxValue)
		{
			return this.maxValue;
		}
		
		return this.textbox.value;
	},
	
	setCurrentValue:function(currentValue)
	{
		this.currentValue = currentValue;
		this.textbox.value = currentValue;
	},
	
	setMin:function(minValue)
	{
		this.minValue = minValue;
	},
	
	setMax:function(maxValue)
	{
		this.maxValue = maxValue;
	},
	
	setWarning:function(warningText)
	{
		this.warningText = warningText;
	},
	
	onChangeNumber:function()
	{
	    if (isNaN(this.textbox.value))
	    {
	        this.textbox.value = this.currentValue;
	    }
	    else if (this.minValue !== undefined && this.textbox.value < this.minValue)
	    {
	        this.textbox.className = "NumberBoxObj_TextBox_Warning";
	        this.warning.innerHTML = this.warningText;
	        this.currentValue = this.textbox.value;
	    }
	    else
	    {
	        this.textbox.className = "NumberBoxObj_TextBox";
	        this.warning.innerHTML = "";
	        this.currentValue = this.textbox.value;
	    }
	}
}

CheckboxObj = function(option)
{
	this.container = document.createElement("div");
	this.container.className = "CheckboxObj_Container";
	
	// create div for option
	var optionDiv = document.createElement("div");
	
	// create checkbox
	var newOption = document.createElement("input");
	newOption.type = "checkbox";
	// add new option button reference to list
	this.checkbox = newOption;
	
	// allow to click on text and select option
	var self = this;
	optionDiv.onclick = function() {self.checkbox.click()};
	
	// add button and localized text to div
	optionDiv.appendChild(newOption);
	optionDiv.appendChild(document.createTextNode(option.localizedName));
	
	// add option to container
	this.container.appendChild(optionDiv);
}

CheckboxObj.prototype =
{	
	getDiv:function()
	{
		// return container div
		return this.container;
	},
	
	getValue:function()
	{
		// return current value
		if (this.checkbox.checked)
		{
			return 1;
		}
		
		return 0;
	},
	
	setCurrentValue:function(currentValue)
	{
		if (currentValue == 0)
		{
			this.checkbox.checked = false;
		}
		else
		{
			this.checkbox.checked = true;
		}
	},

	disable:function()
	{
		this.container.disabled = true;
	},

	enable:function()
	{
		this.container.disabled = false;
	}
}

TooltipObj = function(animated, text)
{
	this.animated = animated;
	this.delayTimer = null;
	this.intervalTimer = null;
	this.animationDirection = 1;
	this.opacity = 1.0;

	this.tooltipDiv = document.createElement("div");
	this.tooltipDiv.className = "TooltipObj_TooltipArea";
	this.tooltipDiv.style.display = "none";

	if (text !== undefined)
	{
		this.tooltipDiv.appendChild(document.createTextNode(text));
	}

	document.body.appendChild(this.tooltipDiv);
}

TooltipObj.ANIMATION_DELTA = 0.1;
TooltipObj.ANIMATION_INTERVAL = 25;
TooltipObj.SHOW_DELAY = 500;

TooltipObj.prototype =
{
	setText: function(text)
	{
		this.tooltipDiv.innerHTML = "";
		this.tooltipDiv.appendChild(document.createTextNode(text));
	},

	setOpacity: function(opacity)
	{
		if (opacity > 1.0)
		{
			this.opacity = 1.0;
		}
		else if (opacity < 0.0)
		{
			this.opacity = 0.0;
		}
		else
		{
			this.opacity = opacity;
		}

		this.tooltipDiv.style.filter = "alpha(opacity=" + String(Math.round(this.opacity * 10000)/100) + ")";
	},

	show: function(x, y, text)
	{
		if (text !== undefined)
		{
			this.setText(text);
		}

		this.tooltipDiv.style.left = x;
		this.tooltipDiv.style.top = y;
		this.tooltipDiv.style.display = "block";

		if (this.animated)
		{
			if (this.intervalTimer != null)
			{
				clearInterval(this.intervalTimer);
				this.intervalTimer = null;
			}

			this.setOpacity(0.0);
			this.animationDirection = 1;

			var self = this;
			this.intervalTimer = setInterval(function() {self.animate()}, TooltipObj.ANIMATION_INTERVAL);
		}
	},

	showDelayed: function(x, y, text)
	{
		if (this.delayTimer != null)
		{
			clearTimeout(this.delayTimer);
			this.delayTimer = null;
		}

		var self = this;
		this.delayTimer = setTimeout(function() {self.show(x, y, text)}, TooltipObj.SHOW_DELAY);
	},

	hide: function()
	{
		if (this.delayTimer != null)
		{
			clearTimeout(this.delayTimer);
			this.delayTimer = null;
		}

		if (this.intervalTimer != null)
		{
			clearInterval(this.intervalTimer);
			this.intervalTimer = null;
		}

		if (this.animated)
		{
			this.animationDirection = -1;

			var self = this;
			this.intervalTimer = setInterval(function() {self.animate()}, TooltipObj.ANIMATION_INTERVAL);
		}
		else
		{
			this.tooltipDiv.style.display = "none";
		}
	},

	animate: function()
	{
		if (this.animationDirection == 1 && this.opacity < 1.0)
		{
			this.setOpacity(this.opacity + TooltipObj.ANIMATION_DELTA);
		}
		else if (this.animationDirection == -1 && this.opacity > 0.0)
		{
			this.setOpacity(this.opacity - TooltipObj.ANIMATION_DELTA);
		}
		else
		{
			this.animationEnd();
		}
	},

	animationEnd: function()
	{
		if (this.animationDirection == -1)
		{
			this.tooltipDiv.style.display = "none";
		}
		
		if (this.intervalTimer != null)
		{
			
			clearInterval(this.intervalTimer);
			this.intervalTimer = null;
			
		}
	}
}


InfoBarObj = function(parentDiv, message)
{
	// divs
	this.parentDiv = parentDiv;
	this.resizeDiv = null;
	
	// animation variables
	this.animationDirection = 1;
	this.intervalTimer = null;
	
	// reference to self
	var self = this;
	
	// create containing div
	this.infoBarDiv = document.createElement("div");
	this.infoBarDiv.className = "InfoBarObj";
	this.infoBarDiv.onclick = function() {self.click()};
	this.parentDiv.insertAdjacentElement("afterBegin", this.infoBarDiv);
	
	this.infoBarTextDiv = document.createElement("div");
	//this.infoBarTextDiv.style.position = "relative";
	this.infoBarDiv.appendChild(this.infoBarTextDiv);
	
	var infoBarText = "";            
	if (message !== undefined)
	{
		infoBarText = message;
	}
	this.infoBarTextDiv.appendChild(document.createTextNode(infoBarText));
	this.infoBarHeight = this.infoBarDiv.offsetHeight;
	this.height = 0;
	this.infoBarDiv.style.display = "none";

	this.onResize = null;
	this.onclick = null;
	this.onDoubleClick = null;
}

InfoBarObj.ANIMATION_DELTA = 2;
InfoBarObj.ANIMATION_INTERVAL = 5000;

InfoBarObj.prototype =
{
	setMessage:function(message)
	{
		this.infoBarTextDiv.innerHTML = "";
		this.infoBarTextDiv.appendChild(document.createTextNode(message));

		var currDisplay = this.infoBarDiv.style.display;
		this.infoBarDiv.style.display = "block";
		this.infoBarHeight = this.infoBarDiv.offsetHeight;
		this.infoBarDiv.style.display = currDisplay;
	},

	show:function()
	{
		this.resize(this.infoBarHeight);
	},
	
	showAnimated:function()
	{
		this.animationDirection = 1;
		
		var self = this;
		this.intervalTimer = setInterval(function() {self.animate()}, InfoBar.ANIMATION_INTERVAL);  
	},  
	
	hide:function()
	{
		this.resize(0);
	},
	
	hideAnimated:function()
	{
		this.animationDirection = -1;
		
		var self = this;
		this.intervalTimer = setInterval(function() {self.animate()}, InfoBar.ANIMATION_INTERVAL);
	},
	
	animate:function()
	{
		if (this.animationDirection == 1 && this.infoBarDiv.style.pixelHeight < this.infoBarHeight)
		{
			var newHeight = this.infoBarDiv.offsetHeight + InfoBar.ANIMATION_DELTA;
			if (newHeight > this.infoBarHeight)
			{
				newHeight = this.infoBarHeight;
			}
			
			this.resize(newHeight);
		}
		else if (this.animationDirection == -1 && this.infoBarDiv.style.pixelHeight > 0)
		{
			var newHeight = this.infoBarDiv.offsetHeight - InfoBar.ANIMATION_DELTA;
			if (newHeight < 0)
			{
				newHeight = 0;
			}
			
			this.resize(newHeight);
		}
		else
		{
			this.animationEnd();
		}
	},
	
	animationEnd:function()
	{
		if (this.intervalTimer != null)
		{
			clearInterval(this.intervalTimer);
			this.intervalTimer = null;
		}
	},
	
	isHidden:function()
	{
		return this.infoBarDiv.style.display == "none";
	},

	resize:function(newHeight)
	{
		this.height = newHeight;
		var currHeight = this.infoBarDiv.style.pixelHeight;
		var heightDelta = newHeight - currHeight;

		this.infoBarDiv.style.height = newHeight;
		this.infoBarTextDiv.style.pixelTop = this.infoBarDiv.offsetHeight - this.infoBarHeight;

		if (newHeight == 0)
		{
			this.infoBarDiv.style.display = "none";
		}
		else if (currHeight == 0)
		{
			this.infoBarDiv.style.display = "block";
		}

		if (this.resizeDiv != null)
		{
			this.resizeDiv.style.height = this.resizeDiv.offsetHeight - heightDelta;
		}

		if (this.onResize != null)
		{
			this.onResize(heightDelta);
		}
	},

	click:function()
	{
		if (this.onclick != null)
		{
			this.onclick();
		}
	}
}


EmailCounterObj = function()
{
	var self = this;
	
	this.containerDiv = document.createElement("div");
	this.containerDiv.className = "EmailCounterObj_Container";
	this.containerDiv.ondblclick = function() {self.dblclick()};
	
	this.iconContainerDiv = document.createElement("div");
	this.iconContainerDiv.className = "EmailCounterObj_IconContainer";
	this.containerDiv.appendChild(this.iconContainerDiv);
	
	this.emailIcon = document.createElement("img");
	this.emailIcon.src = "icons/emailIcon.png";
	this.iconContainerDiv.appendChild(this.emailIcon);
	
	this.valueDiv = document.createElement("div");
	this.valueDiv.className = "EmailCounterObj_Value";
	this.containerDiv.appendChild(this.valueDiv);
	
	this.value = 0;
	
	this.ondblclick = null;
}

EmailCounterObj.prototype =
{
	getDiv:function()
	{
		return this.containerDiv;
	},
	
	setValue:function(value)
	{
		if (value > 999)
		{
			this.value = 999;
		}
		else
		{
			this.value = value;
		}
		this.valueDiv.innerText = "(" + this.value + ")";
	},
	
	getValue:function()
	{
		return this.value;
	},

	show:function()
	{
		this.containerDiv.style.display = "block";
	},
	
	setTitle:function(newTitle)
	{
		this.containerDiv.title = newTitle;
	},
	
	hide:function()
	{
		this.containerDiv.style.display = "none";
	},
	
	dblclick:function()
	{
		debug("dblclick");
		if (this.ondblclick != null)
		{
			this.ondblclick();
		}
	}
}

