From 92fc724c91790cd0042354f99041b46ed9f670df Mon Sep 17 00:00:00 2001
From: Patrick Davison <snapwilliam@gmail.com>
Date: Mon, 9 Jul 2012 13:30:30 -0700
Subject: Added login div

---
 css/page.css        | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 includes/header.php | 31 +++++++++++++++++++++--
 index.php           |  4 +++
 pages/tutorial.php  |  2 +-
 4 files changed, 106 insertions(+), 3 deletions(-)

diff --git a/css/page.css b/css/page.css
index de0d953..f6a0096 100644
--- a/css/page.css
+++ b/css/page.css
@@ -47,6 +47,78 @@ a:hover {
 	-moz-transition:color 0s ease-out;
 }
 
+#oid_box {
+	width:500px;
+	height:300px;
+	background-color:#ccc;
+	padding:25px;
+	box-shadow: 0 0 4px #888;
+}
+#oid_btn  {
+	background-color: #bbb;
+	box-shadow: 0 0 2px #444;
+	margin:7px;
+	margin-left:10px;
+}
+#oid_btn:hover {
+	background-color: #ddd;
+	box-shadow: 0 0 2px #663;
+}
+#oid_cancel {
+position:absolute;color:#333;right:50px;bottom:20px;
+}
+#oid_learn {
+position:absolute;color:#333;left:25px;bottom:20px;
+}
+#oid_wrapper {
+	animation: signinAnimate 1s;
+	-webkit-animation: signinAnimate 1s; /* Safari and Chrome */
+	-o-animation: signinAnimate 1s; /* Opera */
+	-moz-animation: signinAnimate 1s; /* Firefox */
+	position:fixed;
+	color:#000;
+	background-color:#999;
+	box-shadow: 0 0 5px #888;
+	z-index:200;
+	padding:15px;
+	text-align: left;
+	left:50%;	
+	top:120px;
+	width:550px;
+	margin-left:-275px;
+}
+#oid_hidden {
+	position:fixed;
+	left:-100%;
+}
+
+
+
+
+@keyframes signinAnimate
+{
+0% {left:-50%;}
+100%      {left:50%;}
+}
+@-webkit-keyframes signinAnimate /* Safari and Chrome */
+{
+0% {left:-50%;}
+100%      {left:50%;}
+}
+@-o-keyframes signinAnimate /* Opera */
+{
+0% {left:-50%;}
+100%      {left:50%;}
+}
+@-moz-keyframes signinAnimate /* Firefox */
+{
+0% {left:-50%;}
+100%      {left:50%;}
+}
+
+
+
+
 .wrapper {
 	width: 900px;
 	margin: 0 auto;
diff --git a/includes/header.php b/includes/header.php
index a1dbfa4..472fcbc 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -33,6 +33,20 @@ function htmlHeader($css = array(), $title = 'Pathery', $desc = '') {
 	}
 ?>
     </script>
+	 
+<script>
+function showSignin() {
+	if (document.getElementById('oid_hidden') !== undefined) {
+		document.getElementById('oid_hidden').id = 'oid_wrapper';
+	}
+}
+function hideSignin() {
+	if (document.getElementById('oid_wrapper') !== undefined) {
+		document.getElementById('oid_wrapper').id = 'oid_hidden';
+	}
+}
+</script>
+	 
 </head>
 	<?php
 }
@@ -94,8 +108,21 @@ function topbar($links) {
 		if ($_SESSION['displayName'] == 'noname')
 			echo "<a href='cp' title='change name'>Update your name</a> | ";
 		echo "<a href='logout'>Logout</a>";
-	} else
-		echo "<a href='login'>Sign in with Google</a>";
+	} else {
+		?>
+<a href='javascript:showSignin();'>Sign in</a>
+<div class="wrapper" id="oid_hidden" >
+	<h2>Sign in</h2>
+	<div id="oid_box">
+		<h2 style="color:#333;">Do you have an account here?</h2>
+		<a href="login?op=google"><img id="oid_btn" src="images/btns/signin_Google.png" alt="Sign in with Google" /></a>
+		<a href="login?op=yahoo"><img id="oid_btn" src="images/btns/signin_Yahoo.png" alt="Sign in with Yahoo" /></a>
+		<a id="oid_learn" href="http://openid.net/get-an-openid/what-is-openid/" >Learn more about OpenID</a>
+		<a id="oid_cancel" href="javascript:hideSignin();">Cancel</a>
+	</div>
+</div>
+		<?
+	}
 	echo "</div>";
 
 	echo "</div>";
diff --git a/index.php b/index.php
index ae4166c..39e7af3 100644
--- a/index.php
+++ b/index.php
@@ -91,6 +91,10 @@ switch ($request) {
 	require 'pages/login.php';
    break;	
 	
+	case "chooselogin":
+	require 'pages/chooselogin.php';
+   break;	
+	
 	case "admin":
 	if ($_SESSION['isAdmin'] == true)
 		require 'pages/admin.php';
diff --git a/pages/tutorial.php b/pages/tutorial.php
index d962f68..8e3b583 100644
--- a/pages/tutorial.php
+++ b/pages/tutorial.php
@@ -253,7 +253,7 @@ TutorialView.prototype.unlock = function(n) {
 		if (this.locked >= this.cur) {
 			this.nextbtn.className = this.nextbtn.className.replace(' disabled', '');
 			this.interval1 = setInterval(function() {
-				tv.nextbtn.className += ' flash';
+				this.nextbtn.className += ' flash';
 			}, 1200);
 			setTimeout(function() {
 				tv.interval2 = setInterval(function() {
-- 
cgit v1.2.3