// JavaScript Document

var curStep = 1;

function chooseStep(step) {
	
	validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
	
	//if (step == 3 || step == 4) {
	if (step == 4) {
		var txtTitle = document.getElementById("txtTitle");
		var txtaContent = document.getElementById("txtaContent");
		var txtTo = document.getElementById("txtTo");
		var txtToEmail = document.getElementById("txtToEmail");
		var strToEmail = txtToEmail.value;
		var txtFrom = document.getElementById("txtFrom");
		var txtFromEmail = document.getElementById("txtFromEmail");
		var strFromEmail = txtFromEmail.value;
		if (txtTitle.value == "" || txtaContent.value == "" || txtTo.value == "" || txtToEmail.value == "" || txtToEmail.value == "friend’s email" || txtFrom.value == "" || txtFromEmail.value == "" || txtFromEmail.value == "your email") {
			alert("Please complete step 2 before sending the e-card.");
		} else if (strToEmail.search(validRegExp) == -1) {
			alert("Please make sure both friend's email and your email are valid email addresses.");
		} else if (strFromEmail.search(validRegExp) == -1) {
			alert("Please make sure both friend's email and your email are valid email addresses.");
		} else {			
			stepsOff();
			curStep = step;
			// set instructs
			var instruct = document.getElementById("instruct" + step);
			instruct.className = "stepsOn";
			// set next previous
			setNextPrev();
			// set nav
			setNav();
			// set card
			setCard();
		}
	} else {		
		stepsOff();
		curStep = step;
		// set instructs
		var instruct = document.getElementById("instruct" + step);
		instruct.className = "stepsOn";
		// set next previous
		setNextPrev();
		// set nav
		setNav();
		// set card
		setCard();
	}	
}


function showCardFront() {
	//alert("showCardFront");
	var cardFront = document.getElementById("cardFront");
	var cardBack = document.getElementById("cardBack");
	var cardPreview = document.getElementById("cardPreview");
	cardFront.style.display = "block";
	cardBack.style.display = "none";
	cardPreview.style.display = "none";
	var cardThumbs = document.getElementById("cardThumbs");
	cardThumbs.style.display = "none";
	var phoThumbsAll = document.getElementById("phoThumbsAll");
	phoThumbsAll.style.display = "block";
	var composeTxt = document.getElementById("composeTxt");
	composeTxt.style.display = "none";
	var clickToPreview = document.getElementById("clickToPreview");
	clickToPreview.style.display = "none";
	var clickToSend = document.getElementById("clickToSend");
	clickToSend.style.display = "none";
	var sendCard = document.getElementById("sendCard");
	sendCard.style.display = "none";
}

function showCardBack() {
	//alert("showCardBack");
	var cardFront = document.getElementById("cardFront");
	var cardBack = document.getElementById("cardBack");
	var cardPreview = document.getElementById("cardPreview");
	cardFront.style.display = "none";
	cardBack.style.display = "block";
	cardPreview.style.display = "none";
	var cardThumbs = document.getElementById("cardThumbs");
	cardThumbs.style.display = "none";
	var phoThumbsAll = document.getElementById("phoThumbsAll");
	phoThumbsAll.style.display = "none";
	var composeTxt = document.getElementById("composeTxt");
	composeTxt.style.display = "block";
	var clickToPreview = document.getElementById("clickToPreview");
	clickToPreview.style.display = "none";
	var clickToSend = document.getElementById("clickToSend");
	clickToSend.style.display = "none";
	var sendCard = document.getElementById("sendCard");
	sendCard.style.display = "none";
}



function showCardPreview() {
	//alert("showCardBack");
	var cardFront = document.getElementById("cardFront");
	var cardBack = document.getElementById("cardBack");
	var cardPreview = document.getElementById("cardPreview");
	cardFront.style.display = "none";
	cardBack.style.display = "none";
	cardPreview.style.display = "block";
	showCardPreviewFront();
	var cardThumbs = document.getElementById("cardThumbs");
	cardThumbs.style.display = "block";
	var cardThumbsFront = document.getElementById("cardThumbsFront");
	var cardThumbsBack = document.getElementById("cardThumbsBack");
	cardThumbsFront.className = "cardThumbsFrontOn";
	cardThumbsBack.className = "cardThumbsBack";
	var phoThumbsAll = document.getElementById("phoThumbsAll");
	phoThumbsAll.style.display = "none";
	var composeTxt = document.getElementById("composeTxt");
	composeTxt.style.display = "none";
	var clickToPreview = document.getElementById("clickToPreview");
	clickToPreview.style.display = "block";
	var clickToSend = document.getElementById("clickToSend");
	clickToSend.style.display = "none";
	var sendCard = document.getElementById("sendCard");
	sendCard.style.display = "none";
}


