
document.observe('dom:loaded', function(){	

	$$('body').each(function(elBody){
		
		if(elBody.hasClassName('Default') && ( elBody.hasClassName('page_4') || elBody.hasClassName('about-me') || elBody.hasClassName('page_1')) && $$('#mainContainer div.contents div.content').length>0){
			
			var elBox = $$('#mainContainer div.contents div.content')[0];
			
			
			
			if($$('div.VideoContainer').size()>0){
				
				elBox.addClassName('vids');
				var ob_videos = new Element('div').addClassName('vidCont').writeAttribute('id','Videos');
				var ob_thumbs = new Element('div').addClassName('vidThumbs');
				$$('div.VideoContainer').each(function(vid,count){
					
					//console.log(vid.innerHTML);
					
					
					var ThumbLink = new Element('a').addClassName('videoThumb').update('<b>Play Video</b>').writeAttribute('href','#');
					
					ob_videos.insert({'bottom':vid});
					
					if(vid.innerHTML.match(/\/video-thumb[^.]+\.[a-z34]{2,5}/)){
						//console.info(vid.innerHTML.match(/\/video-thumb[^.]+\.[a-z34]{2,5}/));
						var img = new Element('img').writeAttribute('src',vid.innerHTML.match(/\/video-thumb[^.]+\.[a-z34]{2,5}/)[0]).writeAttribute('alt','Video Thumbnail');
						ThumbLink.insert({'bottom':img});
					}
					
					
					Event.observe(ThumbLink, 'click', function(event){
						Event.stop(event);
						
						$$('div.VideoContainer')[$$('div.vidThumbs a.videoThumb.selected')[0].previousSiblings().size()].removeClassName('selected');
						$$('div.vidThumbs a.videoThumb.selected')[0].removeClassName('selected');
						this.addClassName('selected');
						this.blur();
						//console.log(this.previousSiblings().size());
						//console.info($$('div.VideoContainer')[this.previousSiblings().size()]);
						$$('div.VideoContainer')[this.previousSiblings().size()].addClassName('selected');	
					});
					
														
					
					
					ob_thumbs.insert({'bottom':ThumbLink});
									
					
					//console.log(count);
					elBox.insert({'bottom':ob_videos});
					ob_videos.insert({'bottom':ob_thumbs});
					
					if(count==0){
						vid.addClassName('selected');
						ThumbLink.addClassName('selected');	
					}
										
			 });
				elBox.childElements()[0].hide();
			}

			
			
			elBox.insert({'top':new Element('hr')});
			elBox.insert({'bottom':new Element('hr')});
			
			var elTopRight = new Element('span').update('&nbsp;').addClassName('Top').addClassName('Right')
			elBox.insert({'bottom':elTopRight});
			var elBottomRight = new Element('span').update('&nbsp;').addClassName('Bottom').addClassName('Right')
			elBox.insert({'bottom':elBottomRight});
			var elTopLeft = new Element('span').update('&nbsp;').addClassName('Top').addClassName('Left')
			elBox.insert({'bottom':elTopLeft});
			var elBottomLeft = new Element('span').update('&nbsp;').addClassName('Bottom').addClassName('Left')
			elBox.insert({'bottom':elBottomLeft});
		
			var elCloseText = new Element('a',{'href':'#'}).addClassName('closeText').update('Close this window');
			elBox.insert({'bottom':elCloseText});
			Event.observe(elCloseText, 'click', function(event){
				__closeInfoBox(event,elBox.identify());
			});
			
			var elCloseIcons = new Element('a',{'href':'#'}).addClassName('closeIcon').update('&times;');
			elBox.insert({'top':elCloseIcons});
			Event.observe(elCloseIcons, 'click', function(event){
				__closeInfoBox(event,elBox.identify());
			});
			
			if($$('div.VideoContainer').size()>0){
				var elVidOpen = new Element('a').writeAttribute('href','#').addClassName('videoLink').update('Videos');
				//console.info(elVidOpen);
				elBox.insert({'before':elVidOpen});
				Event.observe(elVidOpen, 'click', function(event){
					__showInfoBox(event,elBox.identify());
				});
			}
			
		}
	
	});

});


function __closeInfoBox(event,box_id){
	Event.stop(event);	
	if($(box_id).hasClassName('vids')){
		$('Videos').fade({duration:0.4,afterFinish: function(){ 		$$('#'+box_id+' div.html')[0].appear({duration:0.4}); $(box_id).removeClassName('vids'); }});
	}else{
		$(box_id).fade({duration:0.4});
	}
}

function __showInfoBox(event,box_id){
	$('Videos').show();
	$$('#'+box_id+' div.html')[0].hide();
	Event.stop(event);
	$(box_id).appear({duration:0.4});
}

	
