<!-- //replace cast images on mouse click with the images in costumes

    var castMembers=20; //Anzahl der cast members
		var castUp = new Array(castMembers); //
		var castDown = new Array(castMembers); //
		
		//window.onload=rplcm;
		
		for (i=0;i<castMembers;i++) //Create an Image objects
		{
		 castUp[i] = new Image;
		 castDown[i] = new Image;
		}
		
		//preload default images (onmouseup)
		castUp[0].src = 'cast/david.jpg';
		castUp[1].src = 'cast/stefanie.jpg';
		castUp[2].src = 'cast/anna.jpg';
		castUp[3].src = 'cast/wilma.jpg';
		castUp[4].src = 'cast/pia.jpg';
		castUp[5].src = 'cast/charlotte.jpg';
		castUp[6].src = 'cast/julian.jpg';
		castUp[7].src = 'cast/annaB.jpg';
		castUp[8].src = 'cast/marie.jpg';
		castUp[9].src = 'cast/kathrin.jpg';
		castUp[10].src = 'cast/anne.jpg';
		castUp[11].src = 'cast/janine.jpg';
		castUp[12].src = 'cast/selina.jpg';
		castUp[13].src = 'cast/leonie.jpg';
		castUp[14].src = 'cast/lia.jpg';
		castUp[15].src = 'cast/antonia.jpg';
		castUp[16].src = 'cast/lena.jpg';
		castUp[17].src = 'cast/franziska.jpg';
		castUp[18].src = 'cast/johanna.jpg';
		castUp[19].src = 'cast/katharina.jpg';		

		//preload costume images (onmousedown)
		//the down images should use same name as the up images + '_D': e.g.:david.jpg -> david_D.jpg
		for (i=0;i<castMembers;i++)
		{
		 castDown[i].src = castUp[i].src.replace(".jpg","_D.jpg");
		}
/*		
		castDown[0].src = 'cast/david_D.jpg';
		castDown[1].src = 'cast/stefanie_D.jpg';
		castDown[2].src = 'cast/anna_D.jpg';
		castDown[3].src = 'cast/wilma_D.jpg';
		castDown[4].src = 'cast/pia_D.jpg';
		castDown[5].src = 'cast/charlotte_D.jpg';
		castDown[6].src = 'cast/julian_D.jpg';
		castDown[7].src = 'cast/annaB_D.jpg';
		castDown[8].src = 'cast/marie_D.jpg';
		castDown[9].src = 'cast/kathrin_D.jpg';
		castDown[10].src = 'cast/anne_D.jpg';
		castDown[11].src = 'cast/janine_D.jpg';
		castDown[12].src = 'cast/selina_D.jpg';
		castDown[13].src = 'cast/leonie_D.jpg';
		castDown[14].src = 'cast/lia_D.jpg';
		castDown[15].src = 'cast/antonia_D.jpg';
		castDown[16].src = 'cast/lena_D.jpg';
		castDown[17].src = 'cast/franziska_D.jpg';
		castDown[18].src = 'cast/johanna_D.jpg';
		castDown[19].src = 'cast/katharina_D.jpg'; */

    			
