//
//JS FOR HOME PAGE

function goLeft(){
	$('#image').fadeOut(1500);
	$("#top_text").animate({
		opacity:0
	},1500);
	$("#bottom_text").animate({
		opacity:0
	},1500);
	//Left to Right
	if($('#slider1').css('opacity') == 1){
		$("#slider1").animate({
		    opacity: 0, 
		},3000, function() {
			$("#image").attr("src","images/homePage/kiosk3.png");
			$("#top_text").html("Easy to customize and maintain.");
			$("#bottom_text").html("Amazing kiosk interfaces<br />using simple HTML 5 & CSS.");
			$("#top_text").animate({
				opacity:1
			}, 1500);
			$("#bottom_text").animate({
				opacity:1
			},1500);
			$("#image").fadeIn('slow');
		});
		$("#slider3").animate({
		    opacity: 1, 
		},3000);
		return;
	}
	//Middle to Left
	else if($('#slider2').css('opacity') == 1){
		$("#slider2").animate({
		    opacity: 0, 
		},3000, function() {
			$("#image").attr("src","images/homePage/kiosk1.png");
			$("#top_text").html("If you have a tablet, you have a kiosk.");
			$("#bottom_text").html("Simple kiosk management<br />for iPad and Android devices.");
			$("#top_text").animate({
				opacity:1
			}, 1500);
			$("#bottom_text").animate({
				opacity:1
			},1500);
			$("#image").fadeIn('slow');
		});
		$("#slider1").animate({
		    opacity: 1, 
		},3000);
		return;
		
	} else {
		//Right to Middle
		$("#slider3").animate({
		    opacity: 0, 
		},3000, function() {
			$("#image").attr("src","images/homePage/kiosk2.png");
			$("#top_text").html("What are your customers seeing?");
			$("#bottom_text").html("Superior tools for<br />controlled experiences.");
			$("#top_text").animate({
				opacity:1
			}, 1500);
			$("#bottom_text").animate({
				opacity:1
			},1000);
			$("#image").fadeIn('slow');
		});
		$("#slider2").animate({
		    opacity: 1, 
		},3000, function(){
			setTimeout(function(){
					$("#catImage").animate({
						opacity:'1'
					}, 1000);
					$("#image").animate({
						width: '0px',
						marginLeft: '233px',
						marginTop: '175px'
					}, 1000, function(){
						$("#image").attr("src","images/homePage/safari.png");
						setTimeout(function(){
							$("#catImage").animate({
								opacity:'0'
							}, 1000);
							$("#image").animate({
								width: '354px',
								marginLeft: '69px',
								marginTop: '55px'
							}, 500, function(){
								
							});
						},1000);
					});
			},1000);
		});
		
		return;
	}
}

function goRight(){
	$('#image').fadeOut(1500);
	$("#top_text").animate({
		opacity:0
	},1500);
	$("#bottom_text").animate({
		opacity:0
	},1500);
	
	//Middle
	if($('#slider1').css('opacity') == 1){
		$("#slider1").animate({
		    opacity: 0, 
		},3000, function() {
			$("#image").attr("src","images/homePage/kiosk2.png");
			$("#top_text").html("What are your customers seeing?");
			$("#bottom_text").html("Superior tools for<br />controlled experiences.");
			$("#top_text").animate({
				opacity:1
			}, 1500);
			$("#bottom_text").animate({
				opacity:1
			},1500);
			$("#image").fadeIn('slow');
		});
		$("#slider2").animate({
		    opacity: 1, 
		},3000, function(){
			setTimeout(function(){
					$("#catImage").animate({
						opacity:'1'
					}, 1000);
					$("#image").animate({
						width: '0px',
						marginLeft: '233px',
						marginTop: '175px'
					}, 1000, function(){
						$("#image").attr("src","images/homePage/safari.png");
						setTimeout(function(){
							$("#catImage").animate({
								opacity:'0'
							}, 1000);
							$("#image").animate({
								width: '354px',
								marginLeft: '69px',
								marginTop: '55px'
							}, 500, function(){
								
							});
						},1000);
					});
			},1000);
		});
		
		return;
	}
	
	//Right
	else if($('#slider2').css('opacity') == 1){
		$("#slider2").animate({
		    opacity: 0, 
		},3000, function() {
			$("#image").attr("src","images/homePage/kiosk3.png");
			$("#top_text").html("Easy to customize and maintain.");
			$("#bottom_text").html("Amazing kiosk interfaces<br />using simple HTML 5 & CSS.");
			$("#top_text").animate({
				opacity:1
			}, 1500);
			$("#bottom_text").animate({
				opacity:1
			},1500);
			$("#image").fadeIn('slow');
		});
		$("#slider3").animate({
		    opacity: 1, 
		},3000, function(){
		});
		
		
		return;
		
		//Left
	} else {
		$("#slider3").animate({
		    opacity: 0, 
		},3000, function() {
			$("#image").attr("src","images/homePage/kiosk1.png");
			$("#top_text").html("If you have a tablet, you have a kiosk.");
			$("#bottom_text").html("Simple kiosk management<br />for iPad and Android devices.");
			$("#top_text").animate({
				opacity:1
			}, 1500);
			$("#bottom_text").animate({
				opacity:1
			},1000);
			$("#image").fadeIn('slow');
		});
		$("#slider1").animate({
		    opacity: 1, 
		},3000);
		return;
	}	
}

function catPictures(){
	$("#catImage").animate({
		opacity:'1'
	}, 1000);
	$("#image").animate({
		width: '0px',
		marginLeft: '233px',
		marginTop: '175px'
	}, 500, function(){
		$("#image").attr("src","images/homePage/safari.png");
		setTimeout(function(){
			$("#catImage").animate({
				opacity:'0'
			}, 1000);
			$("#image").animate({
				width: '354px',
				marginLeft: '69px',
				marginTop: '55px'
			}, 500, function(){
				
			});
		},1000)
		});
}

function submitButton(){
	$('#response').empty();
	var response="Something went wrong...please try again.";
	   var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
	    if(filter.test($('#idukk-idukk').val())){
	    	document.forms['campaignForm'].submit();
	    	response="Thanks, " + $('#idukk-idukk').val() + " was registered."
	    }
	    else{
	    	response="Invalid email...please try again."
	    }
	$('#response').append(response);
}

$(document).scroll(
		function(){
			if( ($(document).scrollTop() > 8) && ($('#shadow').css('opacity') == 0)) {
		    	$('#shadow').animate({
		    		opacity: 1
			      }, 750 )
			}
			if( ($(document).scrollTop() < 8) && ($('#shadow').css('opacity') == 1)) {
		    	$('#shadow').animate({
		    		opacity: 0
			      }, 750 )
			}
			console.log($(document).scrollTop());
		}
	)

	 $(document).ready(function(){
		 $("a#show-panel").click(function(){
		 $("#lightbox, #lightbox-panel").fadeIn(300);
		 })
		 $("a#close-panel").click(function(){
		 $("#lightbox, #lightbox-panel").fadeOut(300);
		 })
	 })