var iReportWall = (function () {
	
	var self = this,
		wallContainer,
		iReportsData,
		stats_24hours,
		stats_alltime,
		wall,
		spinner,
		wallElements,
		wallOverlay,
		bug,
		media,
		mediaSource,
		headline,
		blurb,
		currentIndex = -1,
		iReportPulseURI = '/static/feeds/pulse.rss',
		iReportElementsURI = '/static/fl-elements/data/data.xml',
		trimRE = /^\s+|\s+$/g,
		trim = function (string) {
			return string.replace( trimRE, '' );
		},
		addClass = function (element, value) {
			var newClassName = '';
			if ( element.nodeType === 1 && value ) {
				newClassName = trim(
					element.className
					? element.className + ' ' + value
					: value
				);
				element.className = newClassName;
			}
		},
		removeClass = function (element, value) {
			var newClassName = '';
			if ( element.nodeType === 1 && element.className && value ) {
				newClassName = trim(
					(' ' + element.className + ' ')
						.replace( ' ' + value + ' ', ' ' )
				);
				element.className = newClassName;
			}
		},
		displayPrev = function () {
			var num = currentIndex;
			if ( num <= 0 ) {
				num = iReportsData.length - 1;
			} else {
				num -= 1;
			}
			displayOverlay( num );
		},
		displayNext = function () {
			var num = currentIndex;
			if ( num >= iReportsData.length - 1 ) {
				num = 0;
			} else {
				num += 1;
			}
			displayOverlay( num );
		},
		displayOverlay = function (index) {
			var element = iReportsData[index];
			wallOverlay.className = 'iReport_Overlay';
			bug.className = 'iReport_Bug';
			if ( element.media.search( /\.mov$/ ) !== -1 ) {
				media.innerHTML = ''
					+ '<video'
					+   ' width="300"'
					+   ' height="169"'
					+   ' autoplay="autoplay"'
					+   ' controls="controls"'
					+   ' src="' + element.media + '"'
					+ '></video>'
				;
			} else {
				media.innerHTML = ''
					+ '<img'
					+   ' width="300"'
					+   ' height="169"'
					+   ' src="' + (
							element.media.search( /\.flv$/ ) !== -1
							? element.thumb
							: element.media
						) + '"'
					+ '>'
				;
			}
			if ( element.bug === 'vetted' ) {
				bug.className = 'iReport_Bug vetted';
			}
			if ( element.author ) {
				mediaSource.innerHTML = 'Submitted by: <a href="' + element.authorUrl + '">' + element.author + '</a>';
			}
			headline.innerHTML = '<a href="' + element.url + '">' + element.title + '</a>';
			blurb.innerHTML = element.description
				+ ( element.staff
					? '<p>- <a href="' + element.staffUrl + '">' + element.staff + '</a>' + ( element.staffTitle ? ', ' + element.staffTitle : '' ) + '</p>'
					: ''
				);
			currentIndex = index;
		},
		hideOverlay = function () {
			wallOverlay.className = 'iReport_Overlay hidden';
			updateWallStats();
		},
		iReportWallEventListener = {
			handleEvent: function (event) {
				var target = event.target,
					inArray = function (element, array) {
						for ( var i = 0, end = array.length; i < end; i++ ) {
							if ( array[ i ] === element ) {
								return i;
							}
						}
					};
				console.dir( event );
				var index = inArray( target, target.parentElement.children ),
					past24hrPanel = document.getElementById('iReport_Stats_24Hours'),
					allTimePanel = document.getElementById('iReport_Stats_AllTime'),
					resetPast24hrPanel = function () {
						past24hrPanel.className = 'iReport_Stats_Panel';
					},
					resetAllTimePanel = function () {
						allTimePanel.className = 'iReport_Stats_Panel';
					};
				switch( target.nodeName ) {
					case 'BUTTON':
						switch( target.innerText ) {
							case 'last 24 hours':
								if ( target.className !== 'selected' ) {
									target.className = 'selected';
									allTimePanel.className = 'iReport_Stats_Panel transitionOut';
									window.setTimeout( resetAllTimePanel, 800 );
									past24hrPanel.className = 'iReport_Stats_Panel transitionIn';
									( target.nextElementSibling || target.previousElementSibling ).className = '';
								}
								break;
							case 'all time':
								if ( target.className !== 'selected' ) {
									target.className = 'selected';
									past24hrPanel.className = 'iReport_Stats_Panel transitionOut';
									window.setTimeout( resetPast24hrPanel, 800 );
									allTimePanel.className = 'iReport_Stats_Panel transitionIn';
									( target.nextElementSibling || target.previousElementSibling ).className = '';
								}
								break;
						}
						break;
					case 'DIV':
						switch( target.className ) {
							case 'iReport_Element':
								displayOverlay( index );
								break;
							case 'iReport_CloseButton':
								hideOverlay();
								break;
							case 'iReport_PrevElement':
								displayPrev();
								break;
							case 'iReport_NextElement':
								displayNext();
								break;
						}
						break;
				}
				return true;
			}
		},
		getXML = function (url, callback, postData) {
			var req = new window.XMLHttpRequest(),
				method = postData ? "POST" : "GET";
			req.open( method, url, true );
			if ( postData ) {
				req.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
			}
			req.onreadystatechange = function () {
				if ( req.readyState !== 4 ) {
					return;
				}
				if ( req.status !== 200 && req.status !== 304 ) {
					// console.log( 'HTTP error ' + req.status );
					return;
				}
				callback.call( this, req.responseXML, req );
			};
			if ( req.readyState === 4 ) {
				return;
			}
			req.send( postData );
		},
		updateWallElements = function () {
			getXML( iReportElementsURI, function (data) {
				var getIReportsData = function (data) {
					var iReportsData = [],
						getFirstChildValue = function (node) {
							return (
								node && node.firstChild
								? trim( node.firstChild.nodeValue )
								: null
							);
						};
					if ( data !== null ) {
						for ( var i = 0, ireport = null, ireportData = {}, ireports = data.querySelectorAll('ireport'), end = ireports.length; i < end; i++ ) {
							ireport = ireports.item(i);
							ireportData = {};
							ireportData['date'] = getFirstChildValue( ireport.querySelector('date') );
							ireportData['title'] = getFirstChildValue( ireport.querySelector('title') );
							ireportData['url'] = getFirstChildValue( ireport.querySelector('url') );
							ireportData['media'] = getFirstChildValue( ireport.querySelector('media') );
							ireportData['bug'] = getFirstChildValue( ireport.querySelector('bug') );
							ireportData['thumb'] = getFirstChildValue( ireport.querySelector('thumb') );
							ireportData['staff'] = getFirstChildValue( ireport.querySelector('iReportStaff') );
							ireportData['staffUrl'] = getFirstChildValue( ireport.querySelector('iReportStaffURL') );
							ireportData['staffTitle'] = getFirstChildValue( ireport.querySelector('iReportStaffTitle') );
							ireportData['description'] = getFirstChildValue( ireport.querySelector('description') );
							ireportData['author'] = getFirstChildValue( ireport.querySelector('author') );
							ireportData['authorUrl'] = getFirstChildValue( ireport.querySelector('authorURL') );
							if ( ireportData.title && ireportData.url && ireportData.media && ireportData.thumb && ireportData.description ) {
								iReportsData.push( ireportData );
							}
						}
					}
					return iReportsData;
				};
				// set 'global' var
				iReportsData = getIReportsData(data);
				// hide spinner
				addClass( spinner, 'hidden' );
				// create Wall
				for ( var i = 0, end = wallElements.length, endtoo = iReportsData.length, max = 17;
					i < end && i < endtoo && i < max;
					i++
				) {
					wallElements.item(i).style.backgroundImage = 'url(' + iReportsData[i].thumb + ')';
				}
				// attach event handlers to Wall
				wall.addEventListener('click', iReportWallEventListener, true);
			} );
		},
		update24HourStats = function () {
			var storyCountSplit = stats_24hours.storyCount.split(''),
				vettedCountSplit = stats_24hours.vettedCount.split(''),
				commentCountSplit = stats_24hours.commentCount.split(''),
				storyNumbers = document.getElementById('iRWall_24hr_iReports'),
				vettedNumbers = document.getElementById('iRWall_24hr_vetted'),
				commentNumbers = document.getElementById('iRWall_24hr_comments'),
				storyHtmlArray = [],
				vettedHtmlArray = [],
				commentHtmlArray = [],
				i, end;
			for ( i = 0, end = storyCountSplit.length; i < end; i++ ) {
				storyHtmlArray.push('<div class="iReport_Stats_Number">' + storyCountSplit[i] + '</div>');
			}
			for ( i = 0, end = vettedCountSplit.length; i < end; i++ ) {
				vettedHtmlArray.push('<div class="iReport_Stats_Number">' + vettedCountSplit[i] + '</div>');
			}
			for ( i = 0, end = commentCountSplit.length; i < end; i++ ) {
				commentHtmlArray.push('<div class="iReport_Stats_Number">' + commentCountSplit[i] + '</div>');
			}
			storyNumbers.innerHTML = storyHtmlArray.join('');
			vettedNumbers.innerHTML = vettedHtmlArray.join('');
			commentNumbers.innerHTML = commentHtmlArray.join('');
		},
		updateAllTimeStats = function () {
			var storyCountSplit = stats_alltime.storyCount.split(''),
				vettedCountSplit = stats_alltime.vettedCount.split(''),
				storyNumbers = document.getElementById('iRWall_all_iReports'),
				vettedNumbers = document.getElementById('iRWall_all_vetted'),
				storyHtmlArray = [],
				vettedHtmlArray = [],
				i, end;
			for ( i = 0, end = storyCountSplit.length; i < end; i++ ) {
				storyHtmlArray.push('<div class="iReport_Stats_Number">' + storyCountSplit[i] + '</div>');
			}
			for ( i = 0, end = vettedCountSplit.length; i < end; i++ ) {
				vettedHtmlArray.push('<div class="iReport_Stats_Number">' + vettedCountSplit[i] + '</div>');
			}
			storyNumbers.innerHTML = storyHtmlArray.join('');
			vettedNumbers.innerHTML = vettedHtmlArray.join('');
		},
		updateWallStats = function () {
			// go get stats data
			getXML( iReportPulseURI, function (data) {
				var getPulseData = function (data) {
						var object = {};
						if ( data !== null ) {
							object['storyCount'] = data.getAttribute('storyCount');
							object['vettedCount'] = data.getAttribute('vettedCount');
							object['commentCount'] = data.getAttribute('commentCount');
						}
						return object;
					};
				stats_24hours = getPulseData( data.querySelector('stat[period="86400"]') );
				stats_alltime = getPulseData( data.querySelector('stat[period="0"]') );
				if ( stats_24hours
					&& stats_24hours.storyCount
					&& stats_24hours.vettedCount
					&& stats_24hours.commentCount
				) {
					console.dir( stats_24hours );	// XXX
					// update 24hour stats
					update24HourStats();
				} else {
					console.warn( '24hour stats', stats_24hours );
				}
				if ( stats_alltime
					&& stats_alltime.storyCount
					&& stats_alltime.vettedCount
				) {
					console.dir( stats_alltime );	// XXX
					// update alltime stats
					updateAllTimeStats();
				} else {
					console.warn( 'all time stats', stats_alltime );
				}
				// trigger event on first button showing
			} );
		},
		createWall = function (options) {
			var wallContainerId = options.containerId || 'iReportWallContainer',
				wallTemplate = document.createElement('div'),
				statsTemplate = document.createElement('div'),
				overlayTemplate = document.createElement('div'),
				spinnerTemplate = document.createElement('div');
			wallContainer = document.getElementById(wallContainerId);
			if ( wallContainer ) {
			 	if ( wall === undefined ) {
			 		wallTemplate.setAttribute('class', 'iReport_Wall');
			 		wallTemplate.innerHTML = '<div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div><div class="iReport_Element"></div>';
			 		statsTemplate.setAttribute('class', 'iReport_Stats');
			 		statsTemplate.innerHTML = '<div class="iReport_Buttons"><button class="selected">last 24 hours</button><button>all time</button></div><div class="iReport_Stats_Panel transitionIn" id="iReport_Stats_24Hours"><div class="iReport_Stats_Widget"><div class="iReport_Stats_Label">iReports</div><div class="iReport_Stats_Numbers" id="iRWall_24hr_iReports"></div></div><div class="iReport_Stats_Widget"><div class="iReport_Stats_Label">vetted</div><div class="iReport_Stats_Numbers" id="iRWall_24hr_vetted"></div></div><div class="iReport_Stats_Widget"><div class="iReport_Stats_Label">comments</div><div class="iReport_Stats_Numbers" id="iRWall_24hr_comments"></div></div></div><div class="iReport_Stats_Panel" id="iReport_Stats_AllTime"><div class="iReport_Stats_Widget"><div class="iReport_Stats_Label">iReports</div><div class="iReport_Stats_Numbers" id="iRWall_all_iReports"></div></div><div class="iReport_Stats_Widget"><div class="iReport_Stats_Label">vetted</div><div class="iReport_Stats_Numbers" id="iRWall_all_vetted"></div></div></div>';
			 		overlayTemplate.setAttribute('class', 'iReport_Overlay hidden');
			 		overlayTemplate.innerHTML = '<div class="iReport_CloseButton"></div><div class="iReport_PrevElement"></div><div class="iReport_NextElement"></div><div class="iReport_MediaWell"><div class="iReport_Bug"></div><div class="iReport_Media"></div><div class="iReport_MediaSource"></div></div><div class="iReport_Description"><div class="iReport_Headline"></div><div class="iReport_Blurb"></div></div>';
			 		spinnerTemplate.setAttribute('class', 'iReport_Spinner');
			 		spinnerTemplate.innerText = '✲';
			 		
			 		// remove children of wallContainer
			 		for ( var i = 0, children = wallContainer.children, end = children.length; i < end; i++ ) {
			 			wallContainer.removeChild( children[i] );
			 		}
					
					// replace container innerHTML
					wallContainer.appendChild( wallTemplate );
					
					// find wall in container
					wall          = wallTemplate;
					
					// append other pieces of the wall
					wall.appendChild( statsTemplate );
					wall.appendChild( overlayTemplate );
					wall.appendChild( spinnerTemplate );
					
					// set various shortcut vars
					wallElements  = wall.querySelectorAll('.iReport_Element');
					spinner       = spinnerTemplate;
					wallOverlay   = overlayTemplate;
					bug           = wallOverlay.querySelector('.iReport_Bug');
					media         = wallOverlay.querySelector('.iReport_Media');
					mediaSource   = wallOverlay.querySelector('.iReport_MediaSource');
					headline      = wallOverlay.querySelector('.iReport_Headline');
					blurb         = wallOverlay.querySelector('.iReport_Blurb');
				}
				// update wall elements
				updateWallElements();
				// update wall stats
				updateWallStats();
			}
		},
		init = function (options) {
			init = function () {};
			// window.addEventListener( "load", function () {
			document.addEventListener( "DOMContentLoaded", function () {
				createWall(options);
			} );
		};
	
	return ({
		init: init
	});
})();

if ( /\b(iPad|iPod|iPhone)\b/.test(window.navigator.userAgent) ) {
	iReportWall.init({ containerId: 'iReportWallContainer' });
}