// JavaScript Document
var currentPage = 1;

$(function() {
    $.superbox();
});

$.superbox.settings = {
    boxId: "superbox",
    // Id attribute of the "superbox" element
    boxClasses: "",
    // Class of the "superbox" element
    overlayOpacity: .8,
    // Background opaqueness
    boxWidth: "696",
    // Default width of the box
    boxHeight: "478"
    // Default height of the box
    };

$(document).ready(function() {
    $("#backgrounds img").hide(); //Hide backgrounds before being loaded

    $("#spanel").click(function() { //This whole block of the javascript is explained in the help file.
        return false;
    });

    $(".sl1").click(function() {
	 if(currentPage != 1) {
        $("#spanelbg").animate({
            left: "4px"
        }, 150, 'easeInCirc');
        $(".slider").animate({
            right: "0px"
        }, 450, 'easeInCubic');
        $("#slider li").fadeOut("fast");
        $("#slider li.sp1").fadeIn("slow");
        $("#backgrounds img").fadeOut(950);
	 }
	 currentPage = 1;
        return false;
    });

    $(".sl2").click(function() {
	 if(currentPage != 2) {
        $("#spanelbg").animate({
            left: "86px"
        }, 250, 'easeInCirc');
        $(".slider").animate({
            right: "270px"
        }, 450, 'easeInCubic');
        $("#slider li").fadeOut("fast");
        $("#slider li.sp2").fadeIn("slow");
        $("#backgrounds img").fadeOut("fast");
        $("#backgrounds #bg1").fadeIn(950);
	 }
	 currentPage = 2;
        return false;
    });

    $(".sl3").click(function() {
	 if(currentPage != 3) {
        $("#spanelbg").animate({
            left: "170px"
        }, 250, 'easeInCirc');
        $(".slider").animate({
            right: "540px"
        }, 450, 'easeInCubic');
        $("#slider li").fadeOut("fast");
        $("#slider li.sp3").fadeIn("slow");
        $("#backgrounds img").fadeOut("fast");
        $("#backgrounds #bg2").fadeIn(950);
	 }
	 currentPage = 3;
        return false;
    });

    $(".sl4").click(function() {
	 if(currentPage != 4) {
        $("#spanelbg").animate({
            left: "259px"
        }, 250, 'easeInCirc');
        $(".slider").animate({
            right: "810px"
        }, 450, 'easeInCubic');
        $("#slider li").fadeOut("fast");
        $("#slider li.sp4").fadeIn("slow");
        $("#backgrounds img").fadeOut("fast");
        $("#backgrounds #bg3").fadeIn(950);
	 }
	 currentPage = 4;
        return false;
    });

    $("#beta, #reserve, #loading").overlay({ 
	 expose: { 
        	color: '#333', 
        	loadSpeed: 200, 
        	opacity: 0.9 
    	}, 
    	closeOnClick: false,
	api: true,
	top: 120
    });

    $("#topbutton2").click(function() {$("#reserve").overlay().load();});
    $(".beta").click(function() {$("#beta").overlay().load();});
    $("#reserve-submit").click(function() {
	$(this).attr('disabled', true);
 	var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
	if($("#reserve-username").val().length <= 4 || $("#reserve-username").val().length > 30) {
	  alert('Please enter a username at least 5 characters long and shorter than 31 characters.');
       } else if(/\W/.test($("#reserve-username").val())) {
	  alert('Your username can only consist of letters and/or numbers.');
	} else if($("#reserve-email").val() == "") {
	  alert('Please enter your email address.');
	} else if(!emailPattern.test($("#reserve-email").val())) {
	  alert('Please enter a valid email address.');
	} else {
	  $("#hidden").load("/landing/reserve.php?username="+$("#reserve-username").val()+"&email="+$("#reserve-email").val(), function() {
		if($("#hidden").text() == "false") {
		  alert('Sorry, but that username is already taken or is invalid.');
		} else {
		  alert('That username has been reserved successfully.');
		}
	       $("#reserve").overlay().close();
	  });
	}
	$("#reserve-submit").attr('disabled', false);
    });
    $("#beta-submit").click(function() {
	$(this).attr('disabled', true);
 	var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
	if($("#beta-email").val() == "") {
	  alert('Please enter your email address.');
	} else if(!emailPattern.test($("#beta-email").val())) {
	  alert('Please enter a valid email address.');
	} else if($(".currentidevice").size() == 0) {
	  alert('Please spectify what iDevice you have.');
	} else if($("#beta-message").val() == "") {
	  alert("Please tell us why you'd be a good beta tester.");
	} else {
	  $("#hidden").load("/landing/br.php?email="+$("#beta-email").val()+"&device="+$(".currentidevice").attr('rel')+"&message="+encodeURIComponent($("#beta-message").val()), function() {
		if($("#hidden").text() == "true") {
		  alert("We've received your request and will review it ASAP.");
		} else {alert($("#hidden").text());
		  alert("Yes, we know. You've already submitted a request for a beta.");
		}
	       $("#beta").overlay().close();
	  });
	}
	$("#beta-submit").attr('disabled', false);
    });

    $(".idevice").click(function() {
	   $(".idevice").each(function() {
		$(this).css({background:"url('/images/regbutton.png')", color:'#000'});
		if($(this).hasClass("currentidevice")) {$(this).removeClass("currentidevice");}
	   });
	   $(this).css({background:"#C0C0C0", 'color':'#000'}).addClass("currentidevice");
	   $("#ctusername, #ctpassword").attr("disabled", false);
	   $("#step_2, #step_2 legend").animate({ opacity: 1.0 });
    });
});