/* 	xmlFeatureDisplay.js
	March 10, 2008
 	Ver 1.0
		
 	Written by Rev. Dr. Samuel J. Lovetro, III, MsD.
 	Site: http://lovetro.com
	Copyright (c) 2009. Unauthorized use is a violation of applicable laws.
	This application relies on MooTools, ver 1.2.1

	This program will:
		Create a featureObj that references featured photos and text.
		Randomly select one feature
		Display the featuredObj

	This program requires:
		1. The XML article file for display.
		2. The ID for the feature display.
		
/*	Definitions:
	A FEATURE will be defined as:
		1. An image								REQUIRED: ONLY ONE
		2. A caption 							REQUIRED: ONLY ONE
		3. A title								REQUIRED: ONLY ONE
		4. A PDF location						OPTIONAL: ZERO or ONE
		5. A PDF image							OPTIONAL: ZERO or ONE
		6. A URL								OPTIONAL: ZERO or ONE
		7. URL text (for linking)				OPTIONAL: ZERO or ONE

/*	XML format:
		<document>
			<feature>
				<bigImage>ch01.jpg</image>													// The big image for the feature. 				OPTIONAL: ZERO or ONE
				<image>ch01-s.jpg</image>													// The image for the feature. 					OPTIONAL: ZERO or ONE
				<caption>Award Winning. Attention Grabbing. Value Building.</caption>		// The caption for the feature. 				OPTIONAL: ZERO or ONE
				<title>Creek House Commons</title>											// The title of the article. 					OPTIONAL: ZERO or ONE
				<pdf>CS_Navalis_CreekHouseCommons_LF.pdf</pdf>								// The pdf of the article. 						OPTIONAL: ZERO or ONE
				<pdfImage>CreekHouseCommons-s.jpg</pdfImage>								// The image of the pdf.						OPTIONAL: ZERO or ONE
				<url>/caseStudies/creekHouse.shtml</link>									// A link for the feature						OPTIONAL: ZERO or ONE
				<urlText>View the case study</linkText>										// Text for the link							OPTIONAL: ZERO or ONE
			</feature>
			...any number of feature elements
		</document>

/*	Display:
	<div id=<featureContainer>>
		<div class="featured" id="<featureContainer>-featured">Featured</div>
		<div class="img-wrapper featureImg" id="<featureContainer>-imgWrapper">
			<div>
				<a href=_url_ title='View '+_title_+' Case Study' id="<featureContainer>-imgUrl">
					<img src=<imagesFolder>+_image_ alt=_title_+" photo" id="<featureContainer>-image" /></a>
			</div>
		</div>
		<div class="title" id="<featureContainer>-title">_title_</div>
		<div class="caption" id="<featureContainer>-caption">_caption_</div>
		<div class="url" id="<featureContainer>-urlWrapper"><a href=_url_ id="tertiaryPadding-url">_urlText_></a></div>
		<div class="documents">Documents</div> 
		<div class="img-wrapper featureImg"><div><a href="<pdfFolder>+_pdf_" rel="external" title="_title_+ ' Case Study'"><img src="<pdfImageFolder>+_pdfImage_" alt="_title_+' Case Study'" /></a></div></div> 
		<div class="pdfCaption"><a href="<pdfFolder> +_pdf_" rel="external" class="external">'Download '+_title_+' Case Study'</a></div>
	</div>
	
/*	Options:
	bigImageFolder: String			// String containing the location of the big feature image
	imageFolder: String				// String containing the location of the feature image
	pdfFolder: String				// String containing the location of the pdf
	pdfImageFolder: String			// String containing the location of the pdf image
	clearFeatureContainer: Boolean	// Clear the container before displaying the feature?
	existingContent: 'clear'		// 'clear' existing content, or display 'before' or 'after' existing content. Only 'clear' is implemented 
	displayAmount: 1				// Number of features to display. *Not implemented.
	displayIndex: -1				// Which feature to start the display (-1 means randomize the feature).
	displayHtml: Boolean			// Display HTML in caption, not implemented
	rotate: false					// Boolean determining if the featured display will rotate
	delay: 10000					// Milleseconds before new feature is drawn. *Not implemented.
	duration: 1000					// Milleseconds for display transitions. *Not implemented.
	completed: Function				// Function to execute upon completion
*/

