Gigya Job Openings

Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<style>

p {
	margin: 10px 0px;
}
input {
	width: 200px;
}
.mainWrap, .bmainWrap, .cmainWrap, .dmainWrap {
	position: relative;
	text-align: center;
	margin: 0px auto;
	border: 1px solid skyblue;
	height: 600px;
	padding: 20px;
}
form {
	margin: auto auto;
	position: relative;
	width: 200px;
}
.rounded-corners, .brounded-corners, .crounded-corners, .drounded-corners {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}
input {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	height: 30px;
}
input[type="button"] {
	background-color: darkblue;
	color: white;
	height: 40px;
    font-size: 16px;
}
.containerDiv, .bcontainerDiv, .ccontainerDiv, .dcontainerDiv {

  width: 330px;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid gray;
  display: none;
  /* left: 40px; */
}

.containerDiv > p, .bcontainerDiv > p, .ccontainerDiv > p, .dcontainerDiv > p {
	text-align: center;
}
#ghostImage, #bghostImage, #cghostImage, #dghostImage {
	display: block;
	border: 0px solid grey;
}
#ghostTextTitle, #bghostTextTitle, #cghostTextTitle, #dghostTextTitle {
	font-weight: bold;
}
.dsocialLoginDiv, .bdsocialLoginDiv, .cdsocialLoginDiv, .dsocialLoginDiv, #showLoginUIDiv, #bshowLoginUIDiv, #cshowLoginUIDiv, #dshowLoginUIDiv {
	margin: 0px auto;
}
 
<!-- Bar Styles -->
 
#barOne, #barTwo, #barThree, #barFour {
	margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 50px;
    min-height: 50px;
    width: 95%;
    border: 1px solid lightgrey;
    padding: 20px;
}
/* SLIDERS *********************************************************/
/* HIDE ALL THE DEFAULT BROWSER CSS */
input[type=range]#barOne {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 444px; /* Specific width is required for Firefox. */
}
input[type=range]#barTwo, input[type=range]#barThree {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 669px; /* Specific width is required for Firefox. */
}
input[type=range]#barFour {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 247px; /* Specific width is required for Firefox. */
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
/*********************************************************/
/* BASICS */
input[type=range]#barOne::-ms-track {
  width: 444px;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}
/* Special styling for WebKit/Blink 
THIS IS THE BUTTON  */
input[type=range]#barOne::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
  margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /*box-shadow: 1px 1px 1px yellow, 0px 0px 1px green;  Add cool effects to your sliders! */
}
/* All the same stuff for Firefox 
THIS IS THE BUTTON  */
input[type=range]#barOne::-moz-range-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* All the same stuff for IE 
THIS IS THE BUTTON  */
input[type=range]#barOne::-ms-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* THIS IS THE BAR  */
input[type=range]#barOne::-webkit-slider-runnable-track {
  width: 444px;
  height: 23px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com//download/attachments/14650850/ghostbar_full_444x23.png"); /* INITIAL BAR COLOR */
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barOne:focus::-webkit-slider-runnable-track {
  background-image: url("http://developers.gigya.com//download/attachments/14650850/ghostbar_full_444x23.png");
}
/* THIS IS THE BAR  */
input[type=range]#barOne::-moz-range-track {
  width: 444px;
  height: 23px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com//download/attachments/14650850/ghostbar_full_444x23.png");
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barOne::-ms-track {
  width: 444px;
  height: 23px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
/* THIS IS THE BAR  */
input[type=range]#barOne::-ms-fill-lower {
  background-image: url("http://developers.gigya.com//download/attachments/14650850/ghostbar_full_444x23.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
input[type=range]#barOne:focus::-ms-fill-lower {
  background-image: url("http://developers.gigya.com//download/attachments/14650850/ghostbar_full_444x23.png");
}
/* THIS IS THE BAR  */
input[type=range]#barOne::-ms-fill-upper {
  background-image: url("http://developers.gigya.com//download/attachments/14650850/ghostbar_full_444x23.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
nput[type=range]#barOne:focus::-ms-fill-upper {
  background-image: url("http://developers.gigya.com//download/attachments/14650850/ghostbar_full_444x23.png");
}
/* barTwo *********************************************************************/
/* BASICS */
input[type=range]#barTwo::-ms-track {
  width: 669px !important;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}
