$(document).ready(
    function () {
		$('a.closeEl').bind('click', toggleContent);
		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
					serialize()
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);
var toggleContent = function(e)
{
	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(300);
		$(this).html('<img src="/gfx/infoside_element_minus.png" alt="Endre" />');
	} else {
		targetContent.slideUp(300);
		$(this).html('<img src="/gfx/infoside_element_pluss.png" alt="Endre" />');
	}
	return false;
};


	var request = false;
	   try {
		 request = new XMLHttpRequest();
	   } catch (trymicrosoft) {
		 try {
		   request = new ActiveXObject("Msxml2.XMLHTTP");
		 } catch (othermicrosoft) {
		   try {
			 request = new ActiveXObject("Microsoft.XMLHTTP");
		   } catch (failed) {
			 request = false;
		   }
		 }
	   }


function serialize(s)
{


	   if (!request)
		 alert("Error initializing XMLHttpRequest!");

		serial = $.SortSerialize(s);

	//alert(serial.hash);

	 var url = "/infosider.elementer.saveoppsett.php?" +serial.hash;
	 request.open("GET", url, true);
	 request.onreadystatechange = updatePage;
	 request.send(null);


    function updatePage() {
	    if (request.readyState == 4)
		    if (request.status == 200) {
			    var response = request.responseText.split("|");
				document.getElementById("order").innerHTML = response[0];
		    }
	}

};



// prepare the form when the DOM is ready
$(document).ready(function() {
    // bind form using ajaxForm
    $('#htmlForm').ajaxForm({
        // target identifies the element(s) to update with the server response
        target: '#htmlExampleTarget',

        // success identifies the function to invoke when the server response
        // has been received; here we apply a fade-in effect to the new content
        success: function() {
            $('#htmlExampleTarget').fadeIn('slow');
        }
    });
});



 $(".edit").editable("save.php", {
	 indicator : "Saving...",
	 tooltip   : 'Click to edit...'
 });
 $(".edit_area").editable("save.php", {
	 type      : 'textarea',
	 cancel    : 'Cancel',
	 submit    : 'OK',
	 indicator : "<img src='img/indicator.gif' />",
	 tooltip   : 'Click to edit...'
 }).autogrow({
	lineHeight: 16
});