<link href="{{ STATIC_URL }}pagehelp/main.css" rel="stylesheet" type="text/css" />

{% if page %}
<div id="pagehelp"{% if not open %} class="pagehelp-hidden"{% endif %}>
<div id="pagehelp-top">
<strong>Help</strong>
{% if can_edit %}
<a href="{% url admin:pagehelp_page_change page.pk %}">edit</a>
{% endif %}
</div>
<div class="pagehelp-content">
{{ page.text|urlize|linebreaks }}
</div>
<div id="pagehelp-bottom">
<form action="{% url page_hide %}" method="post" class="pagehelp-hide-page">
<input type="hidden" name="next" value="{{ next }}" />
<input type="submit" value="Hide this help &raquo;" />
</form>
<form action="{% url default_hide %}" method="post" class="pagehelp-hide-default"{% if not default_open %} style="display:none;"{% endif %}>
<input type="hidden" name="next" value="{{ next }}" />
<input type="submit" value="Hide all help" /> 
</form>
<form action="{% url default_show %}" method="post" class="pagehelp-show-default"{% if default_open %} style="display:none;"{% endif %}>
<input type="hidden" name="next" value="{{ next }}" />
<input type="submit" value="Show all help" /> 
</form>
</div>
</div>
{% endif %}

<div id="pagehelp-closed"{% if open %} class="pagehelp-hidden"{% endif %}>
{% if page %}
<div class="pagehelp-content">
<strong>H</strong><strong>E</strong><strong>L</strong><strong>P</strong>
</div>
<form action="{% url page_show %}" method="post">
<input type="hidden" name="next" value="{{ next }}" />
<input type="submit" value="&laquo;" class="button" />
</form>
{% else %}
<a href="{% url admin:pagehelp_page_add %}?url={{ path|urlencode }}&site={{ site_id }}" title="add help for this page"><strong>+</strong> <span>h</span><span>e</span><span>l</span><span>p</span></a>
{% endif %}
</div>

{% if not has_jquery %}
<script type="text/javascript" src="{{ STATIC_URL }}pagehelp/jquery-1.3.2.min.js"></script>
{% endif %}
<script type="text/javascript">
<!--
function hideHelpForm(form, callback) {
	var pagehelp = jQuery('#pagehelp');
	var width = pagehelp.width();
	pagehelp.css('overflow', 'hidden');
	jQuery('>*', pagehelp).each(function() {
		jQuery(this).width(jQuery(this).width());
	});
	pagehelp.animate(
			{width: '0'},
			250,
			function() {
				pagehelp.hide();
				pagehelp.css('overflow', 'auto');
				pagehelp.css('width', width+'px');
				if (callback) callback();
			}
	);
};
function changeDefaultDisplay(form) {
	var button = jQuery('input[type=submit]', form)
	var value = button.val(); 
	if (value == '...') return true;
	button.val('...');
	var next = jQuery('input[name=next]', form).val();
	jQuery.post(form.action, {next: next}, function() {
		button.val(value);
		jQuery('.pagehelp-hide-default,.pagehelp-show-default').toggle();
	});
};
jQuery('.pagehelp-hide-page').submit(function() {
	var form = this;
	hideHelpForm(form, function() {
		var next = $('input[name=next]', form).val();
		jQuery.post(form.action, {next: next}, function() {
			jQuery('#pagehelp-closed').fadeIn('fast');
		});
	});
	return false;
});
jQuery('.pagehelp-hide-default, .pagehelp-show-default').submit(function() {
	changeDefaultDisplay(this);
	return false;
});
jQuery('.pagehelp-hide-default').submit(function() {
	hideHelpForm(this, function() {
		jQuery('#pagehelp-closed').fadeIn('fast');
	});
	return false;
});
jQuery('#pagehelp-closed form').submit(function() {
	var pagehelp = jQuery('#pagehelp');
	var width = pagehelp.width();
	jQuery('#pagehelp-closed').fadeOut('fast');
	pagehelp.css('overflow', 'hidden');
	jQuery('>*', pagehelp).each(function() {
		jQuery(this).width(width);
	});
	pagehelp.css('width', '0');
	pagehelp.animate(
			{width: width+'px'},
			function() {
				jQuery('>*', pagehelp).each(function() {
					jQuery(this).width('auto');
				});
				pagehelp.css('overflow', 'auto');
			}
	);
	var next = jQuery('input[name=next]', this).val();
	jQuery.post(this.action, {next: next})
	return false;
});
//-->
</script>