/* Special styling for WebKit/Blink 
THIS IS THE BUTTON  */
input[type=range]#barTwo::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
  margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /*box-shadow: 1px 1px 1px yellow, 0px 0px 1px green;  Add cool effects to your sliders! */
}
/* All the same stuff for Firefox 
THIS IS THE BUTTON  */
input[type=range]#barTwo::-moz-range-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* All the same stuff for IE 
THIS IS THE BUTTON  */
input[type=range]#barTwo::-ms-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* THIS IS THE BAR  */
input[type=range]#barTwo::-webkit-slider-runnable-track {
  width: 669px !important;
  height: 25px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barTwo:focus::-webkit-slider-runnable-track {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
}
/* THIS IS THE BAR  */
input[type=range]#barTwo::-moz-range-track {
  width: 669px !important;
  height: 25px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barTwo::-ms-track {
  width: 669px !important;
  height: 25px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
/* THIS IS THE BAR  */
input[type=range]#barTwo::-ms-fill-lower {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
input[type=range]#barTwo:focus::-ms-fill-lower {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
}
/* THIS IS THE BAR  */
 input[type=range]#barTwo::-ms-fill-upper {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
 input[type=range]#barTwo:focus::-ms-fill-upper {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
}
/* barThree *********************************************************************/
/* BASICS */
input[type=range]#barThree::-ms-track {
  width: 669px !important;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}
/* Special styling for WebKit/Blink 
THIS IS THE BUTTON  */
input[type=range]#barThree::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
  margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /*box-shadow: 1px 1px 1px yellow, 0px 0px 1px green;  Add cool effects to your sliders! */
}
/* All the same stuff for Firefox 
THIS IS THE BUTTON  */
input[type=range]#barThree::-moz-range-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* All the same stuff for IE 
THIS IS THE BUTTON  */
input[type=range]#barThree::-ms-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* THIS IS THE BAR  */
input[type=range]#barThree::-webkit-slider-runnable-track {
  width: 669px !important;
  height: 25px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barThree:focus::-webkit-slider-runnable-track {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
}
/* THIS IS THE BAR  */
input[type=range]#barThree::-moz-range-track {
  width: 669px !important;
  height: 25px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barThree::-ms-track {
  width: 669px !important;
  height: 25px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
/* THIS IS THE BAR  */
input[type=range]#barThree::-ms-fill-lower {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
input[type=range]#barThree:focus::-ms-fill-lower {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
}
/* THIS IS THE BAR  */
 input[type=range]#barThree::-ms-fill-upper {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
 input[type=range]#barThree:focus::-ms-fill-upper {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_4Step_669x25.png");
}
 
/* barFour *********************************************************************/
/* BASICS */
input[type=range]#barFour::-ms-track {
  width: 247px !important;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}
/* Special styling for WebKit/Blink 
THIS IS THE BUTTON  */
input[type=range]#barFour::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
  margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /*box-shadow: 1px 1px 1px yellow, 0px 0px 1px green;  Add cool effects to your sliders! */
}
/* All the same stuff for Firefox 
THIS IS THE BUTTON  */
input[type=range]#barFour::-moz-range-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* All the same stuff for IE 
THIS IS THE BUTTON  */
input[type=range]#barFour::-ms-thumb {
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  border: 2px solid navy;
  height: 25px;
  width: 25px;
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
/* THIS IS THE BAR  */
input[type=range]#barFour::-webkit-slider-runnable-track {
  width: 247px !important;
  height: 28px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_SceneD_2step_247x28.png");
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barFour:focus::-webkit-slider-runnable-track {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_SceneD_2step_247x28.png");
}
/* THIS IS THE BAR  */
input[type=range]#barFour::-moz-range-track {
  width: 247px !important;
  height: 28px;
  cursor: pointer;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_SceneD_2step_247x28.png");
  border-radius: 3px;
  /* border: 0.2px solid red; */
}
/* THIS IS THE BAR  */
input[type=range]#barFour::-ms-track {
  width: 247px !important;
  height: 28px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
