/* SWITCHABLE IMAGES */

var nextImagePath = null;

/**
 * Liefert den Element-Id Prefix fuer die DOM Elemente eines Switchable Images.
 * @param switchableImageName Abstrakter Name fuer das Bild
 * @return Element-Id Prefix fuer die passenden DOM Elemente
 */
function switchable_image_id_prefix(switchableImageName)
{
	return 'switchable_' + switchableImageName;
}

var old_image_width  = 0;
var old_image_height = 0;

var aufrufe = 0;

var fading_running = false;
/**
 * Wechselt das vorher mit 'switchable_image' erzeugte Bild mit einem neuem Bild aus.
 * Das Bild wird zunaechst in den Speicher geladen (also eventuell ausm Netz geladen), bevor der Fade-Vorgang beginnt.
 * @param switchableImageName Abstrakter Name fuer das Bild
 * @param newImagePath Bildpfad des neuen Bildes
 * @param fadeDuration uebergangsdauer vom aktuellem zum neuen Bild in Sekunden (float)
 * @param fadeScaleFromCenter Bestimmt, ob das Bild zentriert skaliert wird, sollte das neue Bild nicht die selben Masse wie das aktuelle haben.
 * @return void
 */
function switch_image(switchableImageName, newImagePath, new_width, new_height, fadeDuration, alt_text)
{
	if(!fading_running) {
	
		fading_running = true;
		
		if(fadeDuration==null)
			fadeDuration=1.0;
	
		fadeScaleFromCenter=true;
	
		if(alt_text==null)
			alt_text="";
	
		// dom-baum element ids ermitteln (je fuer DIV und IMG)
		div_id = switchable_image_id_prefix(switchableImageName) + '_div';
		img_id = switchable_image_id_prefix(switchableImageName) + '_img';
	
	//	$(div_id).style.width  = old_image_width  + "px";
	//	$(div_id).style.height = old_image_height + "px";
	
		if(newImagePath != false) {
			nextImagePath = newImagePath;
	
			// neues bild laden
			destImage = new Image();
			destImage.src = newImagePath;
		} else {
			old_img = $(img_id);
			if (old_img != null) {
				new Effect.Opacity(
	  				div_id, {
	  						from: 1.0, to: 0.0, afterFinish: function(e)
	  							{
	  								//Bild entfernen, damit es nicht faelschlicherweise als aktuelles verwendet wird
	  								old_img.remove();
									$(div_id).style.width  = "600px";
									$(div_id).style.height = "470px";
	  							}
	  				}
				);
			return;
			}
	  	}
	
	    // im onload callback spielt die musik!
	    destImage.onload = function() {
	    	
	    	// gaaaaanz veralteter callback
	    	if(nextImagePath != newImagePath)
	    		return;
	
			// aktuelles bild
			srcImage = $(img_id);
			
			// starten des fade vorgangs
	
			// neues bild in den div werfen (ist nun hintergrund = ziel)
			$(div_id).style.background = 'url("'+newImagePath+'")';
			
			if (srcImage != null) {
				new Effect.Parallel(
					[	
					 	// altes bild langsam wegfaden
						new Effect.Opacity(img_id, { sync:true, from:1.0, to:0.0 })
					],
					{
						// -> callback aufrufen lassen, der das bild aus dem div am ende des fadens in das img packt.
						afterFinish:function(e) {
	
							// 'hintergrundbild' (nun sichtbar) nach vorne setzen: in das img-element
							$(img_id).remove();
							var newImg = new Element('img', { 'src': newImagePath, 'id': img_id, alt: alt_text, title: alt_text });
							$(div_id).insert(newImg);
	
							$(img_id).style.width = new_width + "px";
							$(img_id).style.height = new_height + "px";
	
							$(div_id).style.width = new_width + "px";
							$(div_id).style.height = new_height + "px";
	
							// img wieder VOLL sichtbar machen
							$(img_id).style.opacity = '1.0';
	
							old_image_width  = new_width;
							old_image_height = new_height;
							
							fading_running = false;
							//$(div_id).style.backgroundImage = 'none';
						},
	
						duration: fadeDuration,
						queue: 'switchImageEffectQueue___name13421'
					}
				);
			} else {
				srcImage = new Element('img', { src: newImagePath, id: img_id });
				$(div_id).setOpacity(0.0);
				$(div_id).appendChild(srcImage);
				$(div_id).style.width = new_width + "px";
				$(div_id).style.height = new_height + "px";
	
				old_image_width  = new_width;
				old_image_height = new_height;
				new Effect.Opacity(div_id, { queue: 'end' });
			}
	
	    }
	
	    // starten des lade vorgangs
		destImage.src= newImagePath;
		
	}
}


var min_top = 0;
var max_top = 0;
var interval = null;
var time_interval = 50;

var speed = 2;

function initScrollableList( container_height, selectedNoOfItem, selectedId) {	
	
	
	 	if ($('scrollable_list_content').getHeight() > container_height)
		 	min_top = container_height - $('scrollable_list_content').getHeight();
		 else
		 	min_top = 0;
	 	
	 	var initialTop = 0;
	 	if ((selectedId != null) && ($(selectedId)!=null) ){
		 	initialTop = Math.floor(container_height/2) - (parseInt($(selectedId).getHeight()) * selectedNoOfItem);
		 
		 	if (initialTop > 0){
		 		initialTop = 0;
		 	}
		 
		 	if (initialTop < (min_top)){
		 		initialTop = min_top;
		 	}	
		 	

	 	}
	 			 	
	 	$('scrollable_list_content').style.top = initialTop + 'px';
}

function startScrolling(up, new_speed) {

	
	speed = new_speed;

	interval = window.setInterval(function(){
		$('scrollable_list_content').style.top =
		up 	? Math.min(parseInt($('scrollable_list_content').style.top) + speed, max_top) + 'px'
			: Math.max(parseInt($('scrollable_list_content').style.top) - speed, min_top) + 'px';}, time_interval);

}

function stopScrolling() {
	window.clearInterval(interval);
}

function selectScrollableListItem( id ) {
	$$('.selected.scrollable_list').each(function( item ) {
		item.removeClassName('selected');
	});
	$(id).addClassName('selected');
}