<link rel="stylesheet" type="text/css" href="catalog/template/beststoreitems/css/account.css">
<script type="text/javascript">
  $(document).ready(function() {
    $('.son_ul').hide();
    $('.select_box span').hover(function() {
        $(this).parent().find('ul.son_ul').show(0);
        $(this).parent().find('li').hover(function() {
            $(this).addClass('hover')
        },
        function() {
            $(this).removeClass('hover')
        });
        $(this).parent().hover(function() {},
        function() {
            $(this).parent().find("ul.son_ul").hide(0);
        });
    },
    function() {});
		$('ul.son_ul li').click(function() {
			$(this).parents('.select_box').find('span').html($(this).html());
			$(this).parents('.select_box').find('ul').hide(0);
		});
	})

	function get_country_id(id){
		document.getElementById("country_id").value = id;
	}
	
	function register_checkinput(){
	
    var email = $("#email").val();

    var firstname = $("#firstname").val();

    var lastname = $("#lastname").val();

    var password = $("#password").val();

    var country_id = $("#country_id").val();

    if (email == '')
    {
        alert("Please input a correct email address!");

        document.getElementById('email').focus();

        return false;

    }
    if (firstname == '' || firstname.length < 2 || firstname.length > 32)
    {
        alert("First Name must be greater than 2 and less than 32 characters!");

        document.getElementById('firstname').focus();

        return false;

    }
    if (lastname == '' || lastname.length < 2 || lastname.length > 32)
    {
        alert("Last Name must be greater than 2 and less than 32 characters!");

        document.getElementById('lastname').focus();

        return false;

    }
    if (password == '' || password.length < 2 || password.length > 32)
    {
        alert("Password must be greater than 3 and less than 20 characters!");

        document.getElementById('password').focus();

        return false;

    }
    if (country_id <= 1) {

        alert("Please choose your country");

        return false;

    } else {

        $("#create_account").submit();

        return true;
    }
}


</script>
<script>
function login_checkinput()
{
    var email = $("#loginEmail").val();

    var password = $("#loginPassword").val();  

    if (email == "")
    {
        alert("Email can not be empty!");

        document.getElementById('loginEmail').focus();

        return false;

    }
    if (password == "")
    {
        alert("Password can not be empty!");

        document.getElementById('loginPassword').focus();

        return false;
    }
    return true;
}
</script>
    <div class="main container" role="main"> 
      <div class="page-title"><h1>Login or Create an Account</h1></div>
	  <div class="row account-login-reg">
        
        <!--login account-->   	  
        <div id="signInField" class="col-sm-12 as_guest">
        		<h2 class="section_title">Member Login</h2>
                <form id="xsignIn" action="index.php?controller=account_login" method="post" enctype="multipart/form-data">
                    <div id="login-form-part">
                        <ul>
                            <li class="form-group">
                                <input class="input-text form-control" tabindex="1" value="" name="email" maxlength="128"  id="loginName" size="25" placeholder="Email Address">
                            </li>
                            <li class="form-group">
                                <input type="password" class="input-text form-control" tabindex="2" value="" maxlength="100" name="password" id="loginPassword" size="25" placeholder="Password">
                            </li>
                        </ul>
                    	<div class="form-group forgetpw"><a href="https://www.beststoreitems.com/index.php?controller=account_forgotten" id="forgotPwId">Forgot password?</a></div>
                        <div class="buttonWrap">
                            <input type="submit" class="btn btn-primary" id="submitName" value="Sign &nbsp;in" onclick="return login_checkinput();">
                        </div>
                  </div>
                </form>
            </div>
            <!--login account end-->
            
            <!--Creatr account-->
            <div id="loginSub" class="col-sm-12 as_customer">
                <h2 class="section_title">Create an Account</h2>
                    <form action="https://www.beststoreitems.com/index.php?controller=register" method="post" enctype="multipart/form-data" id="create_account" onsubmit="return register_checkinput();">
                        <input type="hidden" name="hello_page" value="1" /> 
                        <input type="hidden" name="invite_code" value="<?php echo $invite_code; ?>" /> 
                          <div class="clearfix as_customer">
                                <ul class="table_ul2 form-horizontal">
                                    <li class="form-group">
                                        <label class="col-sm-8 control-label">Personal info</label>
                                        <div class="col-sm-16">
                                            <div class="clearfix">
                                                <input type="text" class="reg-input input-text form-control required-entry validate-email" name="email" id="email" value="" placeholder="Email Address" title="Email Address"/>
                                            </div>
                                            <div class="clearfix customer-name">
                                                <div class="field name-firstname little-marg">
                                                    <div class="input-box">
                                                        <input type="text" class="reg-input input-text form-control required-entry validate-latin" name="firstname" id="firstname" value="" placeholder="First Name"/>
                                                    </div>
                                                </div>
                                                <div class="field name-lastname">
                                                    <div class="input-boc">
                                                        <input type="text" class="reg-input input-text form-control required-entry validate-latin" name="lastname" id="lastname" value="" placeholder="Last Name"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>	 
                                    </li>                                                     
                                    <li class="form-group">
                                       <label class="col-sm-8 control-label">Login Information</label>
                                       <div class="col-sm-16">
                                        <input type="password" class="reg-input input-text form-control required-entry validate-password" name="password" id="password" value="" placeholder="Password"/>	
                                       </div>
                                    </li>
                                    <li class="clearfix form-group">
                                        <label class="col-sm-8 control-label">Country</label>
                                        <div class="col-sm-16 selectBox">
                                            <ul>
                                                <li class="select_box input-text">
                                                <span><label class="default">United States</label></span>
                                                <ul class="son_ul">
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <td class="tLt"></td>
                                                                <td class="tMid"></td>
                                                                <td class="tRi"></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="mLt"></td>
                                                                <td>
                                                                    <?php foreach ($countries as $country) { ?>
                                                                        <li onclick="get_country_id(<?php echo $country['country_id']; ?>)"><img src="../icon/country/<?php echo $country['icon']; ?>"><?php echo $country['name']; ?></li>
                                                                    <?php }
        ?>
                                                                </td>
                                                                <td class="mRi"></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="bLt"></td>
                                                                <td class="bMid"></td>
                                                                <td class="bRi"></td>
                                                            </tr>                                                	
                                                        </tbody>
                                                    </table>
                                                </ul>
                                            </li>
                                            </ul>                                
                                            <input type="hidden" name="country_id" id="country_id" value="223">
                                        </div>
                                    </li>
                                    <li id="regsub">
                                        <div class="col-sm-18 buttons-set"><input type="Submit" class="btn btn-primary" value="Create an Account" ></div>
                                        
                                    </li>	       
                                </ul>
                            </div>
                </form>
    		</div>
            <!--Creatr account end-->
		</div>
	</div>    



