<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: "style",
							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;
						}
					});
				}, 
				reset_settings: function(input) {
					$.ajax({
						type:     "POST",
						url:      "action.php",
						dataType: "json",
						data: {
							sid: "$sid",
							action: "style",
							input: "reset_settings"
						},
						error: function(data) {
							if (data && data.responseText) $('aside').text("").html(data.responseText).fadeIn();
						},
						success: function(data) {
							document.location.href = "index.php?style&sid=$sid";
						}
					});
				}
			});
		})(jQuery);
		
		$(':input').bind("keyup change", function(e) {
			$.save_settings($(this));
		});
		
		$('a.button').live("click", function(e) {
			e.preventDefault();
			var link = $(this);
			
			link
				.addClass("delete")
				.text(link.attr("delphrase"))
				.mouseout(function() {
					$(this)
						.removeClass("delete")
						.text(link.attr("defphrase"))
						.unbind();
				})
				.click(function() {
					$.reset_settings();
				});
			
		});
	});
</script>


<article style="width: 300px">
	<h1>%style_headline%</h1>
	<p>%style_text1%</p>
	<p>%style_text2%</p>
	<p>%style_text3% (<a href="http://code.google.com/p/ezstats/issues/list">ezStats Support</a>)</a></p>
	<p>%style_text4%</p>
	<p><a class="button" defphrase="%reset%" delphrase="%reset%?" action="reset" href="#">%reset%</a></p>
</article>
<article style="width: 500px">
	<form>
		<fieldset>
			<ul></ul>
		</fieldset>
	</form>
</article>
<div class="clear"></div>