function dom_init() {
	
	// fade content ein 
	$('#content').fadeIn( 300 );
	
	// Unterseiten sollen Hauptpunkt in der Navi aktivieren
	$('#main_menu').find('a').each( function(){
	
		var $this = $(this);
		var href = $this.attr('href');
		var current_url = window.location + '';		
		
		// wenn der link in der aktuellen url vorkommt wird das
		// eltern li mit der 'current-menu-item' classe versehen
		if( current_url.indexOf( href ) == 0 ){
			$this.parent().addClass('current-menu-item')
		}
		
	});
	
	// handle blur/focus #searchform (show/hide default value)
	$('#searchform, #steckspiel_back').each( function(){
	
		var $this_form = $(this);
		
		// Set default values from Labels
		$this_form.find('label').each( function(){
		
			var default_value = $(this).html()
			$(this).next().val( default_value ).attr('default_value', default_value ).html( default_value )
		
		})
		
		// handle focus
		$this_form.find('input, textarea').focus( function(){
			
			var default_value = $(this).attr('default_value')
			var current_value = jQuery.trim( $(this).val() ) 
			
			if( current_value == default_value ){
			
				$(this).val('')
				
			}	

			$(this).removeClass('error')
		
		});
		
		// handle blur
		$this_form.find('input, textarea').blur( function(){
		
			var default_value = $(this).attr('default_value')
			var current_value = jQuery.trim( $(this).val() ) 
			
			if( !current_value ){
			
				$(this).val( default_value )
			
			}		
		
		});
		
	});
	
	// Open Blog 
	var slide_speed = 400;
	$('#wrapper').addClass('closed')
	$('#blog_link').addClass('closed').click( function(){
	
		$(this).show();
		
		// tracke das das blog geöffnet wurde
		if(piwikTracker) piwikTracker.trackGoal(1)
		
		if( $('#wrapper').hasClass('open') ){	
			
			$('#blog').animate({ left: -470 }, slide_speed , function(){} );
			$('h1').animate({ 'margin-left': 0 }, slide_speed , function(){} );
			$('#header').animate({ left: 20 }, slide_speed , function(){} );
			$('#blog_link').toggleClass('open closed')
			$('#wrapper').addClass('animating').animate({
					left: 0,
				  }, slide_speed, function(){
				  
					$(this).removeClass('animating open').addClass('closed')
					$('body').toggleClass('blog_is_open')
				  
				  });
			  
		}
		if( $('#wrapper').hasClass('closed') ){
		
			setTimeout( function(){ $('body').toggleClass('blog_is_open') }, slide_speed / 2 )
			$('#blog').animate({ left: 0 }, slide_speed , function(){} );
			$('h1').animate({ 'margin-left': -470 }, slide_speed , function(){} );
			$('#header').animate({ left: 490 }, slide_speed , function(){} );
			$('#blog_link').toggleClass('open closed')
			$('#wrapper').addClass('animating').animate({
					left: 470,
				  }, slide_speed, function(){
				  
					$(this).removeClass('animating closed').addClass('open')
				  
				  });
			  
		}		
	
		return false;
	
	});
	
	// Blog Categorie Links 
	$('#blog_categories a').click( function(){
	
		var $this = $(this)
		var category = $this.attr('name')
		
		alert('Kommt noch')
		
		return false;
	
	});
	
	// Aktiviere Steckspiel
	if( $('#steckspiel_wrapper').size() ) $('#steckspiel_wrapper').steckspiel()	
	//setInterval( (function(){ $('#steckspiel_wrapper').steckspiel('shuffle') }), 3000 );
	
	// blog > load via content via ajax, bind fancybox, bind external links
	$('#blog').each( function(){
	
		var $blog_wrapper = $(this)
		var $blog_nav 	  = $(this).children('#blog_nav')
		var $blog_content = $(this).children('#blog_content')
		
		$blog_nav.find('a').click( function(){
		
			$blog_wrapper.addClass('loading')
			
			// load content via ajax 
			var href = $(this).attr('href')			
			$blog_content.fadeOut('medium').load( href , function(){
			
				// links: target _blank
				$(this).find('a').attr('target', '_blank')
				
				// find image_links
				$(this).find('a img').each( function(){				
					
					$(this).parent().addClass('image_link')				
					
				})

				$(this).find('a.image_link').click( function(){
				
				
				
				})
				
				// bind fancybox to image_link
				$(this).find('a.image_link').fancybox({
					'transitionIn'	:	'elastic',
					'transitionOut'	:	'elastic',
					'speedIn'		:	300, 
					'speedOut'		:	300, 
					'overlayShow'	:	true,
					'overlayColor'	:	'transparent',
					'hideOnContentClick': true
				});	
				
				$blog_wrapper.removeClass('loading')
				$blog_content.fadeIn('fast')
			
			})
			
			return false;
		
		})
		
	
	});

	// fix titles for related posts
	$('section.related a').each( function(){
	
		var link_title = $(this).attr('title')	
		$(this).find('img').attr('title', link_title)
	
	})

	// handle overlay
	$('#overlay_wrapper').each( function(){
		
		// close on click
		$(this).find('.close').click( function(){
		
			$(this).parent().fadeOut('fast')		
			return false;
		
		});	
	
	});

}

