/*
console = {
	log: function(str) {
		//alert(str);
	}
}
*/



window.dialog = {
	show: function(url, lang, pikto, upload, order) {
		$("#dialog").html("");
		$("#dialog").load(url, function() {

			var $dialogContent = $(this);
			var $dialogContentHtml = $dialogContent.html();
			var identifier = "";
			var translation = "";
			var repContent = "";
			var redirectLang = "";

			var req = {'lang': lang};
		
			// translate the dialogs
			jQuery.getJSON('/actions/lang.php', req, function(langData) {
		
				var arrayLength = langData.length;
				var i = 0

				$.each(langData, function(key, con) {
					$.each(langData[key], function(field, value) {
						if (field == "identifier") {
							identifier = "{i18n:" + value + "}";
						}

						if (field == "translation") {
							translation = value;
						}
					});

					i++;
			
					if (key == 0) {
						repContent = $dialogContentHtml.replace(identifier, translation);
					}
					else {
						if ($.browser.msie && (jQuery.browser.version < 9) && (identifier == "{i18n:Ja-jetzt-loeschen}" || identifier == "{i18n:Ja-jetzt-einloggen}")) {
							repContent = repContent.replace(identifier, "\"" + translation + "\"");
						}
						else {
							repContent = repContent.replace(identifier, translation);
						}
					}

					repContent = repContent.replace('{i18n:jsLang}', lang);	
					
					if (lang != "") {
						redirectLang = "/" + lang;
					}

					repContent = repContent.replace('{i18n:redirectLang}', redirectLang);

					$dialogContent.html("");
					$dialogContent.html(repContent);
				
					if (i == arrayLength) {
						// pikto dialog
						if (pikto) {
							dialogPikto(pikto);
						}
					
						// pikto upload dialog
						if (upload) {
							ajaxUpload(lang);
						}	
	
						// hplan order dialog
						if (order) {
							orderPlan(order, lang);
						}
					}
				});
			});
		});

		this.center();
		$("#modality").fadeIn(1000,function(){
			$("#dialog").fadeIn(1000);
		});
	},
	hide: function() {
		$("#dialog").fadeOut(200,function(){
			$("#modality").fadeOut(100);
		});
	},
	center: function() {
    	$('#dialog').css("position","fixed");
    	$('#dialog').css("top", ( $(window).height() - $('#dialog').height() ) / 2 + 'px');
    	$('#dialog').css("left", ( $(window).width() - $('#dialog').width() ) / 2 + $(window).scrollLeft() + "px");
	}
}

window.clinic = {
	toggle: function(id) {
		$("#"+id+" .statusarrow").toggleClass("statusarrow-open");
		$("#"+id+" .data-form").slideToggle("fast");
	},
	validateAddForm: function() {
		var f = $('#clinic-form-add').serialize();
		var m = [
			'clinic-name-new','clinic-department-new','ldata-name-new','ldata-surname-new',
			'ldata-street-new','ldata-plz-new','ldata-city-new','ldata-country-new'
		];
		var valid = validateFields(m);

		// show delivery address if validation failed
		if (! valid) {
			$("#ldata-form-new .statusarrow").addClass("statusarrow-open");
			$("#ldata-form-new .data-form").slideDown("fast");
		}

		return valid;
	},
	/* THIS METHOD CAN NOT BE NAMED 'delete'. CAUSES SAFARI TO HANG */
	remove: function(clinicid, lang) {
		// do frontend work
		$('.'+clinicid).fadeOut(1000,function(){
			$(this).remove();
		});
		// do backend work
		$.post('/user/clinic/delete/'+clinicid,{},function(res){
			if (res) {
				dialog.show('/dialog/clinic-delete-success.html', lang);
			} else {
				dialog.show('/dialog/clinic-delete-failure.html', lang);
			}
		});
	}
}

