/**
 *	FOUR CATEGORY FEATURED COMPONENT
 *
 *	this component loads registered data into a Featured object and Nodes of that featured object
 *	- each featured node object corresponds to its HTML DOM node, conventionally with id like:
 *		'featured-' + node type, ie, 'featured-buying'
 *	- each featured node object hold a reference to the DOM element by its ._self property
 *	- all DOM nodes have a shared, generic onclick behavior established as unique only by way of late binding
 *	- every dataObj (the Node in question containing properties holding data from external source)
 *		should have default text, typically empty strings, however a photo is not necessary and is tested for
 *		when the content pane is to be updated
 */


// set up the Featured object and its Nodes
function Featured()
{
	// thought of as a single component, the Featured component has 4 parts:
	// arbitrary properties of these objects are set when filling in the data (dspFeatured.cfm)
	this._contentPane = null;
	this.Buying = new Object();
	this.Developments = new Object();
	this.Renting = new Object();
	this.Selling = new Object();
	this.Welcome = new Object();
}

// setting constants, just to declare that the photo will always be either rigth or left
Featured.IMAGE_LEFT		= 'left';
Featured.IMAGE_RIGHT	= 'right';

// there may be bugs with IE and my Animation package; if needed to you can easily just disable the fade effect
Featured.ANIMATE_TRANS = true;

// define Featured method(s)

// updateContent() will update the contentViewer (specified as a parameter)
// with the Node's (specified by the 'type' parameter) data that was set in dspFeatured.cfm
// this function builds the HTML inside the contentViewer and attaches the end-HTML to the
// contentViewer HTML element that was specified to the method
Featured.prototype.updateContent = function(type, contentViewer)
{

	for(var c in this)
	{
		
		if(this[c] != null && this[c]._self && this[c]._self === type)
		{
			
			if(type == 'welcome'){
				var infoDiv = document.createElement('div');
				
				infoDiv.innerHTML = unescape(this[c].innerHTML);
				
				contentViewer.appendChild(infoDiv);
				//console.log(contentViewer);
				//contentViewer.appendChild(this._contentPane);
			
			}
			else{
				var dataObj = this[c];
				// update content pane based on current dataObj's data
				if(this._contentPane != null)
				{
					// return if you clicked a node you're already on
					if(this._contentPane.id == dataObj._self.id + '-pane') return;			
					// if a new featured node was clicked, release the currently attached content
					contentViewer.removeChild(this._contentPane);
				}
				// create or re-create the div pane
				this._contentPane = document.createElement('div');
				this._contentPane.id = dataObj._self.id + '-pane';
				// set photo properties
				if(dataObj.imageSrc.length > 0)
				{
					var photo = new Image;
					var photoOffsetEdge = (dataObj.imagePos == 'left') ? 'Right' : 'Left';
					photo.src = dataObj.imageSrc;
					photo.style.width = dataObj.imageWidth;
					photo.style.height = dataObj.imageHeight;
					photo.style.margin = '-1px 0';
					eval("photo.style.margin" + photoOffsetEdge + " = '20px'");
					// 'float' is a keyword in JS; the CSS API for JS defines a different name for the float property:
					if(typeof photo.style.styleFloat != 'undefined')
					{
						// IE doesnt support 'cssFloat'; instead, it uses a proeprty called 'styleFloat'
						photo.style.styleFloat = dataObj.imagePos;
					} else
					{
						// all other browsers using the standard 'cssFloat' (not IE) use this
						photo.style.cssFloat = dataObj.imagePos;
					}
					// attach photo to content pane
					this._contentPane.appendChild(photo);
				}
				// set text properties
				var infoDiv = document.createElement('div');
				infoDiv.style.padding = '10px';
				
				// BEGIN LAYING AND STYLING INNER CONTENT
				
				infoDiv.innerHTML = '\
					<strong class="title">\
						' + unescape(dataObj.title) + '\
					</strong>\
					<span style="display:block; margin-bottom:10px;">\
						' + unescape(dataObj.description) + '\
					</span>';
				if(dataObj.price)		// DEVELOPMENTS arent going to display any price, so we need to test
				{
					infoDiv.innerHTML = '\
						' + infoDiv.innerHTML + '\
						<span style="display:block; margin-bottom:10px; font-size:14px; color:#ff6633; font-weight:bold;">\
							' + dataObj.price + '\
						</span>';
				}
				if(dataObj.propertyLink)		// SOLD LISTINGS arent going to supply a details link, so we need to test
				{
					infoDiv.innerHTML = '\
						' + infoDiv.innerHTML + '\
						\
						<a href="' + dataObj.propertyLink + '"\
							style="display:block; \
							">\
							More Info\
						</a>';
						//text-align:' + dataObj.imagePos + ';
				}
				infoDiv.innerHTML = '\
					' + infoDiv.innerHTML + '\
					<a href="' + dataObj.searchLink + '"\
						style="display:block; \
						">\
						View more listings like this\
					</a>';
					//text-align:' + dataObj.imagePos + ';
				infoDiv.innerHTML = '\
					<div>\
						' + infoDiv.innerHTML + '\
					</div>';
					
				// END LAYING AND STYLING INNER CONTENT
		
				// attach text content to content pane
				this._contentPane.appendChild(infoDiv);
				while (contentViewer.childNodes.length >= 1) {
					  contentViewer.removeChild(contentViewer.firstChild);
				}
				contentViewer.appendChild(this._contentPane);
			}
		
			// attach entire content pane to master content viewer
			// fade in the content pane if Animation package was included
			if(Featured.ANIMATE_TRANS && typeof Animation == 'function')
			{
				(new Animation(contentViewer)).fadeElementOpacity(1, 100, 25);
			}
		}		
	}
}