$(document).ready(function() { 

	//$.preloadCssImages();
	
	function onloadevent(){
		$('body').animate({'display':'block'}, 400, function(){
			$('#phoneone .phone').css({'display':'block'}).animate({'top':'38px','display':'block','opacity':'1'}, 800);
			$('#phoneone .shadow').css({'display':'block'}).animate({'display':'block','opacity':'1'}, 800);
			$('#phoneone .reflection').css({'display':'block'}).animate({'top':'356px','display':'block','opacity':'1'}, 800);
			$('body').animate({'display':'block'}, 200, function(){
				$('#phonetwo .phone').css({'display':'block'}).animate({'top':'156px','opacity':'1'}, 800);
				$('#phonetwo .shadow').css({'display':'block'}).animate({'display':'block','opacity':'1'}, 800);
				$('#phonetwo .reflection').css({'display':'block'}).animate({'top':'327px','display':'block','opacity':'1'}, 800);
				$('body').animate({'display':'block'}, 2800, function(){
					$('.dots').css({'display':'block'});
					$('#theshow').css({'display':'block'});
					show();
				});
			});
		});
		updated();
	}
	
	function show(){
		$('body').animate({'display':'block'}, 3000, function(){
			$('.dots div:nth-child(1)').removeClass('active');
			$('.dots div:nth-child(2)').addClass('active');
			$('#theshow img:nth-child(1)').animate({'opacity':'1'}, 900, function(){
				$('body').animate({'display':'block'}, 3000, function(){
					$('.dots div:nth-child(2)').removeClass('active');
					$('.dots div:nth-child(3)').addClass('active');
					$('#theshow img:nth-child(2)').animate({'opacity':'1'}, 900, function(){
						$('body').animate({'display':'block'}, 3000, function(){
							$('.dots div:nth-child(3)').removeClass('active');
							$('.dots div:nth-child(4)').addClass('active');
							$('#theshow img:nth-child(3)').animate({'opacity':'1'}, 900, function(){
								$('body').animate({'display':'block'}, 3000, function(){
									$('.dots div:nth-child(4)').removeClass('active');
									$('.dots div:nth-child(5)').addClass('active');
									$('#theshow img:nth-child(4)').animate({'opacity':'1'}, 900, function(){
										$('#theshow img:nth-child(1)').css({'opacity':'0'});
										$('#theshow img:nth-child(2)').css({'opacity':'0'});
										$('#theshow img:nth-child(3)').css({'opacity':'0'});
										$('body').animate({'display':'block'}, 3000, function(){
											$('.dots div:nth-child(5)').removeClass('active');
											$('.dots div:nth-child(1)').addClass('active');
											$('#theshow img:nth-child(4)').animate({'opacity':'0'}, 900, function(){
												show();
											});
										})
									});
								});
							});
						});
					});
				});
			});
		});
	}
	
	function updated(){
		$('#updated').css({'left':'-200px', 'top':'-200px', 'opacity':'0'}).animate({'left':'0px', 'top':'0px', 'opacity':'1'}, 1800);
	}
	
	$('#screenshots a').click(function(){
		image = $(this).attr('name');
		$('#overlay').css({'display':'block'});
		$('#overlay').animate({'opacity':'1'}, 500, function(){
			$('#overlay #iphone').css({'display':'block'});
			$('#overlay #box').css({'display':'block'});
			$('#overlay #close').css({'display':'block'});
			$('#overlay #closetop').css({'display':'block'});
			$('#box img:nth-child('+ image +')').css({'display':'block'});
		});
	});
	
	$('#overlay #back, #overlay #close, #overlay #closetop').click(function(){
		$('#overlay #iphone').css({'display':'none'});
		$('#overlay #close').css({'display':'none'});
		$('#overlay #box').css({'display':'none'});
		$('#overlay #closetop').css({'display':'none'});
		$('#box img').css({'display':'none'});
		$('#overlay').animate({'opacity':'0'}, 500, function(){
			$(this).css({'display':'none'});
		});
	});
	
	$('#mailname, #mailemail').click(function(){
		if($(this).val() == 'Your name'){ $(this).val(''); }
		if($(this).val() == 'Your email'){ $(this).val(''); }
	});
	
	$('#submit').click(function(){
		function isValidEmail(str) {
			if ((str.indexOf(".") > 2) && (str.indexOf("@") > 0)){
				return true;
			} else {
				return false;
			}
		}
		
		if($('#mailname').val() != '' && $('#mailemail').val() != '' && $('#mailname').val() != 'Your name' && $('#mailemail').val() != 'your eamil'){
			if(isValidEmail($('#mailemail').val()) == true){
				name = $('#mailname').val();
				email = $('#mailemail').val();
				$.ajax({
   					type: "POST",
   					url: "http://www.keypointapp.com/web/index.php",
   					data: "name="+name+"&email="+email,
   					success: function(msg){
    				 	if(msg != 'error'){
    				 		$("#mail .body").html('<p>Welcome <strong>' + name + '</strong>, <br/> you are successfully subscribed !</p>');
    				 	} else {
    				 		alert('Sorry but something went wrong, please try again later');
    				 	}
   					}
 				});
			} else {
				alert('Please check your email adres');
			}
		} else {
			alert('Please fill in all needed information.');
		}
	});
	
	$(window).load(function (){ 
		onloadevent();
	});
	
});