function showCardPreviewFront() {
	var cardPreviewFront = document.getElementById("cardPreviewFront");
	var cardPreviewBack = document.getElementById("cardPreviewBack");
	cardPreviewFront.style.display = "block";
	cardPreviewBack.style.display = "none";	
	var cardThumbsFront = document.getElementById("cardThumbsFront");
	var cardThumbsBack = document.getElementById("cardThumbsBack");
	cardThumbsFront.className = "cardThumbsFrontOn";
	cardThumbsBack.className = "cardThumbsBack";	
}


function showCardPreviewBack() {
	var cardPreviewFront = document.getElementById("cardPreviewFront");
	var cardPreviewBack = document.getElementById("cardPreviewBack");
	cardPreviewFront.style.display = "none";
	cardPreviewBack.style.display = "block";	
	var cardThumbsFront = document.getElementById("cardThumbsFront");
	var cardThumbsBack = document.getElementById("cardThumbsBack");
	cardThumbsFront.className = "cardThumbsFront";
	cardThumbsBack.className = "cardThumbsBackOn";	
}



function showCardSend() {
	//alert("showCardBack");
	var cardFront = document.getElementById("cardFront");
	var cardBack = document.getElementById("cardBack");
	var cardPreview = document.getElementById("cardPreview");
	cardFront.style.display = "none";
	cardBack.style.display = "none";
	cardPreview.style.display = "block";
	var cardThumbs = document.getElementById("cardThumbs");
	cardThumbs.style.display = "block";
	var phoThumbsAll = document.getElementById("phoThumbsAll");
	phoThumbsAll.style.display = "none";
	var composeTxt = document.getElementById("composeTxt");
	composeTxt.style.display = "none";
	var clickToPreview = document.getElementById("clickToPreview");
	clickToPreview.style.display = "none";
	var clickToSend = document.getElementById("clickToSend");
	clickToSend.style.display = "block";
	var sendCard = document.getElementById("sendCard");
	sendCard.style.display = "block";
}



function showCard(phoId, phoUrl, phoThumb) {
	showCardFront();	
	var curPho = document.getElementById("pho" + phoId);	
	// reset all opacity
	for (var i = 1; i <= phoLen; i++)
	{
		new Effect.Opacity("pho" + i, { from: 1, to: 1, duration: 0.1 });
	}	
	var cardJpg = document.getElementById("cardJpg");
	var cardJpgPreview = document.getElementById("cardJpgPreview");
	var cardThumbsFrontImg = document.getElementById("cardThumbsFrontImg");
	cardThumbsFrontImg.src = phoThumb;
	var phoFade;		
	cardJpg.src = phoUrl;
	cardJpgPreview.src = phoUrl;	
	phoFade = "pho" + phoId;
	new Effect.Opacity(phoFade, { from: 1, to: 0.5, duration: 0.2 });	
	var hidPhotoID = document.getElementById("hidPhotoID");
	hidPhotoID.value = phoId;	
}


function stepsHighlight(step) {	
	var instruct = document.getElementById("instruct" + step);
	if (curStep != step) {
		instruct.className = "stepsHighlight";
	}
}

function stepsNoHighlight(step) {
	var instruct = document.getElementById("instruct" + step);
	if (curStep != step) {
		instruct.className = "steps";
	}	
}


function stepsOff() {
	var instruct1 = document.getElementById("instruct1");
	instruct1.className = "steps";
	var instruct2 = document.getElementById("instruct2");
	instruct2.className = "steps";
	var instruct3 = document.getElementById("instruct3");
	instruct3.className = "steps";
	var instruct4 = document.getElementById("instruct4");
	instruct4.className = "steps";
}

function prevStep() {
	if (curStep != 1) {
		curStep = curStep - 1;
		chooseStep(curStep);
	}
}

function nextStep() {
	if (curStep != 4) {
		curStep = curStep + 1;
		chooseStep(curStep);
	}
}


function setNextPrev() {
	var instructNavPrev = document.getElementById("instructNavPrev");
	var instructNavNext = document.getElementById("instructNavNext");
	if (curStep == 1) {
		instructNavPrev.className = "instructNavOff";
		instructNavNext.className = "instructNavOn";
	} else if (curStep == 4) {
		instructNavPrev.className = "instructNavOn";
		instructNavNext.className = "instructNavOff";
	} else {
		instructNavPrev.className = "instructNavOn";
		instructNavNext.className = "instructNavOn";
	}
}


