$(document).ready(function() {    

		var locked = 0;
		var active = "";
		var selected = "";
		var media1 = $('#story1 #media1').html();
		var media2 = $('#story2 #media2').html();
		var media3 = $('#story3 #media3').html();
		
		
		// select all the <a> tags with name equal to modal
		$('a[name=modal]').mouseover(function() {
			
			var story = $(this).attr('href');
			
			if (story != active) {
				$(this).find("img").attr('src', '/wps/wcmresources/templates/home/images/' + story.substr(1, story.length) + '-thumb-over.jpg');
			}

		});
		
		// select all the <a> tags with name equal to modal
		$('a[name=modal]').mouseout(function() {
			
			var story = $(this).attr('href');

			if (story == active) {
				$(selected).children("img").attr('src', '/wps/wcmresources/templates/home/images/' + story.substr(1, story.length) + '-thumb-active.jpg');
			} else {
				$(this).children("img").attr('src', '/wps/wcmresources/templates/home/images/' + story.substr(1, story.length) + '-thumb.jpg');
			}

		});
		
		// select all the <a> tags with name equal to modal   
		$('a[name=modal]').click(function(e) {
			
			//Cancel the link behavior   
			e.preventDefault();
			
			// Hide browser focus outline
			$(this).blur();
		
			if (active) {
				
				// Ignore click if this is the active window or were in the process of closing a window
				if (active == $(this).attr('href') || locked == 1) {
					return;
				}

				locked = 1;
				
				// Hide active window  
				$(active).hide();
				
				// detach to disable the media (only really necessary for video)
				if (active == '#story1') {
					$('#story1 #media1').empty();
				} else if (active == '#story2') {
					$('#story2 #media2').empty();
				} else {
					$('#story3 #media3').empty();
				}
				
				$(selected).children("img").attr('src', '/wps/wcmresources/templates/home/images/' + selected.substr(1, selected.length) + '-thumb.jpg');
				
			}
			
			locked = 1;
			 
			//Get the A tag   
			active = $(this).attr('href');
			selected = '.' + active.substr(1, active.length);
			
			$(selected).children("img").attr('src', '/wps/wcmresources/templates/home/images/' + selected.substr(1, selected.length) + '-thumb-active.jpg');
			
			//transition effect
			$('#mask').css('opacity', 0.73);
			
			// Show Mask
			$('#mask').slideDown(500, function () {
				
				//Set the selected window to align with mask
				var offset = $('#mask').offset();
					
				$(active).css('top',  offset.top);   
				$(active).css('left', offset.left);
				
				// Make sure active media is attached
				if (active == '#story1') {
					$('#story1 #media1').html(media1);
				} else if (active == '#story2') {
					$('#story2 #media2').html(media2);
				} else {
					$('#story3 #media3').html(media3);
				}
				
				// Show the window
				$(active).show(0, function () {
					
					locked = 0;
							
				});
				
			});

		});
		
		// When the browser is resized
		$(window).resize(function() {
			
			var offset = $('#mask').offset();
			
			$(active).css('top',  offset.top);   
			$(active).css('left', offset.left);
			
		});

		//If window close button is clicked   
		$('.exit .close').click(function (e) {

			//Cancel the link behavior   
			e.preventDefault();
			
			locked = 1;
			
			//Get the href attribute of the A tag   
			var id = $(this).attr('href');
			
			// detach to disable the media (only really necessary for video)
			if (active == '#story1') {
				$('#story1 #media1').empty();
			} else if (active == '#story2') {
				$('#story2 #media2').empty();
			} else {
				$('#story3 #media3').empty();
			}
			
			// Hide active window   
			$(id).fadeOut(200, function () {
						
				// Hide Mask
				$('#mask').slideUp(500, function () {
										
					$(selected).children("img").attr('src', '/wps/wcmresources/templates/home/images/' + selected.substr(1, selected.length) + '-thumb.jpg');
					
					// No active or selected story
					selected = "";
					active = "";
					locked = 0;
				});
				
			}); 
			
		});      
		
});