window.addEvent('domready', function() {


	$$('.popup').each(function(elem) {
		elem.makeDraggable();
	});



	$$('.toggle').each(function(elem) {

		var a = elem.getParent().getNext().getNext().getNext().getNext();

		var mySlide = new Fx.Slide(a);
		mySlide.hide();

		elem.addEvent('click', function(e){

			//e = new Event(e);

			mySlide.toggle();
			//e.stop();
		});
	});


});


/**
 * This class contains the following functionality:
 * Utils.makeSortable()
 * Utils.toggle()
 * Utils.sendForm()
 */
Utils = {}
Utils.makeSortable = function(selector, url){

	new Sortables(
		$(selector),
		{
			handle: '.dragzone',
			onComplete: function(dragElem){
				var elems = $(selector).getChildren();
				var pks = [];
				elems.each(function(e) {
					pks.push(e.getProperty('id'));
					//alert(e.getProperty('id'));
				});
				var data = {};
				data.elems = pks;
				var ajax = new Request(

					{

						url: url,
						method: 'post',
						data: data,
						onRequest: function() {},
						onSuccess: function () {

						}
					}
				);
				ajax.send();

		}
	});
};
Utils.toggle = function(reciever) {

		var elem = $(reciever);

		if (elem.getStyle('display') == 'none') {
			elem.setStyle('display', 'block');
		} else {
			elem.setStyle('display', 'none');
		}

}


/**
 * Collects all input, textarea and select-field data from a specified form and performs
 * an ajax-post-request to the param url
 *
 * @param {Object} form		form with data
 * @param {Object} url		url to request
 */
Utils.sendForm = function(form, onRequest, onSuccess) {

	var url = $(form).getProperty('action');

	// create selector for form fields
	var input_selectors = "#" + form + " input";
	var textarea_selectors = "#" + form + " textarea";
	var select_selectors = "#" + form + " select";


	var data = {}

	// collect all data within the form
	$$(input_selectors).each(function(elem){
		data[elem.getProperty('name')] = elem.getProperty('value');
	});
	$$(textarea_selectors).each(function(elem){
		data[elem.getProperty('name')] = elem.getProperty('value');

	});
	$$(select_selectors).each(function(elem){
		data[elem.getProperty('name')] = elem.getProperty('value');
	});


	// build and perform ajax-request
	var ajax = new Request(

		{
			'url': url,
			'method': 'post',
			'data': data,
			'onRequest': function() {
				//alert(onSuccess());
				onSuccess();
				onRequest;
			},
			'onSuccess': function () {

			}
		}
	);
	ajax.send();

}




/**
 * Hides an element by setting display:none
 * @param {Object} elem		#id that specifies the element
 */
Utils.hide = function(elem) {
	$(elem).setStyles({'display':'none'});
}

/**
 * Display a certain picture by replacing the innerHTML of an element
 * @param {Object} picture	url to the picture
 * @param {Object} elem		elem in which the picture will be placed
 */
Utils.displayPicture = function (picture, elem) {
	$(elem).setHTML('<img src="' + picture + '"/>');
}


/**
 * Display a certain picture by replacing the innerHTML of an element
 * @param {Object} picture	url to the picture
 * @param {Object} elem		elem in which the picture will be placed
 */
Utils.displayArtistPicture_client = function (invoker, picture, elem) {

	var description = $(invoker).getNext().getText();
	$(elem).setHTML('<img src="' + picture + '"/><br/>' + description);
}

/**
 * Display a picture with prepopulated editPictureInfo form fields
 * on the admin-side of the Artist-App
 * @param {Object} invoker		invoker
 * @param {Object} picture		Url
 * @param {Object} elem			Container for the big Pic
 */
Utils.displayArtistPicture_admin = function(invoker,picture, elem) {
	invoker = $(invoker);

	var pictureCategory = invoker.getNext().getText();
	var description = invoker.getNext().getNext().getText();
	var tags = invoker.getNext().getNext().getNext().getText();
	var pk = invoker.getNext().getNext().getNext().getNext().getText();

	$('description').setText(description);
	$('tags').setProperty('value', tags);
	$('pk').setProperty('value', pk);

	$(elem).setHTML('<img src="' + picture + '"/>');
}



Utils.close_all_info = function() {
	$$('.info_popup').each(function(e) {
		e.setStyle('display', 'none');
	});
}



Utils.info = function(invoker, title, text) {

	Utils.close_all_info();


	var container = new Element("div");
	container.addClass('info_popup');
	var header =  new Element("div");
	var header_inner =  new Element("span");
	header.addClass('header')
	header.appendChild(header_inner);
	header_inner.addClass('warning');
	var content =  new Element("div");
	content.addClass('content')

	container.appendChild(header);
	container.appendChild(content);



	var scrollTop = window.getScrollTop();
	var scrollLeft = window.getScrollLeft();
	var yHeight = window.getHeight();
	var xWidth = window.getWidth();

	var positionTop = scrollTop + yHeight/2;
	var positionLeft = scrollLeft + xWidth/2;





	header_inner.setText(title);
	content.setText(text);

	href = $(invoker).getProperty('ref');

	var decission_html =

			'<br/><table>'
				+ '<tr>'
					+ '<td>'
						+'<div class="buttons ">'
					          +  '<a href="' + href + '"><span class="delete">Löschen</span></a>'
					  	+ '</div>'
					+ '</td>'
					+ '<td>'
						+'<div class="buttons ">'
						          +  '<a onclick="Utils.close_all_info()">Abbrechen</span></a>'
					  	+ '</div>';
					+ '</td>'
				+ '</tr>'
			+ '</table>';



	var decission = new Element("div");
	decission.innerHTML = decission_html;
	content.appendChild(decission);

	document.body.appendChild(container);

	container.makeDraggable();
	container.setStyles({'top': positionTop, 'left':positionLeft});


}





/**************************************************************************************/


/**
 * This class contains popup functionality
 */
Popup = {};


/**
 * Close the specified popUp
 * @param {Object} elem
 */
Popup.closePopup = function(elem) {
	Utils.hide(elem);
}

/**
 * Open a popUp
 * @param {Object} elem		#id that identifies the popUp
 */
Popup.openPopup = function(elem) {
	$$('.popup').each(function(elem){
		elem.setStyles({'display': 'none'});
	});
	// calculate Positions to place the Popup within the window
	var scrollTop = window.getScrollTop();
	var scrollLeft = window.getScrollLeft();
	var yHeight = window.getHeight();
	var xWidth = window.getWidth();

	// var positionTop = scrollTop + yHeight/5;
	var positionTop = scrollTop / 2 * -1;
	// var positionLeft = scrollLeft + xWidth/5;
	var positionLeft = scrollLeft / 2 * -1;

	$(elem).setStyles({'display':'block', 'top': positionTop, 'left':positionLeft});

}

/**
 * Open a gallery popUp
 *
 * @param {Object} elem			#id that identifies the popUp
 * @param {Object} start_pic	picture that has to be displayed
 */
Popup.openGalleryPopup = function(elem, start_pic) {

	if (start_pic != undefined) {
		var selector = "gallery" + elem;
		$(selector).setHTML('<img src="' + start_pic + '"/>');
	}

	Popup.openPopup(elem);
}