/**
 * A step in the addon usage process
 * @title		Step
 * @author		Colin Nolan
 * @version		v1.0.0
 * @created		27/09/11
 *
 * @param	{string} name	Name of the step
 * @param	{HTMLElement} container	Element that contains all content of the step UI
 */
var Step = function(name, container)
{
	/*
	 * Settings
	 */
	var COLLAPSED_BUTTON = "/common/images/buttons/button_collapsed.png";		// Location of the collapsed button
	var EXPANDED_BUTTON = "/common/images/buttons/button_expanded.png";			// Location of the expanded button
	var TOGGLE_TIME = 500;														// Time in milliseconds, that it takes for content to open/close



	/*
	 * Instance variables
	 */
	var content = container.getElementsByClassName("step")[0];					// Content container
	var toggleBtn = container.getElementsByClassName("stepTitle")[0].getElementsByTagName("img")[0];		// Button, which represents the expand/collapse state of the step
	var shown = false;															// Whether the step is currently being shown
	var contentHeight;															// Height of the step content



	// Accessors
	/**
	 * Get the step's name
	 * @return	{string}	Name of the step
	 */
	this.getName = function()
	{
		return name;
	};


	/**
	 * Whether the step is currently been shown to the user
	 * @return	{boolean}	Whether the step is being shown
	 */
	this.isShown = function()
	{
		return shown;
	};



	// Mutators
	/**
	 * Toggle the display of the step
	 */
	this.toggleDisplay = function()
	{
		if(shown) {
			this.collapse();
		}
		else {
			this.expand();
		}
	};


	/**
	 * Show the step's content
	 */
	this.expand = function()
	{
		if(window.jQuery) {
			// Animate open with jQuery
			$(content).css({
				opacity: 0,
				height: 0
			});
			$(content).animate({
				height: contentHeight,
				opacity: 1},
				TOGGLE_TIME,
				function() {
					content.style.height = "";						// This allow all content to be shown, if calculated open height is not correct (may occur with dynamic display elements and not fully loaded elements
				}
			);
		}

		content.style.display = "block";
		toggleBtn.src = EXPANDED_BUTTON;
		toggleBtn.alt = "-";
		shown = true;
	};


	/**
	 * Hide the step's content
	 */
	this.collapse = function()
	{
		if(window.jQuery) {
			if(content.style.display == "block") {
				// Cache the size to open up to next time
				storeContentHeight();
			}

			// Animate close with jQuery
			$(content).css({
				opacity: 1,
				height: contentHeight
			});
			$(content).animate({
				height: 0,
				opacity: 1},
				TOGGLE_TIME,
				function() {
					content.style.display = "none";
				}
			);
		}
		else {
			content.style.display = "none";
		}

		toggleBtn.src = COLLAPSED_BUTTON;
		toggleBtn.alt = "+";
		shown = false;
	};



	// Private methods
	/*
	 * Get the height of the content when it is shown
	 * @return	{int}	Height of content when displayed
	 */
	var getContentHeight = function()
	{
		if(!shown) {
			content.style.display = "block";
		}
		var height = content.offsetHeight;
		if(!shown) {
			content.style.display = "none";
		}
		return height;
	};


	/*
	 * Store the content height
	 */
	var storeContentHeight = function()
	{
		contentHeight = getContentHeight();
	};
	if(window.jQuery) {
		storeContentHeight();					// Required for animation
	}
};