<div class="panels">
	<div class="login_panel" data-bind="css: {'flipForgot': gotoForgot(), 'flipRegister': gotoRegister(), 'flipSignin': gotoSignin(), 'flipSocialRegister': gotoSocialRegister(), 'flipActivation': gotoActivation(), 'flipChangepass': gotoChangepass()}">
		<div class="login_panel_content">
			<div class="header" data-i18n="LOGIN/HEADING" data-bind="i18n: 'text'"></div>
			<!--<div class="content clearfix" data-bind="css: {'flipIn': gotoForgot() && forgotAnimation(), 'flipOut': !gotoForgot() && forgotAnimation()}">-->
			<div class="content login clearfix" data-bind="visible: !test()">
				<form class="form fields" action="#/" onsubmit="return false;">
					<div class="fieldset">
						<div class="row email" data-bind="css: {'focused': emailFocus(), 'filled': email().length > 0}">
							<label for="email" class="title placeholder" data-i18n="LOGIN/LABEL_EMAIL" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="email" class="input" type="email" autocomplete="off" data-bind="value: email, hasfocus: emailFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>

						<div class="row password" data-bind="css: {'focused': passwordFocus(), 'filled': password().length > 0}">
							<label for="password" class="title placeholder" data-i18n="LOGIN/LABEL_PASSWORD" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="password" class="input" type="password" data-bind="value: password, hasfocus: passwordFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
					</div>
					<div class="row buttons">
						<button type="submit" class="button login" data-bind="text: signInButtonText, click: actionLogin"></button>
					</div>
					<div class="row signme" data-bind="visible: signMeType() !== Enums.LoginSignMeType.Unuse">
						<span>
							<label class="custom_checkbox" data-bind="css: {'checked': signMe}">
								<span class="icon"></span>
								<input id="signme" type="checkbox" data-bind="checked: signMe" />
							</label>
							<label class="title" for="signme" data-i18n="LOGIN/LABEL_REMEMBER_ME" data-bind="i18n: 'text'"></label>
						</span>
					</div>
					<div class="row links">
						<div class="forgot">
							<span class="link" data-bind="click: function () {gotoForgot(true);}, i18n: 'text'" 
								  data-i18n="HELPDESK/LINK_FORGOT"></span>
						</div>
						<div class="register">
							<span class="link" data-bind="click: function () {gotoRegister(true);}, i18n: 'text'" 
								  data-i18n="HELPDESK/LINK_REGISTER"></span>
						</div>
					</div>


					<div class="row social links">
						<div class="facebook" data-bind="visible: facebookAllow">
							<!--<a class="link" data-bind="attr: { href: facebookUrl}, i18n: 'text'" data-i18n="Log In"></a>-->
							<a class="link" data-bind="click: function () {window.location.href = '?facebook';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
						<div class="google" data-bind="visible: googleAllow">
							<a class="link" data-bind="click: function () {window.location.href = '?google';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
						<div class="twitter" data-bind="visible: twitterAllow">
							<a class="link" data-bind="click: function () {window.location.href = '?twitter';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
					</div>
				</form>
				<div class="description" data-bind="visible: '' !== loginDescription(), html: loginDescription"></div>
				<div class="clear"></div>
			</div>
			<div class="content social_register clearfix">
				<form class="form fields" action="#/" onsubmit="return false;">
					<div class="fieldset">
						<div class="row email" data-bind="css: {'focused': regSocialEmailFocus(), 'filled': regSocialEmail().length > 0}">
							<label for="social_reg_email" class="title placeholder" data-i18n="Email" data-bind="i18n: 'text'"></label>
								<span class="value">
									<input id="social_reg_email" class="input" type="text" autocomplete="off" data-bind="value: regSocialEmail, hasfocus: regSocialEmailFocus, valueUpdate: 'afterkeydown'" />
								</span>
						</div>
					</div>
					<div class="row buttons">
						<button type="submit" class="button send" data-bind="click: actionSocialRegister, text: regButtonText()"></button>
					</div>
					<div class="row signme forgot">
						<span class="link" data-bind="click: function () {gotoSocialRegister(false);}, i18n: 'text'"
							  data-i18n="HELPDESK/BUTTON_BACK"></span>
					</div>
				</form>
			</div>


			<!--<div class="content forgot clearfix" data-bind="visible: forgotAnimation(), css: {'flipOut': gotoForgot() && forgotAnimation(), 'flipIn': !gotoForgot() && forgotAnimation()}">-->
			<div class="content forgot clearfix">
				<form class="form fields" action="#/" onsubmit="return false;">
					<div class="fieldset">
						<div class="row email forgot" data-bind="css: {'focused': forgotEmailFocus(), 'filled': forgotEmail().length > 0}">
							<label for="forgot_email" class="title placeholder" data-i18n="LOGIN/LABEL_EMAIL" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="forgot_email" class="input" type="email" autocomplete="off" data-bind="value: forgotEmail, hasfocus: forgotEmailFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
					</div>
					<div class="row buttons">
						<button type="submit" class="button send" data-bind="click: actionForgot, text: forgotButtonText()"></button>
					</div>
					<div class="row signme forgot">
						<span class="link" data-bind="click: function () {gotoForgot(false);}, i18n: 'text'" 
							  data-i18n="HELPDESK/BUTTON_BACK"></span>
					</div>
				</form>
				<div class="clear"></div>
			</div>
			<div class="content changepass clearfix">
				<form class="form fields" action="#/" onsubmit="return false;">
					<div class="fieldset">
						<div class="row password" data-bind="css: {'focused': changepassNewpassFocus(), 'filled': changepassNewpass().length > 0}">
							<label for="changepass_newpass" class="title placeholder" data-i18n="HELPDESK/LABEL_NEW_PASSWORD" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="changepass_newpass" class="input" type="password" autocomplete="off" data-bind="value: changepassNewpass, hasfocus: changepassNewpassFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
						<div class="row password" data-bind="css: {'focused': changepassConfirmpassFocus(), 'filled': changepassConfirmpass().length > 0}">
							<label for="changepass_confirmpass" class="title placeholder" data-i18n="HELPDESK/LABEL_CONFIRM_PASSWORD" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="changepass_confirmpass" class="input" type="password" autocomplete="off" data-bind="value: changepassConfirmpass, hasfocus: changepassConfirmpassFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
					</div>
					<div class="row buttons">
						<button type="submit" class="button send" data-bind="click: actionChangepass, text: changepassButtonText()"></button>
					</div>
					<div class="row signme forgot">
						<span class="link" data-bind="click: backToLogin, i18n: 'text'" 
							  data-i18n="HELPDESK/LINK_BACK_TO_LOGIN"></span>
					</div>
				</form>
				<div class="clear"></div>
			</div>
			<div class="content register clearfix">
				<form class="form fields" action="#/" onsubmit="return false;">
					<div class="fieldset">
						<div class="row name" data-bind="css: {'focused': regNameFocus(), 'filled': regName().length > 0}">
							<label for="name" class="title placeholder" data-i18n="Name" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="name" class="input" type="text" autocomplete="off" data-bind="value: regName, hasfocus: regNameFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
						<div class="row email" data-bind="css: {'focused': regEmailFocus(), 'filled': regEmail().length > 0}">
							<label for="reg_email" class="title placeholder" data-i18n="Email" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="reg_email" class="input" type="text" autocomplete="off" data-bind="value: regEmail, hasfocus: regEmailFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
						<div class="row password" data-bind="css: {'focused': regPasswordFocus(), 'filled': regPassword().length > 0}">
							<label for="reg_password" class="title placeholder" data-i18n="LOGIN/LABEL_PASSWORD" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="reg_password" class="input" type="password" autocomplete="off" data-bind="value: regPassword, hasfocus: regPasswordFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
						<div class="row password" data-bind="css: {'focused': regConfirmPasswordFocus(), 'filled': regConfirmPassword().length > 0}">
							<label for="reg_confirm_password" class="title placeholder" data-i18n="HELPDESK/LABEL_CONFIRM_PASSWORD" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="reg_confirm_password" class="input" type="password" autocomplete="off" data-bind="value: regConfirmPassword, hasfocus: regConfirmPasswordFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
					</div>
					<div class="row buttons">
						<button type="submit" class="button send" data-bind="click: actionRegister, text: regButtonText()"></button>
					</div>
					<div class="row signme forgot">
						<span class="link" data-bind="click: function () {gotoRegister(false);}, i18n: 'text'"
							  data-i18n="HELPDESK/BUTTON_BACK"></span>
					</div>
				</form>
				<div class="clear"></div>
			</div>
			<div class="content activation clearfix">
				<div class="description" data-bind="visible: '' !== activationDescription(), text: activationDescription"></div>
				<!--<div class="row signme forgot">
						<span class="link" data-bind="click: function () {window.location.href = '?helpdesk';}, i18n: 'text'"
							  data-i18n="HELPDESK/BUTTON_BACK"></span>
				</div>-->
				<div class="clear"></div>
			</div>


			<!-- test -->
			<div class="content login clearfix test" data-bind="visible: test()">
				<form class="form fields" action="#/" onsubmit="return false;">

					<span class="title" data-i18n="Ask your first question" data-bind="i18n: 'text'"></span>

					<div class="fieldset">
						<textarea class="test_request" data-bind="value: requestText"></textarea>
					</div>

					<div class="row buttons">
						<button type="submit" class="button send" data-bind="text: 'Send', click: actionSend"></button>
					</div>

					<div class="fieldset">
						<div class="row email" data-bind="css: {'focused': emailFocus(), 'filled': email().length > 0}">
							<label for="email" class="title placeholder" data-i18n="LOGIN/LABEL_EMAIL" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="emaill" class="input" type="emaill" autocomplete="off" data-bind="value: email, hasfocus: emailFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>

						<div class="row password" data-bind="css: {'focused': passwordFocus(), 'filled': password().length > 0}">
							<label for="password" class="title placeholder" data-i18n="LOGIN/LABEL_PASSWORD" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="passwordd" class="input" type="passwordd" data-bind="value: password, hasfocus: passwordFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
					</div>

					<div class="row buttons">
						<button type="submit" class="button login" data-bind="text: signInButtonText, click: actionLogin"></button>
					</div>

					<div class="row social links">
						<div class="facebook" data-bind="visible: facebookAllow">
							<!--<a class="link" data-bind="attr: { href: facebookUrl}, i18n: 'text'" data-i18n="Log In"></a>-->
							<a class="link" data-bind="click: function () {window.location.href = '?facebook';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
						<div class="google" data-bind="visible: googleAllow">
							<a class="link" data-bind="click: function () {window.location.href = '?google';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
						<div class="twitter" data-bind="visible: twitterAllow">
							<a class="link" data-bind="click: function () {window.location.href = '?twitter';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
					</div>

					<div class="description" data-bind="visible: '' !== loginDescription(), html: loginDescription"></div>
					<div class="clear"></div>

				</form>
			</div>

			<div class="content signin clearfix" data-bind="visible: test()">
				<form class="form fields" action="#/" onsubmit="return false;">
					<div class="fieldset">

						<div class="row email" data-bind="css: {'focused': emailFocus(), 'filled': email().length > 0}">
							<label for="email" class="title placeholder" data-i18n="LOGIN/LABEL_EMAIL" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="emaill" class="input" type="emaill" autocomplete="off" data-bind="value: email, hasfocus: emailFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>

						<div class="row password" data-bind="css: {'focused': passwordFocus(), 'filled': password().length > 0}">
							<label for="password" class="title placeholder" data-i18n="LOGIN/LABEL_PASSWORD" data-bind="i18n: 'text'"></label>
							<span class="value">
								<input id="passwordd" class="input" type="passwordd" data-bind="value: password, hasfocus: passwordFocus, valueUpdate: 'afterkeydown'" />
							</span>
						</div>
					</div>
					<div class="row buttons">
						<button type="submit" class="button login" data-bind="text: signInButtonText, click: actionLogin"></button>
					</div>
					<div class="row signme" data-bind="visible: signMeType() !== Enums.LoginSignMeType.Unuse">
						<span>
							<label class="custom_checkbox" data-bind="css: {'checked': signMe}">
								<span class="icon"></span>
								<input id="signmee" type="checkbox" data-bind="checked: signMe" />
							</label>
							<label class="title" for="signme" data-i18n="LOGIN/LABEL_REMEMBER_ME" data-bind="i18n: 'text'"></label>
						</span>
					</div>
					<div class="row links">
						<div class="forgot">
							<span class="link" data-bind="click: function () {gotoForgot(true); gotoSignin(false);}, i18n: 'text'"
								  data-i18n="HELPDESK/LINK_FORGOT"></span>
						</div>
						<div class="register">
								<span class="link" data-bind="click: function () {gotoRegister(true); gotoSignin(false);}, i18n: 'text'"
									  data-i18n="HELPDESK/LINK_REGISTER"></span>
						</div>
					</div>

					<!--<div class="row signme forgot">-->
						<!--<span class="link" data-bind="click: function () {gotoSignin(false);}, i18n: 'text'"-->
							  <!--data-i18n="HELPDESK/BUTTON_BACK"></span>-->
					<!--</div>-->

					<div class="row social links">
						<div class="facebook" data-bind="visible: facebookAllow">
							<!--<a class="link" data-bind="attr: { href: facebookUrl}, i18n: 'text'" data-i18n="Log In"></a>-->
							<a class="link" data-bind="click: function () {window.location.href = '?facebook';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
						<div class="google" data-bind="visible: googleAllow">
							<a class="link" data-bind="click: function () {window.location.href = '?google';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
						<div class="twitter" data-bind="visible: twitterAllow">
							<a class="link" data-bind="click: function () {window.location.href = '?twitter';}, i18n: 'text'" data-i18n="Log In"></a>
						</div>
					</div>
				</form>
				<div class="description" data-bind="visible: '' !== loginDescription(), html: loginDescription"></div>
				<div class="clear"></div>
			</div>


		</div>
	</div>
	<div class="vhelper"></div>



	<span style="width: 30px; height: 30px; position: absolute; bottom: 0; right: 0" data-bind="click: actionTest"></span>



</div>