/**
 * Initialise the height of the slider container
 * @internal To be called onLoad
 */
function initSliderHeight(container) {
	if (container) {
		var sliderDIV = document.getElementById(container);
	} else {
		var sliderDIV = document.getElementById("SlidinfoTXT");
	}
	
	if (sliderDIV) {
		var sliderHeight = sliderDIV.offsetHeight;
		sliderDIV.parentNode.style.height = (parseInt(sliderHeight, 10) + 20) + 'px';
	}
}


/**
 * Move the menu hover to the specified menu item
 * @param HTMLobject menuItem The menu item to move the hover effect to
 */
function hoverMenu(menuItem) {
	topMenu.animateTo(menuItem.firstChild);
}


/**
 * Class to manage menu animations
 * @param HTMLobject menuElement The container for the menu to move and resize
 */
function MenuSlider(menuElement) {
	// Specify the final position and size for the animation
	this.targetWidth = 0;
	this.targetLeft = 0;
	this.speed = 40;              // Time between frames in milliseconds
	this.duration = 100;          // Total time for the animation
	this.menu = menuElement;      // The HTML element to move and resize
	this.frame = 0;               // The current frame of the animation
	this.maxFrames = 100;         // How many frames in the animation
	this.startWidth = null;       // Initial width of the menu
	this.startLeft = null;        // Initial left position of the menu
	this.timer = null;            // Currently active setTimeout call
	
	/**
	 * Set the target width and position
	 */
	this.setTarget = function setTarget(left, width) {
		this.targetWidth = width;
		this.targetLeft = left;
	}
	
	
	/**
	 * Animates the menu to align with the given element
	 */
	this.animateTo = function animateTo(element) {
		// Get the target size and position
		this.targetWidth = parseInt(element.offsetWidth, 10) + 15;
		this.targetLeft = parseInt(element.offsetLeft, 10) - 15;
		
		this.maxFrames = this.duration / this.speed;       // Determine how many frames will be needed
		this.frame = 0;                                    // Reset the frame counter
		
		// Get the starting point of the animation
		this.startWidth = parseInt(this.menu.offsetWidth, 10);
		this.startLeft = parseInt(this.menu.offsetLeft, 10);
		
		// Clear any previous animation actions
		clearInterval(this.timer);

		// Start the animation
		var thisWidget = this;
		this.timer = setInterval(function() { thisWidget.animateFrame(); }, this.speed);
	}
	
	
	/**
	 * Advance to the next animation frame
	 */
	this.animateFrame = function animateFrame() {
		if (this.frame < this.maxFrames) {
			// Calculate the current width and position
			var width = Math.round(this.startWidth + ((this.targetWidth - this.startWidth) / this.maxFrames * this.frame)) + "px";
			var left = Math.round(this.startLeft + ((this.targetLeft - this.startLeft) / this.maxFrames * this.frame)) + "px";
			
			// Update the position and width
			this.menu.style.width = width;
			this.menu.style.left = left;
	
			this.frame++;               // Advance one more frame
		} else {
			// Halt the animation
			clearInterval(this.timer);
			
			// Set the final position and size in case the last frame was slightly off
			this.menu.style.width = this.targetWidth + "px";
			this.menu.style.left = this.targetLeft + "px";
		}
	}
	
	// Initialise the height of the slider
	initSliderHeight();
}