/*Element.implement({
	expose: function(){
		if( this.getStyle('display') != 'none' ) return $empty;
		var before = {};
		var styles = { visibility:'hidden', display:'block', position:'absolute' };
		//use this method instead of getStyles
		$each(styles, function(value, style){
			before[style] = this.style[style]||'';
		}, this);
		//this.getStyles('visibility', 'display', 'position');
		this.setStyles(styles);
		return (function(){ this.setStyles(before); }).bind(this);
	}
});*/
var featureObj = new Class({
	initialize: function( bigImage, image, caption, title, pdf, pdfImage, url, urlText ){
		this.bigImage = bigImage;
		this.image = image;
		this.caption = caption;
		this.title = title;
		this.pdf = pdf;
		this.pdfImage = pdfImage;
		this.url = url;
		this.urlText = urlText;
	}
});
var xmlFeatureDisplay = new Class({
	Implements: [Options, Events],
	options: {
		bigImageFolder: '',
		imageFolder: '',
		pdfFolder: '',
		pdfImageFolder: '',
		existingContent: 'clear',
		displayAmount: 1,
		displayIndex: -1,
		displayHtml: false,
		rotate: false,
		delay: 10000,
		duration: 1000,
		completed: $empty
	},
	initialize: function( xmlFile, featureContainer, options ){
		this.xmlFile = xmlFile;
		this.featureContainer = featureContainer;
		this.features = new Array();
		this.setOptions( options );
		if( this.options.existingContent == 'clear' ) $( this.featureContainer ).set( 'html', '' );
		this.readXML( this.xmlFile, this.featureContainer );
	},
	readXML: function( file, loc ) {
		//alert('readXML invoked. file='+file);
		var myRequest = new Request({
			url: file,
			method: 'get',
			onSuccess: function( responseText, responseXML ){
				//alert(responseText);
				this.parseXML( responseXML );
			}.bind(this),
			onFailure: function(){
				//alert( 'There was a problem retrieving the XML data:\n' + file );
				var el = $( loc ).set({
					'html': 'There was a problem retrieving the XML file:<br/>' + file,
					'styles': {
						'color': '#ff0000',
						'text-align': 'center',
						'font-weight': 'bold'}
				});
			}
		}).send();
	},
	getTagValue: function( el, tag ) {
		var val = null;
		if( el.getElementsByTagName( tag ).length > 0 ) 
			val = el.getElementsByTagName( tag )[ 0 ].childNodes[ 0 ].nodeValue;
		return val;		
	},
	preloadImages: function() {
		for( var i = 0; i < arguments.length; i++ ) preloaded[ i ] = new Element( 'img', { 'src': arguments[ i ] });
	},
	parseXML: function( xmlObj ) {
		//alert('parseXML invoked.');
		var elements = xmlObj.getElementsByTagName( 'feature' );
		if ( elements.length < 1 ) return;
		
		this.index = 0;
		this.preloaded = new Array();
		var list = new Array();
		for( var i = 0; i < elements.length; i++) {
			this.features[ i ] = new featureObj( 
				this.getTagValue( elements[ i ], 'bigImage' ), 
				this.getTagValue( elements[ i ], 'image' ), 
				this.getTagValue( elements[ i ], 'caption' ), 
				this.getTagValue( elements[ i ], 'title' ), 
				this.getTagValue( elements[ i ], 'pdf' ), 
				this.getTagValue( elements[ i ], 'pdfImage' ), 
				this.getTagValue( elements[ i ], 'url' ), 
				this.getTagValue( elements[ i ], 'urlText' ) 
			);
			// Gather Preload image names
			list.push( this.options.imagesFolder + this.getTagValue( elements[ i ], 'image' ));
		};
		preloadImages( list.toString());
		if( this.options.displayIndex > 0 ) {
			this.index = this.options.displayIndex;
		} else {
			this.index = Math.floor( Math.random() * ( this.features.length ));
		};
		if( this.options.displayAmount > 0 && this.features.length > 0 ) {
			this.displayFeature( this.index );
			if( this.options.rotate ) this.rotateFeatures();
		};
		if( this.options.completed != $empty ) this.options.completed();
	},
	rotateFeatures: function() {
		//this.rotateTimer = setInterval( this.displayNext, this.options.delay );
		this.rotateTimer = this.displayNext.periodical( this.options.delay, this );
	},
	displayNext: function() {
		this.index++;
		if( this.index >= this.features.length ) this.index = 0;
		this.hideCurrentFeature();
		this.displayFeature( this.index );
	},
	hideCurrentFeature: function() {
		switch( this.options.existingContent ) {
			default: // 'clear'
				$( this.featureContainer ).set( 'html', '' );
			break;
		};
	},
	displayFeature: function( idx ) {
		//alert('displayArticle invoked. idx='+idx);
		var el = $( this.featureContainer );
		var fc = this.featureContainer + '-';
		
/* <div class="featured">Featured</div> */		
		el.appendChild( new Element( 'div', { 'class': 'featured', id: fc + 'featured' }).set( 'text', 'Featured' ));

		for( var i=idx; i < idx + this.options.displayAmount; i++ ) {
/* <div class="img-wrapper featureImg"><div><a href=_url_ title='View '+_title_+' Case Study'><img src=imagesFolder+_image_ alt=_title_+" photo" /></a></div></div> */
			var feature = this.features[ i ];
/*if( feature == undefined ) {
	alert('features i='+i+', this.features.length='+this.features.length);
}*/
			
			if( feature.image != null ) {
				var imgWrapper = new Element( 'div', { 
					'class': 'img-wrapper', 
					id: fc + 'imgWrapper' + i 
				});
				imgWrapper.addClass( 'featureImg' );
				var div = new Element( 'div' );
				var img = new Element( 'img', {
					'src': this.options.imageFolder + feature.image,
					'alt': feature.title + ' photo',
					id: fc + 'image' + i
				});
				if( feature.url != null ) {
					var a = new Element( 'a', {
						'href': feature.url,
						title: 'View ' + feature.title + ' Case Study',
						id: fc + 'imgUrl' + i
					});
					a.appendChild( img );
					div.appendChild( a );
				} else {
					div.appendChild( img );				
				};
				imgWrapper.appendChild( div );
				el.appendChild( imgWrapper );
			};
			
/* <div class="title">_title_</div> */
			var title = new Element( 'div', { 
				'class': 'title', 
				id: fc + 'title' + i 
			}).set( 'text', feature.title );
			el.appendChild( title );
			
/* <div class="caption">_caption_</div> */
			var caption = new Element( 'div', { 
				'class': 'caption', 
				id: fc + 'caption' + i
			}).set( 'text', feature.caption );
			el.appendChild( caption );
			
/* <div class="url"><a href=_url_>_urlText_></a></div> */
			if( feature.url != null ) {
				var url = new Element( 'div', { 
					'class': 'url', 
					id: fc + 'urlWrapper' + i
				});
				var a = new Element( 'a', { 
					'href': feature.url, 
					id: fc + 'url' 
				});
				if( feature.urlText != null ) {
					a.set( 'text', feature.urlText );
				} else {
					a.set( 'text', feature.url );
				};
				url.appendChild( a );
				el.appendChild( url );
			};
			if( feature.pdfImage != null || feature.pdf != null ) {
/* <div class="documents">Documents</div> */
				var documents = new Element( 'div', { 
					'class': 'documents', 
					id: fc + 'documents' + i 
				}).set( 'text', 'Documents' );
				
/*	<div class="img-wrapper featureImg"><div><a href=pdfFolder+_pdf_ rel="external" title=_title_+ " Case Study"><img src=pdfImageFolder+_pdfImage_ alt=_title_+" Case Study" /></a></div></div> */
				if( feature.pdfImage != null ) {
					var imgWrapper = new Element( 'div', { 
						'class': 'img-wrapper', 
						id: fc + 'pdfImgWrapper' + i
					});
					imgWrapper.addClass( 'featureImg' );
					var div = new Element( 'div' );
					var img = new Element( 'img', {
						'src': this.options.pdfImageFolder + feature.pdfImage,
						'alt': feature.title +' Case Study',
						id: fc + 'pdfImage' + i
					});
					if( feature.pdf != null ) {
						element.appendChild( documents );
						var a = new Element( 'a', {
							'href': this.options.pdfFolder + feature.pdf,
							'rel': 'external',
							title: 'View '+ feature.title +' Case Study',
							id: fc + 'pdf' + i
						});
						a.appendChild( img );
						div.appendChild( a );
					} else {
						return;		
					};
					imgWrapper.appendChild( div );
					el.appendChild( imgWrapper );
/*	<div class="pdfCaption"><a href=pdfFolder +_pdf_ rel="external" class="external">'Download '+_title_+' Case Study'</a></div> */
					var pdfCaption = new Element( 'div', {
						'class': 'pdfCaption', 
						id: fc + 'pdfCaption' + i 
					});
					var a = new Element( 'a', {
						'href': feature.pdf,
						'rel': 'external',
						'class': 'external',
						 id: fc + 'pdfCaptionLink' + i
					}).set( 'text', 'Download ' + feature.title +' Case Study' );
					pdfCaption.appendChild( a );
					el.appendChild( pdfCaption );
				};
			};
		};
	}
});
/* 	Deployment: 
window.addEvent( 'domReady', function() {
	var myXmlFeatureDisplay = new xmlFeatureDisplay( 
		'/xml/featureDisplay.xml',										//	Location of xml file
		'feature', 														//	Id for article display
		{																//	Options (Default shown)
			bigImageFolder: '',											//		Location of big images
			imageFolder: '',											//		Location of images
			pdfFolder: '',												//		Location of pdf
			pdfImageFolder: '',											//		Location of pdf images
			clearFeatureContainer: true,								// 		Clear the feature container before display
			displayAmount: 1,											//		Number of features to display
			displayIndex: -1,											//		Number of feature to display, -1 = random index
			displayHtml: false,											//		Display HTML in caption					
			completed: $empty											//		Function to execute upon completion
	});
});
*/