//What to do when document is ready
$(document).ready(function(){
    //Initialize the global variables
    var picture = 1;
    var folder = "";
    var numPics = 0;
    
	//select all the a tag with name equal to modal  
    $('a[class=thumb]').click(function(e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        
        //Set the folder variable
        folder = ($(this).attr('id').split('|'))[0];
        
        //Set the numPics variable
        numPics = ($(this).attr('id').split('|'))[1];
        
        //Reset the picture variable
        picture = 1;
        
        //Get the heigth of the picture
        var img = new Image();
        img.src = "http://www.fbcschertz.org/images/youth/" + folder + "/" + picture.toString() + ".jpg";
        
        //Set the height of the window
        if (img.height > 0 )
        {
            $('.window').css({'height':img.height + 90}); 
        }
        
        //Get the A tag  
        var id = $(this).attr('name');  
      
        //Get the screen height and width  
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();  
      
        //Set height and width to mask to fill up the whole screen  
        $('#mask').css({'width':maskWidth,'height':maskHeight});  
          
        //transition effect       
        $('#mask').fadeIn(1000);      
        $('#mask').fadeTo("slow",0.8);    
      
        //Get the window height and width  
        var winH = $(window).height() + (window.pageYOffset * 2);  
        var winW = $(window).width();  
                
        //Set the popup window to center  
        $(id).css('top',  winH/2-$(id).height()/2);  
        $(id).css('left', winW/2-$(id).width()/2);  
      
        //Set the title
        $('#dialogTitle').html($(this).attr('title'));
        
        //transition effect  
        $(id).fadeIn(2000);   
        
        //Load the first image into the box
        $('#dialogImg').attr("src", "http://www.fbcschertz.org/images/youth/" + folder + "/" + picture.toString() + ".jpg");
    });  
      
    //if close button is clicked  
    $('.window .close').click(function (e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        $('#mask, .window').hide();  
    });       
    
    //if next button is clicked  
    $('.window .next').click(function (e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        
        //Increment the picture variable
        picture += 1;
        if (picture > numPics)
        {
            picture = 1;
        }
        
        //Load the next image
        $('#dialogImg').fadeOut(1000, function() {
                $('#dialogImg').attr("src", "http://www.fbcschertz.org/images/youth/" + folder + "/" + picture.toString() + ".jpg").fadeIn(1000);
            }
        );
    });    
    
    //if prev button is clicked  
    $('.window .prev').click(function (e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        
        //Increment the picture variable
        picture -= 1;
        if (picture <= 0)
        {
            picture = numPics;
        }
        
        //Load the next image
        $('#dialogImg').fadeOut(1000, function() {
                $('#dialogImg').attr("src", "http://www.fbcschertz.org/images/youth/" + folder + "/" + picture.toString() + ".jpg").fadeIn(1000);
            }
        );
    });          
      
    //if mask is clicked  
    $('#mask').click(function () {  
        $(this).hide();  
        $('.window').hide();  
    });  
         
});

//Switch between content for Announcements page
function update_content(url) {
    $("#data").hide().load(url).fadeIn();
}