/**
* Assign the view handler
*/

viewHandler = HowGreen;

/**
* Creates a new object with methods used by the HowGreen page
*
* @author				Matt Gifford
* @copyright			2009 Timeshifting Interactive Limited
*/
function HowGreen()
	{
	// Step 1. Define Properties

	var _instance = this;
	this.animationReferences = { count: 1 };



	// Step 2. Define Public Methods

	/**
	* Sets up the initial page state and event handlers
	*/
	this.init = function()
		{
		// Call generic page init method
		this.base.init.call(this);

		// Set up the interactive bottle
		this.initInteractiveFeatures();
		}
	


	/**
	* Setups the animation of the definition items
	*/
	this.initInteractiveFeatures = function()
		{
		var titles = document.getElementById('howgreenInteractive').getElementsByTagName('dt');
		var definitions = document.getElementById('howgreenInteractive').getElementsByTagName('dd');
		for (var x = 0; x < titles.length; x++)
			{
			// Add id to definition
			definitions[x].id = titles[x].id + 'definition';

			// Set the initial opacity on the definition
			YAHOO.util.Dom.setStyle(definitions[x], 'opacity', 0);

			// Add the same unique reference id to both the elements
			titles[x].setAttribute('animationId', 'id' + this.animationReferences.count);
			definitions[x].setAttribute('animationId', 'id' + this.animationReferences.count++);

			// Add event handler for mouse over
			titles[x].onmouseover = function()
				{
				// Hide the initial definition (if necessary)
				if (xhtml.initialDefinitionVisible == true && this.id != 'bottle1')
					{
					xhtml.initialDefinitionVisible = false;
					document.getElementById('bottle1definition').onmouseout();
					}

				// Set the title as active
				this.className = 'active';

				// Set the definition as visible
				document.getElementById(this.id + 'definition').style.visibility = 'visible';

				// Try to stop any existing animation on this object
				try { xhtml.animationReferences[this.getAttribute('animationId')].stop(false); } catch (err) {}

				// Animate the definition
				xhtml.animationReferences[this.getAttribute('animationId')] = new YAHOO.util.Anim(document.getElementById(this.id + 'definition'), {opacity: { to: 1 }}, 0.3, YAHOO.util.Easing.easeBoth );
				xhtml.animationReferences[this.getAttribute('animationId')].animate();
				}

			// Add event handler for mouse over
			definitions[x].onmouseover = function()
				{
				// Try to stop any existing animation on this object
				try { xhtml.animationReferences[this.getAttribute('animationId')].stop(false); } catch (err) {}

				// Animate the definition
				xhtml.animationReferences[this.getAttribute('animationId')] = new YAHOO.util.Anim(this, {opacity: { to: 1 }}, 0.3, YAHOO.util.Easing.easeBoth );
				xhtml.animationReferences[this.getAttribute('animationId')].animate();
				}

			// Add event handler for mouse out
			titles[x].onmouseout = function()
				{
				// Try to stop any existing animation on this object
				try { xhtml.animationReferences[this.getAttribute('animationId')].stop(false); } catch (err) {}

				// Animate the definition
				xhtml.animationReferences[this.getAttribute('animationId')] = new YAHOO.util.Anim(document.getElementById(this.id + 'definition'),  {opacity: { to: 0 }}, 0.9, YAHOO.util.Easing.easeBoth );
				xhtml.animationReferences[this.getAttribute('animationId')].onComplete.subscribe(
					function()
						{
						var obj = this.getEl();

						// Set the definition as invisible
						obj.style.visiblity = 'hidden';
						document.getElementById(obj.id.replace('definition', '')).className = '';
						}
					);
				xhtml.animationReferences[this.getAttribute('animationId')].animate();
				}

			// Add event handler for mouse out
			definitions[x].onmouseout = function()
				{
				// Try to stop any existing animation on this object
				try { xhtml.animationReferences[this.getAttribute('animationId')].stop(false); } catch (err) {}

				// Animate the definition
				xhtml.animationReferences[this.getAttribute('animationId')] = new YAHOO.util.Anim(this, {opacity: { to: 0 }}, 0.9, YAHOO.util.Easing.easeBoth );
				xhtml.animationReferences[this.getAttribute('animationId')].onComplete.subscribe(
					function()
						{
						var obj = this.getEl();

						// Set the definition as invisible
						obj.style.visiblity = 'hidden';
						document.getElementById(obj.id.replace('definition', '')).className = '';
						}
					);
				xhtml.animationReferences[this.getAttribute('animationId')].animate();
				}
			}
		
		// Set the first definition visible by default
		this.initialDefinitionVisible = true;
		YAHOO.util.Dom.setStyle(definitions[0], 'opacity', 1);
		definitions[0].style.visibility = 'visible';
		}
	}