/**
 * @author Sven Keutel
 * @version 1.0
 * @requires JQuery 1.4.2
 * @desc Kleines JavaScript um eine Scrollansicht von verschiedenen Bildern zu haben
 * Es muss beachtet werden, dass die Bilder alle die gleichen Abmaßen haben.
 * 
 * @example
 * <a href="javascript:">
 * <div class="box">
 * 	<div id="scroll">
 * 		<table border="0" cellspacing="0" cellpadding="0">
 * 			<tr>	
 * 				<td><img src="images/testimg1.jpg" /></td>
 * 				<td><img src="images/testimg1.jpg" /></td>
 * 				<td><img src="images/testimg1.jpg" /></td>
 * 				<td><img src="images/testimg1.jpg" /></td>
 * 				<td><img src="images/testimg1.jpg" /></td>
 * 			</tr>
 *		</table>
 *	</div>
 * </div>
 * <script type="text/javascript">
 * 	$(document).ready(function() {
 * 		scroll_init('scroll');
 * 	});
 * </script>
 */
var init_scroll = false; // Status über die initialisierung
var images; // Array der Grafiken welche geladen werden können
var viewd_images = 0; // Anzahl der Grafiken die im Sichtbereich sind
//var currentpos = 0; // Speichert die aktuelle Position des Kreisels
var current_image = 0; //Derzeitiges Bild welches verwendet wird.



function scroll_init(ele_id) {
	if(init_scroll) {
		alert('multible init');
		return false;
	}
	
	ele = document.getElementById(ele_id);
	startpoint = ele.offsetLeft;
	
	//Ermitteln der Bilder im Scrollbereich
	images = ele.getElementsByTagName('td');
	
	//Können wir bereits eine Größenordnung feststellen?
	//Wenn nicht, dann setzen wir nichts und verlassen die Routine direkt. 
	if(images[0].offsetWidth > 10) {
		init_scroll = true;
	} else {
		return false;
	}
	
	
	//Berechnen wieviele Grafiken zu sehen sind	
	viewd_images = Math.round(ele.offsetWidth / images[0].offsetWidth);
	
	
	//Okay wir wissen nun wieviele Grafiken angezeigt werden
	//Damit der "Kreis" auch funktioniert müssen die ersten Bilder auch an das Ende gesetzt werden
	//Dabei ist zu beachten, dass man 1 Bild abziehen muss
	//Rufen wir also erst mal die Funktion auf welche die hinteren Bilder hinzufügt.
	scroll_add_pictures(ele_id);
	
	
	return true;
}

function scroll_get_pos(image_number) {
	return images[current_image].offsetWidth * image_number;
}

function scroll_picture(ele_id,direction) {
	if(!init_scroll) {
		scroll_init(ele_id);
	}
	
	if((current_image+viewd_images) == (images.length) && direction == 'next') {
		//Sind wir nun wohl am Ende angekommen!
		
		//Sprung an den Anfang!
		jump_to(ele_id,0);
		current_image = 1;
		
		//Ein Slide nach rechts.
		scroll_to(ele_id,scroll_get_pos(current_image));
		return false;
	}
	
	if(direction == 'next') {
		current_image = current_image + 1
	}
	
	if(direction == 'prev') {
		//Sind wir schon am Anfang angelangt?
		if(current_image == 0) {
			//Das Wievielte Bild entspricht diesem hier??
			var temp = images.length - viewd_images;
			jump_to(ele_id,scroll_get_pos(temp));
			current_image = temp-1;
			scroll_to(ele_id,scroll_get_pos(current_image));
			return false;
		}
		current_image = current_image - 1
	}
	
	if(!images[current_image]) {
		return false;
	}
	
	var new_pos = scroll_get_pos(current_image);
	scroll_to(ele_id,new_pos);
	return true;
}

function jump_to(ele_id,new_pos) {
	var ele = document.getElementById(ele_id);
	ele.style.marginLeft = '-'+new_pos+'px';
}

function scroll_to(ele_id,new_pos) {
	$("#scroll").animate({marginLeft: "-"+new_pos+"px"}, 250);
	//currentpos = new_pos;
}


/**
 * Fügt dem Scrollbereich Grafiken vom Anfang an das Ende für ein flüssiges "Kreiseln"
 * @param ele_id id of the element
 * @return
 */
function scroll_add_pictures(ele_id) {
	var i =0;
	
	//Ermitteln wieviele Grafiken hinten dran müssen
	var counter = viewd_images;
	
	//Case selektieren
	var ele = document.getElementById(ele_id);
	
	//Erst mal die Tabelle ermitteln
	var table_tr = ele.getElementsByTagName('tr')[0];
	
	for(i=0;i<counter;i++) {
		//Bild Selektieren und direkt clonen
		var image = images[i].getElementsByTagName('img')[0].cloneNode(true);
		
		//TD der Tabelle selektiern
		var newTD = document.createElement("td");
		
		//Grafik in das TD feld hinzufügen
		newTD.appendChild(image);
		
		//TD in die Tabelle einpflegen
		table_tr.appendChild(newTD)
	}
}