$(document).ready(function() {

	 $("#wrapper .roof1").mouseover(function() {
		$("#wrapper .header").find(".selectedRoof1").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof2").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof3").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof4").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof5").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof6").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").css({'background-position' : '70% 0'});
		}).mouseout(function(){
			$("#wrapper .header").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof1").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof2").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof3").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof4").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof5").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof6").attr("style", "none");
	 });
	 
	 $("#wrapper .roof2").mouseover(function() {
		$("#wrapper .header").find(".selectedRoof1").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof2").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof3").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof4").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof5").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof6").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").css({'background-position' : '70% -414px'});
		}).mouseout(function(){
			$("#wrapper .header").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof1").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof2").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof3").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof4").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof5").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof6").attr("style", "none");
	 });

	 
	 $("#wrapper .roof3").mouseover(function() {
		$("#wrapper .header").find(".selectedRoof1").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof2").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof3").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof4").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof5").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof6").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").css({'background-position' : '70% -828px'});
			}).mouseout(function(){
			$("#wrapper .header").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof1").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof2").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof3").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof4").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof5").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof6").attr("style", "none");
	 });
	 
	 $("#wrapper .roof4").mouseover(function() {
		$("#wrapper .header").find(".selectedRoof1").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof2").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof3").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof4").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof5").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof6").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").css({'background-position' : '70% -1242px'});
			}).mouseout(function(){
			$("#wrapper .header").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof1").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof2").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof3").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof4").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof5").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof6").attr("style", "none");
	 });
	 
	 $("#wrapper .roof5").mouseover(function() {
		$("#wrapper .header").find(".selectedRoof1").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof2").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof3").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof4").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof5").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof6").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").css({'background-position' : '70% -1656px'});
			}).mouseout(function(){
			$("#wrapper .header").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof1").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof2").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof3").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof4").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof5").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof6").attr("style", "none");
	 });
	 
	 $("#wrapper .roof6").mouseover(function() {
		$("#wrapper .header").find(".selectedRoof1").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof2").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof3").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof4").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof5").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").find(".selectedRoof6").css('background-image', 'url(images/roofs.png)');
		$("#wrapper .header").css({'background-position' : '70% -2070px'});
			}).mouseout(function(){
			$("#wrapper .header").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof1").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof2").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof3").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof4").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof5").attr("style", "none");
			$("#wrapper .header").find(".selectedRoof6").attr("style", "none");
	 });
	 
	 $(".selectedRoof1").mouseover (function() {
	 	$(".selectedRoof1").attr("style", "none");
	 });
	 
	 $(".selectedRoof2").mouseover (function() {
	 	$(".selectedRoof2").attr("style", "none");
	 });
	 
	 $(".selectedRoof3").mouseover (function() {
	 	$(".selectedRoof3").attr("style", "none");
	 });
	 
	 $(".selectedRoof4").mouseover (function() {
	 	$(".selectedRoof4").attr("style", "none");
	 });
	 
	 $(".selectedRoof5").mouseover (function() {
	 	$(".selectedRoof5").attr("style", "none");
	 });
	 
	 $(".selectedRoof6").mouseover (function() {
	 	$(".selectedRoof6").attr("style", "none");
	 });

});