// Steckspiel Plugin
(function($){
 
	//Attach this new method to jQuery
	$.fn.extend({
		 
		//This is where you write your plugin's name
		steckspiel: function( options ) {
 
			// vars
			var $steckspiel_wrapper			= $(this);
			var $steckspiel_canvas			= $steckspiel_wrapper.find('#steckspiel_canvas');
			var $steckspiel_back			= $steckspiel_wrapper.find('#steckspiel_back');
			var $steckspiel_images_wrapper	= $steckspiel_wrapper.find('#steckspiel_images_wrapper');
			var $steckspiel_nav				= $steckspiel_wrapper.find('#steckspiel_nav');
			var wrapper_height				= $steckspiel_wrapper.height();
			var wrapper_width 				= $steckspiel_wrapper.width();
			var z_index						= 1;
			var colors_shapes				= [
												//'red square',
												//'red triangle_bottom',
												'red circle',
												'red quadrant_bottom_left',
												'rose rhombus',
												//'rose triangle_top',
												//'rose semicircle_bottom',
												'yellow square',
												//'yellow triangle_bottom',
												'yellow plus',
												//'yellow semicircle_top',										
												'cyan square',
												//'cyan hexagon',
												//'cyan triangle_top',
												'cyan semicircle_bottom',
												//'lightgreen rhombus',
												'lightgreen triangle_bottom',
												//'lightgreen circle',
												'darkgreen hexagon',
												//'darkgreen semicircle_bottom',
												'darkgreen quadrant_top_right',
												'darkblue triangle_top',
												'purple semicircle_bottom',
												//'gold circle',
											  ]								  
			var kinds				= ['inner', 'outer']
			var images				= [];
			$steckspiel_images_wrapper.find('img').each( function(){ // hole alle bilder die ausgegeben wurde in array
			
				var this_src = $(this).attr('src');				
				var this_height = $(this).attr('height');				
				var this_width = $(this).attr('width');				
				images.push( '<img src="'+this_src+'" height="'+this_height+'" width="'+this_width+'" />' )
			
			})
			
			
			// functions
			function shuffleArray(o){ 
				for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
				return o;
			}
			function randomNumber( max_value ){

				return Math.floor(Math.random()*max_value);

			}				
			function makeFormsDragAndDropable( $forms ){
			
				$forms.each( function(){
				
					var $form = $(this);						
					
					$form.mousedown( function (){
					
						$(this).addClass('mousedown')
					
					});
					$form.mouseup( function (){
					
						$(this).removeClass('mousedown')
					
					});					
					
					// draggable
					$form.draggable({ 
						refreshPositions: true,
						addClasses: false, 
						scroll: false,
						containment: 'document',
						start: function(event, ui) {	
						},
						drag: function(event, ui) {	
						},
						stop: function() {
							
							// tracke steckspiel aktivierung
							if(piwikTracker) piwikTracker.trackGoal(2)
							
							$steckspiel_wrapper.addClass('activated')
							
							// erhöhe z-index, gedraggte form ist immer on top
							z_index = z_index + 1;
							$form.css('z-index', z_index)	
							
						}
					});	

					// droppable
					if( $form.hasClass('inner') ){
						kind = 'outer'
					}else{
						kind = 'inner'
					}
					
					$form.droppable({ 
						accept: '.form.'+$form.attr('shape')+'.'+$form.attr('color')+'.'+kind,						
						drop: function(event, ui) { 
				
							$steckspiel_wrapper.addClass('activated')
							
							// tracke steckspiel drop
							if(piwikTracker) piwikTracker.trackGoal(3)
							
							// entferne alten inhalt, disable droppable
							$(this).html('').addClass('dropped').droppable('destroy')
							
							// füge neues zufallsbild ein
							var new_image  = shuffleArray( images ); new_image = new_image[0];
							var $new_image = $(new_image).appendTo( $(this) )
							
							// definiere höhe und breite neu
							$(this).css('height', $new_image.attr('height') + 'px' )
							$(this).css('width',  $new_image.attr('width')  + 'px' )
							
							ui.draggable.remove()
							
							// remove shape und color classes
							$.each( colors_shapes, function(index, value){ 
								
								$form.removeClass( value )
							
							});
						
						}		
					});	

					// dblclick sends to front
					$form.dblclick( function(){
					
						$(this).css('z-index', z_index++ )
					
					})							
				
				});
			
			}
			function randomPositions( $forms ){
				
				$forms.each( function(){
				
					var $form = $(this);
					
					// random position
					var new_top  = randomNumber( wrapper_height - $form.height() )
					var new_left = randomNumber( wrapper_width  - $form.width() )
					$form.css('top',  new_top + 'px')
					$form.css('left', new_left + 'px')

					// set z-index
					$form.css('z-index', z_index++ )
				
				});
			
			}
			function addForm( options ){				
			
				var form_html	= '<div class="form '+options.color+' '+options.shape+' '+options.kind+'" color="'+options.color+'" shape="'+options.shape+'" kind="'+options.kind+'" ><img src="'+template_directory+'/steckspiel/transparent.gif" /></div>';				
				var $new_form	= $(form_html).appendTo( $steckspiel_canvas )
				
				z_index 		= z_index + 1;
				$new_form.css('z-index', z_index)		
				
				makeFormsDragAndDropable( $new_form )
				randomPositions( $new_form )				
				animatedScale( $new_form )
				
			}
			function animatedScale( $elements, value ){
			
				$elements.animate({  
						textIndent: 140 }, 
					{					
					step: function(now,fx) {
						scale = parseInt(now) / 100;
						$(this).css('-moz-transform', 'scale(' + scale +')');
						$(this).css('-webkit-transform', 'scale(' + scale +')');
						$(this).css('-ms-transform', 'scale(' + scale +')');
						$(this).css('-o-transform', 'scale(' + scale +')');
						$(this).css('transform', 'scale(' + scale +')');
					},
					complete: function(){
						
						$elements.animate({  
								textIndent: 100 }, 
							{					
							step: function(now,fx) {
								scale = parseInt(now) / 100;
								$(this).css('-moz-transform', 'scale(' + scale +')');
								$(this).css('-webkit-transform', 'scale(' + scale +')');
								$(this).css('-ms-transform', 'scale(' + scale +')');
								$(this).css('-o-transform', 'scale(' + scale +')');
								$(this).css('transform', 'scale(' + scale +')');							
							},	duration: 'fast'					
							},'ease-out');
						
					},
					duration: 'fast'					
				},'ease-in');
			
			}
			function getCanvasPostString(){
			
				var canvas_height	= $steckspiel_wrapper.height()
				var canvas_width	= $steckspiel_wrapper.width() 
				var $elements		= $steckspiel_wrapper.find('.form')	
				var counter			= 0;
				var send_string		= '';
				
				// ergänze send_strings um die canvas-eigenschaften
				send_string = send_string + '&canvas[height]=' + canvas_height;	
				send_string = send_string + '&canvas[width]='  + canvas_width;		

				// ergänze send_strings um die form-eigenschaften
				$elements.each( function(){
				
					var top					= parseInt( $(this).css('top') )
					var left				= parseInt( $(this).css('left') )
					
					// wenn schon ein bild in der form
					if( $(this).hasClass('dropped') ){
					
						var image				= $(this).find('img').attr('src')
						var offset_left			= '0 0';
						var offset_top			= '0px';
						var height				= $(this).height();
						var width				= $(this).width();	
					
					// wenn nur form
					}else{
					
						var image				= $(this).find('img').css('background-image')
						var offset_left			= $(this).css('background-position')
						var offset_top			= parseInt( $(this).find('img').css('top') );
						var height				= $(this).height();
						var width				= $(this).width();								
					
					}
					
					var z_index				= $(this).css('z-index')
					
					send_string = send_string + '&elements['+z_index+'][top]='  + top;			  
					send_string = send_string + '&elements['+z_index+'][left]=' + left;
					send_string = send_string + '&elements['+z_index+'][height]=' + height;
					send_string = send_string + '&elements['+z_index+'][width]=' + width;
					send_string = send_string + '&elements['+z_index+'][image]='  + image;
					send_string = send_string + '&elements['+z_index+'][offset_left]='  + offset_left;
					send_string = send_string + '&elements['+z_index+'][offset_top]='  + offset_top;
					
				});				
				
				return send_string;
			
			}
			
			if(options != 'shuffle' ){
				
				//Iterate over the current set of matched elements
				return $steckspiel_wrapper.each(function() {

					var $forms	= $steckspiel_wrapper.find('.form')

					// erzeuge startformen
					setTimeout( function() { addForm( { color: 'lightgreen', shape : 'circle', kind : 'inner' } ) }, 650 );					
					
					setTimeout( function() { addForm( { color: 'cyan', shape : 'semicircle_bottom', kind : 'inner' } ) }, 200 );
					setTimeout( function() { addForm( { color: 'cyan', shape : 'semicircle_bottom', kind : 'outer' } ) }, 630 );					
					
					setTimeout( function() { addForm( { color: 'rose', shape : 'rhombus', kind : 'inner' } ) }, 450 );
					setTimeout( function() { addForm( { color: 'rose', shape : 'rhombus', kind : 'outer' } ) }, 500 );						
					
					setTimeout( function() { addForm( { color: 'circle', shape : 'red', kind : 'inner' } ) }, 490 );
					setTimeout( function() { addForm( { color: 'circle', shape : 'red', kind : 'outer' } ) }, 320 );						
					
					setTimeout( function() { addForm( { color: 'plus', shape : 'yellow', kind : 'inner' } ) }, 350 );
					setTimeout( function() { addForm( { color: 'plus', shape : 'yellow', kind : 'outer' } ) }, 800 );					
					
					setTimeout( function() { addForm( { color: 'darkgreen', shape : 'hexagon', kind : 'inner' } ) }, 475 );
					setTimeout( function() { addForm( { color: 'darkgreen', shape : 'hexagon', kind : 'outer' } ) }, 610 );						
					
					$steckspiel_wrapper.addClass('front_page')
					
					// bind click .send 
					$steckspiel_nav.find('.send').click( function(){
					
						$('#overlay_wrapper').fadeOut('fast')
						
						$(this).toggleClass('active')
						
						$steckspiel_wrapper.toggleClass('front_page back_page')
				
						if( $(this).hasClass('active') ){
						
							$steckspiel_canvas.fadeOut('medium')
							$steckspiel_back.fadeIn('medium')						
						
						}else{
						
							$steckspiel_canvas.fadeIn('medium')
							$steckspiel_back.fadeOut('medium')							
						
						}
				
						return false;
					
					})
					
					$steckspiel_nav.find('.send').hover( 
						function(){ $steckspiel_wrapper.addClass('hightlighted') }, 
						function(){ $steckspiel_wrapper.removeClass('hightlighted') }
					)
					
					// bind submit
					$preview = $('<div id="preview"></div>').appendTo('body');
					$preview.css('position', 'absolute')
					$preview.css('top', '110px')
					$preview.css('right', '10px')
					$preview.css('width', '370px')
					$preview.css('height', '520px')
					$preview.css('outline', '1px solid red')
					$preview.css('display', 'none')
					$preview.css('white-space', 'pre')
					$preview.css('overflow', 'scroll')
					$preview.css('font-family', 'monospace')
					$preview.css('font-size', '11px')
					$steckspiel_back.find('form').submit( function(){

						// validation
						
						$(this).find('.required').each( function(){
						
							var $this = $(this);
							var this_default_value	= $this.attr('default_value')
							var this_value	= $this.val();
						
							if( this_value == this_default_value ){

								$this.addClass('error')
							
							}
							
							if( $this.hasClass('email') && !is_valide_email( this_value ) ){
							
								$this.addClass('error')
							
							}
						
						
						});
						
						// stop here if validation fails
						
						if( $(this).find('.error').size() > 0 ){
						
							return false;
						
						}
						
						// ----------------
						
						var form_content		= $(this).serialize();		// translate form to string			
						var canvas_properties	= getCanvasPostString();	// translate canvas and its elements to string			
						var send_string			= form_content + canvas_properties;
						
						$.ajax({
							url: template_directory + '/steckspiel/sendmail.php',
							data: send_string,
							type: 'post', 
							beforeSend: function( xhr ) {	
							
								$steckspiel_back.find('form *').blur();
								$steckspiel_back.addClass('loading')
							
							},
							success: function( data ) {
								
								$preview.html(data)
								$steckspiel_back.removeClass('loading')
								
								// reset form
								setTimeout( function(){ 								
									$steckspiel_back.find('input[type=text], textarea').each( function(){

										$(this).val('')
										$(this).focus()
										$(this).blur()

									})	
								}, 500 );								

								// zurück zur vorderseite
								setTimeout( function(){ 
									$steckspiel_nav.find('.back').trigger('click')
									$('#steckspiel_sent').fadeIn(600).delay(1500).fadeOut(350) 
								}, 100 );
								
							}
						});						
						
						return false;
					
					});
					
					// bind click .back 
					$steckspiel_nav.find('.back').click( function(){
					
						$steckspiel_nav.find('.send').trigger('click')
					
					});
					
					// bind drop on logoform
					$('#logo_form, #header, #header *').droppable({ 
						
						tolerance: 'touch',
						accept: '.form.circle.inner.lightgreen',
						drop: function(event, ui) { 
							
							//load blog via ajax
							$('#blog_nav .refresh').trigger('click')
						
							$(this).remove()
							ui.helper.remove();
							$('a#blog_link').show();
							
						}
					
					})					
					
					// bind drop on trashbin
					$steckspiel_nav.find('.trash').droppable({ 
						
						accept: '.form',
						tolerance: 'intersect',
						tolerance: 'fit',
						tolerance: 'touch',
						activeClass: 'hover',
						hoverClass: 'drophover',
						drop: function(event, ui) { 
							
							ui.helper.remove();
							
						}
					
					})
					
					// bind click .refresh
					$steckspiel_nav.find('.refresh').click( function(){
					
						randomPositions( $forms )
						alert('refresh');
						
						return false;
					
					})						
					
					// bind click .shuffle
					$steckspiel_nav.find('.shuffle').click( function(){
					
						randomPositions( $forms )
						
						return false;
					
					})					
					
					// bind click .add form
					$steckspiel_nav.find('.add').click( function(){
					
						var kind  = shuffleArray( kinds );  kind  = kind[0];						
						var both  = shuffleArray( colors_shapes );  
							both  = both[0];
							both  = both.split(' ');
						var color = both[0];							
						var shape = both[1];					
						
						var options = { color : color, shape : shape, kind : kind }
						addForm( options );
						
						return false;
					
					})						
				 
				});
			
			}else{
			
				var $this	= $(this);
				var $forms	= $this.find('.form')	
				
				// Forms: random position
				randomPositions( $forms );				
			
			}

		}
		
	});
	 
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )      
})(jQuery);	

function is_valide_email( email ) {
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    return reg.test(email);
}

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera",
			versionSearch: "Version"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();