window.hplan = {
	init_done: false,

	initPlan: function(planid, lang){

		/**
		 * internet explorer is calling the init function everytime
		 * an element is cloned. the following check is necessary
		 * to prevent an endless loop while initialization.
		 */
		if (this.init_done) {
			return true;
		} else {
			this.init_done = true;
		}

		// we are busy
		$('#busy').show();

		if (planid) {
			// edit init
			var req = {'editinitplan':1,'planid':planid,'lang':lang};
		} else {
			// default init
			var req = {'initplan':1,'lang':lang};
		}

		jQuery.getJSON('/actions/hplan.php',req,hplan.initTree);

		// set focus on plan-name (workflow-optimization)
		hplan.editLabel($('#plan-name'));
		$('#plan-name').focus();

		// attach click-event to piktos
		$('.pikto').click(function(){
			var pikto = $(this);
			dialog.show('/dialog/hplan-pikto-selection.php', lang, pikto);
		});

		return true;
	},

	initPreset: function(presetid, lang) {

		/**
		 * internet explorer is calling the init function everytime
		 * an element is cloned. the following check is necessary
		 * to prevent an endless loop while initialization.
		 */
		if (this.init_done) {
			return true;
		} else {
			this.init_done = true;
		}

		// we are busy
		$('#busy').show();

		if (presetid.length) {
			// edit init
			var req = {'editinitpreset':1,'presetid':presetid,'lang':lang};
		} else {
			// default init
			var req = {'initpreset':1,'lang':lang};
		}

		jQuery.getJSON('/actions/hplan.php',req,hplan.initTree);

		// set focus on plan-name (workflow-optimization)
		hplan.editLabel($('#plan-name'));
		$('#plan-name').focus();

		// attach click-event to piktos
		$('.pikto').click(function(){
			var pikto = $(this);
			dialog.show('/dialog/hplan-pikto-selection.php', lang, pikto);
		});

		return true;
	},

	initTree: function(data) {

		/**
		 * reference incoming data-tree as window.hplantree
		 * all data can be accessed using this simple schema:
		 *
		 * window.hplantree.{what}.{how}.{whereby}
		 * or
		 * window.hplantree[what][how][whereby]
		 *
		 * where the names in curly-braces must be replaced by
		 * real-values.
		 *
		 * another valid syntax, especially needed when accessing
		 * values that contain spaces in their names, is this one:
		 * window.hplantree[what][how][whereby]
		 */
		window.hplantree = data[0];
		window.piktos    = data[1];
		window.treelen   = data[2];

		// skip creation of elements when an empty plan was requested (datatable: gen)

		if (window.treelen == 0) {
			
			if ($("#level1-proto-footer").length) {
				var hplanFooter = $("#level1-proto-footer").clone(true);
				hplanFooter.get(0).id = 'id_' + new Date().getTime();
				hplanFooter.appendTo($('#hplan')).show();
			}

			$('#busy').hide();
			return false;
		}

		// create elements in #hplan
		for (var what in window.hplantree) {

			if (what != "hplanFooter") {

					// create level1 (what)
					var level1 = $('#level1-proto').clone(true);
					level1.get(0).id = 'id_' + new Date().getTime();
					level1.css('display','block');

					var whatLabel = what.replace(/__DUP__/, "");
					if (what == "_empty_") {
						whatLabel = "";
					}

					$($('.label',level1)[0]).text(whatLabel);

					$('.level1-body',level1).html('');
					level1.appendTo($('#hplan'));

					// show default piktos on level1
					var l1pikto = window.piktos['what'][what];
					$($('.pikto',level1)[0]).css('background','url(/pics/pikto/thumbs/thumb-'+l1pikto+') no-repeat -1px -1px');

					// create level2 (how)
					for (var how in window.hplantree[what]) {
						var level2 = $('.level2',$('#level1-proto')).clone(true);

						var howLabel = how.replace(/__DUP__/, "");
						if (how == "_empty_") {
							howLabel = "";
						}

						$($('.label',level2)[0]).text(howLabel);
						$('.level2-body',level2).html('');
						level2.appendTo($('.level1-body',level1));

						// show default piktos on level2
						var l2pikto = window.piktos['how'][how];
						$($('.pikto',level2)[0]).css('background','url(/pics/pikto/thumbs/thumb-'+l2pikto+') no-repeat -1px -1px');

						// level 3 (whereby)
						for (var whereby in window.hplantree[what][how]) {
							var level3 = $('.level3',$('#level1-proto')).clone(true);

							var wherebyLabel = whereby.replace(/__DUP__/, "");
							if (whereby == "_empty_") {
								wherebyLabel = "";
							}

							$($('.label',level3)[0]).text(wherebyLabel);

							// pick data in leaf
							var data = window.hplantree[what][how][whereby];

							// show (custom) piktos on level1
							var l1pikto = data.whatpic;
							if (l1pikto && l1pikto != "") {
								l1pikto = l1pikto.indexOf("upload/") == 0 ? '/image.php?file='+l1pikto+'&width=37&height=37' : '/pics/pikto/thumbs/thumb-'+l1pikto;
								$($('.pikto',level1)[0]).css('background','url('+l1pikto+') no-repeat -1px -1px');
							}

							// show (custom) piktos on level2
							var l2pikto = data.howpic;
							if (l2pikto && l2pikto != "") {
								l2pikto = l2pikto.indexOf("upload/") == 0 ? '/image.php?file='+l2pikto+'&width=37&height=37' : '/pics/pikto/thumbs/thumb-'+l2pikto;
								$($('.pikto',level2)[0]).css('background','url('+l2pikto+') no-repeat -1px -1px');
							}

							// show (custom) piktos on level3
							var l3pikto = data.wherebypic;
							if (l3pikto && l3pikto != "") {
								l3pikto = l3pikto.indexOf("upload/") == 0 ? '/image.php?file='+l3pikto+'&width=37&height=37' : '/pics/pikto/thumbs/thumb-'+l3pikto;
								$($('.pikto',level3)[0]).css('background','url('+l3pikto+') no-repeat -1px -1px');
							}

							// body (on level3 -> form)
							var form = $('#level3-form-proto').clone();

							$('input[name=wherebydesc]',form).val(data.wherebydesc);
							$('input[name=when]',form).val(data.when);
							$('textarea[name=whendesc]',form).html(data.whendesc);
							$('input[name=who]',form).val(data.who);
							$('input[name=wherebypic]',form).val(data.wherebypic);

							form.attr('style','display:block').attr('id','').appendTo($('.level3-body',level3));

							// append whole level3 to level2
							level3.appendTo($('.level2-body',level2));
						}

						// make level3 sortable
						$('.level2-body',level2).sortable({
							axis: 'y',
							containment: $('.level2-body',level2),
							cursor: 'move',
							delay: 50,
							handle: '.dragger-level3',
							helper: 'clone',
							opacity: 0.6
						});

					}
			}
			
			// make level2 sortable
			$('.level1-body',level1).sortable({
				axis: 'y',
				containment: $('.level1-body',level1),
				cursor: 'move',
				delay: 50,
				handle: '.dragger-level2',
				helper: 'clone',
				opacity: 0.6
			});

			// make elements with class .label on all 3 levels editable
			$('.label',level1).click(function(){
				hplan.editLabel(this);
			});

		}

		// sortable (on level1)
		$('ul#hplan').sortable({
			axis: 'y',
			containment: '#hplan',
			cursor: 'move',
			cursorAt: 'top',
			delay: 50,
			handle: '.dragger-level1',
			helper: 'clone',
			opacity: 0.6
		});

		// footer
		if ($("#level1-proto-footer").length) {
			var hplanFooter = $("#level1-proto-footer").clone(true);
			hplanFooter.get(0).id = 'id_' + new Date().getTime();
			hplanFooter.appendTo($('#hplan')).show();
		}

		if (window.hplantree["hplanFooter"]) {
				var editFooterTitle = window.hplantree["hplanFooter"]["footerHow"]["footerWhereby"]["footertitle"];
				var editFooterText = window.hplantree["hplanFooter"]["footerHow"]["footerWhereby"]["footertext"];

				hplanFooter.find(".label").html(editFooterTitle);
				hplanFooter.find("textarea").html(editFooterText);
		}

		$('#busy').hide();
	},

/*
	setPlanChangedDialog: function(planid, active) {
		if (active) {
			$('a.navsub').click(function() {
				dialog.show('/dialog/hplan-discard-changes.php?planid=' + planid + '&href=' + $(this).attr('href'));
				return false;
			});
		}
		else {
			$('a.navsub').unbind('click');
		}
	},
*/

	// save tree (planid is only passed when an existing plan was edited)
	savePlan: function(planid, lang) {
		$('#busy').show();

		// fetch name of current plan
		var planname = $('#plan-name').text();

		// check if a proper name was set for current plan
		if (!planname.length) {
			$('#busy').hide();
			dialog.show('/dialog/hplan-name-not-set.html', lang);
			return false;
		}

		// check if plan contains elements except the footer
		if (hplan.isEmpty() || ($("#hplan").find("li").length == 1)) {
			$('#busy').hide();
			dialog.show('/dialog/hplan-is-empty.html', lang);
			return false;
		}

		// send tree to backend
		var tree_json = hplan.buildTreeJSON();

		// according to optionally passed planid, backend decides to update existing plan or to create a new one
		if (planid) {
			// update existing plan
			var req = {'savePlan':1,'name':planname,'planid':planid,'tree':tree_json,'lang':lang};
		} else {
			// create a new plan, since there's no planid yet
			var req = {'savePlan':1,'name':planname,'tree':tree_json,'lang':lang};
		}

		$.post('/actions/hplan.php',req,function(response){
			$('#busy').hide();

			if (response) {
				dialog.show('/dialog/hplan-saved-successfully.html', lang);
			} else {
				dialog.show('/dialog/hplan-saved-failure.html', lang);
			}
		},'html');
	},

	savePreset: function(presetid, fromwhere, lang) {
		$('#busy').show();

		// fetch name of current plan
		var presetname  = $('#plan-name').text();
		var presetimage = $('#preset-image').css('background-image');

		// check if a proper name was set for current plan
		if (! presetname.length || presetname == "Mustervorlage") {
			$('#busy').hide();
			dialog.show('/dialog/preset-name-not-set.html', lang);
			return false;
		}

		// check if plan contains elements
		if (hplan.isEmpty()) {
			$('#busy').hide();
			dialog.show('/dialog/preset-is-empty.html', lang);
			return false;
		}

		// send tree to backend
		var tree_json = hplan.buildTreeJSON();

		// according to optionally passed presetid, backend decides to update existing preset or to create a new one
		if (presetid.length) {
			// update existing preset
			var req = {'savePreset':1,'name':presetname,'image':presetimage,'presetid':presetid,'tree':tree_json,'lang':lang};
		} else {
			// create a new preset, since there's no presetid yet
			var req = {'savePreset':1,'name':presetname,'image':presetimage,'tree':tree_json,'lang':lang};
		}

		$.post('/actions/hplan.php',req,function(response){
			$('#busy').hide();
			
			if (fromwhere == "masterplan") {
				if (response) {
					dialog.show('/dialog/masterplan-saved-successfully.html', lang);
				} else {
					dialog.show('/dialog/masterplan-saved-failure.html', lang);
				}
			}
			else {
				if (response) {
					dialog.show('/dialog/preset-saved-successfully.html', lang);
				} else {
					dialog.show('/dialog/preset-saved-failure.html', lang);
				}
			}
		},'html');
	},

	buildTreeJSON: function() {
		var tree   = {};

		// fetch all elements on level1
		var level1 = $('#hplan > li');

		// traverse level1
		for (var i=0;i<level1.length;i++) {

			// get level2 (all children in body of current level1)
			var level2 = $('.level1-body > li ',level1[i]);

			// get level3 (all children in body of current level2)
			for (var j=0;j<level2.length;j++) {
				var level3 = $('.level2-body > li',level2[j]);

				// pack data into tree
				var level1_name = $($('.bar .label',level1[i])[0]).text();  // string
				var level2_name = $($('.bar .label',level2[j])[0]).text();  // string
				var whatpic     = $($('.pikto',level1[i])[0]).css('background-image');	// string
				var howpic      = $($('.pikto',level2[j])[0]).css('background-image');	// string

				// cycle through all level3 elements (label and form)
				for (var k=0;k<level3.length;k++) {
					var wherebyLabel = $($('.bar .label',level3[k])[0]).text();

					// Duplicate level names
					if (tree[level1_name] && j == 0 && k == 0) {
						level1_name = level1_name + "__DUP__";
					}
					
					if (tree[level1_name]) {
							if (tree[level1_name][level2_name] && k == 0) {
								level2_name = level2_name + "__DUP__";
							}

							if (tree[level1_name][level2_name]) {
									if (tree[level1_name][level2_name][wherebyLabel]) {
											wherebyLabel = wherebyLabel + "__DUP__";	
									}
							}
					}

					if (!tree[level1_name]) tree[level1_name] = {};
					if (!tree[level1_name][level2_name]) tree[level1_name][level2_name] = {};


					// serialize wasn't the best approach here. better create an object with properties
					var l3form = $('.level3-form',level3[k]);
					var l3 = {
						whereby:     wherebyLabel,
						wherebypic:  $($('.pikto',level3[k])[0]).css('background-image'),
						wherebydesc: $('input[name=wherebydesc]',l3form).val(),
						when:        $('input[name=when]',l3form).val(),
						whendesc:    $('textarea[name=whendesc]',l3form).val(),
						who:         $('input[name=who]',l3form).val(),
						whatpic:     whatpic,
						howpic:      howpic,
						footertitle: "",
						footertext: ""
					};

					tree[level1_name][level2_name][l3.whereby] = l3;
				}
			}
			
			if ($(".hplan-footer-field",level1[i]).length) {
				var hplanFooter = {
					footertitle: $($('.bar .label',level1[i])[0]).text(),
					footertext: $(".hplan-footer-field",level1[i]).find("textarea").val(),
					whereby: "",
					wherebypic:  "",
					wherebydesc: "",
					when:        "",
					whendesc:    "",
					who:         "",
					whatpic:     "",
					howpic:      ""
				};

				tree["hplanFooter"] = {};
				tree["hplanFooter"]["footerHow"] = {};
				tree["hplanFooter"]["footerHow"]["footerWhereby"] = hplanFooter;
			}
		}

		return jQuery.toJSON(tree);
	},

	isEmpty: function() {
		return (hplan.buildTreeJSON() == "{}");
		//return ($('#hplan > li').length == 0);
	},



	toggleImageBox: function(e){
		var imageBox = $('#preset-image-box');

		if ($(':visible',imageBox).length) {
			$($('#plan-image-box-button').children('img')[0]).attr('src','/tmpl/icons/rubrik_eingeklappt.png');
		} else {
			$($('#plan-image-box-button').children('img')[0]).attr('src','/tmpl/icons/rubrik_ausgeklappt.png');
		};

		imageBox.slideToggle();
	},

	showSelectionBox: function(){
		var box = $('#selection-box');
		box.slideDown();
	},

	showUploadPanel: function(e){
		//console.log(e);
	},

	/**
	 * Make an element (divs only) editable inline
	 */
	editLabel: function(l){
		l.contentEditable = true;
		l.focus();
	},



	// LEVEL 1 button-functions

	/**
	 * Show add-form in current level1 (for adding level2)
	 */
	addLevel1: function(e, lang){
		var level1 = $(e.parentNode.parentNode);
		var l1body = $('.level1-body',level1);

		// THIS CHECK MUST BE MOVED TO THE ADD- OR CANCEL- FUNCTIONS, ELSE THE
		// FORM REMAINS IN TREE CAUSING UNNECESSARY ELEMENTS IN SERIALIZATION!
		// check if there's already a level2-add-form and remove it (if any)
		$('.level2-add-form',level1).remove();

		// clone level2-add-form-proto between
		var form = $('#level2-add-form-proto').clone(true);
		form.attr('id','');

		// check if level1-bar is from a predefined element or custom
		var label  = $('.bar .label',level1)[0];
		var what   = $(label).text();
		var sel    = $('.how-level2',form);

		$(sel).load('/hplan/data',{'what':what,'lang':lang},function(){
		
			getSelectionTrans($(this), lang);

			if ($(this).children('option').length <= 1) {
//				$('.level2-predefined',form).hide();

				$(this).html("<option disabled='disabled' selected='selected' value=''>Bitte wählen ...</option>");
				if (typeof window.hplantree[what] == "object") {
					for (var i in window.hplantree[what]) {
						var option = $('<option value="'+i+'">'+i+'</option>');
						$(option).appendTo(this);
					}
					$('.level2-predefined',form).show();
				} else {
					$('.level2-predefined',form).hide();
				}

			}
		
		});

		// append form after bar and before any level1-body-element
		l1body.prepend(form);
		l1body.slideDown('fast',function(){
			form.slideDown();
		});
	},

	removeLevel1: function(e){
		$(e.parentNode.parentNode).slideUp(1000,function(){
			$(this).remove();
		});
	},

	foldLevel1: function(e){
		var body = $('.level1-body',e.parentNode.parentNode);
		if ($(':visible',body).length) {
			$(e).removeClass('button-fold-open');
		} else {
			$(e).addClass('button-fold-open');
		};
		body.slideToggle();
	},



	// LEVEL 2 button-functions

	/**
	 * Shows the add-form on current level2 (for adding level3-elements)
	 */
	addLevel2: function(e, lang){
		var level2 = $(e.parentNode.parentNode);
		var l2body = $('.level2-body',level2);

		// check if there's already a level3-add-form and remove it (if any)
		$('.level3-add-form',level2).remove();

		// clone from proto
		var form   = $('#level3-add-form-proto').clone(true);
		form.attr('id','');

		// place on stage
		l2body.prepend(form);

		// check if custom or empty (by looking at parents)
		var level1 = level2.parent().parent();
		var label  = $('.label',level1)[0];
		var what   = $(label).text();
		var label  = $('.label',level2)[0];
		var how    = $(label).text();
		var sel    = $('select',level2);

		$(sel).load('/hplan/data',{'what':what,'how':how,'lang':lang},function(){

			getSelectionTrans($(this), lang);	
			
			if ($(this).children('option').length <= 1) {
//				$('.level3-predefined',form).hide();

				sel.html("<option disabled='disabled' selected='selected' value=''>Bitte wählen ...</option>");
				if (typeof window.hplantree[what] == 'object' && typeof window.hplantree[what][how] == 'object') {
					for (var i in window.hplantree[what][how]) {
						var option = $('<option value="'+i+'">'+i+'</option>');
						$(option).appendTo(sel);
					}
					$('.level3-predefined',form).show();
				} else {
					$('.level3-predefined',form).hide();
				}

			}
		});

		l2body.slideDown('fast',function(){
			form.slideDown();
		});
	},

	/* this method does autoremoving of empty parent-nodes by default */
	removeLevel2: function(e){
		var body = $(e.parentNode.parentNode.parentNode);
		// remove current level2
		$(e.parentNode.parentNode).slideUp(1000,function(){
			$(this).remove();

// is iritating for users, therefore deactivated
/*
			// if parent-level gets empty, then remove it too
			var num  = $('.level2',body).length;
			if (!num) {
				$(body).parent().slideUp(250,function(){
					$(this).remove();
				});
			}
*/

		});
	},

	foldLevel2: function(e){
		var body = $('.level2-body',e.parentNode.parentNode);
		if ($(':visible',body).length) {
			$(e).removeClass('button-fold-open');
		} else {
			$(e).addClass('button-fold-open');
		}
		body.slideToggle();
	},



	// LEVEL 3 button-functions

	removeLevel3: function(e){
		var body = $(e.parentNode.parentNode.parentNode);
		// remove current level3
		$(e.parentNode.parentNode).slideUp(1000,function(){
			$(this).remove();

// is iritating for users, therefore deactivated
/*
			// check if level3 gets empty
			var num = $('.level3',body).length;
			if (!num) {
				$(body).parent().slideUp(250,function(){
					// check if level2 gets empty (before removing element from context)
					var whole = this.parentNode.parentNode;
					$(this).remove();
					if ($('.level1-body',whole).children().length < 1) {
						$(whole).slideUp(250,function(){
							$(this).remove();
						});
					}
				});
			}
*/

		});
	},

	foldLevel3: function(e){
		var body = $('.level3-body',e.parentNode.parentNode);
		if ($(':visible',body).length) {
			$(e).removeClass('button-fold-open');
		} else {
			$(e).addClass('button-fold-open');
		}
		body.slideToggle();
	},



	/* LEVEL 1 */

	/**
	 * Create an empty, fully functional Level1Element prepend it to hplan and return a reference for further
	 * modification. As prototype we use the available #level1-proto in tmpl/tmpl.plan-new-step3.html
	 */
	addEmptyLevel1Element: function(lang) {

		var level1  = $('#level1-proto').clone();
		level1.attr('id','');

		// get some needed references
		var level2 = $('.level2',level1);
		var level3 = $('.level3',level2);

		// create body of level3
		var dform = $('#level3-form-proto').clone(true);
		dform.attr('id','');
		dform.css('display','block');
		dform.appendTo($('.level3-body',level3));

		// clear form contents
		$('input[name=wherebydesc]',dform).val("");
		$('input[name=when]',dform).val("");
		$('textarea[name=whendesc]',dform).html("");
		$('input[name=who]',dform).val("");

		// make all labels editable on click
		$('.label',level1).click(function(){
			hplan.editLabel(this);
		});

		// finally attach whole level1 (everything) to #hplan.tree
		level1.prependTo('#hplan');
		level1.fadeIn(1000, function(){
			// close selectionbox now that the new element has appeared on stage
			$('#selection-box').slideUp();
		});

		// open all bodys in newly created element (workflow-optimization)
		$('.level1-body',level1).css('display','block');
		$('.level2-body',level1).css('display','block');
		$('.level3-body',level1).css('display','block');
		$('.button-fold',level1).addClass('button-fold-open');

		// attach click-event to piktos
		$('.pikto',level1).click(function(){
			var pikto = $(this);
			dialog.show('/dialog/hplan-pikto-selection.php', lang, pikto);
		});

		// sortable (on level1)
		$('ul#hplan').sortable({
			axis: 'y',
			containment: '#hplan',
			cursor: 'move',
			cursorAt: 'top',
			delay: 50,
			handle: '.dragger-level1',
			helper: 'clone',
			opacity: 0.6
		});

		// make level2 sortable
		$('.level1-body',level1).sortable({
			axis: 'y',
			containment: $('.level1-body',level1),
			cursor: 'move',
			delay: 50,
			handle: '.dragger-level2',
			helper: 'clone',
			opacity: 0.6
		});

		// make level3 sortable
		$('.level2-body',level2).sortable({
			axis: 'y',
			containment: $('.level2-body',level2),
			cursor: 'move',
			delay: 50,
			handle: '.dragger-level3',
			helper: 'clone',
			opacity: 0.6
		});

		// set focus on level1-label -> what (workflow-optimization)
		var l1label = $('.label',level1)[0];
		hplan.editLabel(l1label);
		l1label.focus();
		return level1;
	},

	/**
	 * Create a filled and well specified ToplevelElement. This method uses addEmptyToplevelElement
     * as contructor and specializes its creation by adding data taken from the selection-box to it.
	 */
	addLevel1Element: function(lang){
		$('#selection-box').slideUp();
		var level1  = hplan.addEmptyLevel1Element();
		var what    = $('#selection-box select#what').val();
		var how     = $('#selection-box select#how').val();
		var howid  = $('#selection-box select#how :selected').attr('class');
		var whereby = $('#selection-box select#whereby').val();
		level1.attr('id',what);
		
		// set labels and piktos only if they're meaningful (not empty)
		if (what) {
			if (what != "null") {
				$($('.bar .label',level1)[0]).text(what);  // set label
			}
			var l1pikto = window.piktos['what'][what]; // grab pikto (level1)
			$($('.pikto',level1)[0]).css('background','url(/pics/pikto/thumbs/thumb-'+l1pikto+') no-repeat -1px -1px');
		}

		if (what && how) {
			$($('.level1-body .label',level1)[0]).text(how); // set label
			var l2pikto = window.piktos['how'][howid];         // grab pikto (level2)
			$($('.level1-body .pikto',level1)[0]).css('background','url(/pics/pikto/thumbs/thumb-'+l2pikto+') no-repeat -1px -1px');
		}

		if (what && how && whereby) {
			$($('.level2-body .label',level1)[0]).text(whereby); // set label
//			var l3pikto = window.piktos['whereby'][whereby];           // grab pikto (level3)
//			$($('.level2-body .pikto',level1)[0]).css('background','url(/pics/pikto/thumbs/thumb-'+l3pikto+') no-repeat -1px -1px');

			jQuery.getJSON('/actions/hplan.php',{'what':what,'how':how,'whereby':whereby,'lang':lang},function(data){
				// fill form fields with generic data for what-how-whereby-combination
				if (data) {
					var level3 = $($('.level2-body .level3-body',level1)[0]);
					$('input[name=wherebydesc]',level3).val(data.wherebydesc);
					$('input[name=when]',level3).val(data.when);
					$('textarea[name=whendesc]',level3).html(data.whendesc);
					$('input[name=who]',level3).val(data.who);
				}
			});
		}

		// set focus on wherebydesc (workflow-optimization)
		$('input[name=wherebydesc]',level1).focus();

		return level1;
	},



	/* LEVEL 2 */

	addEmptyLevel2Element: function(level1){
		// check if there is still an add-form on current level1 and remove it
		var form = $('.level2-add-form',level1);
		form.slideUp('slow',function(){
			$(this).remove();
		});

		var level2 = $('#level1-proto .level1-body .level2').clone(true);

		// create body of level3
		var dform = $('#level3-form-proto').clone(true);
		dform.attr('id','');
		dform.css('display','block');
		dform.appendTo($('.level3-body',level2));

		// clear form contents
		$('input[name=wherebydesc]',dform).val("");
		$('input[name=when]',dform).val("");
		$('textarea[name=whendesc]',dform).html("");
		$('input[name=who]',dform).val("");

		// unfold level2 and level3
		$('.level2-body',level2).css('display','block');
		$('.level3-body',level2).css('display','block');
		$('.button-fold',level2).addClass('button-fold-open');

		// make level3 sortable
		$('.level2-body',level2).sortable({
			axis: 'y',
			containment: $('.level2-body',level2),
			cursor: 'move',
			delay: 50,
			handle: '.dragger-level3',
			helper: 'clone',
			opacity: 0.6
		});

		// activate the following line if empty level 3 element for new level 2 element is not required
		//$('.level2-body .level3', level2).remove();

		// append whole level2 into tree
		$('.level1-body',level1).prepend(level2);
		return level2;
	},

	addLevel2Element: function(level1,how){
		// get empty level2-element
		var level2 = hplan.addEmptyLevel2Element(level1);

		// specialize empty level2-element
		var label  = $('.label',level2)[0];
		$(label).text(how);

		// add pikto(s)
		var l2pikto = window.piktos['how'][how];
        $($('.pikto',level2)[0]).css('background','url(/pics/pikto/thumbs/thumb-'+l2pikto+') no-repeat -1px -1px');

		return level2;
	},



	/* LEVEL 3 */

	addEmptyLevel3Element: function(level2){
		// check if there is still an add-form on current level2 and remove it
		var form = $('.level3-add-form',level2);
		form.slideUp('slow',function(){
			$(this).remove();
		});

		var level3 = $('#level1-proto .level3').clone(true);

		// append data-form from proto to current level3
		var dform  = $('#level3-form-proto').clone(true);
		dform.css('display','block');
		dform.appendTo($('.level3-body',level3));

		// clear form contents
		$('input[name=wherebydesc]',dform).val("");
		$('input[name=when]',dform).val("");
		$('textarea[name=whendesc]',dform).html("");
		$('input[name=who]',dform).val("");

		// unfold level3
		$('.level3-body',level3).css('display','block');
		$('.button-fold',level3).addClass('button-fold-open');

		level3.prependTo($('.level2-body',level2));
		return level3;
	},

	addLevel3Element: function(level2,whereby,lang){
		var level3 = hplan.addEmptyLevel3Element(level2);

		var label  = $('.label',level3)[0];
		$(label).text(whereby);

		// get data for level3 element
		var how = $($('.bar .label',level2)[0]).text();
		var what = $($('.bar .label',level2.parentNode.parentNode)[0]).text();

		jQuery.getJSON('/actions/hplan.php',{'what':what,'how':how,'whereby':whereby,'lang':lang},function(data){
			// fill form fields with generic data for what-how-whereby-combination
			if (data) {
				$('input[name=wherebydesc]',level3).val(data.wherebydesc);
				$('input[name=when]',level3).val(data.when);
				$('textarea[name=whendesc]',level3).html(data.whendesc);
				$('input[name=who]',level3).val(data.who);
			}
		});

		return level3;
	}

}



