/*+-----------------------------------------------+*/
/*|         Für IE HTML5 Elemente erzeugen        |*/
/*+-----------------------------------------------+*/
//document.createElement('header');
//document.createElement('hgroup');
//document.createElement('nav');
//document.createElement('menu');
//document.createElement('section');
//document.createElement('article');
//document.createElement('aside');
//document.createElement('footer');

$(document).ready(function(){
	$(function() {
		$('.lightBox').lightBox();
	});
	
/*+-----------------------------------------------+*/
/*|           Meldung anzeigen                    |*/
/*+-----------------------------------------------+*/
	//Meldung ausblenden
	function hideBoxMeldung(){
		$('.meldungsBox').fadeOut('slow');
	}
	
	//Meldung anzeigen
	function showBoxMeldung(meld){
		$('.meldungsBox').removeClass('hidden');
		$('.meldungsBoxContent').html(meld);
		$('.meldungsBox').fadeIn();
		$('.closeButton').bind('click', hideBoxMeldung);
	}
	$('.closeButton').click(hideBoxMeldung);
	
	//Meldungsbox initialisieren
	$('<div class="meldungsBox hidden"><div class="closeButton"></div><div class="meldungsBoxHeader"></div><div class="meldungsBoxContent"></div><div class="meldungsBoxFooter"></div></div>').appendTo('body');	

/*+-----------------------------------------------+*/
/*|        Wechselnde Produkte auf der Startseite |*/
/*+-----------------------------------------------+*/	
	function getSpecialProd(){
		$.ajax({
			url: 'content/special_product.php',
			type: 'POST',
			dataType: 'html',
			success: function(data) {
				//Allte SelectBox Löschen
				//$('#sp').fadeOut();
				$('#sp').animate({opacity:0	}, {duration:500, complete:function(){
					$('#sp').empty().append(data).animate({opacity:1},{duration:500});
						//$('#sp').fadeIn('slow');
						//$('#sp').show('slow');
						setTimeout(getSpecialProd, 10000);
					}
				});
			}
		});	
	}
	//Aufruf
	getSpecialProd();	
/*+-----------------------------------------------+*/
/*|           Internet Explorer Weiche            |*/
/*+-----------------------------------------------+*/		
	/* User Agent (Browserkennung) auf einen bestimmten Browsertyp prüfen */  
	function checkBrowserName(name){  
		var agent = navigator.userAgent.toLowerCase();  
		if (agent.indexOf(name.toLowerCase())>-1) {  
			return true;  
		}  
		return false;  
	}
	
	var browserVersion = $.browser.version.substring(0,1);
	if(checkBrowserName('MSIE')){
		
	}
	/*if(checkBrowserName('MSIE') && (browserVersion == 6)){
		$('#page, .naked_pinup, #nio ').remove();
		$('<div id="warnung_container"><p>Sorry, dein Browser ist veraltet und wird nicht mehr unterstützt.<br />Er besitzt bekannte Sicherheitsschwachstellen,<br /> bietet nur begrenzten Komfort und hat viele weitere Nachteile.<br />Bitte führe ein Upgrade auf einen modernen Browser aus.<br />Der Wechsel zu einem neueren Browser kann Dir<br /> eine Menge Vorteile bringen: <br />Welche? Dass erf&auml;hrst Du unter <a href="http://browser-update.org/update.php">browser-update.org</a></p><ul class="ie_browser"><li><a href="http://www.mozilla.com/firefox/"><img src="grafiken/firefox.gif" /></a></li><li><a href="http://www.google.com/chrome"><img src="grafiken/chrome.gif" /></a></li><li><a href="http://www.opera.com/browser/"><img src="grafiken/opera.gif" /></a></li><li><a href="http://www.apple.com/safari/"><img src="grafiken/safari.gif" /></a></li><li><a href="http://www.microsoft.com/windows/Internet-explorer/"><img src="grafiken/ie8.gif" /></a></li></ul><div id="warnung_logo"><img src="grafiken/nio_warnung.png" /></div></div>').appendTo('body');  
	   
	   
	}*/

/*+-----------------------------------------------+*/
/*|           Karte                               |*/
/*+-----------------------------------------------+*/
	//Areas highlighten	
	$('.map').maphilight();
	//Alle Stadtdetailkarten ausblenden
	$('.townDetail').each(function(index){
		//$(this).addClass('hidden');
		$(this).css({'position':'absolute','top':0,'left':0}).hide();
	});
	
	
	
	//Highlight auslösen für Städte auf großer Karte
	$('.townLink').mouseover(function(e) {
		var town = $(this).attr('href');
		$('#stadt'+town).mouseover();
	}).mouseout(function(e) {
		var town = $(this).attr('href');
		$('#stadt'+town).mouseout();
	}).click(function(e) { e.preventDefault(); });
	
	//Highlight auslösen für Stadtbezirke
	$('.distList').mouseover(function(e) {
		var dist = $(this).attr('rel');
		//alert(dist);
		$('#'+dist).mouseover();
	}).mouseout(function(e) {
		var dist = $(this).attr('rel');
		$('#'+dist).mouseout();
	}).click(function(e) { e.preventDefault(); });
	
	//Ansichten switchen	
	//Hauptkarte einblenden // aktuelle Detailkarte ausblenden
	$('.backToMain').click(function(){
		var $aktID = $(this).attr('href');//aktuelle ID
		$('#town'+$aktID).fadeOut('fast');
		$('#map_big').fadeIn('fast');
		$('#mapContent, #mapContent2').fadeIn('fast');
		return false;
	});
	
	//Detailkarte einblenden // Hauptkarte ausblenden
	$('#map_big area, .townLink').click(function(){
		var $aktID = $(this).attr('href');//aktuelle ID
		$('.townDetail').hide();//Alle Detailkarten ausblenden, falls eingeblendet
		$('#map_big').fadeOut('fast'); // Große Karte ausblenden, falls eingeblendet
		$('#mapContent, #mapContent2').fadeOut('fast');
		$('#town'+$aktID).fadeIn('fast'); //aktuelle Detailkarte einblenden
		
		return false;
	});
	
	/*$('#map_big area').click(function(){
		var $aktID = $(this).attr('href');//aktuelle ID
		$('#map_big').fadeOut('fast');
		$('#town'+$aktID).fadeIn('fast');
		return false;
	});*/
	
	
	//
	$('.district, .distList').click(function(){
		var $aktTitle = $(this).attr('title'); //aktueller Name Stadtteil
		var $aktID = $(this).attr('id');//aktuelle Stadteil ID
		var $aktRel = $(this).attr('rel');//aktuelle Stadteil ID bei distList
		if($aktID == ""){
			$aktID = $aktRel;
		}
		var $usemap = $(this).attr('href');//zugrundeliegende Karte
		var $distDesc = $(this).attr('alt');//aktuelle Beschreibung
		//alert($usemap);
		
		//Prüfen ob die ID schon ausgewählt wurde
		if($('#basket'+$aktID).text()){
			showBoxMeldung('<p>Diesen Stadtteil haben Sie schon ausgewählt!</p>');
			setTimeout(hideBoxMeldung, 3000);
		}else{
		
		
			var $addDistrict = $('<div class="addDist" id="basket'+$aktID+'"><img src="media/maps/th/'+$usemap+'" /><span class="addDistTitle">'+$aktTitle+'</span><a href="'+$aktID+'" title="Auswahl löschen" class="dumpDist"><img src="media/maps/dump.png" /></a></div>');
			$addDistrict.appendTo('#formBasket');
			//IE Weiche
			if(checkBrowserName('MSIE')){
				$('#basket'+$aktID).css('display','block');
			}else{
				$('#basket'+$aktID).fadeIn('fast');
			}
			$('.dumpDist').bind('click', dumpDist);
			
			
			//Hidden InputFeld erzeugen um Stadtteil ans Formular zu hängen
			$('<input id="input'+$aktID+'" name="stadtteile[]" value="'+$aktTitle+'" type="hidden" />').appendTo('#Form');
			
			
			//Aktuellen Value aus dem Textfeld holen
			var aktText = $('#nachricht').attr('value');
			//Wenn Text in Textarea gleich dem Labeltext ist, dann lösche den Text
			if(aktText ==  'Ihre Nachricht'){
				aktText = '';
			}
			if(aktText ==  ''){
				aktText = 'Ich interessiere mich für die Shirttuning Lizenz für die ausgewählte(n) Region(en). Bitte nehmen Sie Kontakt zu mir auf. ';
			}
			//alert(aktText);
			$('#nachricht').val(aktText).addClass('insertContent');
			
			//Betreff setzen
			var betreffText = $('#betreff').attr('value');
			//Wenn Text in Textarea gleich dem Labeltext ist, dann lösche den Text
			if(betreffText ==  'Betreff'){
				betreffText = '';
			}
			if(betreffText ==  ''){
				betreffText = 'Shirttuning Lizenz Information ';
			}
			//alert(aktText);
			$('#betreff').val(betreffText).addClass('insertContent');
					
		}
		return false;
	});

	
	//gewählten Stadtteil löschen
	function dumpDist(){
		
		var $aktID = $(this).attr('href');
		//alert($aktID);
		$('#basket'+$aktID).fadeOut('fast', function(){ 
													$('#basket'+$aktID).remove();
													$('#input'+$aktID).remove();
												});
		return false;	
	}


	//Tooltip 
/*	var $tooltip = $('<div id="tooltip"></div>').appendTo('body');
  
	var positionTooltip = function(event) {
		var tPosX = event.pageX;
		var tPosY = event.pageY + 20;
		$tooltip.css({top: tPosY, left: tPosX});
	};
	
	var showTooltip = function(event) {
		var title = $(this).attr('alt');

		$tooltip.text(title).show();
		
		positionTooltip(event);
	};
	
	var hideTooltip = function() {
		$tooltip.hide();
	};*/
	
	//$('area').hover(showTooltip, hideTooltip).mousemove(positionTooltip);
	
	//Infos zum Marker anzeigen
	//var $info = $('<div id="showInfo"></div>').appendTo('#map_big');
  
/*	var positionInfo = function(event) {
		var position = $(this).position();
		var posLeft = Math.round(position.left);
		var posTop = Math.round(position.top);
		
		var tPosX = event.pageX;
		var tPosY = event.pageY + 20;
		$info.css({top: tPosY, left: tPosX});
	};*/
	
	
	var positionInfo = function(event) {
		
		var tPosX = event.pageX;
		var tPosY = event.pageY + 5;
		$('.showInfo').css({top: tPosY, left: tPosX});
	};
	
	var showInfo = function(event) {
		var title = $(this).attr('alt');
		var id = $(this).attr('id');
		
		if ($("#info"+id).css("opacity") != 0) {
			$("#info"+id).hide().remove();
			
		}

		//$('#status2').html(event.pageX +', '+ event.pageY);
		if(event.pageX > 0){
			
			//Infos zum Marker anzeigen -> an body anhängen, da er hier die aktuellen Eventkoordinaten verwendet
			var $info = $('<div id="info'+id+'" class="showInfo"></div>').appendTo('body');
			//Innerhalb der Karte gehovert
			//Koordinaten holen um Info an richtiger Stelle anzuzeigen
			/*var tPosX = event.pageX;
			var tPosY = event.pageY + 5;
			$info.css({top: tPosY, left: tPosX});*/
			positionInfo(event);
		}else{
			//Infos zum Marker anzeigen
			var $info = $('<div id="info'+id+'" class="showInfo"></div>').appendTo('#map_big');
			//Über Liste gehovert
			//Koordinaten holen um Info an richtiger Stelle anzuzeigen
			var position = $(this).attr('coords');
			var pos = position.split(',');

			$info.css({top: parseInt(pos[1]), left: parseInt(pos[0])});	
		}

		
		$info.text(title).show('slow');
		
	};
	
	var hideInfo = function() {
		var id = $(this).attr('id');
		$("#info"+id).hide(500,function(){$("#info"+id).remove()});
			
		
	};
	
	$('#map_big area').hover(showInfo, hideInfo).mousemove(positionInfo);

	
	/*function get_townpos(){
		var submitData = "data=pos";
		
		$.ajax({
			url: 'skripte/get_townpos.php',
			type: 'POST',
			dataType: 'json',
			data: submitData,
			success: function(data) {
				var rad = new Array();
				var x_coord = new Array();
				var y_coord = new Array();

				$.each(data, function(entryIndex, entry) {
					x_coord[entryIndex] = entry['townCoord_x1'];
					y_coord[entryIndex] = entry['townCoord_y1'];
					rad[entryIndex] = entry['townCoord_r'];
				});
				var erg = drawCanvas(x_coord,y_coord,rad);
				
				
				$('<img src="'+erg+'" alt="Deutschland" id="map_big_img" class="map" usemap="#map_big" />').prependTo('#map_big');
				$('.map').maphilight();
			}
		});	
	}*/
	
	/*function drawCanvas(x,y,radius){
		var canvas = document.createElement('canvas');
		//var canvas = document.getElementById('canvasBsp');
		if(canvas.getContext){
			canvas.width = 624;
			canvas.height = 880;
			var context = canvas.getContext('2d');
			// Bild-Objekt erstellen
			var img = new Image();
			img.src = 'media/maps/dt.png';
			// Erst zeichnen wenn das Bild da ist
			//img.onload = function(){
				context.drawImage(img, 0, 0);
			//};
			for(var i = 0;i<x.length;i++){
				context.beginPath();
				context.arc(x[i],y[i],radius[i], 0, 360, false);
				//context.stroke();
				context.closePath();
				context.fillStyle = '#dd9911';
				context.fill();	
			}
			
			//Die Bilddatei in ein Data-URL exportieren
			var imgData = canvas.toDataURL();
			return imgData;
		}
		
	}*/
	
	
	
	//get_townpos();

/*+-----------------------------------------------+*/
/*|           Form Validierung/Formatierung       |*/
/*+-----------------------------------------------+*/	
	//Formular Elemente Beschriften, mit dem Text aus dem dazugehörigen Label
	var tmpName = new Array();//for Attribt, für welches Formularelement ist das label zuständig
	var tmpText = new Array();//Text des Labels
	
	//Alle Labels durchlaufen
	$('.labelTopFloat').each(function(index){
		tmpName[index] = $(this).attr('for');
		tmpText[index] = $(this).text();
		$(this).hide();
		//Nur setzen wenn das Inputfeld leer ist
		if($('#'+tmpName[index]).attr('value') == ""){
			$('#'+tmpName[index]).attr('value', tmpText[index]);
		}else{
			//Wenns nicht leer ist, dann muss die class .addClass('insertContent'); hinzugefügt werden
			$('#'+tmpName[index]).addClass('insertContent');	
		}
		
	});
	
	//Labeltext ein/ausblenden
	var tmpVal = "";//aktueller Value Wert
	var labelAktID = "";//dazugehörige LabelID
	var label =""; //aktuelles label
	var $input = $('.inputFloat, textarea');	

	$input.focus(function (){
		//Nur leeren wenn kein UserContent drinnen ist
		if(false == $(this).hasClass('insertContent')){ 
			tmpVal = $(this).attr('value');
			$(this).attr('value', '');
		}
	}).blur(function() {
		if (this.value == '') {
			//eventuell die insertContent Klasse entfernen
			$(this).removeClass('insertContent');
			//Den dazugehörigen Labeltext holen
			labelAktID = $(this).attr('id');
			label = $("label[for='"+labelAktID+"']").text();

	  		$(this).attr('value', label);
		}else{
			//Wenn das Formularfeld nicht mehr leer ist, wurde vom Benutzer Text eingefügt. Um diesen beim nächsten Focus nicht auszublenden wird dem tag eine Klasse hinzugefügt
			$(this).addClass('insertContent');
		}
	});
	
	
	//Inputs prüfen
	$('#Form').submit(function(){
		var formID = $(this).attr('id');//Welches Form wurde geklickt
		
		var pflichtLabelFor = new Array();
		var pflichtLabelText = new Array();
		var fehlerFelder = ""; //reiht die Felherfelder kommasepariert auf
		var fehler = 0;
		//Alle Pflichtfeld-Labels durchlaufen
		$('.pflichtfeld').each(function(index){
			pflichtLabelFor[index] = $(this).attr('for');
			pflichtLabelText[index] = $(this).text();
			//Prüfen ob die dazugehörigen Inputs leer sind ,bzw nur die Texte der Labels enthalten
			if($('#'+pflichtLabelFor[index]).attr('value') == pflichtLabelText[index] || $('#'+pflichtLabelFor[index]).attr('value') == "" ){
				$('#'+pflichtLabelFor[index]).css('backgroundColor', '#F99');
				
				//Fürs erste Element Komma weglassen
				if(fehler != 0){
					fehlerFelder +=',';
				}
				fehlerFelder +=' '+pflichtLabelText[index];
				fehler ++;
			}else{
				$('#'+pflichtLabelFor[index]).css('backgroundColor', '#fff');
			}
		});
		var agbText = "";
		var katText = "";

		if(fehler > 0){
			$('.fehler').remove();
			//$('<p class="fehler">Du musst alle markierten Felder ausfüllen!<br /><strong>'+fehlerFelder+'</strong></p>').insertBefore('#kontaktForm');
			showBoxMeldung('<p>Bitte füllen Sie alle markierten Felder aus!<br /><strong>'+fehlerFelder+'</strong></p>');
			setTimeout(hideBoxMeldung, 6000);
			return false;
//		}else{
//			check = validInput($('#email'),'E-Mail',/^[a-zA-Z0-9_\-.]+@[a-zA-Z0-9_\-.]+\.[a-z]{2,6}$/i,"Bitte geben Sie eine  gültige E-Mail-Adresse ein");
//			return check;
		}
	});
	
	//Reg Exp Check Funktion
	function validInput(input,label,regexp,meldung){
		var str = input.val();
		//alert(str);
		if(str != "" && str != label ){
			var reg = regexp;
			var check = reg.test(str);
			if(check == false){
				input.css('backgroundColor', '#F99');
				
				showBoxMeldung('<p>'+meldung+'</p>');
				setTimeout(hideBoxMeldung, 3000);
				return false;
			}else{
				input.css('backgroundColor', '#FFF');
			}
		}
	}
	
	//Auf PLZ prüfen
//	$('#plz').blur(function (){
//		var str = $(this).val();
//
//		if(str != "" && str !="PLZ" ){
//			var reg = /^\d{5}$/;
//			var check = reg.test(str);
//			if(check == false){
//				showBoxMeldung('<p>Deine PLZ muss aus 5 Ziffern bestehen!</p>');
//				setTimeout(hideBoxMeldung, 3000);
//			}
//		}
//	});
});

/*+-----------------------------------------------+*/
/*|          Canvas Element erzeugen              |*/
/*+-----------------------------------------------+*/
	/*var canvas = document.createElement('canvasBsp');
	//wenn das Element eine getContext Eigenschaft hat, wird es vom Browser unterstützt
	if(canvas.getContext){
		canvas.width = 480;
		canvas.height = 300;
		//Element einfügen
		document.getElementsByTagName('body')[0].appendChild(canvas);
	}else{
		//Ersatzcode	
	}*/
	
	

	

	
/*	function drawCanvas(){
		var canvas = document.getElementById('canvasBsp');
		if(canvas.getContext){
			var context = canvas.getContext('2d');
			context.beginPath();
			context.arc(240, 200, 35, 0, 360, false);
			context.stroke();
			context.closePath();
			context.fillStyle = '#000';
			context.fill();	
		}
	}
	drawCanvas();*/