/************************************************************************
Replace cast member on mousedown. 
The function is called before the closing </body> tag. (alternative to window.onload event handler)
*************************************************************************/
		
    function replaceCastMember() 
    {
    	var arrCastMembers = document.getElementsByName("castM"); //save all cast members having name="castM" in an array
    	//alert ("Anzahl der Cast-members="+arrCastMembers.length);
    	
    	//capture onmousedown/up event to replace the image with the one in costume    	
    	arrCastMembers[0].onmousedown=function () { this.childNodes[1].src=castDown[0].src; }
    	arrCastMembers[0].onmouseup=function () { this.childNodes[1].src=castUp[0].src; }
    	arrCastMembers[1].onmousedown=function () { this.childNodes[1].src=castDown[1].src; }
    	arrCastMembers[1].onmouseup=function () { this.childNodes[1].src=castUp[1].src; }
    	arrCastMembers[2].onmousedown=function () { this.childNodes[1].src=castDown[2].src; }
    	arrCastMembers[2].onmouseup=function () { this.childNodes[1].src=castUp[2].src; }
    	arrCastMembers[3].onmousedown=function () { this.childNodes[1].src=castDown[3].src; }
    	arrCastMembers[3].onmouseup=function () { this.childNodes[1].src=castUp[3].src; }
      arrCastMembers[4].onmousedown=function () { this.childNodes[1].src=castDown[4].src; }
    	arrCastMembers[4].onmouseup=function () { this.childNodes[1].src=castUp[4].src; }
    	arrCastMembers[5].onmousedown=function () { this.childNodes[1].src=castDown[5].src; }
    	arrCastMembers[5].onmouseup=function () { this.childNodes[1].src=castUp[5].src; }
    	arrCastMembers[6].onmousedown=function () { this.childNodes[1].src=castDown[6].src; }
    	arrCastMembers[6].onmouseup=function () { this.childNodes[1].src=castUp[6].src; }
    	arrCastMembers[7].onmousedown=function () { this.childNodes[1].src=castDown[7].src; }
    	arrCastMembers[7].onmouseup=function () { this.childNodes[1].src=castUp[7].src; }
    	arrCastMembers[8].onmousedown=function () { this.childNodes[1].src=castDown[8].src; }
    	arrCastMembers[8].onmouseup=function () { this.childNodes[1].src=castUp[8].src; }
    	arrCastMembers[9].onmousedown=function () { this.childNodes[1].src=castDown[9].src; }
    	arrCastMembers[9].onmouseup=function () { this.childNodes[1].src=castUp[9].src; }
    	arrCastMembers[10].onmousedown=function () { this.childNodes[1].src=castDown[10].src; }
    	arrCastMembers[10].onmouseup=function () { this.childNodes[1].src=castUp[10].src; }
    	arrCastMembers[11].onmousedown=function () { this.childNodes[1].src=castDown[11].src; }
    	arrCastMembers[11].onmouseup=function () { this.childNodes[1].src=castUp[11].src; }
    	arrCastMembers[12].onmousedown=function () { this.childNodes[1].src=castDown[12].src; }
    	arrCastMembers[12].onmouseup=function () { this.childNodes[1].src=castUp[12].src; }
    	arrCastMembers[13].onmousedown=function () { this.childNodes[1].src=castDown[13].src; }
    	arrCastMembers[13].onmouseup=function () { this.childNodes[1].src=castUp[13].src; }
    	arrCastMembers[14].onmousedown=function () { this.childNodes[1].src=castDown[14].src; }
    	arrCastMembers[14].onmouseup=function () { this.childNodes[1].src=castUp[14].src; }
    	arrCastMembers[15].onmousedown=function () { this.childNodes[1].src=castDown[15].src; }
    	arrCastMembers[15].onmouseup=function () { this.childNodes[1].src=castUp[15].src; }
    	arrCastMembers[16].onmousedown=function () { this.childNodes[1].src=castDown[16].src; }
    	arrCastMembers[16].onmouseup=function () { this.childNodes[1].src=castUp[16].src; }
    	arrCastMembers[17].onmousedown=function () { this.childNodes[1].src=castDown[17].src; }
    	arrCastMembers[17].onmouseup=function () { this.childNodes[1].src=castUp[17].src; }
    	arrCastMembers[18].onmousedown=function () { this.childNodes[1].src=castDown[18].src; }
    	arrCastMembers[18].onmouseup=function () { this.childNodes[1].src=castUp[18].src; }
    	arrCastMembers[19].onmousedown=function () { this.childNodes[1].src=castDown[19].src; }
    	arrCastMembers[19].onmouseup=function () { this.childNodes[1].src=castUp[19].src; }
      

    	/*for (var j=0; j < arrCastMembers.length; j++) //loop does not work?! why not?
    	{
    		//capture onmousedown event to replace the image with the one in costume
    		//arrCastMembers[j].onmousedown=function () { this.childNodes[1].src=castDown[j].src; };
    		//capture onmouseup event to restore the image with the one without costume
    		//arrCastMembers[j].onmouseup=function () { this.childNodes[1].src=castUp[j].src; };
    	}*/
     return false;	
    }
    