(function() {


    var wohnung = document.querySelectorAll(".wohnung-img"),
        kueche = document.querySelectorAll(".kueche-img"),
        bad = document.querySelectorAll(".bad-img"),
        index = 0;


    // add class 'active' to the element
    var setActive = function (element) {
        if(document.getElementById(element).classList) {
            document.getElementById(element).classList.add("active");
        } else {
            document.getElementById(element).setAttribute("class", "active");
        }
    };

    // remove class 'active' from element
    var setDeactive = function (element) {
        if(document.getElementById(element).classList) {
            document.getElementById(element).classList.remove("active");
        } else {
            document.getElementById(element).removeAttribute("class");
        }
    };


    for (index=0; index <= wohnung.length-1; index++) {
        if (wohnung[index].addEventListener) {
            wohnung[index].addEventListener("mouseenter", function(){setActive("wohnung")}, false);
            wohnung[index].addEventListener("mouseleave", function(){setDeactive("wohnung")}, false);
        } else {
            wohnung[index].attachEvent("onmouseenter", function(){setActive("wohnung")});
            wohnung[index].attachEvent("onmouseleave", function(){setDeactive("wohnung")});
        }
    }
    for (index=0; index <= kueche.length-1; index++) {
        if (kueche[index].addEventListener) {
            kueche[index].addEventListener("mouseenter", function(){setActive("kueche")}, false);
            kueche[index].addEventListener("mouseleave", function(){setDeactive("kueche")}, false);
        } else {
            kueche[index].attachEvent("onmouseenter",  function(){setActive("kueche")});
            kueche[index].attachEvent("onmouseleave",  function(){setDeactive("kueche")});
        }
    }
    for (index=0; index <= bad.length-1; index++) {
        if (bad[index].addEventListener) {
            bad[index].addEventListener("mouseenter", function(){setActive("bad")}, false);
            bad[index].addEventListener("mouseleave", function(){setDeactive("bad")}, false);
        } else {
            bad[index].attachEvent("onmouseenter", function(){setActive("bad")});
            bad[index].attachEvent("onmouseleave", function(){setDeactive("bad")});
        }
    }


}());