Untitled

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Guitar Tutorials</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="Stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="Stylesheet" href="../CSS/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>

</head>

<body>
<background="background.jpg">

<div class="container">

    <div id="logo">
    </div>

    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
                <li><a href="../Pages/index.html">Home</a></li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Lessons<span class="arrow">&#9660;</span></a>
                    <ul class="sub-menu">
                        <li><a href="#">Chords</a></li>
                        <li><a href="#">Tablature</a></li>
                        <li><a href="#">Songs</a></li>
                    </ul>
                </li>
                <li class="current-item"><a href="#">Videos<span class="arrow">&#9660;</span></a>
                    <ul class="sub-menu">
                        <li><a href="#">Chords</a></li>
                        <li><a href="#">Tablature</a></li>
                        <li><a href="#">Songs</a></li>
                    </ul>
                </li>
                <li><a href="../Pages/contact.html" id="contact" onclick="fireBase()" data-toggle="modal" data-target="#popUpWindow">Contact</a></li>
            </ul>
        </nav>
    </div>

    <div class="row">
        <div class="col-md-4" id="chords" style="background-color: rgba(255,255,255,0.4)"><h3>Chords</h3><br>
            <img src="../Images/background.jpg" class="img-rounded"><br>
            Lorem ipsum dolor sit amet, odio torquatos consectetuer pri ad, cu qui oporteat repudiandae, omnis mandamus sadipscing et pri. Ex similique percipitur signiferumque per, copiosae elaboraret mel ne. An integre quaeque eam. Ex nostro definitionem vel.
        </div>

        <div class="col-md-4" id="tab" style="background-color: rgba(255,255,255,0.4)"><h3>Tablature</h3><br>
            <img src="../Images/background.jpg" class="img-rounded"><br>
            Lorem ipsum dolor sit amet, odio torquatos consectetuer pri ad, cu qui oporteat repudiandae, omnis mandamus sadipscing et pri. Ex similique percipitur signiferumque per, copiosae elaboraret mel ne. An integre quaeque eam. Ex nostro definitionem vel.
        </div>

        <div class="col-md-4" id="songs" style="background-color: rgba(255,255,255,0.4)"><h3>Songs</h3><br>
            <img src="../Images/background.jpg" class="img-rounded"><br>
            Lorem ipsum dolor sit amet, odio torquatos consectetuer pri ad, cu qui oporteat repudiandae, omnis mandamus sadipscing et pri. Ex similique percipitur signiferumque per, copiosae elaboraret mel ne. An integre quaeque eam. Ex nostro definitionem vel.
        </div>

    </div><!--row-->

    <div class="modal fade" id="popUpWindow">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- header -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">Please Log In to Continue</h3>
                </div>

                <!-- body (form) -->
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Email" id="inputEmail">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" placeholder="Password" id="inputPassword">
                        </div>
                    </form>
                </div>

                <!-- button -->
                <div class="modal-footer">
                    <button class="btn btn-primary btn-block" id="register">Register</button>
                    <button class="btn btn-primary btn-block" id="submit">Submit</button>
                </div>

            </div>
        </div>
    </div>

</div><!--container-->

</body>

<script>
    var myFirebaseRef = new Firebase("https://luminous-inferno-4040.firebaseio.com/");

    $('#register').on("click", function () {
        var email = $("#inputEmail").val();
        var password = $("#inputPassword").val();
        myFirebaseRef.createUser({
            email: email,
            password: password
        }, function(error, userData) {
            if (error) {
                switch (error.code) {
                    case "EMAIL_TAKEN":
                        console.log("The new user account cannot be created because the email is already in use.");
                        break;
                    case "INVALID_EMAIL":
                        console.log("The specified email is not a valid email.");
                        break;
                    default:
                        console.log("Error creating user:", error);
                }
            } else {
                console.log("Successfully created user account with uid:", userData.uid);
                remember: "sessionOnly";
                $('#popUpWindow').modal('hide');
                myFirebaseRef.authWithPassword({
                    "email": email,
                    "password": password
                }, function(error, authData) {
                    if (error) {
                        alert("Login Failed!", error);
                    } else {
                        alert("Authenticated successfully with payload:", authData);
                        var dontForgetSemiColons = "../Pages/contact.html"; // Change this to the URL you want to take the user to
                        window.location.href = dontForgetSemiColons;
                    }
                });
//log user in
//close modal
//open contact page
            }
        });

    });

</script>

</html>