// JavaScript Document
// requires jquery

var loader = new Image(); // preload
loader.src = 'zapit/_images/home/loader.gif';
var paging = new Image(); // preload
paging.src = 'zapit/_images/home/paging.png';

$(document).ready(function() {
	var animating = 0;
	// BEGIN DOM SETUP
	$('#banner_cycle')
		.html("<div class='window'><div class='image_reel'><span id='scroll1'> </span><span id='scroll2'><div class='banner_text'>SMS Business Solutions</div></span><span id='scroll3'> </span><span id='scroll4'><div class='banner_text'>Immediate communication, gets through when voice and email can't.</div></span></div></div><div class='paging'><div class='loading'> </div></div>").show();
	// END DOM SETUP
	
	var $scroll1 = $('#scroll1');
	var $scroll2 = $('#scroll2');
	var $scroll3 = $('#scroll3');
	var $scroll4 = $('#scroll4');
	
	// show the paging
	$(".paging").show();
	
	images_loaded = function() {
		
		rotateSwitch(); //Run function on launch
		
		// Pause the rotation on hover
		/* $(".image_reel img").hover(function() {
			clearInterval(play); // stop the rotation
		}, function() {
			rotateSwitch(); // resume rotation timer
		});	*/
		
		//On Click
		$(".paging a").click(function() {
			$active = $(this); //Activate the clicked paging
			//Reset Timer
			clearInterval(play); //Stop the rotation
			rotate(); //Trigger rotation immediately
			rotateSwitch(); // Resume rotation timer
			return false; //Prevent browser jump to link anchor
		});
	}
	
	
	// preload the banner images before beginning rotation
	var hero1 = new Image()
	hero1.src = 'zapit/_images/banners/hero-home1.jpg';
	dltimer = setInterval(function(){
		if(hero1.complete){
			clearInterval(dltimer);
			$('.loading').before("<a href='' rel='1'>1</a>");
			$active = $(".paging a").filter(function(index) {
				return $(this).attr("rel") == 1;
			});
			$(".paging a").click(function() {return false;});
			rotate();
			var hero2 = new Image(); // preload
			hero2.src = 'zapit/_images/banners/hero-home2.jpg';
			dltimer = setInterval(function(){
				if(hero2.complete){
					clearInterval(dltimer);
					$('.loading').before("<a href='' rel='2'>2</a>");
					$(".paging a").click(function() {return false;});
					var hero3 = new Image(); // preload
					hero3.src = 'zapit/_images/banners/hero-home3.jpg';
					dltimer = setInterval(function(){
						if(hero3.complete){
							clearInterval(dltimer);
							$('.loading').before("<a href='' rel='3'>3</a>");
							$(".paging a").click(function() {return false;});
							var hero4 = new Image(); // preload
							hero4.src = 'zapit/_images/banners/hero-home2.jpg';
							dltimer = setInterval(function(){
								if(hero4.complete){
									clearInterval(dltimer);
									$('.loading').before("<a href='' rel='4'>4</a>").remove();
									images_loaded();
								} //endif
							}, 500); // end timer4
						} //endif
					}, 500); // end timer3
				} //endif
			}, 500); // end timer2
		} //endif
	}, 500); // end timer1
	
	//Paging  and Slider Function
	rotate = function(){
		if (animating == 0) {
			
			var triggerID = $active.attr("rel"); //Get the number of the link pressed
		
			$(".paging a").removeClass('active'); //Remove all active class
			$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
			//Fade Animations
			if (triggerID == 1) {
				if (parseInt($scroll1.css('z-index')) < 13) { // scroll 1 is underneath something
					animating = 1;
					$scroll1.css('opacity', 0); // everything else hidden
					$scroll1.css('z-index', 14); // everything else hidden
					$scroll1.animate({opacity: 1}, 750,
						function(){
							$scroll1.css('z-index', 13);
							$scroll2.css('z-index', 12); // everything else hidden
							$scroll3.css('z-index', 11);
							$scroll4.css('z-index', 10);
							animating = 0;
						} );
				}
				
			} else if (triggerID == 2) {
				if (parseInt($scroll2.css('z-index')) < 13) { // scroll 2 is underneath something
					animating = 1;
					$scroll2.css('opacity', 0); // everything else hidden
					$scroll2.css('z-index', 14); // everything else hidden
					$scroll2.animate({opacity: 1}, 750,
						function(){
							$scroll2.css('z-index', 13);
							$scroll1.css('z-index', 12); // everything else hidden
							$scroll3.css('z-index', 11);
							$scroll4.css('z-index', 10);
							animating = 0;
						} );
				}
				
			} else if (triggerID == 3) {
				if (parseInt($scroll3.css('z-index')) < 13) { // scroll 3 is underneath something
					animating = 1;
					$scroll3.css('opacity', 0); // everything else hidden
					$scroll3.css('z-index', 14); // everything else hidden
					$scroll3.animate({opacity: 1}, 750,
						function(){
							$scroll3.css('z-index', 13);
							$scroll1.css('z-index', 12); // everything else hidden
							$scroll2.css('z-index', 11);
							$scroll4.css('z-index', 10);
							animating = 0;
						} );
				}
				
			} else if (triggerID == 4) {
				if (parseInt($scroll4.css('z-index')) < 13) { // scroll 4 is underneath something
					animating = 1;
					$scroll4.css('opacity', 0); // everything else hidden
					$scroll4.css('z-index', 14); // everything else hidden
					$scroll4.animate({opacity: 1}, 750,
						function(){
							$scroll4.css('z-index', 13);
							$scroll1.css('z-index', 12); // everything else hidden
							$scroll2.css('z-index', 11);
							$scroll3.css('z-index', 10);
							animating = 0;
						} );
				}
			}
		}
	
	};
	
	//Rotation  and Timing Event
	rotateSwitch = function(){
		play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
			$active = $('.paging a.active').next(); //Move to the next paging
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (7 seconds)
	};
});



//------------------------------ Function to validate user login form ----------------
function validateLoginForm() {
	var un = window.document.userloginform.UN.value;
	var pw = window.document.userloginform.PW.value;

	if (un.length < 5) {
		alert("Please enter your user name of at least 5 characters");
		window.document.userloginform.UN.focus();
		return false;
	} else if (pw.length < 6) { //----------------- Password limit and matching with confirm password---------------
		alert("Please enter your password of at least 6 characters");
		window.document.userloginform.PW.focus();
		return false;
	} else {
		return true;            // all entries entered in correct format i.e. form passes client side scripting
	}
}