// JavaScript Document

var userEmail;
var userPassword;
var i=0;
	
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;

var imagePaths = [
	"_images/pic_large1.png", "_images/pic_large2.png", "_images/pic_large3.png", "_images/pic_large4.png", "_images/pic_large5.png", "_images/pic_large6.png"
];

var imgWidth = 825;
var imgHeight = 337;
		
function userEmailLabelGet(){
		
	userEmail = document.getElementById("userEmail").value;
	userPassword = document.getElementById("userPassword").value;
	
	if(userEmail == "" && userPassword == ""){
	
		$('#userEmailLabel').fadeIn(2000, function() {       
		});
		
		document.getElementById("userEmailLabel").innerHTML = "Enter your email address:";
		return true;
	} else {
		document.getElementById("userEmailLabel").innerHTML = "";
		return true;
	}	
}

function userPasswordLabelGet(){
		
	document.getElementById("userEmail").onblur = function(){
		
		userEmail = document.getElementById("userEmail").value;
		userPassword = document.getElementById("userPassword").value;
		
		if(userEmail != "" && userPassword == ""){
		
		// Passwore must be at least one number, one lowercase and one uppercase letter and at least 6 characters long
		re = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
		if(!re.test(userEmail)) {
			document.getElementById("errorMessage").innerHTML = "Please enter a valid email address";
			return false;
		} else {
	
			document.getElementById("errorMessage").innerHTML = "";
			
			$('#userPasswordLabel').fadeIn(2000, function() {       
			});
			
			document.getElementById("userEmailLabel").innerHTML = "";
			document.getElementById("userPasswordLabel").innerHTML = "Enter your password:";
			return true;
	
		}	
			
		}
	}
}


	
function prepareEventHandlers(){
	
	$("#home").hover(function(){
		$("#home").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#homelong").animate({width: ['200px', 'swing']}, 500);
		$("#homelabeltop").fadeIn(1000);
		$("#homelabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#homelong").animate({width: ['180px', 'swing']}, 250);
		$("#home").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#homelabeltop").delay(200).fadeOut(300);
		$("#homelabel").fadeIn(500);
	});
	
	$("#chief").hover(function(){
		$("#chief").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#chieflong").animate({width: ['200px', 'swing']}, 500);
		$("#chieflabeltop").fadeIn(1000);
		$("#chieflabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#chieflong").animate({width: ['180px', 'swing']}, 250);
		$("#chief").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#chieflabeltop").delay(200).fadeOut(300);
		$("#chieflabel").fadeIn(500);
	});
	
	$("#organisation").hover(function(){
		$("#organisation").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#organisationlong").animate({width: ['200px', 'swing']}, 500);
		$("#organisationlabeltop").fadeIn(1000);
		$("#organisationlabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#organisationlong").animate({width: ['180px', 'swing']}, 250);
		$("#organisation").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#organisationlabeltop").delay(200).fadeOut(300);
		$("#organisationlabel").fadeIn(500);
	});
	
	$("#history").hover(function(){
		$("#history").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#historylong").animate({width: ['200px', 'swing']}, 500);
		$("#historylabeltop").fadeIn(1000);
		$("#historylabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#historylong").animate({width: ['180px', 'swing']}, 250);
		$("#history").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#historylabeltop").delay(200).fadeOut(300);
		$("#historylabel").fadeIn(500);
	});
	
	$("#heraldry").hover(function(){
		$("#heraldry").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#heraldrylong").animate({width: ['200px', 'swing']}, 500);
		$("#heraldrylabeltop").fadeIn(1000);
		$("#heraldrylabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#heraldrylong").animate({width: ['180px', 'swing']}, 250);
		$("#heraldry").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#heraldrylabeltop").delay(200).fadeOut(300);
		$("#heraldrylabel").fadeIn(500);
	});
	
	$("#genealogy").hover(function(){
		$("#genealogy").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#genealogylong").animate({width: ['200px', 'swing']}, 500);
		$("#genealogylabeltop").fadeIn(1000);
		$("#genealogylabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#genealogylong").animate({width: ['180px', 'swing']}, 250);
		$("#genealogy").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#genealogylabeltop").delay(200).fadeOut(300);
		$("#genealogylabel").fadeIn(500);
	});
	
	$("#dna").hover(function(){
		$("#dna").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#dnalong").animate({width: ['200px', 'swing']}, 500);
		$("#dnalabeltop").fadeIn(1000);
		$("#dnalabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#dnalong").animate({width: ['180px', 'swing']}, 250);
		$("#dna").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#dnalabeltop").delay(200).fadeOut(300);
		$("#dnalabel").fadeIn(500);
	});
	
	$("#events").hover(function(){
		$("#events").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#eventslong").animate({width: ['200px', 'swing']}, 500);
		$("#eventslabeltop").fadeIn(1000);
		$("#eventslabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#eventslong").animate({width: ['180px', 'swing']}, 250);
		$("#events").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#eventslabeltop").delay(200).fadeOut(300);
		$("#eventslabel").fadeIn(500);
	});
	
	$("#activities").hover(function(){
		$("#activities").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#activitieslong").animate({width: ['200px', 'swing']}, 500);
		$("#activitieslabeltop").fadeIn(1000);
		$("#activitieslabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#activitieslong").animate({width: ['180px', 'swing']}, 250);
		$("#activities").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#activitieslabeltop").delay(200).fadeOut(300);
		$("#activitieslabel").fadeIn(500);
	});
	
	$("#membership").hover(function(){
		$("#membership").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#membershiplong").animate({width: ['200px', 'swing']}, 500);
		$("#membershiplabeltop").fadeIn(1000);
		$("#membershiplabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#membershiplong").animate({width: ['180px', 'swing']}, 250);
		$("#membership").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#membershiplabeltop").delay(200).fadeOut(300);
		$("#membershiplabel").fadeIn(500);
	});
	
	$("#shop").hover(function(){
		$("#shop").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#shoplong").animate({width: ['200px', 'swing']}, 500);
		$("#shoplabeltop").fadeIn(1000);
		$("#shoplabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#shoplong").animate({width: ['180px', 'swing']}, 250);
		$("#shop").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#shoplabeltop").delay(200).fadeOut(300);
		$("#shoplabel").fadeIn(500);
	});
	
	$("#links").hover(function(){
		$("#links").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#linkslong").animate({width: ['200px', 'swing']}, 500);
		$("#linkslabeltop").fadeIn(1000);
		$("#linkslabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#linkslong").animate({width: ['180px', 'swing']}, 250);
		$("#links").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#linkslabeltop").delay(200).fadeOut(300);
		$("#linkslabel").fadeIn(500);
	});
	
	$("#login").hover(function(){
		$("#login").animate({left: ['-20px', 'swing'], width: ['230px', 'swing']}, 500);
		$("#loginlong").animate({width: ['200px', 'swing']}, 500);
		$("#loginlabeltop").fadeIn(1000);
		$("#loginlabel").delay(500).fadeOut(500);
	},
	
	function(){
		$("#loginlong").animate({width: ['180px', 'swing']}, 250);
		$("#login").animate({left: ['0px', 'swing'], width: ['210px', 'swing']}, 250);
		$("#loginlabeltop").delay(200).fadeOut(300);
		$("#loginlabel").fadeIn(500);
	});
	

}