function setNav() {
	if (curStep == 1) {
		new Effect.Move('navSelect', { x: 37, y: 538, mode: 'absolute' })
	} else if (curStep == 2) {
		new Effect.Move('navSelect', { x: 50, y: 538, mode: 'absolute' })
	} else if (curStep == 3) {
		new Effect.Move('navSelect', { x: 64, y: 538, mode: 'absolute' })
	} else if (curStep == 4) {
		new Effect.Move('navSelect', { x: 78, y: 538, mode: 'absolute' })
	}
}


function setCard() {
	if (curStep == 1) {
		showCardFront();
	} else if (curStep == 2) {
		showCardBack();
	} else if (curStep == 3) {		
		saveCard();
		showCardPreview();
	} else if (curStep == 4) {
		saveCard();
		showCardSend();
	}
}



function clearTxt(txtbox, txt) {
	var txtb = document.getElementById(txtbox);
	if (txtb.value == txt) {
		txtb.value = "";
	}
}


function saveCard() {
	new Ajax.Request('inc/save.asp', {
		parameters: $('formCard').serialize(true), 
		method: 'post', 
		onSuccess: function(transport){
			var response = transport.responseText || "no response text";
			//alert("Success! \n\n" + response);	
		},
		onFailure: function(){ 
			//alert('Something went wrong...') 	
		}
  	});
	// set divs to form values	
	var txtTitle = document.getElementById("txtTitle");
	var txtaContent = document.getElementById("txtaContent");
	var strContent = txtaContent.value;	
	var strContent = strContent.replace(new RegExp( "\\n", "g" ), "<br/>");	
	var txtTo = document.getElementById("txtTo");
	var txtFrom = document.getElementById("txtFrom");	
	var cardPreviewTitle = document.getElementById("cardPreviewTitle");
	cardPreviewTitle.innerHTML = txtTitle.value;
	var cardPreviewContent = document.getElementById("cardPreviewContent");
	cardPreviewContent.innerHTML = strContent;
	var cardPreviewTo = document.getElementById("cardPreviewTo");
	cardPreviewTo.innerHTML = txtTo.value;
	var cardPreviewFrom = document.getElementById("cardPreviewFrom");
	cardPreviewFrom.innerHTML = txtFrom.value;
}


function sendCard() {	
	// timestamp to stop ie7 from caching requests
	var date = new Date();
	var timestamp = date.getTime();

	new Ajax.Request('inc/send_email.asp?time=' + timestamp, {
		method: 'get', 
		onSuccess: function(transport){
			var response = transport.responseText || "no response text";
			//alert("Email sent! \n\n" + response);		
			var btnSend = document.getElementById("btnSend");
			btnSend.style.display = "none";
			var txtSent = document.getElementById("txtSent");
			txtSent.innerHTML = response + " <a href=\"index.asp\">Send another Rhodes E-card.</a>";
			txtSent.style.display = "block";
		},
		onFailure: function(){ 
			//alert('Something went wrong sending email...') 		
			var txtSent = document.getElementById("txtSent");
			txtSent.innerHTML = "There was a problem sending your e-card.";
			txtSent.style.display = "block";
			txtSent.style.left = "85px";
			txtSent.style.width = "250px";
		}
  	});
}


function sendRefer() {	
	// pass variables from form to asp
	var txtFriendName = document.getElementById("txtFriendName").value; 
	var txtFriendEmail = document.getElementById("txtFriendEmail").value; 
	var txtYourName = document.getElementById("txtYourName").value; 
	var txtYourEmail = document.getElementById("txtYourEmail").value; 

	// timestamp to stop ie7 from caching requests
	var date = new Date();
	var timestamp = date.getTime();

	new Ajax.Request('inc/send_refer.asp?txtFriendName=' + txtFriendName + '&txtFriendEmail=' + txtFriendEmail + '&txtYourName=' + txtYourName + '&txtYourEmail=' + 'txtYourEmail' + '&time=' + timestamp, {
		method: 'get', 
		onSuccess: function(transport){
			var response = transport.responseText || "no response text";
			//alert("Email sent! \n\n" + response);		
			var txtSent = document.getElementById("referSent");
			txtSent.innerHTML = response + " <a href=\"refer.asp\">Refer another friend</a> or send <a href=\"index.asp\">your own Rhodes E-card.</a>";
			txtSent.style.display = "block";
		},
		onFailure: function(){ 
			//alert('Something went wrong sending email...') 		
			var txtSent = document.getElementById("referSent");
			txtSent.innerHTML = "There was a problem sending the email.";
			txtSent.style.display = "block";
		}
  	});
}


function resetRefer() {
	var txtSent = document.getElementById("referSent");
	txtSent.innerHTML = "";
	txtSent.style.display = "none";
}