<div class="maintitle ipsFilterbar clearfix">
	<ul class="ipsList_inline">
                                <a href="index.php?app=game&module=informations" title="Aktualności">Strona Główna</a>
				<li class="active"><a href="index.php?app=game&module=character" title="Lista postaci">Postacie</a></li>
	</ul>
</div>

<div class="ipsBox">
	<div class="ipsLayout ipsLayout_withleft ipsLayout_smallleft ipsVerticalTabbed clearfix usercp_body">
		<div class="ipsVerticalTabbed_tabs ipsLayout_left" id="usercp_tabs">
			<ul>
				<li><a href="index.php?app=game&module=character">Lista postaci</a></li>
				<li class="active"><a href="index.php?app=game&module=character&section=createchar">Załóż postać</a></li>
			</ul>
		</div>
		<div class="ipsVerticalTabbed_content ipsLayout_content ipsBox_container">
			<div class="ipsPad">
				<form action="index.php?app=game&module=character&section=createchar&do=newchar" method="post">
					<fieldset class="row1" id="id_charbase">
						<h2 class="ipsType_subtitle ipsSettings_pagetitle">Podstawowe dane postaci</h2>
							<ul>
								<li class="field">
									<label for="id_gender">Płeć</label>
										<select name="gender" id="id_gender" class="input_select">
											<option value="-1">Wybierz płeć...</option>
											<option value="1">Mężczyzna</option>
											<option value="2">Kobieta</option>
										</select>
								</li>
								<li class="field">
									<label for="id_age">Wiek</label>
										<input name="age" id="id_age" class="input_text" style="width:30px" maxlength="2" />
								</li>
							</ul>
					</fieldset>
					<fieldset class="submit" id="id_shownext_field">
						<input type="button" class="input_submit" id="id_shownext_button" value="Dalej" />
					</fieldset>
					<div id="id_next" style="display:none">
						<fieldset class="row1">
							<h2 class="ipsType_subtitle ipsSettings_pagetitle">Osobowe dane postaci</h2>
								<ul>
									<li class="field">
										<label for="id_name">Imię</label>
											<input name="name" id="id_name" class="input_text" style="width:100px" />
										<br />
									</li>
									<li class="field">
										<label for="id_surname">Nazwisko</label>
											<input name="surname" id="id_surname" class="input_text" style="width:100px" />
									</li>
									<li class="field">
										<input type="button" value="Wybierz wygląd postaci" id="id_skin" class="input_submit center" />
									</li>
								</ul>
						</fieldset>
						<fieldset class="submit">
							<input type="hidden" name="skin" id="id_char_skin" value="" />
							<input type="submit" class="input_submit" id="id_button_createchar" value="Stwórz postać" />
						</fieldset>
					</div>
					<div style="overflow: auto; width: twoj wymiar px; height: twoj wymiar px;">
						<div id="skins" style="display:none">
							<h3 class="bar">Wybierz wygląd nowej postaci</h3>
								<div style="padding:15px;text-align:center">
									<fieldset class="row1" id="id_ajax_skins">
									</fieldset>
								</div>
						</div>
						<script type="text/javascript">
								var playcountry_skinsPopup;
								$("id_shownext_button").observe("click",function(e){
									if($("id_gender").getValue() < 0 || $("id_age").getValue() < 18 || $("id_age").getValue() >=90)
									{
										alert("Musisz wybrać płeć oraz wiek postaci mniejszy niż 90 lat.");
										return;
									}
									$("id_shownext_field").hide();
									new Ajax.Request( ipb.vars["base_url"] + "app=game&module=ajax&section=newchar",
									{
										method: "post",
										evalJSON: "force",
										parameters: {
											"md5check": ipb.vars["secure_hash"],
											'gender': $('id_gender').getValue()
										},
										onSuccess: function(t)
										{
											if( Object.isUndefined( t.responseJSON ) )
											{
												alert( "Bad Request" );
											}
											else if ( t.responseJSON["error"] )
											{
												alert( t.responseJSON["error"] );
											}
											else
											{
												$("id_ajax_skins").innerHTML = t.responseJSON["skins"];

												playcountry_skinsPopup = new ipb.Popup("skinPopup",
												{
													type: "pane", modal: false, w: "1100px",
													initial: $("skins").innerHTML,
													hideAtStart: true,
													close: 'a[rel="close"]'
												});

												$$(".skinimg").each(function(element){
													element.observe("click",function(e){
														if($("id_char_skin").value != this.alt)
														{
															$("id_char_skin").value = this.alt;
															$$(".skinimg").each(function(el2){
																if(el2.alt != $("id_char_skin").value)
																{
																	new Effect.Opacity(el2,{to:0.5,duration: 0.5});
																}
																else
																{
																	new Effect.Opacity(el2,{to:1.0,duration: 0.5});
																}
															});
														}
														else
														{
															$("id_char_skin").value = "";
															$$(".skinimg").each(function(el2){
																new Effect.Opacity(el2,{to:1.0,duration: 0.5});
															});
														}
													});
												});

												Effect.BlindUp("id_charbase");
												Effect.BlindDown("id_next");
											}
										}
									});
								});

								$("id_skin").observe("click",function(e){
									if($("id_name").getValue()=="" || $("id_surname").getValue()=="")
									{
										alert("Nie wprowadziłeś imienia lub nazwiska postaci.");
										Event.stop(e);
										return false;
									}

									Event.stop(e);
									playcountry_skinsPopup.show();
									return false;
								});

								$("id_button_createchar").observe("click",function(e){
									if(!($("id_char_skin").getValue()>0))
									{
										alert("Nie wybrałeś wyglądu postaci.");
										Event.stop(e);
										return false;
									}
								});
						</script>
					</div>
					<style type="text/css">
						.skinimg{margin-top:3px;cursor:pointer}
					</style>
				</form>
			</div>
		</div>
	</div>
</div>