/**
* Assign the view handler
*/

viewHandler = Home;

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

	var _instance = this;


	// 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);

		// Add animation to flickr images
		setTimeout("xhtml.initFlickrAnimation();", 500);

		// Add animation to portfolio section
		this.initPortfolioAnimation();
		}


	/**
	* Adds border animation to flickr images
	*/
	this.initFlickrAnimation = function()
		{
		// Check if the flickr html is avaliable yet, if not queue if we haven't been waiting 5 seconds
		if (!document.getElementById('flickr_badge_image1') && this.flickrRetries++ < 10)
			{
			setTimeout("xhtml.initFlickrAnimation();", 500);
			}

		// Add animation to the borders
		var nodes = document.getElementById('homeFlickr').getElementsByTagName('a');
		for (var x = 0, url = ''; x < nodes.length; x++)
			{
			nodes[x].id = 'flickrAnchor' + x;
			nodes[x].style.borderColor = '#181818';
			this.animationReferences[nodes[x].id] = null;

			// Add on mouseover event
			nodes[x].onmouseover = function()
				{
				// Try to stop any current animation
				try { xhtml.animationReferences[this.id].stop(false); } catch (err) {}

				// Start the new animation
				xhtml.animationReferences[this.id] = dojo.animateProperty( {duration: 200, node: this.id, properties: { borderColor: '#7e6643' } } );
				xhtml.animationReferences[this.id].play();
				}

			// Add on mouseover event
			nodes[x].onmouseout = function()
				{
				// Try to stop any current animation
				try { xhtml.animationReferences[this.id].stop(false); } catch (err) {}

				// Start the new animation
				xhtml.animationReferences[this.id] = dojo.animateProperty( {duration: 700, node: this.id, properties: { borderColor: '#181818' } } );
				xhtml.animationReferences[this.id].play();
				}
			}
		}

	
	/**
	* Adds animation to the thumbnail boxes and inactive seciton
	*/
	this.initPortfolioAnimation = function()
		{
		// Add animation to inactive overview text
		var nodes = dojo.query('#homeFeatured div.overviewInactive');
		for (var x = 0, url = ''; x < nodes.length; x++)
			{
			nodes[x].id = 'homePortfolioInactive' + x;
			this.animationReferences[nodes[x].id + 'inactiveHeading'] = null;
			this.animationReferences[nodes[x].id + 'inactiveParagraph'] = null;
			this.animationReferences[nodes[x].id + 'activeThumbnails'] = null;
			this.animationReferences[nodes[x].id + 'activeOverview'] = null;

			// Add on mouseover event
			nodes[x].onmouseover = function()
				{
				if (this.getAttribute('defaultStyles') != 'added')
					{
					this.getElementsByTagName('h3')[0].style.color = '#676665';
					this.getElementsByTagName('p')[0].style.color = '#585858';
					this.setAttribute('defaultStyles', 'added');
					}

				// Try to stop any current animation
				try { xhtml.animationReferences[this.id + 'inactiveHeading'].stop(false); } catch (err) {}
				try { xhtml.animationReferences[this.id + 'inactiveParagraph'].stop(false); } catch (err) {}
				try { xhtml.animationReferences[this.id + 'activeThumbnails'].stop(false); } catch (err) {}
				try { xhtml.animationReferences[this.id + 'activeOverview'].stop(false); } catch (err) {}

				// Start the new animation
				xhtml.animationReferences[this.id + 'inactiveHeading'] = dojo.animateProperty( {duration: 500, node: this.getElementsByTagName('h3')[0], properties: { color: '#ffffff' } } );
				xhtml.animationReferences[this.id + 'inactiveParagraph'] = dojo.animateProperty( {duration: 500, node: this.getElementsByTagName('p')[0], properties: { color: '#cccccc' } } );
				xhtml.animationReferences[this.id + 'activeThumbnails'] = dojo.animateProperty( {duration: 1500, node: document.getElementById(this.id).parentNode.getElementsByTagName('div')[0], properties: { opacity: 0.2 } } );
				xhtml.animationReferences[this.id + 'activeOverview'] = dojo.animateProperty( {duration: 1500, node: document.getElementById(this.id).parentNode.getElementsByTagName('div')[1], properties: { opacity: 0.2 } } );
				xhtml.animationReferences[this.id + 'inactiveHeading'].play();
				xhtml.animationReferences[this.id + 'inactiveParagraph'].play();
				xhtml.animationReferences[this.id + 'activeThumbnails'].play();
				xhtml.animationReferences[this.id + 'activeOverview'].play();
				}

			// Add on mouseover event
			nodes[x].onmouseout = function()
				{
				// Try to stop any current animation
				try { xhtml.animationReferences[this.id + 'inactiveHeading'].stop(false); } catch (err) {}
				try { xhtml.animationReferences[this.id + 'inactiveParagraph'].stop(false); } catch (err) {}
				try { xhtml.animationReferences[this.id + 'activeThumbnails'].stop(false); } catch (err) {}
				try { xhtml.animationReferences[this.id + 'activeOverview'].stop(false); } catch (err) {}

				// Start the new animation
				xhtml.animationReferences[this.id + 'inactiveHeading'] = dojo.animateProperty( {duration: 800, node: this.getElementsByTagName('h3')[0], properties: { color: '#676665' } } );
				xhtml.animationReferences[this.id + 'inactiveParagraph'] = dojo.animateProperty( {duration: 800, node: this.getElementsByTagName('p')[0], properties: { color: '#585858' } } );
				xhtml.animationReferences[this.id + 'activeThumbnails'] = dojo.animateProperty( {duration: 300, node: document.getElementById(this.id).parentNode.getElementsByTagName('div')[0], properties: { opacity: 1.0 } } );
				xhtml.animationReferences[this.id + 'activeOverview'] = dojo.animateProperty( {duration: 300, node: document.getElementById(this.id).parentNode.getElementsByTagName('div')[1], properties: { opacity: 1.0 } } );
				xhtml.animationReferences[this.id + 'inactiveHeading'].play();
				xhtml.animationReferences[this.id + 'inactiveParagraph'].play();
				xhtml.animationReferences[this.id + 'activeThumbnails'].play();
				xhtml.animationReferences[this.id + 'activeOverview'].play();
				}
			}
		}
	}