function bannerSlide(){
	
	if(document.getElementById('showCanvas')){
	
		showCanvas = document.getElementById('showCanvas');
		showCanvasCtx = showCanvas.getContext('2d');
		
		img.setAttribute('width','823');
		img.setAttribute('height','336');
		switchImage();
		
		// start the animation
		setInterval(switchImage,10000);
		
	} else 
	
	if(document.getElementById('showSecondCanvas')) {
		
		showCanvas = document.getElementById('showSecondCanvas');
		showCanvasCtx = showCanvas.getContext('2d');
		
		img.setAttribute('width','824');
		img.setAttribute('height','162');
		switchImage();
		
		// start the animation
		setInterval(switchImage,10000);
	}
	
	return false;
}

function switchImage() {
	
	if(document.getElementById('showSecondCanvas')) {
		
		imagePaths = [
			"_images/pic_small1.png", "_images/pic_small2.png", "_images/pic_small3.png", "_images/pic_small4.png", "_images/pic_small5.png", "_images/pic_small6.png", "_images/pic_small7.png", "_images/pic_small8.png"
		];
		
	}
	
	img.setAttribute('src',imagePaths[currentImage++]);
	if (currentImage >= imagePaths.length)
		currentImage = 0;
	
	showCanvasCtx.globalAlpha = 0.1;
	revealTimer = setInterval(revealImage,100);
}

function revealImage() {
	
	if(document.getElementById('showSecondCanvas')) {
		
		imgWidth = 823;
		imgHeight = 161;
		
	}
	
	showCanvasCtx.save();
	showCanvasCtx.drawImage(img,0,0,imgWidth,imgHeight);
	showCanvasCtx.globalAlpha += 0.025;
	if (showCanvasCtx.globalAlpha >= 1.0)
		clearInterval(revealTimer);
	showCanvasCtx.restore();
}



window.onload = function() {
	bannerSlide();	
	prepareEventHandlers();
	userEmailLabelGet();
	userPasswordLabelGet();	
}