(function($){
	
	// *** TOGGLE FUNCTIONS ***
	function  toggleInner(container, toggleText) {
		// TODO: Testen ob der toggle und inner direkte Unterelemente von diesem Container sind und nicht in innere Container eigebettet sind.
		container.find('.container_toggle').html(toggleText);
		container.find('.container_inner').toggle('normal');
	};
	
	$.fn.container = function (optionsin) {
		return this.each(function() {

			var skelletonHtml = '<div class="container_top">'
								+'<div class="container_top_left">'
								+'<div class="container_icon"></div>'
								+'<div class="container_label_1"></div></div>'
								+'<div class="container_top_right">'
								+'<div class="container_toggle"></div>'
								+'<div class="container_label_2"></div>'
								+'</div><div class="clear"></div></div>'
								+'<div class="container_inner"></div>';

			// Container (dies bleibt das umschliessende Element
			var container = $(this);

			
			// Testen ob der Container schon gerendert wurden. Wenn ja brechen wir hier ab.
			if (container.attr('isrendered')=='true'){
				return;
			} else {
				// Den container mit einem Attribut rendered=true versehen. Damit er nicht versehentlich durch einen andere Selector noch einmal gerendert wird.
				container.attr('isrendered', 'true');
			}

			// Label_1 aus dem hx Tag extrahieren
			var label_1 = '';
			var nextHeading = $(container.find("h1")[0]);
			label_1 = nextHeading.html();
			if ( !label_1) {
				label_1=' ';
			}else{
				nextHeading.remove();
			}

			// Label_2 aus dem hx Tag extrahieren
			var label_2 = '';
			nextHeading = $(container.find("h2")[0]);
			label_2 = nextHeading.html();
			if ( !label_2) {
				label_2=' ';
			}else{
				nextHeading.remove();	
			}
			
			// Options
			options = $.extend({
		        skelletonHtml: skelletonHtml,
				icon:  '',
		        label_1: label_1,
		        label_2: label_2,
		        toggleShow: 'show',
		        toggleHide: 'hide',
		        collapsable: true,
		        isOpen: true
		    }, optionsin || {});
			
			// inner (dieses wird der Inhalt des Container
			var innerHtml = container.html();

			// Container mit skelleton füllen
			container.html(options.skelletonHtml);
			
			// inner mit dem alten Inhalt füllen
			var inner = container.find('.container_inner');
			inner.html(innerHtml);

			// label_1
			container.find('.container_label_1').append(label_1);
			// label_2
			container.find('.container_label_2').append(label_2);

			// icon
			if (options.icon){
				container.find('.container_icon').append(options.icon);
			}else{
				container.find('.container_icon').remove();
			}
			// toggleLink
			if (options.collapsable==true) {
				container.find('.container_toggle').append('<a href="#"></a>');
				container.find('.container_toggle > a').append(options.toggleHide);
		
		
				container.find('.container_toggle').toggle( function(){
								toggleInner(container, options.toggleShow);
								return false;
							},
						   function(){
								toggleInner(container, options.toggleHide);
								return false;
							});
			}else{
				container.find('.container_toggle').remove();
			}
			
			// Init
			if (options.isOpen){
				//
			}else{
				container.find('.container_toggle').trigger('click');
			}
			
		});
	};
})(jQuery);