// JavaScript Document
$(document).ready(function() {
						   // Check to see if div with an ID of boxes exsist.
						   if($('#boxes').size() > 0) {
															 $('#boxes, #dialog img').show();
															
															 //$('#dialog, .window').unbind('mouseenter mouseleave');
															 // hide all pics so you can show only first pic
															 $('#dialog img').hide();
															 $('#lightBoxFooter img').fadeIn(1000);
															 // Show only first pic using id
															 $('#dialog').fadeIn(1000);
															 $('#1').fadeIn(1000);
															 $('#dialog img:visible').addClass('toggle');
															 var currentPic = Number($(".toggle").attr('id'));
															 // Calculate the total number of slides by counting the total images in the dialog element
															 // You have to subtract 1 because one of the images is the close image in the footer.
															 var totalSlides = $('#dialog img').size() - 3;
															 // Add text to boxNumbers div to show Slide x of x.
															 $('.boxNumbers').text("Slide " + currentPic + " of " + totalSlides);
			 
															 // Store image width and height to resize lightbox window
				
															 var boxImageWidth = $("#" + currentPic).width();
															 var boxImageHeight = $("#" + currentPic).height();
															 var boxImageFooterWidth = $("#" + currentPic).width();
															 
															 // hover over box widths for next and previous buttons
															 var boxNextPrevWidth = $("#" + currentPic).width()/2;
															 $('#nextMask').css({'margin-left': boxNextPrevWidth + 'px', 'text-align':'right', 'width':boxNextPrevWidth, 'height':boxImageHeight});
															 $('#previousMask').css({'width':boxNextPrevWidth, 'height':boxImageHeight, 'text-align':'left'});
															 
															 
															 //change width and height of modal window to match picture
															 $('#dialog').css({'width':boxImageWidth,'height':boxImageHeight});
															 $('#lightBoxFooter').css({'padding-left':'12px', 'padding-right':'12px', 'margin-left': '-12px','width':boxImageFooterWidth, 'height':'42'});
															 
															 //Get the A tag
															 var id = $('#dialog');
															 
															 // Get the screen height and width
															 var maskHeight = $(document).height();
															 var maskWidth = $(document).width();
															 
															 // Set height and width to mask and fill up the screen
															 $('#mask').css({'width':maskWidth,'height':maskHeight});
															 
															 // Transition effect
															$('#mask').fadeIn(1000);       
															$('#mask').fadeTo("slow",0.9);     
															 
															 // Get the window height and width
															 var winH = $(window).height();
															 var winW = $(window).width();
															 
															 // Set the popup window to center
															 if($("#" + currentPic).height() > 400) {
															 $(id).css('top', (winH/2-$(id).height()/2));
															 } else {
																 $(id).css('top', (winH/2-$(id).height()/2)-150);
															 }
															 $(id).css('left', (winW/2-$(id).width()/2));
															 
															 // Transition effect
															 $(id).fadeIn(2000);
						   }
						  
						  // Next picture click function
						   $('#dialog .nextPic').click(function (e) {
																 // Cancel link behavior
																 e.preventDefault();
																var nextPic = (currentPic) + 1;
																var boxImageWidth = $("#" + nextPic).width();
																var boxImageHeight = $("#" + nextPic).height();
															 //change width and height of modal window to match picture
																$('#dialog').animate({width: boxImageWidth,height: boxImageHeight}, 300 );
																// remove toggle class from current image so you can add it to the next image.
																$("#" + currentPic).removeClass('toggle');
																// Fade in next image
																$("#" + nextPic).fadeIn(1000);
																// Add toggle class to next image so you can serach for it and get its id.

																$("#" + nextPic).addClass('toggle');
																// Hide previous pic so you only see one pic at a time.
																$("#" + currentPic).hide();
																// Get id of current pic by searching for the toggle class.
																currentPic = Number($('.toggle').attr('id'));
																// Toggle footer so it doesn't look funky
																$('.boxNumbers, #closeLightBox').hide();
																$('#lightBoxFooter').slideToggle("slow");
																$('#lightBoxFooter').slideToggle("slow");
																$('.boxNumbers, #closeLightBox').fadeIn(2000);
																// Update slide x of x text in footer
																$('.boxNumbers').text("Slide " + currentPic + " of " + totalSlides);
																// Show / Hide next and previous links	
																 });
						   
						   // Previous click function
						   $('#dialog .prevPic').click(function (e) {
																 // Cancel link behavior
																e.preventDefault();
																var prevPic = (currentPic) - 1;
																var boxImageWidth = $("#" + prevPic).width();
															 	var boxImageHeight = $("#" + prevPic).height();
															 //change width and height of modal window to match picture
																$('#dialog').animate({width: boxImageWidth,height: boxImageHeight}, 300 );
																$("#" + currentPic).removeClass('toggle');
																$("#" + prevPic).fadeIn(1000);
																$("#" + prevPic).addClass('toggle');
																$("#" + currentPic).hide();
																currentPic = Number($('.toggle').attr('id'));
																// Update slide x of x text in footer
																$('.boxNumbers, #closeLightBox').hide();
																$('#lightBoxFooter').slideToggle("slow");
																$('#lightBoxFooter').slideToggle("slow");
																$('.boxNumbers, #closeLightBox').fadeIn(2000);
																$('.boxNumbers').text("Slide " + currentPic + " of " + totalSlides);
															
																 });
						   
						 // function to show or not show next and prev buttons on first and last slides.
						 jQuery.fn.slides = function() {
								 if (currentPic >= totalSlides) {
																	$('.nextPic').hide();
																} else {
																	$('.nextPic').show();	
																} 
																
																	if(currentPic <= 1) {
																$('.prevPic').hide();	
																} else {					
															 		$('.prevPic').show();
																}
						 };
						 
						
						$('#dialog, #nextMask div').hover(function() {
													    $('#boxes, #dialog, #mask').mouseenter(function(e){e.preventDefault();});
											   			 $('#nextMask').css({'margin-left': boxNextPrevWidth + 'px', 'width':boxNextPrevWidth, 'height':boxImageHeight});
														 $('#nextMask img').show();
														 $('#next').css({'margin-top':'33px'});
														 $('#nextMask').slides();
														 
													  },
													  function () {
														  $('#boxes, #dialog, #mask').mouseleave(function(e){e.preventDefault();});
														  $('#nextMask img').hide();  
													  }
												);  
						
						$('#dialog, #previousMask div').hover(function() {
													    $('#boxes, #dialog, #mask').mouseenter(function(e){e.preventDefault();});
											   			 $('#previousMask').css({'width':boxNextPrevWidth, 'height':boxImageHeight});
														 $('#previousMask img').show();
														 $('#previous').css({'margin-top':'33px'});
														 $('#previousMask').slides();
														 
													  },
													  function () {
														  $('#boxes, #dialog, #mask').mouseleave(function(e){e.preventDefault();});
														  $('#previousMask img').hide();  
													  }
												);  
						  
						  // If close button is clicked
						   $('#dialog .close').click(function (e) {
															   // Cancel link behavior
															   e.preventDefault();
															   $('#mask, #dialog').hide();
															   });
						   
						   // If mask is clicked
						   $('#mask').click(function() {
													 $(this).hide();
													 $('#dialog').hide();
													 });
						   });