/* THIS IS THE BAR  */
input[type=range]#barFour::-ms-fill-lower {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_SceneD_2step_247x28.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
input[type=range]#barFour:focus::-ms-fill-lower {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_SceneD_2step_247x28.png");
}
/* THIS IS THE BAR  */
 input[type=range]#barFour::-ms-fill-upper {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_SceneD_2step_247x28.png");
  /* border: 0.2px solid red; */
  border-radius: 3px;
  /* box-shadow: 1px 1px 1px yellow, 0px 0px 1px green; */
}
/* THIS IS THE BAR  */
 input[type=range]#barFour:focus::-ms-fill-upper {
  background-image: url("http://developers.gigya.com/download/attachments/14650850/ghostbar_SceneD_2step_247x28.png");
}
.sliders {
	margin-bottom: 20px;
}
</style>	

...

HTML
 <script type="text/javascript">
		var stages = [
			{ //stage 0
				textTitle: "Step 1. Registration/Sign In:",
				text: "User selects a social network with which to register.",
				//img: "images/ghostbar_SceneA_Step1.png",
				activeContainer: "loginDiv"
			},
			{ //stage 1
				textTitle: "Step 2. Authentication/Permission:",
				text: "User authenticates with the social provider and grants permissions for the site.",
				//img: "images/ghostbar_SceneA_Step2.png",
				activeContainer: "loginDiv"
			},
			{ //stage 2
				textTitle: "Step 3. User Signed In:",
				text: "User is now signed in.",
				//img: "images/ghostbar_SceneA_Step3.png",
				activeContainer: "loggedInDiv"
			},
			{ //stage 3
				textTitle: "Step 4. Logout:",
				text: "User logs out; control passes back to login screen.",
				//img: "images/ghostbar_SceneA_Step3.png",
				activeContainer: "loggedInDiv"
			}
		];
		var activeContainer = "loginDiv"
		function setStage(stage) {

			// update ghosting
			document.getElementById("ghostTextTitle").innerHTML = stages[stage].textTitle;
			document.getElementById("ghostText").innerHTML = stages[stage].text;
			//document.getElementById("ghostImage").innerHTML = '<img src="'+stages[stage].img+'">';
			
			if (stage == 0) {
				barValue = 0;
			} else if (stage == 1) {
				barValue = 1;
			} else if (stage == 2 || (stage == 3)) {
				barValue = 2;
			} 
			document.getElementById("barOne").value=barValue;
			// show active container
			document.getElementById(activeContainer).style.display = 'none';
			activeContainer = stages[stage].activeContainer;
			document.getElementById(activeContainer).style.display = 'block';
		}

		function onLoginHandler(response) {
			document.getElementById("social_firstName").innerHTML = response.user.firstName;
			document.getElementById("social_avatar").innerHTML = '<img src="'+response.user.photoURL+'" width=100>';
			setStage(2);
		}

		function onLogoutHandler(response) {
			alert("You have been logged out.\n\nClick to go back to the first stage.");
			setStage(0);
		}

		function onManualRegistrationHandler(form) {
			onLoginHandler({user:{firstName:"New User",photoURL:"httphttps://cdncdns.gigya.com/gs/i/comments/avatar_48x48.gif"}});
		}
		function updateStage() {
			newValue = document.getElementById("barOne").value;
			if (newValue == 0) {
					setStage(0);
			} else if (newValue == 1) {
					setStage(1);
			} else if (newValue == 2) {
					setStage(2);
			}
		}
	</script>
 
