/**
 * Das sind die aktuellen Vignetten, aufgeteilt nacht Vignetten-Slots
 */
var vignetten = new Object();
vignetten["vignette_left"]= ["vignetten_2_flecki.gif","vignetten_2_mau.gif","vignetten_2_nicki.gif"];
vignetten["vignette_top"]= ["vignetten_1_anna.gif", "vignetten_1_billi.gif","vignetten_1_conni.gif"];
vignetten["vignette_right1"]= ["vignetten_3_conni_mau.gif", "vignetten_3_regen.gif"];
vignetten["vignette_right2"]= ["vignetten_4_club.gif", "vignetten_4_fahr.gif", "vignetten_4_paul.gif"];
	

/**
 * Wird aufgerufen, wenn auf eine Vignette geklickt wird.
 * 
 * @param imgElem - das DOM-Object, das das <img> repräsentiert
 * @return
 */	
function vignettenClick(imgElem){
	
	// Alle Bilder für diesen Vignetten-Slot holen
	var imgs = vignetten[imgElem.id];
	
	// Src des aktuellen Bildes in Pfad und Namensanteil aufteilen
	var imgPath = imgElem.src.substr(0,imgElem.src.lastIndexOf("/"));
	var currentImgName = imgElem.src.substr(imgPath.length + 1);

	
	// Index des aktuellen Bildes im Vignetten-Slot holen 
	// und eins dazu addieren. Fall der Index am Ende des 
	// Arrays liegt, zurück auf 0 gehen
	var nextIndex = getIndex(imgs, currentImgName) +1;
	if(nextIndex >= imgs.length) nextIndex = 0;
	
	
	// Nächstes Bild aus dem Array holen und im Element setzen
	var nextImgName = imgs[nextIndex];
	imgElem.src = imgPath +"/"+ nextImgName;
	
	
}

/**
 * Sucht das Element im Array und gibt den Index
 * zurück
 * @param imgs
 * @param img
 * @return
 */
function getIndex(imgs, img){
	for (var i = 0; i < imgs.length; i++) {
		if (imgs[i] == img) {
			return i;
		}
	}
	return imgs.length;
}