/*
		 * Image preview script 
		 * powered by jQuery (http://www.jquery.com)
		 * written by Alen Grakalic (http://cssglobe.com)
		 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
		 */
		 
		this.imagePreview = function(){ 
		    /* CONFIG */
			
			xOffset = -10;
			yOffset = -30;
			
			// these 2 variable determine popup's distance from the cursor
			// you might want to adjust to get the right result
			
		    /* END CONFIG */
		    $("a.preview").hover(function(e){
			this.t = this.title;
			this.title = "";    
			var c = (this.t != "") ? "<br/>" + this.t : "";
			$("body").append("<p id='preview'><img src='"+ this.href +"' alt=' ' />"+ c +"</p>");                                
			$("#preview")
			    .css("top",(e.pageY - xOffset) + "px")
			    .css("left",(e.pageX + yOffset) + "px")
			    .fadeIn("fast");                        
		    },
		    function(){
			this.title = this.t;    
			$("#preview").remove();
		    }); 
		    $("a.preview").mousemove(function(e){
			$("#preview")
			    .css("top",(e.pageY - xOffset) + "px")
			    .css("left",(e.pageX + yOffset) + "px");
		    });         
		};





//
//  document. ready
//
$(document).ready(function(){

	
	/**
	* Strom-Rechner Display
	* steuert die Eingabe-Hilfe (Display) für den Stromrechner
	*/
	$('.stromdisplay img').mouseover(function() {
	  // alle evtl. gesetzten active Klassen entfernen
	  //$('.display').removeClass('display_active');
	
	})

	// bei klick auf ein bild: "merken" == class zuweisen
	$('.stromdisplay img').click(function() {
		
		// alle evtl. gesetzten active Klassen entfernen
		$('.display').removeClass('display_active');
		
		
		$(this).addClass('display_active');
		
		// das FormField auf den Wert aus ALT setzen
		var kwh =  $(this).attr('alt');
		$('#form_kwh').val(kwh);
		
	})

	// onFocus des kwh Feldes entfernen wir die active class, weil 
	// wir davon ausgehen, dass nun manuell ein wert eingegeben wird,
	// der nicht mit einer auswahl übereinstimmt
	$('#form_kwh').focus(function() {
	  $('.display').removeClass('display_active');
	});

	
	
	/**
	* Gas-Rechner Display mit Häusern
	* steuert die Eingabe-Hilfe (Display) für den Stromrechner
	*/
	// bei klick auf ein bild: "merken" == class zuweisen
	$('.gasdisplayHaus img').click(function() {
		 // alle evtl. gesetzten active Klassen entfernen
		$('.display').removeClass('display_active');
		
		$(this).addClass('display_active');
		
		// das FormField auf den Wert aus ALT setzen
		var kwh =  $(this).attr('alt');
		$('#gasform_kwh').val(kwh);
	})

	// onFocus des kwh Feldes entfernen wir die active class, weil 
	// wir davon ausgehen, dass nun manuell ein wert eingegeben wird,
	// der nicht mit einer auswahl übereinstimmt
	$('#gasform_kwh').focus(function() {
	  $('.display').removeClass('display_active');
	});

	
	
	
	
	
	/**
	* Öko-Strom-Rechner Display
	* steuert die Eingabe-Hilfe (Display) für den Stromrechner
	*/
	$('.oekostromdisplay img').mouseover(function() {
	  // alle evtl. gesetzten active Klassen entfernen
	  //$('.display').removeClass('display_active');
	})

	// bei klick auf ein bild: "merken" == class zuweisen
	$('.oekostromdisplay img').click(function() {
		 // alle evtl. gesetzten active Klassen entfernen
		$('.display').removeClass('display_active');
		
		$(this).addClass('display_active');
		
		// das FormField auf den Wert aus ALT setzen
		var kwh =  $(this).attr('alt');
		$('#form_kwh_oeko').val(kwh);
	})

	// onFocus des kwh Feldes entfernen wir die active class, weil 
	// wir davon ausgehen, dass nun manuell ein wert eingegeben wird,
	// der nicht mit einer auswahl übereinstimmt
	$('#form_kwh_oeko').focus(function() {
	  $('.display').removeClass('display_active');
	});

	
	
	
	
 /**** GAS Rechner und Display **********************/
 
 var m2 = new Array();
 
 m2[30] = 5000;
 m2[35] = 6250; 
 m2[40] = 7500;
 m2[45] = 8750;
 m2[50] = 10000; 
 m2[55] = 11250;
 m2[60] = 12500;
 m2[65] = 13750; 
 m2[70] = 15000;
 m2[75] = 16000;
 m2[80] = 17000; 
 m2[85] = 18000;
m2[90] = 	19000;
m2[95] = 	20000;
m2[100] = 	21000;
m2[105] = 	22000;
m2[110] = 	23000;
m2[115] = 	24000;
m2[120] = 	25000;
m2[125] = 	25625;
m2[130] = 	26250;
m2[135] = 	26875;
m2[140] = 	27500;
m2[145] = 	28125;
m2[150] = 	28750;
m2[155] = 	29375;
m2[160] = 	30000;
m2[165] = 	30625;
m2[170] = 	31250;
m2[175] = 	31875;
m2[180] = 	32500;
m2[185] = 	33125;
m2[190] = 	33750;
m2[195] = 	34375;
m2[200] = 	35000;
m2[205] = 	35500;
m2[210] = 	36000;
m2[215] = 	36500;
m2[220] = 	37000;
m2[225] = 	37500;
m2[230] = 	38000;
m2[235] = 	38500;
m2[240] = 	39000;
m2[245] = 	39500;
m2[250] = 	40000;
m2[255] = 	40500;
m2[260] = 	41000;
m2[265] = 	41500;
m2[270] = 	42000;
m2[275] = 	42500;
m2[280] = 	43000;
m2[285] = 	43500;
m2[290] = 	44000;
m2[295] = 	44500;
m2[300] = 	45000;
m2[305] = 	46250;
m2[310] = 	47500;
m2[315] = 	48750;
m2[320] = 	50000;
m2[325] = 	51250;
m2[330] = 	52500;
m2[335] = 	53750;
m2[340] = 	55000;
m2[345] = 	56250;
m2[350] = 	57500;
m2[355] = 	58750;
m2[360] = 	60000;
m2[365] = 	61250;
m2[370] = 	62500;
m2[375] = 	63750;
m2[380] = 	65000;
m2[385] = 	66250;
m2[390] = 	67500;
m2[395] = 	68750;
m2[400] = 	70000;


function calculateKwhToQm (iKwh) {
	if (iKwh < 15000) {
	result = (iKwh / 250) + 10;
	} else if (iKwh < 25000) {
	result = (iKwh / 200) - 5;
	} else if (iKwh < 35000) {
	result = (iKwh / 125) - 80;
	} else if (iKwh < 45000) {
	result = (iKwh / 100) - 150;
	} else {
	result = (iKwh / 250) + 120;
	}
	return result;
}
  
  
  
/**
* Clean and Format
*
* @param (Integer) iAmount
* @return (Integer)
*/
function format2m2(iAmount) 
{
	var tmp;
	var tmp2;
	
	tmp =  Math.round (iAmount);
	
	tmp2 = tmp % 5;
	
	if (tmp2 == 1 || tmp2 == 2){
		tmp = tmp - tmp2;
	}
	else if(tmp2 == 3){
		tmp = tmp + 2;
	}
	else if(tmp2 == 4){
		tmp = tmp + 1;
	}
	
	tmp < 30 ? tmp = 30 : '';
	tmp > 400 ? tmp = 400 : '';
	
	return tmp;
}


  
  
	$(function() {
		$( "#slider" ).slider({
			value:80,
			min: 30,
			max: 400,
			step: 5,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
				$( "#kwhField" ).val (  m2[ui.value] );
			}
		});
		
		// initial: das <input> auf den ausgangswert des sliders setzen
		$( "#amount" ).val(  $( "#slider" ).slider( "value" ) );
		
		//$("#amount").css("font-size", "1." + $( "#slider" ).slider( "value" ) + " em");
		$("#amount").css("font-size", "1.9 em");
		
		 // anders herum:
		 // wenn die kwH direkt eingegeben werden, stellen wir den slider und die m2
		$( "#kwhField" ).change(function() {
				 
				var m2reverse =  format2m2 (calculateKwhToQm(	$(this).val() ) );
				
				//alert(m2reverse);
				
				$("#slider").slider('value', m2reverse );
				$("#amount").val(m2reverse);
				
				var fontsize = 1 +  (m2reverse*2/100) ;
				//alert(fontsize);
				
				$("#amount").css("font-size", fontsize + " em");

		});
		
		
	});
	
	
	
	
	
	
/**
ersetzt Formular-Felder mit Default-Werten, die in title="Default Wert" angegeben sind
	
jedes formularfeld, dass bearbeitet werden soll, muss die Klasse .default_replace haben.
	
inaktive felder bekommen via script default_inactive zugewiesen, also bitte in CSS definieren :)
@see http://www.designchemical.com/blog/index.php/jquery/add-default-text-to-form-fields-using-jquery/	
*/	
	
  $('.default_replace').each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('default_inactive').val('');
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('default_inactive').val(defaultVal);
      }
    })
    .blur().addClass('default_inactive');
  });
  $('form').submit(function(){
    $('.default_replace').each(function(){
      var defaultVal = $(this).attr('title');
      if ($(this).val() == defaultVal){
        $(this).val('');
      }
    });
  });
  
  
//  
// BildVorschau laden:
//
    imagePreview();
	// verhindern, dass der link auf den siegeln funktioniert, wenn JS aktiviert ist: 
	$("a.preview").click(function(){
			return false;
	});
	
// END imagePreview
	
	
  
/* end (document).ready */  
});