<div class="mainWrap" id="mainWrap" onload="javascript:setStage(0)">
<p><span id="ghostTextTitle"></span> <span id="ghostText"></span></p>
	<div id="ghostImage" class="ghostImageDiv">
		<input class="sliders" type="range" id="barOne" max="2" step="1" onInput="updateStage();" />
	</div>
	<div id="loginDiv" class="containerDiv rounded-corners">
		<p>Welcome! Register quickly with your preferred social network account!</p>
		<div id="socialLoginDiv">
				<div id="showLoginUIDiv"></div>
				<script type="text/javascript">
					var login_params=
					{
						showTermsLink: 'false'
						,hideGigyaLink: 'true'
						,height:    30
						,width:    285
						,containerID: 'showLoginUIDiv'
						,buttonsStyle: 'fullLogo'
						,forceAuthentication: true
						,onButtonClicked: function(){setStage(1);}
					}
					gigya.socialize.showLoginUI(login_params);
					// register for login event
					gigya.socialize.addEventHandlers({
						onLogin: onLoginHandler 
						,onLogout: onLogoutHandler
					});
				</script>
		</div>
		<p style="margin-top:24px">Or register below:</p>
		<div id="manualRegistrationDiv">
			<form name="manualRegistrationForm" href="#">
				<p>E-mail Address<br>
				<input type="text" name="email"></input></p>
				<p>Confirm E-mail Address<br>
				<input type="text" name="emailConfirm"></input></p>
				<p>Password<br>
				<input type="password" name="password"></input></p>
				<p>Confirm Password<br>
				<input type="password" name="passwordConfirm"></input></p>
				<p style="margin-top:24px">
				<input type="button" name="createAccount" value="Create Account" onClick="javascript:onManualRegistrationHandler(this.form); return false;"></input></p>
			</form>
		</div>
	</div>
	<div id="loggedInDiv" class="containerDiv rounded-corners">
		<p id="social_avatar"></p>
		<p>Hi, <span id="social_firstName"></span>!  You are now registered.</p>
		<p style="margin-top:24px"><input type="button" value="Log Out" onClick="javascript:setStage(3); gigya.socialize.logout(); return false;"></p>
	</div>
<script>
setStage(0);
</script>
</div> <!-- /mainWrap -->

...

HTML
 <!-- Second Step Registration -->
<div class="bmainWrap" id="bmainWrap" onload="javascript:bsetStage(0)">
	<script type="text/javascript">
		var bstages = [
			{ // stage 0
				textTitle: "Step 1. Registration/Sign In:",
				text: "User selects a social network with which to register.",
				//img: "images/ghostbar_SceneB_Step1.png",
				bactiveContainer: "bloginDiv"
			},
			{ // stage 1
				textTitle: "Step 2. Authentication/Permission:",
				text: "User authenticates with the social provider and grants permissions for the site.",
				//img: "images/ghostbar_SceneB_Step2.png",
				bactiveContainer: "bloginDiv"
			},
			{ // stage 2
				textTitle: "Step 3. Capture Additional Data:",
				text: "Ask the user to provide additional information to complete the registration.",
				//img: "images/ghostbar_SceneB_Step3.png",
				bactiveContainer: "blogin2stepDiv"
			},
			{ // stage 3
				textTitle: "Step 4. User Signed In:",
				text: "User provided additional information and their registration is complete.",
				//img: "images/ghostbar_SceneB_Step4.png",
				bactiveContainer: "bloggedInDiv"
			},
			{ // stage 4
				textTitle: "Step 5. Logout:",
				text: "User logs out; control passes back to login screen.",
				//img: "images/ghostbar_SceneB_Step4.png",
				bactiveContainer: "bloggedInDiv"
			}
		];
		var bactiveContainer = "bloginDiv"
		function bsetStage(bstage) {
			// update ghosting
			document.getElementById("bghostTextTitle").innerHTML = bstages[bstage].textTitle;
			document.getElementById("bghostText").innerHTML = bstages[bstage].text;
			//document.getElementById("bghostImage").innerHTML = '<img src="'+bstages[bstage].img+'">';
			if (bstage == 0) {
				bbarValue = 0;
			} else if (bstage == 1) {
				bbarValue = 1;
			} else if (bstage == 2) {
				bbarValue = 2;
			} else if (bstage == 3 || (bstage == 4)) {
				bbarValue = 3;
			}
			document.getElementById("barTwo").value=bbarValue;
			
			// show active container
			document.getElementById(bactiveContainer).style.display = 'none';
			bactiveContainer = bstages[bstage].bactiveContainer;
			document.getElementById(bactiveContainer).style.display = 'block';
		}
		
		function bonLoginHandler(response) {
			document.getElementById("bstep2_firstName").innerHTML = response.user.firstName;
			document.getElementById("bsocial_firstName").innerHTML = response.user.firstName;
			document.getElementById("bsocial_avatar").innerHTML = '<img src="'+response.user.photoURL+'" width=100>';
			bsetStage(2);
		}
		
		function bonLogoutHandler(response) {
			alert("You have been logged out.\n\nClick to go back to the first stage.");
			bsetStage(0);
		}
		
		function bonManualRegistrationHandler(form) {
			bonLoginHandler({user:{firstName:"New User",photoURL:"httphttps://cdncdns.gigya.com/gs/i/comments/avatar_48x48.gif"}});
		}
		
		function bonManualRegistrationStep2Handler(form) {
			bsetStage(3);
		}