// Ajax-Handling (super-global)

$(document.body).ajaxStart(function(){
	//console.log('ajaxCall start');
	$(this).css('cursor','progress !important');
});

$(document.body).ajaxComplete(function(){
	//console.log('ajaxCall end');
	$(this).css('cursor','default');
});



// Helper

function validateFields(idList) {
	var valid = true;

	jQuery.each(idList,function(){
		var field = $('#' + this);
		var val = field.val();
	
		if (! val.length) {
			$(field).pulse({
				backgroundColors: ['#FFE8E8','#FFFFFF'],
			    borderColors: ['#999999','#C2284E']
			});
			valid = false;
		} else {
			$(field).recover();
		}
	});

	return valid;
}

// pikto selection
dialogPikto = function(pikto) {
	var $img = $("#dialog").find("img");

	$(".pikto").removeClass("active");
	pikto.addClass("active");
	
	$img.click(function() {
		
		pikto.css("background","");
		
		var src = $(this).attr("src");
		var piktoName = src.replace(/^.*[\/\\]/g, '');
		
		pikto.css("background","url(/pics/pikto/thumbs/thumb-" + piktoName + ")");
		pikto.removeClass("active");
		dialog.hide();
	});
}


// pikto upload
ajaxUpload = function(lang) {

	new AjaxUpload('pikto-upload-button', {
			action: '/user/upload/hplan/pikto',
			autoSubmit: true,
			onSubmit: function(file, extension) {
				if (extension!='jpg' && extension!='jpeg' && extension!='png' && extension!='gif') {
					dialog.show('/dialog/clinic-logo-upload-filetype-not-allowed.html', lang);
					return false; // cancel upload since filetype is not allowed
				}
			},
			onComplete: function(file, response) {
				// on success, the new filename is returned
				if (response) {
					// show uploaded picture in preview-container
					$('#pikto-upload-preview').html('<img src="/image.php?file=upload/'+response+'&width=300&height=300" alt="'+file+'" />');
					$('#pikto-upload').val(file);
					$('#pikto-add-button').click(function(){
						$.post('/user/pikto/add/'+response,{},function(res){
							if (res) {
								// add pikto to calling pikto-field in current plan
								$(".pikto.active").css('background','url(/image.php?file=upload/'+response+'&width=37&height=37) no-repeat -1px -1px');
								dialog.hide();
							}
						},'text');
						return false;
					});
					$('#pikto-add-button').fadeIn();
				} else {
					// something went wrong while uploading
					dialog.show('/dialog/upload-failed.html', lang);
				}
			}
	});	
}

