window.addEvent('domready', function() {
			
			//Create the popUp element
			var el = new Element('div', {'id': 'popUp'}).inject(document.body, 'top');
			
			//add the appropriate elements to populate
			var name = new Element('p',{'html': ', You are not alone.'}).inject(el);
			var nameContainer = new Element('span',{'class': 'varName'}).inject(name, 'top');
			var todContainer = new Element('span', {'class':'timeOfDay'}).inject(name, 'top');
			var timeContainer = new Element('span', {'class':'currentTime'}).inject(name, 'top');

			
			//hide the pop up bar
			el.setStyles({opacity: 0, 'z-index': 1000});
			
			
			//create the time scroller container
			var timeScroller = new Element('div', {'id': 'headerTimer',
			'styles': {
        			'overflow': 'hidden',
        			'height': '215px',
        			'text-align':'left',
        			'padding-left':'20px'
    				}
    				}).inject($("scroller"), 'top');
			
			//create the time scroller individual element containers
			for (var count = 1; count <= 10; count++)
				new Element('p', {'id': 'scroller'+ count, 
					'styles': {
        			'margin': '0',
        			'padding': '0',
        			'padding-bottom': '0',
        			'opacity': 1.1-(count/10)
    				}
    				
				}).inject($("headerTimer"), 'top');
			
			
			//create the time and get set the name variable data
			var nameClock = {
				update: function () {

				var currentTime = new Date ();
				var currentHours = currentTime.getHours ( );
				var currentMinutes = currentTime.getMinutes( );

  				// Pad the minutes and seconds with leading zeros, if required
  				currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

					// Choose either "AM" or "PM" as appropriate
  				var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  				// Convert the hours component to 12-hour format if needed
  				currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  				// Convert an hours component of "0" to "12"
  				currentHours = ( currentHours == 0 ) ? 12 : currentHours;
				
				
  				// Compose the string for display
  				var currentTimeString = currentHours + ":" + currentMinutes ;
				
				

  				var addNames = function(names) {
						names.each(function(getNames,index) {
							if (index == currentMinutes) {
								$$(".varName").set('html', getNames.author);
					  		$$(".currentTime").set('html', currentTimeString);
  							$$(".timeOfDay").set('html', timeOfDay);
  							
  						// when we have the names then fade the popup in wait 10 seconds and fade it out
							var fadeIn = function(){$('popUp').fade('in');}.delay(0);
							var fadeOut = function(){$('popUp').fade('out');}.delay(10000);
  				
  						//this composes the scroller string elements from the current time and corresponding data
  								for (var count = 1; count <= 10; count++){
  							
  								//get the currentminutes
  								var scrollerMinutes = (currentMinutes < count) ? (currentMinutes - ((60 - count)/-1)) : currentMinutes - (count - 1);
  							
  								//get the name in the array index
  								var scrollerName = names[scrollerMinutes].author;
  							
  								// re pad the minutes and seconds with leading zeros, if required
  								scrollerMinutes = ( scrollerMinutes < 10 ? "0" : "" ) + scrollerMinutes;
  							
  								//reset the hour if the minutes return backward
  								var scrollerHours = currentMinutes < count ? (currentHours - 1) : currentHours;
  							
  								// Convert the hours component of "0" to "12"
  								scrollerHours = ( scrollerHours == 0 ) ? 12 : scrollerHours;
  								
  							
 									//This puts the entire name string elementstogether
  								$('scroller' + count).set('html',  scrollerHours + ":" + scrollerMinutes + "<span class=\"timeOfDay\">" + timeOfDay +"</span>"+ "&nbsp;&nbsp;" + scrollerName);
  							
    							};
    					};
					
		
				});
			};

  			//gets JSON request
			var request = new Request.JSON({
				url: 'http://www.domesticviolencecenter.org/quote-data.json',
				onComplete: function(jsonObj) {
				
			// this creates the object array to be used by the addNames function	
			addNames(jsonObj.names);

			}
			}).get();
			}
		};
	
			
			
			nameClock.update();
			nameClock.update.periodical(60000);
			
});