function bupdateStage() {
			bnewValue = document.getElementById("barTwo").value;
			if (bnewValue == 0) {
					bsetStage(0);
			} else if (bnewValue == 1) {
					bsetStage(1);
			} else if (bnewValue == 2) {
					bsetStage(2);
			}
			else if (bnewValue == 3) {
					bsetStage(3);
			}
		}
	</script>
	<p><span id="bghostTextTitle"></span> <span id="bghostText"></span></p>
	<div id="bghostImage" class="bghostImageDiv">
		<input class="sliders" type="range" id="barTwo" max="3" step="1" onInput="bupdateStage();" />
	</div>
	<div id="bloginDiv" class="bcontainerDiv brounded-corners">
		<p>Welcome! Register quickly with your preferred social network account!</p>
		<div id="bsocialLoginDiv">
				<div id="bshowLoginUIDiv"></div>
				<script type="text/javascript">
					var blogin_params=
					{
						showTermsLink: 'false'
						,hideGigyaLink: 'true'
						,height:    30
						,width:    285
						,containerID: 'bshowLoginUIDiv'
						,buttonsStyle: 'fullLogo'
						,forceAuthentication: true
						,onButtonClicked: function(){bsetStage(1);}
					}
					gigya.socialize.showLoginUI(blogin_params);
					// register for login event
					gigya.socialize.addEventHandlers({
						onLogin: bonLoginHandler 
						,onLogout: bonLogoutHandler
					});
				</script>
		</div>
		<p style="margin-top:24px">Or register below:</p>
		<div id="bmanualRegistrationDiv">
			<form name="bmanualRegistrationForm" href="#">
				<p>E-mail Address<br>
				<input type="text" name="email"></input></p>
				<p>Confirm E-mail Address<br>
				<input type="text" name="emailConfirm"></input></p>
				<p>Password<br>
				<input type="password" name="password"></input></p>
				<p>Confirm Password<br>
				<input type="password" name="passwordConfirm"></input></p>
				<p style="margin-top:24px">
				<input type="button" name="createAccount" value="Create Account" onClick="javascript:bonManualRegistrationHandler(this.form); return false;"></input></p>
			</form>
		</div>
	</div>
	<div id="blogin2stepDiv" class="bcontainerDiv brounded-corners">
		<p>Hi, <span id="bstep2_firstName"></span>.  Please provide us with some additional information to complete registration.</p>
		<div id="bmanualRegistration2stepDiv">
			<form name="bmanualRegistration2stepForm" href="#">
				<p>Postal Code<br>
				<input type="text" name="postalCode"></input></p>
				<p>Phone Number (xxx)xxx-xxxx<br>
				<input type="text" name="phoneNumber"></input></p>
				<input type="button" name="createAccount2step" value="Complete Registration" onclick="javascript:bonManualRegistrationStep2Handler(this.form); return false;"></input></p>
			</form>
		</div>
	</div>
	<div id="bloggedInDiv" class="bcontainerDiv brounded-corners">
		<p id="bsocial_avatar"></p>
		<p>Hi, <span id="bsocial_firstName"></span>!  You are now registered.</p>
		<p style="margin-top:24px"><input type="button" value="Log Out" onClick="javascript:bsetStage(4); gigya.socialize.logout(); return false;"></p>
	</div>
