<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		(function($) {
			$.extend({
				save_settings: function(elem) {
					// AJAX starten
					$.ajax({
						type:     "POST",
						url:      "action.php",
						dataType: "json",
						data: {
							action: "settings",
							sid:    "$sid",
							input:  {
								name: elem.attr("name"),
								value:  elem.val()
							}
						},
						beforeSend: function() {
							$('aside').stop(true, true).hide().text('%saving% ...').fadeIn();
						},
						error: function(data) {
							if (data && data.responseText)
								$('aside').text("").html(data.responseText).fadeIn();
						},
						success:    function(data) {
							if (data && data.message) 
								 $('aside').text(data.message);
							else $('aside').fadeOut();
							
							// Weiterleiten, falls Parameter uebergeben wurde
							if (data && data.href) document.location.href = data.href;
						}
					});
				},
				
				step: function(elem) {
					$('#list li').hide();
					
					if (elem == "step4") {
						$.ajax({
							type:     "POST",
							url:      "action.php",
							dataType: "html",
							data: {
								action: "plugins",
								sid:    "$sid"
							},
							beforeSend: function() {
								$('aside').stop(true, true).hide().text('%loading% ...').fadeIn();
							},
							error: function(data) {
								if (data && data.responseText)
									$('aside').text("").html(data.responseText).fadeIn();
							},
							success:    function(data) {
								$('aside').fadeOut();
								$('#'+ elem).append(data).slideDown();
							}
						});
					} else {
						$('#'+ elem).slideDown();
					}
				}
			});
		})(jQuery);
		
		$(':input').bind("keyup change", function(e) {
			$.save_settings($(this));
		});
		
		$('a.button').click(function(e) {
			e.preventDefault();
			$.step($(this).attr('href'));
		})
	});
</script>

<section>
	<h1>%plugins%</h1>
	<form>
		<fieldset>
			<ul id="list">
				<li>
					<span class="numberCircle">1</span>
					<h3>%plugins_step1_1%</h3>
					<p>%plugins_step1_2%</p>
					<h3>%plugins_step1_3%</h3>
					<p>%plugins_step1_4%</p>
					<h3>%plugins_step1_5%</h3>
					<p>%plugins_step1_6%</p>
					<p class="tright"><a href="step2" class="button">%next%</a></p>
				</li>
				<li id="step2" class="hidden">
					<span class="numberCircle">2</span>
					<input type="text" size="60" name="path" id="path" value="$path" />
					<p>%plugins_step2%</p>
					<p class="tright"><a href="step3" class="button">%next%</a></p>
				</li>
				<li id="step3" class="hidden">
					<span class="numberCircle">3</span>
					<select name="cms" id="cms">$plugins</select>
					<p>%plugins_step3% (<a href="http://code.google.com/p/ezstats/issues/list">ezStats Support</a>)</p>
					<p class="tright"><a href="step4" class="button">%next%</a></p>
				</li>
				<li id="step4" class="hidden">
					<span class="numberCircle">4</span>
				</li>
			</ul>
		</fieldset>
	</form>
</section>