// JavaScript Document

var loginShow=false;
var registrationShow=false;

var loginBoxDiv=(<r><![CDATA[
	<h5>Inloggning</h5>
	<div class="login_subWrapper">
		E-post:<br /><input type="text" name="textfield" id="textfield" class="login_textField" />
	</div>
	<div class="login_subWrapper">
		Lösenord:<br /><input type="text" name="textfield2" id="textfield2" class="login_textField" />
	</div>
	<div class="login_subWrapper_small">
		<input type="submit" name="button" id="button" value="Logga in" class="login_button" />
	</div>
	<div id="login_subWrapper_small_second">
		<a href="">Glömt lösenordet?</a>
	</div>
	<div id="login_subWrapper_small_last">
		<a href="#" onclick="showHideRegistrationBox()">Registrera dig</a>
	</div>
	
	]]></r>).toString();

var registrationDiv=(<r><![CDATA[
								 
	<form name="addUser" method="post" action="addUser.php">
        <p>Registrera användare</p>
        <p>
            Email: <input type="text" name="email" id="email" />
            <br />
            Födeledatum: <input type="text" name="dob" id="dob" />
            <br />
            Kön: <select name="sex" id="sex">
                    <option value="" selected="selected"></option>
                    <option value="man">Man</option>
                    <option value="womman">Kvinna</option>
                 </select>
            <br />
            Ort: <select name="location" id="location">
                    <option value="" selected="selected" ></option>
                    <option value="0">Dalarna</option>
                    <option value="1">Stockholm</option>
                 </select>
        </p>
        <p>
        	<input type="submit" name="submit" id="submit" value="Registrera" />
        </p>
    </form>
	
	]]></r>).toString();

function showHideLoginBox() {
	if(!loginShow) {
		if(registrationShow) {
			document.getElementById('regImgSelected').style['width'] = '0px';
			document.getElementById('regImgSelected').style['visibility'] = 'hidden';
			document.getElementById('regImgUnselected').style['width'] = 'auto';
			document.getElementById('regImgUnselected').style['visibility'] = 'visible';
			var registrationBox = document.getElementById('registrationBox');
			var oldRegistrationBox = document.getElementById('login_wrapper');
			registrationBox.removeChild(oldRegistrationBox);
			registrationShow=false;
		}
		document.getElementById('loginImgSelected').style['width'] = 'auto';
		document.getElementById('loginImgSelected').style['visibility'] = 'visible';
		document.getElementById('loginImgUnselected').style['width'] = '0px';
		document.getElementById('loginImgUnselected').style['visibility'] = 'hidden';
	    var loginBox = document.getElementById('loginBox');
	    var newLoginBox = document.createElement('div');
	    var divIdName = 'login_wrapper';
	    newLoginBox.setAttribute('id',divIdName);
	    newLoginBox.innerHTML = loginBoxDiv;
	    loginBox.appendChild(newLoginBox);
	    loginShow=true;
	} else {
		document.getElementById('loginImgSelected').style['width'] = '0px';
		document.getElementById('loginImgSelected').style['visibility'] = 'hidden';
		document.getElementById('loginImgUnselected').style['width'] = 'auto';
		document.getElementById('loginImgUnselected').style['visibility'] = 'visible';
		var loginBox = document.getElementById('loginBox');
		var oldLoginBox = document.getElementById('login_wrapper');
		loginBox.removeChild(oldLoginBox);
		loginShow=false;
	}
}

function showHideRegistrationBox() {
	if(!registrationShow) {
		if(loginShow) {
			document.getElementById('loginImgSelected').style['width'] = '0px';
			document.getElementById('loginImgSelected').style['visibility'] = 'hidden';
			document.getElementById('loginImgUnselected').style['width'] = 'auto';
			document.getElementById('loginImgUnselected').style['visibility'] = 'visible';
			var loginBox = document.getElementById('loginBox');
			var oldLoginBox = document.getElementById('login_wrapper');
			loginBox.removeChild(oldLoginBox);
			loginShow=false;
		}
		document.getElementById('regImgSelected').style['width'] = 'auto';
		document.getElementById('regImgSelected').style['visibility'] = 'visible';
		document.getElementById('regImgUnselected').style['width'] = '0px';
		document.getElementById('regImgUnselected').style['visibility'] = 'hidden';
	    var registrationBox = document.getElementById('registrationBox');
	    var newRegistrationBox = document.createElement('div');
	    var divIdName = 'login_wrapper';
   	    newRegistrationBox.setAttribute('id',divIdName);
	    newRegistrationBox.innerHTML = registrationDiv;
	    registrationBox.appendChild(newRegistrationBox);
	    registrationShow=true;
	} else {
		document.getElementById('regImgSelected').style['width'] = '0px';
		document.getElementById('regImgSelected').style['visibility'] = 'hidden';
		document.getElementById('regImgUnselected').style['width'] = 'auto';
		document.getElementById('regImgUnselected').style['visibility'] = 'visible';
		var registrationBox = document.getElementById('registrationBox');
		var oldRegistrationBox = document.getElementById('login_wrapper');
		registrationBox.removeChild(oldRegistrationBox);
		registrationShow=false;
	}
}