<script>
	bsetStage(0);
</script>
</div>

...

HTML
 
<script>
	function cupdateStage() {
			cnewValue = document.getElementById("barThree").value;
			if (cnewValue == 0) {
					csetStage(0);
			} else if (cnewValue == 1) {
					csetStage(1);
			} else if (cnewValue == 2) {
					csetStage(2);
			}
			else if (cnewValue == 3) {
					csetStage(3);
			}
		}
</script>


	<script type="text/javascript">
		var cstages = [
			{ // cstage 0
				textTitle: "Step 1. Registration/Sign In:",
				text: "User selects a social network with which to register.",
				//img: "images/ghostbar_SceneC_Step1.png",
				cactiveContainer: "cloginDiv"
			},
			{ // cstage 1
				textTitle: "Step 2. Authentication/Permission:",
				text: "User authenticates with the social provider and grants permissions for the site.",
				//img: "images/ghostbar_SceneC_Step2.png",
				cactiveContainer: "cloginDiv"
			},
			{ // cstage 2
				textTitle: "Step 3. Link Accounts:",
				text: "If email in the social profile matches an email in the user database, ask the user to link accounts.",
				//img: "images/ghostbar_SceneC_Step3.png",
				cactiveContainer: "clinkAccountsDiv"
			},
			{ // cstage 3
				textTitle: "Step 4. User Signed In:",
				text: "Social identity is linked with local identity.",
				//img: "images/ghostbar_SceneC_Step4.png",
				cactiveContainer: "cloggedInDiv"
			},
			{ // cstage 4
				textTitle: "Step 5. Logout:",
				text: "User logs out; control passes back to login screen.",
				//img: "images/ghostbar_SceneC_Step4.png",
				cactiveContainer: "cloggedInDiv"
			}
		];
		var cactiveContainer = "cloginDiv";
		function csetStage(cstage) {
			// update ghosting
			document.getElementById("cghostTextTitle").innerHTML = cstages[cstage].textTitle;
			document.getElementById("cghostText").innerHTML = cstages[cstage].text;
			//document.getElementById("cghostImage").innerHTML = '<img src="'+cstages[cstage].img+'">';
			if (cstage == 0) {
				cbarValue = 0;
			} else if (cstage == 1) {
				cbarValue = 1;
			} else if (cstage == 2) {
				cbarValue = 2;
			} else if (cstage == 3 || (cstage == 4)) {
				cbarValue = 3;
			}
			document.getElementById("barThree").value=cbarValue;
			// show active container
			document.getElementById(cactiveContainer).style.display = 'none';
			cactiveContainer = cstages[cstage].cactiveContainer;
			document.getElementById(cactiveContainer).style.display = 'block';
		}
		
		function cdisplayUserInfo(user) {
			document.getElementById("csocial_firstName").innerHTML = user.firstName;
			document.getElementById("csocial_avatar").innerHTML = '<img src="'+user.photoURL+'" width=100>';
			document.getElementById("cloggedIn_finalState").innerHTML = user.finalStateMessage;
		}
		
		function conLoginHandler(response) {
			document.getElementById("clinking_firstName").innerHTML = response.user.firstName;
			displayUserInfo({
				firstName:response.user.firstName,
				photoURL:response.user.photoURL,
				finalStateMessage: "You have successfully linked accounts."
			});
			csetStage(2);
		}
		
		function conManualLoginHandler(form) {
			displayUserInfo({
				firstName:"Returning User",
				photoURL:"httphttps://cdncdns.gigya.com/gs/i/comments/avatar_48x48.gif",
				finalStateMessage: "You are now logged in."
			});
			csetStage(3);
		}
		
		function conLinkAccountsHandler(form) {
			csetStage(3);
		}
		function conLogoutHandler(response) {
			alert("You have been logged out.\n\nClick to go back to the first cstage.");
			csetStage(0);
		}
		
