s0ren/badedemo.html

## badedemo.html
<html>
    <head>
        <script type="text/javascript">

            var timerID;

            var bad = false;
            function brus(billede)
            {
                if(lys)
                {
                    billede.src = "site/bruser_våd.png";
                    bad = true;
                    document.getElementById('splash').play();
                    clearTimeout(timerID);
                }
            }

            function ikkebrus(billede)
            {
                billede.src = "site/bruser_tør.png";
                bad = false;
                document.getElementById('splash').pause()

                timerID = setTimeout(function(){
                    //alert("Mor siger: Husk at slukke lyset")
                    if(lys && !bad)
                    {
                        skiftLys();
                    }
                }, 6000);
            }

            var lys = true;
            function skiftLys()
            {
                var bruser = document.getElementById("bruser");
                var lampe = document.getElementById("lampe");
                var kontakt = document.getElementById("kontakt");
                if(lys == true)
                {
                    // slukker lyset
                    lys = false;

                    lampe.src = "site/lampe_slukket.png";
                    lampe.alt = "slukket lampe"
                    kontakt.src = "site/kontakt_slukket.png";
                    kontakt.alt = "slukket kontakt"
                    kontakt.style.color = "white";
                    document.body.style.backgroundColor = "252525";
                    bruser.style.opacity = 0.15;
                    lampe.style.opacity = 0.15;
                    kontakt.style.opacity = 0.15;

                    document.getElementById('klonk').play();
                    clearTimeout(timerID);
                }
                else
                {
                    // tænder lyset
                    lys = true;

                    lampe.src = "site/lampe_tændt.png";
                    lampe.alt = "tændt lampe"
                    kontakt.src = "site/kontakt_tændt.png";
                    kontakt.alt = "tændt kontakt"
                    kontakt.style.color = "black";
                    document.body.style.backgroundColor = "white";
                    bruser.style.opacity = 1;
                    lampe.style.opacity = 1;
                    kontakt.style.opacity = 1;

                    document.getElementById('klik').play();

                    timerID = setTimeout(function(){
                        //alert("Mor siger: Husk at slukke lyset")
                        if(lys && !bad)
                        {
                            skiftLys();
                        }
                    }, 6000);
                }

            }

        </script>
    </head>
    <body>
        <p >
            <img id="bruser" src="site/bruser_t%C3%B8r.png" height="400"
                 onmouseover="brus(this)"
                 onmouseout="ikkebrus(this)"

                 />
            <img id="lampe" src="site/lampe_slukket.png" height="400" alt="slukket lampe"/>
            <img id="kontakt" src="site/kontakt_slukket.png"
                 height="100" alt="slukket kontakt"
                 style="top: -200px;position: relative;"
                 onclick="skiftLys()" />

            <audio src="site/bruser.mp3" id="splash" loop="true"></audio>
            <audio src="site/klik.mp3" id="klik" ></audio>
            <audio src="site/klonk.mp3" id="klonk" ></audio>

        </p>

        <script type="text/javascript">
            skiftLys();
        </script>
    </body>
</html>
	<html>
	<head>
	<script type="text/javascript">

	var timerID;

	var bad = false;
	function brus(billede)
	{
	if(lys)
	{
	billede.src = "site/bruser_våd.png";
	bad = true;
	document.getElementById('splash').play();
	clearTimeout(timerID);
	}
	}

	function ikkebrus(billede)
	{
	billede.src = "site/bruser_tør.png";
	bad = false;
	document.getElementById('splash').pause()

	timerID = setTimeout(function(){
	//alert("Mor siger: Husk at slukke lyset")
	if(lys && !bad)
	{
	skiftLys();
	}
	}, 6000);
	}

	var lys = true;
	function skiftLys()
	{
	var bruser = document.getElementById("bruser");
	var lampe = document.getElementById("lampe");
	var kontakt = document.getElementById("kontakt");
	if(lys == true)
	{
	// slukker lyset
	lys = false;

	lampe.src = "site/lampe_slukket.png";
	lampe.alt = "slukket lampe"
	kontakt.src = "site/kontakt_slukket.png";
	kontakt.alt = "slukket kontakt"
	kontakt.style.color = "white";
	document.body.style.backgroundColor = "252525";
	bruser.style.opacity = 0.15;
	lampe.style.opacity = 0.15;
	kontakt.style.opacity = 0.15;

	document.getElementById('klonk').play();
	clearTimeout(timerID);
	}
	else
	{
	// tænder lyset
	lys = true;

	lampe.src = "site/lampe_tændt.png";
	lampe.alt = "tændt lampe"
	kontakt.src = "site/kontakt_tændt.png";
	kontakt.alt = "tændt kontakt"
	kontakt.style.color = "black";
	document.body.style.backgroundColor = "white";
	bruser.style.opacity = 1;
	lampe.style.opacity = 1;
	kontakt.style.opacity = 1;

	document.getElementById('klik').play();

	timerID = setTimeout(function(){
	//alert("Mor siger: Husk at slukke lyset")
	if(lys && !bad)
	{
	skiftLys();
	}
	}, 6000);
	}

	}

	</script>
	</head>
	<body>
	<p >
	<img id="bruser" src="site/bruser_t%C3%B8r.png" height="400"
	onmouseover="brus(this)"
	onmouseout="ikkebrus(this)"

	/>
	<img id="lampe" src="site/lampe_slukket.png" height="400" alt="slukket lampe"/>
	<img id="kontakt" src="site/kontakt_slukket.png"
	height="100" alt="slukket kontakt"
	style="top: -200px;position: relative;"
	onclick="skiftLys()" />

	<audio src="site/bruser.mp3" id="splash" loop="true"></audio>
	<audio src="site/klik.mp3" id="klik" ></audio>
	<audio src="site/klonk.mp3" id="klonk" ></audio>

	</p>

	<script type="text/javascript">
	skiftLys();
	</script>
	</body>
	</html>