// -- threshold is the number of children, before this takes effect
// -- childElementQuery is an optional argument telling the query for 
//    recognizing children. e.g., to only care about child <li> elements: "li". default is "div".
// -- showHideElement is an element that will work as the toggle. 
function showMoreBox2(threshold, childElementQuery, showHideElement, color) {
	// default arguments
	if (!childElementQuery)
		return;
	if (! color)
		color = "green";
	// find out what to show more of
	var children = $(document).find(childElementQuery);
	if (children.length <= threshold) {
		$(showHideElement).hide();
	}
	else {
		// setup the more/less button styling
		var label = $(showHideElement).text();
		$(showHideElement).empty().prepend("<table cellspacing='0' class='show_less_more_button " + color + "_plus'>" + "<tr><td class='plus_image'></td><td  class='plus_label' valign='middle'>" + label + "</td></tr></table>");
		
		// these are the elements to toggle, that are not shown by default
		var toggleChildren = children.slice(threshold).hide();
		// make the show less/more elements clickable, and do the right thing
		var button_box = $(showHideElement).find('.show_less_more_button');
		button_box.children().click(function(){
			if ($(button_box).hasClass("clicked_show_less_more_button")) {
				$(button_box).removeClass("clicked_show_less_more_button");
				$(toggleChildren).hide();
			}
			else {
				$(button_box).addClass("clicked_show_less_more_button");
				$(toggleChildren).show();
			}
		});
		button_box.mouseover(function(){
			$(this).addClass('active_show_less_more_button');
		});
		button_box.mouseout(function(){
			$(this).removeClass('active_show_less_more_button');
		});
	}
}

// showMoreBox but but with a custom callback for the action with the following paramteres: 
// function(mode ("show"/"hide"), clickedShowHideElement, firstTime (true/false)){}
function showMoreBoxCallback(showHideElement, callback, color) {
	if (! color)
		color = "green";
		
	// setup the more/less button styling
	var label = $(showHideElement).text();
	$(showHideElement).empty().prepend("<table cellspacing='0' class='show_less_more_button " + color + "_plus'>" + "<tr><td class='plus_image'></td><td class='plus_label' valign='middle'>" + label + "</td></tr></table>");

	// make the show less/more elements clickable, and do the right thing
	var button_box = $(showHideElement).find('.show_less_more_button');
	button_box.children().click(function(){
		var firstTime = 0;
		if (! $(button_box).hasClass("first_time")) {
			firstTime = 1;
			$(button_box).addClass('first_time')
		}
		if ($(button_box).hasClass("clicked_show_less_more_button")) {
			$(button_box).removeClass("clicked_show_less_more_button");
			callback('hide', showHideElement, firstTime);
		}
		else {
			$(button_box).addClass("clicked_show_less_more_button");
			callback('show', showHideElement, firstTime);
		}
	});
	button_box.mouseover(function(){
		$(this).addClass('active_show_less_more_button');
	});
	button_box.mouseout(function(){
		$(this).removeClass('active_show_less_more_button');
	});
}

// element should be a <button> element, with the label as a text child node.
// image should be an image location.
// if primary is true, this image will get the "default" (primary) button style.
function samlainButton(element, image, primary) {
	$(element).each(function(){
		if (image)
			$(this).html("<img src='" + image + "' /><span>" + $(this).text() + "</span>");
		else {
			var label;
			if ($(this).attr("tagName") == "BUTTON")
				// for <button>, we get the label from the content.
				label = $(this).text();
			else if ($(this).attr("tagName") == "INPUT")
				// for input, we get it from the value attr.
				label = $(this).attr("value");
				
			$(this).html("<span>" + label + "</span>");
		}
	});

	// add hover effect to our custom-styled jquery UI buttons
	$(element).hover(
			function(){$(this).addClass('ui-state-hover');}, 
			function(){$(this).removeClass('ui-state-hover');}
	);
	// mark it as our custom button, so it can get some nice custom fixup styling.
	// also add standard jquery UI classes so it gets the theme style.
	$(element).addClass("samlain_button ui-state-default ui-corner-all");
	if (primary)
		$(element).addClass('ui-priority-primary')
}

function collapsedBox(elements) {
	// hide all collapsed boxes, and give hide/show-links their action
	$(elements).hide().each(function(i){
		var show_link = $(this).prevAll('a.show_link:first');
		var hide_link = $(this).prevAll('a.hide_link:first');
		var box = $(this);
		show_link.click(function(){
			box.show()
			if (hide_link)
				hide_link.show();
			show_link.hide()
		});
		if (hide_link) {
			hide_link.click(function(){
				box.hide();
				hide_link.hide();
				show_link.show();
			}).hide();
		}
	});
}

$(document).ready(function(){
	// requires the jquery.searchField.js to be loaded. adds support for default texts in input fields
	try {
		$(".defaultText").searchField();
	}
	catch(err) {}
		
	// variant of the above, but you have a <tr> that is replaced by another when the link is clicked.
	$('tr.collapsed_row').hide().each(function(i){
		var show_row = $(this).prevAll('tr.show_collapsed_row:first');
		var show_link = $(show_row).find('.show_link:first');
		var box = $(this);
		show_link.click(function(){
			box.show()
			show_row.hide();
		});
	});

	// replace info_box placeholders with (i) sign, and hidden dialog box.
	$('.info_placeholder').hide().each(function(i){
		$(this).replaceWith("<img src='/media/images/info.png' title='Hjälp' class='info info_behavior' id='info_" + i + "' /><span class='clearer' /><div style='display:none' class='info_dialog' id='info_" + i + "_dialog' title='" + $(this).attr('title') + "'>" + $(this).html() + "</div>");
	});
	// this is another variant that let's you keep the dialog <div/> in another place, separate
	// from the field.  useful so we can "tag" info fields while letting form.as_table do its thing.
	$('.info_field').each(function(i){
		$(this).before("<img src='/media/images/info.png' title='Hjälp' class='info info_behavior' id='" + $(this).attr('name') + "_info' /><span class='clearer' />")
	});

	// connect info boxes to their dialogs; make them clickable.
	$('.info_behavior').click(function(){
		var elt = $('#' + $(this).attr('id') + "_dialog").dialog().dialog("open");
		// support for wider dialogs.
		if ($(elt).hasClass("wide_dialog")) {
			$(elt).dialog('option', 'width', 500);
		}
	});

	samlainButton($('input[type=submit], input[type=button]'));
});