</script>
<div class="cmainWrap" id="cmainWrap">
	<p><span id="cghostTextTitle"></span> <span id="cghostText"></span></p>
	<div id="cghostImage" class="cghostImageDiv">
		<input class="sliders" type="range" id="barThree" max="3" step="1" onInput="cupdateStage();" />
	</div>
	<div id="cloginDiv" class="ccontainerDiv crounded-corners">
		<p>Welcome! Register quickly with your preferred social network account!</p>
		<div id="csocialLoginDiv">
				<div id="cshowLoginUIDiv"></div>
				<script type="text/javascript">
					var clogin_params=
					{
						showTermsLink: 'false'
						,hideGigyaLink: 'true'
						,height:    30
						,width:    285
						,containerID: 'cshowLoginUIDiv'
						,buttonsStyle: 'fullLogo'
						,forceAuthentication: true
						,onButtonClicked: function(){csetStage(1);}
					}
					gigya.socialize.showLoginUI(clogin_params);
					// register for login event
					gigya.socialize.addEventHandlers({
						onLogin: conLoginHandler 
						,onLogout: conLogoutHandler
					});
				</script>
		</div>
		<p style="margin-top:24px">Or sign in here:</p>
		<div id="cmanualLoginDiv">
			<form name="cmanualLoginForm" href="#">
				<p>E-mail Address<br>
				<input type="text" name="email"></input></p>
				<p>Password<br>
				<input type="password" name="password"></input></p>
				<p style="margin-top:24px">
				<input type="button" name="signIn" value="Sign In" onClick="javascript:conManualLoginHandler(this.form); return false;"></input></p>
			</form>
		</div>
	</div>
	<div id="clinkAccountsDiv" class="ccontainerDiv crounded-corners">
		<p>Hi, <span id="clinking_firstName"></span>.  It seems you already have an account with us.  Please enter your account credentials below to link accounts.</p>
		<div id="clinkAccountsFormDiv">
			<form name="clinkAccountsForm" href="#">
				<p>E-mail Address<br>
				<input type="text" name="email"></input></p>
				<p>Password<br>
				<input type="password" name="password"></input></p>
				<p style="margin-top:24px">
				<input type="button" name="linkAccounts" value="Link Accounts" onclick="javascript:conLinkAccountsHandler(this.form); return false;"></input></p>
			</form>
		</div>
	</div>
	<div id="cloggedInDiv" class="ccontainerDiv crounded-corners">
		<p id="csocial_avatar"></p>
		<p>Hi, <span id="csocial_firstName"></span>!  <span id="cloggedIn_finalState"></span></p>
		<p style="margin-top:24px"><input type="button" value="Log Out" onClick="javascript:csetStage(4); gigya.socialize.logout(); return false;"></p>
	</div>
<script>
	csetStage(0);
</script>
</div>

...

