window.addEvent('domready', function() {

    var accordion = new Accordion('h3.toggler', 'div.element', {
        opacity: false,
        onActive: function(toggler, element){
            //toggler.setStyle('color', '#ff3300');
        },
     
        onBackground: function(toggler, element){
            //toggler.setStyle('color', '#222');
        }
    }, $('accordion'));

    var projectImage1 = $('project1');
    projectImage1.addEvent("mouseenter", function(event) {
        document.getElementById('img1-on').style.display = "block";
        document.getElementById('img1-off').style.display = "none";
    });
    projectImage1.addEvent("mouseleave", function(event) {
        document.getElementById('img1-on').style.display = "none";
        document.getElementById('img1-off').style.display = "block";
    });

    var projectImage2 = $('project2');
    projectImage2.addEvent("mouseenter", function(event) {
        document.getElementById('img2-on').style.display = "block";
        document.getElementById('img2-off').style.display = "none";
    });
    projectImage2.addEvent("mouseleave", function(event) {
        document.getElementById('img2-on').style.display = "none";
        document.getElementById('img2-off').style.display = "block";
    });

    var projectImage3 = $('project3');
    projectImage3.addEvent("mouseenter", function(event) {
        document.getElementById('img3-on').style.display = "block";
        document.getElementById('img3-off').style.display = "none";
    });
    projectImage3.addEvent("mouseleave", function(event) {
        document.getElementById('img3-on').style.display = "none";
        document.getElementById('img3-off').style.display = "block";
    });

    var projectImage4 = $('project4');
    projectImage4.addEvent("mouseenter", function(event) {
        document.getElementById('img4-on').style.display = "block";
        document.getElementById('img4-off').style.display = "none";
    });
    projectImage4.addEvent("mouseleave", function(event) {
        document.getElementById('img4-on').style.display = "none";
        document.getElementById('img4-off').style.display = "block";
    });

    var projectImage5 = $('project5');
    projectImage5.addEvent("mouseenter", function(event) {
        document.getElementById('img5-on').style.display = "block";
        document.getElementById('img5-off').style.display = "none";
    });
    projectImage5.addEvent("mouseleave", function(event) {
        document.getElementById('img5-on').style.display = "none";
        document.getElementById('img5-off').style.display = "block";
    });

    var projectImage6 = $('project6');
    projectImage6.addEvent("mouseenter", function(event) {
        document.getElementById('img6-on').style.display = "block";
        document.getElementById('img6-off').style.display = "none";
    });
    projectImage6.addEvent("mouseleave", function(event) {
        document.getElementById('img6-on').style.display = "none";
        document.getElementById('img6-off').style.display = "block";
    });

    var projectImage7 = $('project7');
    projectImage7.addEvent("mouseenter", function(event) {
        document.getElementById('img7-on').style.display = "block";
        document.getElementById('img7-off').style.display = "none";
    });
    projectImage7.addEvent("mouseleave", function(event) {
        document.getElementById('img7-on').style.display = "none";
        document.getElementById('img7-off').style.display = "block";
    });

    var projectImage8 = $('project8');
    projectImage8.addEvent("mouseenter", function(event) {
        document.getElementById('img8-on').style.display = "block";
        document.getElementById('img8-off').style.display = "none";
    });
    projectImage8.addEvent("mouseleave", function(event) {
        document.getElementById('img8-on').style.display = "none";
        document.getElementById('img8-off').style.display = "block";
    });

    var projectImage9 = $('project9');
    projectImage9.addEvent("mouseenter", function(event) {
        document.getElementById('img9-on').style.display = "block";
        document.getElementById('img9-off').style.display = "none";
    });
    projectImage9.addEvent("mouseleave", function(event) {
        document.getElementById('img9-on').style.display = "none";
        document.getElementById('img9-off').style.display = "block";
    });

    var projectImage10 = $('project10');
    projectImage10.addEvent("mouseenter", function(event) {
        document.getElementById('img10-on').style.display = "block";
        document.getElementById('img10-off').style.display = "none";
    });
    projectImage10.addEvent("mouseleave", function(event) {
        document.getElementById('img10-on').style.display = "none";
        document.getElementById('img10-off').style.display = "block";
    });

    var projectImage11 = $('project11');
    projectImage11.addEvent("mouseenter", function(event) {
        document.getElementById('img11-on').style.display = "block";
        document.getElementById('img11-off').style.display = "none";
    });
    projectImage11.addEvent("mouseleave", function(event) {
        document.getElementById('img11-on').style.display = "none";
        document.getElementById('img11-off').style.display = "block";
    });

    var projectImage12 = $('project12');
    projectImage12.addEvent("mouseenter", function(event) {
        document.getElementById('img12-on').style.display = "block";
        document.getElementById('img12-off').style.display = "none";
    });
    projectImage12.addEvent("mouseleave", function(event) {
        document.getElementById('img12-on').style.display = "none";
        document.getElementById('img12-off').style.display = "block";
    });
});