$(document).ready(function()
{
	//######hier nichts ändern###########
	var aktuell_std = "pt_std_tab_1";
	var aktuell_prem = "pt_prem_tab_1";
	var aktuell_sstd = "pt_sstd_tab_1";
	var aktuell_sprem = "pt_sprem_tab_1";
	var aktuell_ec = "ec_tab_1";
	var aktuell_md = "md_tab_1";
	var aktuell_pel = "pt_pellets_tab_1"
	//###################################
	
	var bg_c="#DDDDDD"; // Hintergrundfarbe ohne hover und inaktiv
	var bg_c_aktive="#E44E04"; //Hintergrundfarbe bei hover und wenn tab aktiv
	var font_c="#333333"; //Farbe ohne hover und inaktiv
	var font_c_aktive="#FFFFFF"; //Farbe bei hover und wenn der tab aktiv ist
	
	//wenn Bild verwendet werden soll 'background-image' : 'url()', 'background-repeat':'repeat-x' anstatt 'background-color' : bg_c_aktive
	
	//#########################################################################################
	//#############################  Heizoel schwefelarm Premium  #############################
	//#########################################################################################
	$("#pt_sprem_tab_1").css({'background-color' : bg_c_aktive,'color': font_c_aktive}); //ersten Tab aktiv setzen
	$("#price_trend_sprem_container").load('tabmenu/hel_sprem_7days.php'); //eventuell Pfad zur Datei mit dem Diagramm anpassen
	
	for(var a=2;a<7;a++)
	{
	$("#pt_sprem_tab_"+a).css({'background-color' : bg_c,'color': font_c});	//restlichen Tabs inaktiv setzen
	}
	
	$("#price_trend_sprem_tab a").click(function()
	{
		var pageToLoad = $(this).attr("href");
		var css_id = $(this).attr("id");
		var change_css = '#' + css_id;
		aktuell_sprem = css_id;
		
		$("#price_trend_sprem_container").load(pageToLoad);
		
		for(var i=1;i<7;i++)
		{
		$("#pt_sprem_tab_"+i).css({'background-color' : bg_c,'color': font_c});// alle Tabs inaktiv setzen
		}
		
		$(change_css).css({'background-color' : bg_c_aktive,'color': font_c_aktive}); //ausgewählten Tab aktiv setzen
		
		return false;
	});	
	//hover effekt
	$("#price_trend_sprem_tab a").hover(
		function()//mousein
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c_aktive,'color': font_c_aktive}); //Tab über den gehovert wird aktiv setzen
		},
		function()//mouseout
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c,'color': font_c}); //wenn Tab verlassen wird auf inaktiv setzen
			$("#"+aktuell_sprem).css({'background-color' : bg_c_aktive,'color': font_c_aktive}); //aktuellen Tab auf aktiv setzen
		}	
	);
	
	//##########################################################################################
	//######################  Heizoel Schwefelarm Standard  ####################################
	//##########################################################################################
	$("#pt_sstd_tab_1").css({'background-color' : bg_c_aktive,'color': font_c_aktive});// ersten Tab aktiv setzen
	$("#price_trend_sstd_container").load('tabmenu/hel_sstd_7days.php'); //eventuell Pfad zur Datei mit dem Diagramm anpassen
	
	for(var a=2;a<7;a++)
	{
	$("#pt_sstd_tab_"+a).css({'background-color' : bg_c,'color': font_c});//restlichen Tabs inaktiv setzen
	}
		
	$("#price_trend_sstd_tab a").click(function()
	{
		var pageToLoad = $(this).attr("href");
		var css_id = $(this).attr("id");
		var change_css = '#' + css_id;
		
		aktuell_sstd = css_id;
		
		$("#price_trend_sstd_container").load(pageToLoad);
		
		for(var i=1;i<7;i++)
		{
		$("#pt_sstd_tab_"+i).css({'background-color' : bg_c,'color': font_c});//alle Tabs inaktiv setzen
		}
		
		$(change_css).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ausgewählten tab aktiv setzen
		
		return false;
	});
	//hover effekt
	$("#price_trend_sstd_tab a").hover(
		function()//mousein
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//Tab über den gehovert wird aktiv setzen
		},
		function()//mouseout
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c,'color': font_c});//wenn Tab verlassen wird auf inaktiv setzen
			$("#"+aktuell_sstd).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//aktuellen Tab auf aktiv setzen
		}	
	);
	
	//##########################################################################################
	//#############################  Heizoel Standard  #########################################
	//##########################################################################################
	$("#pt_std_tab_1").css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ersten Tab aktiv setzen
	$("#price_trend_std_container").load('tabmenu/hel_std_7days.php');//eventuell Pfad zur Datei mit dem Diagramm anpassen
	
	for(var a=2;a<7;a++)
	{
	$("#pt_std_tab_"+a).css({'background-color' : bg_c,'color': font_c});//restlichen Tabs inaktiv setzen
	}
		
	$("#price_trend_std_tab a").click(function()
	{
		var pageToLoad = $(this).attr("href");
		var css_id = $(this).attr("id");
		var change_css = '#' + css_id;
		
		aktuell_std = css_id;
		
		$("#price_trend_std_container").load(pageToLoad);
		
		for(var i=1;i<7;i++)
		{
		$("#pt_std_tab_"+i).css({'background-color' : bg_c,'color': font_c});//alle Tab auf inaktiv setzen
		}
		
		$(change_css).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ausgewählten Tab auf aktiv setzen
		
		return false;
	});
	//hover effekt
	$("#price_trend_std_tab a").hover(
		function()//mousein
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//Tab über den gehovert wird aktiv setzen
		},
		function()//mouseout
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c,'color': font_c});//Tab beim verlassen auf inaktiv setzen
			$("#"+aktuell_std).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//aktuellen Tab aktiv setzen
		}	
	);
	
	//###############################################################################################
	//##############################  Heizoel Premium  ##############################################
	//###############################################################################################
	$("#pt_prem_tab_1").css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ersten Tab aktiv setzen
	$("#price_trend_prem_container").load('tabmenu/hel_prem_7days.php');//eventuell Pfad zur Datei mit dem Diagramm anpassen
	
	for(var a=2;a<7;a++)
	{
	$("#pt_prem_tab_"+a).css({'background-color' : bg_c,'color': font_c});//restlichen Tabs inaktiv setzen
	}
	
	$("#price_trend_prem_tab a").click(function()
	{
		var pageToLoad = $(this).attr("href");
		var css_id = $(this).attr("id");
		var change_css = '#' + css_id;
		aktuell_prem = css_id;
		
		$("#price_trend_prem_container").load(pageToLoad);
		
		for(var i=1;i<7;i++)
		{
		$("#pt_prem_tab_"+i).css({'background-color' : bg_c,'color': font_c});//alle Tabs auf inaktiv setzen
		}
		
		$(change_css).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ausgewählten Tab aktiv setzen
		
		return false;
	});	
	//hover effekt
	$("#price_trend_prem_tab a").hover(
		function()//mousein
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//Tab über den gehovert wird aktiv setzen
		},
		function()//mouseout
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c,'color': font_c});//Tab bei verlassen wieder auf inaktiv setzen
			$("#"+aktuell_prem).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//den aktuellen Tab wieder auf aktiv setzen
		}	
	);
	
	//##############################################################################################
	//################################  Energiekostenvergleich  ####################################
	//##############################################################################################
	$("#ec_tab_1").css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ersten Tab aktiv setzen
	$("#energie_cost_container").load('tabmenu/gas_pel.php');//eventuell Pfad zur Datei mit dem Diagramm anpassen
	
	for(var a=2;a<7;a++)
	{
	$("#ec_tab_"+a).css({'background-color' : bg_c,'color': font_c});//alle anderen Tabs auf inaktiv setzen
	}
	
	$("#energie_cost_tab a").click(function()
	{
		var pageToLoad = $(this).attr("href");
		var css_id = $(this).attr("id");
		var change_css = '#' + css_id;
		aktuell_ec = css_id;
		
		$("#energie_cost_container").load(pageToLoad);
		
		for(var i=1;i<7;i++)
		{
		$("#ec_tab_"+i).css({'background-color' : bg_c,'color': font_c});//alle Tabs auf inaktiv setzen
		}
		
		$(change_css).css({'background-color' : bg_c_aktive, 'color': font_c_aktive});//ausgewählten Tab aktiv setzen
		
		return false;
	});
	//hover effekt
	$("#energie_cost_tab a").hover(
		function()//mousein
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//Tab über der gehovert wird aktiv setzen
		},
		function()//mouseout
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c,'color': font_c});//Tab beim verlassen wieder inaktiv setzen
			$("#"+aktuell_ec).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//aktuelolen Tab wieder aktiv setzen
		}	
	);
	
	//#########################################################################################
	//##############################  Marktdaten  #############################################
	//#########################################################################################
	$("#md_tab_1").css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ersten Tab aktiv setzen
	$("#market_data_container").load('tabmenu/md_hel.php');//eventuell Pfad zur Datei mit dem Diagramm anpassen
	
	for(var a=2;a<7;a++)
	{
	$("#md_tab_"+a).css({'background-color' : bg_c,'color': font_c});	//restliche Tabs inaktiv setzen
	}
	
	$("#market_data_tab a").click(function()
	{
		var pageToLoad = $(this).attr("href");
		var css_id = $(this).attr("id");
		var change_css = '#' + css_id;
		aktuell_md = css_id;
		
		$("#market_data_container").load(pageToLoad);
		
		for(var i=1;i<8;i++)
		{
		$("#md_tab_"+i).css({'background-color' : bg_c,'color': font_c});//alle Tabs inaktiv setzen
		}
		
		$(change_css).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ausgewählten Tab aktiv setzen
		
		return false;
	});
	//hover effekt
	$("#market_data_tab a").hover(
		function()//mousein
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//Tab über der gehovert wird aktiv setzen
		},
		function()//mouseout
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c,'color': font_c});//Tab beim verlassen wieder inaktiv setzen
			$("#"+aktuell_md).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//aktuelolen Tab wieder aktiv setzen
		}	
	);
	
	//##############################################################################################
	//########################################  Pellets  ###########################################
	//##############################################################################################
	$("#pt_pellets_tab_1").css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ersten Tab aktiv setzen
	$("#price_trend_pellets_container").load('tabmenu/pellets_6month.php');//Dateipfad eventuell anpassen
	
	for(var j=2;j<7;j++)
	{
	$("#pt_pellets_tab_"+j).css({'background-color' : bg_c,'color': font_c});//restliche Tabs inaktiv setzen	
	}
	
	$("#price_trend_pellets_tab a").click(function()
	{
		var pageToLoad = $(this).attr("href");
		var css_id = $(this).attr("id");
		var change_css = '#' + css_id;
		aktuell_pt = css_id;
		
		$("#price_trend_pellets_container").load(pageToLoad);
		
		for(var i=1;i<7;i++)
		{
		$("#pt_pellets_tab_"+i).css({'background-color' : bg_c,'color': font_c});//alle Tabs inaktiv setzen
		}
		
		$(change_css).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//ausgewählten Tab aktiv setzen
		
		return false;
	});
	//hover effekt
	$("#price_trend_pellets_tab a").hover(
		function()//mousein
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//Tab über der gehovert wird aktiv setzen
		},
		function()//mouseout
		{
			var css_id = $(this).attr("id");
			$("#"+css_id).css({'background-color' : bg_c,'color': font_c});//Tab beim verlassen wieder inaktiv setzen
			$("#"+aktuell_pt).css({'background-color' : bg_c_aktive,'color': font_c_aktive});//aktuelolen Tab wieder aktiv setzen
		}	
	);
	
});