HTML
	<script type="text/javascript">
		function dupdateStage() {
			dnewValue = document.getElementById("barFour").value;
			if (dnewValue == 0) {
					dsetStage(0);
			} else if (dnewValue == 1) {
					dsetStage(1);
			}
		}
		var dstages = [
			{ // stage 0
				textTitle: "Step 1. Sign In:",
				text: "User is prompted with their most recent social network.",
				//img: "images/dghostbar_SceneD_Step1.png",
				dactiveContainer: "dloginDiv"
			},
			{ // stage 1
				textTitle: "Step 2. User Signed In:",
				text: "User is signed in with a single click.",
				//img: "images/dghostbar_SceneD_Step2.png",
				dactiveContainer: "dloggedInDiv"
			},
			{ // stage 2
				textTitle: "Step 3. Logout:",
				text: "User logs out; control passes back to login screen.",
				//img: "images/dghostbar_SceneD_Step2.png",
				dactiveContainer: "dloggedInDiv"
			}
		];
		var dactiveContainer = "dloginDiv"
		function dsetStage(dstage) {
			// update dghosting
			document.getElementById("dghostTextTitle").innerHTML = dstages[dstage].textTitle;
			document.getElementById("dghostText").innerHTML = dstages[dstage].text;
			//document.getElementById("dghostImage").innerHTML = '<img src="'+dstages[dstage].img+'">';
			if (dstage == 0) {
				dbarValue = 0;
			} else if (dstage == 1) {
				dbarValue = 1;
			}
			document.getElementById("barFour").value=dbarValue;
			
			// show active container
			document.getElementById(dactiveContainer).style.display = 'none';
			dactiveContainer = dstages[dstage].dactiveContainer;
			document.getElementById(dactiveContainer).style.display = 'block';
		}
		
		function donLoginHandler(response) {
			document.getElementById("dsocial_firstName").innerHTML = response.user.firstName;
			document.getElementById("dsocial_avatar").innerHTML = '<img src="'+response.user.photoURL+'" width=100>';
			dsetStage(1);
		}
		
		function donLogoutHandler(response) {
			alert("You have been logged out.\n\nClick to go back to the first dstage.");
			dsetStage(0);
		}
		
		function donManualLoginHandler(form) {
			donLoginHandler({user:{firstName:"Returning User",photoURL:"httphttps://cdncdns.gigya.com/gs/i/comments/avatar_48x48.gif"}});
		}
	</script>
<div class="dmainWrap" id="dmainWrap">
	<p><span id="dghostTextTitle"></span> <span id="dghostText"></span></p>
	<div id="dghostImage" class="dghostImageDiv">
	    <input class="sliders" type="range" id="barFour" max="1" step="1" onInput="dupdateStage();" />
	</div>
	<div id="dloginDiv" class="dcontainerDiv drounded-corners">
		<p>Welcome! Register quickly with your preferred social network account!</p>
		<div id="dsocialLoginDiv">
			<div id="dshowLoginUIDiv" style="height:90px;"></div>
			<script type="text/javascript">
				var dlogin_params=
				{
					showTermsLink: 'false'
					,hideGigyaLink: 'true'
				//	,height:    30
					,width:    200
					,containerID: 'dshowLoginUIDiv'
					,buttonsStyle: 'fullLogo'
				//	,forceAuthentication: true
					,lastLoginIndication: 'welcome'
				//	,onButtonClicked: function(){dsetStage(1);}
				}
				gigya.socialize.showLoginUI(dlogin_params);
				// register for login event
				gigya.socialize.addEventHandlers({
					onLogin: donLoginHandler 
					,onLogout: donLogoutHandler
				});
			</script>
		</div>
		<p style="margin-top:24px">Or register below:</p>
		<div id="dmanualLoginDiv">
			<form name="dmanualLoginForm" href="#">
				<p>E-mail Address<br>
				<input type="text" name="email"></input></p>
				<p>Password<br>
				<input type="password" name="password"></input></p>
				<p style="margin-top:24px">
				<input type="button" name="signIn" value="Sign In" onClick="javascript:donManualLoginHandler(this.form); return false;"></input></p>
			</form>
		</div>
	</div>
	<div id="dloggedInDiv" class="dcontainerDiv drounded-corners">
		<p id="dsocial_avatar"></p>
		<p>Hi, <span id="dsocial_firstName"></span>!  You are now logged in.</p>
		<p style="margin-top:24px"><input type="button" value="Log Out" onClick="javascript:dsetStage(2); gigya.socialize.logout(); return false;"></p>
	</div>
<script>
	dsetStage(0);
</script>
</div>

...