// order hplan
orderPlan = function(order, lang) {
	//console.log(data.planid);
		$('#planid').attr('href','/plan/print/'+data.planid).text(data.planid);
		$('#planname').text($('.planname').text());
		$('#clinicname').text($('.clinicname').text());
		$('#format-num').text(data.num+' x '+data.format);

		$('#send-button').click(function(){
			var confirmed = $('#confirmed').attr('checked');
			if (! confirmed) {
				$('#confirmed-label').animate({'color': '#cc0000'});
				return false;
			}
			data.action='send';
			$.post('/hplan/order/send',order,function(res){
				//console.log(res);
			},'json');
			dialog.show('/dialog/plan-ordered-successfully.html', lang);
		});
}

// save the selected language to user profile
$(document).ready(function() {
	$(".lang-nav").click(function() {
		var $lang = $(this).attr("rel");
		var $href = $(this).attr("href");	
	
		if ($lang != "fr") {
			$lang = "de";
		}

		var req = {'lang':$lang};
	
		$.post('/user/profile/save',req, function(data) {
			window.location.replace($href);
		});
		
		return false;
	});
});

var getSelectionTrans = function(obj, lang) {
		var sel = obj;

		var transOpt = sel.find(".opt-choose");
		var transOptHtml = transOpt.html();
		var identifier = "";
		var translation = "";
		var repOpt = "";

		var req = {'lang': lang};

		jQuery.getJSON('/actions/lang.php', req, function(langData) {

			$.each(langData, function(key, con) {
				$.each(langData[key], function(field, value) {
				
					if (field == "identifier") {
						identifier = value;
					}	

					if (field == "translation") {
						translation = value;
					}
					
				});

				if (identifier == "Bitte-waehlen") {
					transOpt.html(translation);
				}
			});
		
			sel.fadeIn();
		});
}