var layers = new Array("layerhome", "layerservice", "layerpreise", "layerkontakt");
var toggle = "hidden";
var services = new Array("vorort", "installation", "devices", "beratung", "schulung");


icon1 = new Image();
icon1.src = "./img/icon-umschlag.png";
icon2 = new Image();
icon2.src = "./img/icon-umschlag-grau.png";
icon3 = new Image();
icon3.src = "./img/icon-euro.png";
icon4 = new Image();
icon4.src = "./img/icon-euro-grau.png";
icon5 = new Image();
icon5.src = "./img/icon-wrench.png";
icon6 = new Image();
icon6.src = "./img/icon-wrench-grau.png";
icon7 = new Image();
icon7.src = "./img/icon-home.png";
icon8 = new Image();
icon8.src = "./img/icon-home-grau.png";

       function changeicon(id, icon, navtext){
          if (toggle == "hidden"){toggle = "visible";} else {toggle = "hidden"}
          document.getElementById(id).src = icon;
          document.getElementById(navtext).style.visibility = toggle;
       }

       function changelayer(id){
          for (var i = 0; i <= 3; i++){
             document.getElementById(layers[i]).style.visibility = "hidden";
          }
          document.getElementById(id).style.visibility = "visible";
       }

       function showdiv(id){
          for (var i = 0; i <= 4; i++){
             document.getElementById(services[i]).style.visibility = "hidden";
          }
          if (id != "none") {document.getElementById(id).style.visibility = "visible";}
       }

	function setevents() {

		document.getElementById('iconhome').onclick = function() { changelayer('layerhome'); };
		document.getElementById('iconhome').onmouseover = function() { changeicon('iconhome',icon7.src,'home'); };
		document.getElementById('iconhome').onmouseout = function() { changeicon('iconhome',icon8.src,'home'); };
		document.getElementById('iconprodukte').onclick = function() { changelayer('layerservice'); };
		document.getElementById('iconprodukte').onmouseover = function() { changeicon('iconprodukte',icon5.src,'produkte'); };
		document.getElementById('iconprodukte').onmouseout = function() { changeicon('iconprodukte',icon6.src,'produkte'); };
		document.getElementById('iconpreise').onclick = function() { changelayer('layerpreise'); };
		document.getElementById('iconpreise').onmouseover = function() { changeicon('iconpreise',icon3.src,'preise'); };
		document.getElementById('iconpreise').onmouseout = function() { changeicon('iconpreise',icon4.src,'preise'); };
		document.getElementById('iconkontakt').onclick = function() { changelayer('layerkontakt'); };
		document.getElementById('iconkontakt').onmouseover = function() { changeicon('iconkontakt',icon1.src,'kontakt'); };
		document.getElementById('iconkontakt').onmouseout = function() { changeicon('iconkontakt',icon2.src,'kontakt'); };

	}