$(document).ready(function()
{ 

   //When the link that triggers the message is clicked fade in overlay/msgbox  
   $(".alert1").click(function()
   {
	  $(".lightbox").css("height", 215);
   	  $(".lightbox").css("width", 750);
	  
	  var windowWidth = $(window).width();
	  var windowCenter = windowWidth / 2;
	  var divWidth = 750;
	  var divOffset = divWidth / 2;

	  $(".lightbox").css("position", "fixed"); // keeps it in place even if user scrolls; otherwise use "absolute", etc.
	  $(".lightbox").css("left", windowCenter); // puts left edge of div at center point
	  $(".lightbox").css("margin-left", "-" + divOffset + "px"); // offsets DIV but half its width so it's centered in viewport
	  $(".lightbox").css("width", divWidth + "px"); // without some kind of set width, the positioning won't work as intended
	  
      $("#LightBox1").fadeIn();
      return false;  
   });
   $(".alert2").click(function()
   {
	  $(".lightbox").css("height", 280);
   	  $(".lightbox").css("width", 750);
	  
	  var windowWidth = $(window).width();
	  var windowCenter = windowWidth / 2;
	  var divWidth = 750;
	  var divOffset = divWidth / 2;

	  $(".lightbox").css("position", "fixed"); // keeps it in place even if user scrolls; otherwise use "absolute", etc.
	  $(".lightbox").css("left", windowCenter); // puts left edge of div at center point
	  $(".lightbox").css("margin-left", "-" + divOffset + "px"); // offsets DIV but half its width so it's centered in viewport
	  $(".lightbox").css("width", divWidth + "px"); // without some kind of set width, the positioning won't work as intended
	  
      $("#LightBox2").fadeIn();
      return false;  
   });  
   $(".alert3").click(function()
   {
	  $(".lightbox").css("height", 465);
   	  $(".lightbox").css("width", 750);
	  
	  var windowWidth = $(window).width();
	  var windowCenter = windowWidth / 2;
	  var divWidth = 750;
	  var divOffset = divWidth / 2;

	  $(".lightbox").css("position", "fixed"); // keeps it in place even if user scrolls; otherwise use "absolute", etc.
	  $(".lightbox").css("left", windowCenter); // puts left edge of div at center point
	  $(".lightbox").css("margin-left", "-" + divOffset + "px"); // offsets DIV but half its width so it's centered in viewport
	  $(".lightbox").css("width", divWidth + "px"); // without some kind of set width, the positioning won't work as intended
	  
      $("#LightBox3").fadeIn();
      return false;  
   });
   $(".alert4").click(function()
   {
	  $(".lightbox").css("height", 370);
   	  $(".lightbox").css("width", 750);
	  
	  var windowWidth = $(window).width();
	  var windowCenter = windowWidth / 2;
	  var divWidth = 750;
	  var divOffset = divWidth / 2;

	  $(".lightbox").css("position", "fixed"); // keeps it in place even if user scrolls; otherwise use "absolute", etc.
	  $(".lightbox").css("left", windowCenter); // puts left edge of div at center point
	  $(".lightbox").css("margin-left", "-" + divOffset + "px"); // offsets DIV but half its width so it's centered in viewport
	  $(".lightbox").css("width", divWidth + "px"); // without some kind of set width, the positioning won't work as intended
	  
      $("#LightBox4").fadeIn();
      return false;  
   });
   $(".alert5").click(function()
   {
   	  $(".lightbox").css("height", 338);
   	  $(".lightbox").css("width", 500);
	  
	  var windowWidth = $(window).width();
	  var windowCenter = windowWidth / 2;
	  var divWidth = 500;
	  var divOffset = divWidth / 2;

	  $(".lightbox").css("position", "fixed"); // keeps it in place even if user scrolls; otherwise use "absolute", etc.
	  $(".lightbox").css("left", windowCenter); // puts left edge of div at center point
	  $(".lightbox").css("margin-left", "-" + divOffset + "px"); // offsets DIV but half its width so it's centered in viewport
	  $(".lightbox").css("width", divWidth + "px"); // without some kind of set width, the positioning won't work as intended
	  
      $("#LightBox5").fadeIn(); 
      $('#videoholder').fadeOut().load('cma_demo_video.html').fadeIn();  //Place video link here. after .load() 
      return false;  
   });
   $(".alert6").click(function()
   {
   	  $(".lightbox").css("height", 338);
   	  $(".lightbox").css("width", 500);
	  
	  var windowWidth = $(window).width();
	  var windowCenter = windowWidth / 2;
	  var divWidth = 500;
	  var divOffset = divWidth / 2;

	  $(".lightbox").css("position", "fixed"); // keeps it in place even if user scrolls; otherwise use "absolute", etc.
	  $(".lightbox").css("left", windowCenter); // puts left edge of div at center point
	  $(".lightbox").css("margin-left", "-" + divOffset + "px"); // offsets DIV but half its width so it's centered in viewport
	  $(".lightbox").css("width", divWidth + "px"); // without some kind of set width, the positioning won't work as intended
	  
      $("#LightBox6").fadeIn(); 
      $('#videoholder').fadeOut().load('cma_testimonials_video.html').fadeIn();  //Place video link here. after .load() 
      return false;  
   });
   

  
   //When the message box is closed, fade out  
   $(".close1").click(function()
   {  
      $("#LightBox1").fadeOut();
      return false;  
   });
   $(".close2").click(function()
   {  
      $("#LightBox2").fadeOut();
      return false;  
   });
   $(".close3").click(function()
   {  
      $("#LightBox3").fadeOut();
      return false;  
   });
   $(".close4").click(function()
   {  
      $("#LightBox4").fadeOut();
      return false;  
   });
   $(".close5").click(function()
   {  
  	  $("#LightBox5").fadeOut();  
	  // Remove and re-add video  
	  $("#addvideo").empty();  
	  $("#addvideo").remove();
      return false;  
   });
    $(".close6").click(function()
   {  
  	  $("#LightBox6").fadeOut(); 
	  $("#addvideo2").empty();  
	  $("#addvideo2").remove();
      return false;  
   });

  
});  
  
  
//Adjust height of overlay to fill screen when browser gets resized  
$(window).bind("resize", function()
{  
	$("#LightBox1").css("height", $(window).height());
	$("#LightBox2").css("height", $(window).height());
	$("#LightBox3").css("height", $(window).height());
	$("#LightBox4").css("height", $(window).height());
	$("#LightBox5").css("height", $(window).height());
	$("#LightBox6").css("height", $(window).height());
});