$(document).ready(function() {  
	var id;
    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        id = $(this).attr('href');
     
        //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();
        var winW = $(window).width();
		var scroll = $(window).scrollTop();
               
        //Set the popup window to center
        $(id).css('top',  scroll+winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
     
        //transition effect
        $(id).fadeIn(2000); 
     
    });
     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });     
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         
     
	 //if next is clicked
	 $('.next').click( function(e){
		e.preventDefault();
		var curr = id;
		var word = curr.replace(/[0-9]/g, "");
		var num = parseInt(curr.replace( word, ""));
		num =num+1;
		var newid = word+num;
		if( $(newid).is('*')){
			//good
		}else{
			num = 1;
		}
		id = word+num;
		$(".window").hide();
		
		  //Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
		var scroll = $(window).scrollTop();
		
		$(id).css('top',  scroll+winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(1000);
	});
	
	//if prev is clicked
	$('.prev').click( function(e){
		e.preventDefault();
		var curr = id;
		var word = curr.replace(/[0-9]/g, "");
		var num = parseInt(curr.replace( word, ""));
		num =num-1;
		var newid = word+num;
		if( $(newid).is('*') ){
			//good
		}else{
			num = 1;
		}
		id = word+num;
		$(".window").hide();
		
		  //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
		var scroll = $(window).scrollTop();
		
		$(id).css('top',  scroll+winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(1000);
	});
});