window.addEvent('domready', function(){

	// initial Request
	 request = new Request.JSON({
			url:'index.php?eID=tx_digipetsprojekte&action=initial&pid_list='+ $('projekt_box').get('name')+'&showelem='+ $('projekt_auswahl_box').get('name'),
			data: {'start': 1},
			onComplete: function(jsonObj) {
				addValues(jsonObj.results, jsonObj.anzahl);				
				thumb_click();
				create_pagebrowser(jsonObj.entries_per_page, 1, jsonObj.anzahl);			
			}
	}).send();	
	
	// Beim ersten Seitenaufruf muss die erste Checkbox markiert sein, nur wenn kein Projekt uaf der Startseite ausgewählt war
	if ($('projekt_auswahl_box').get('name') == '0')
	{
		$('tx_digipetsprojekte_optionsform').getFirst('input').set('checked', 'checked');
	}		
		
	// DOM aufbauen	
	var detailImage_ul = $('kwicks');
	//var detailDesc_div = $('tx_digipetsprojekte_detailDescription');
	var thumbnails_ul = $('projekt_auswahl');;
	
	
	/**
	* Folgende Funktion l�d die Thumbnails der Objekte der aktuell ausgew�hlten
	* Seite. Sie ruft die Funktion set_detail_object auf, wodurch das erste Objekt automatisch
	* dargestellt wird.	
	*/
	
	var addValues = function(values, anzahl) {
			   if (anzahl >> 0)
			   {
			    values.each(function(item_value) {
			    
			    	//current/hide class setzen:
			    	if (item_value.count == 1)
			    	{
			    	  obj_id = item_value.uid;
			    	}		   
			    	
			    	
			    	//grüner Rahmen um beim Start ausgewähltes Thumbnail
			    	selectedClass = '';
			    	if (item_value.uid == obj_id)
			    	{
			    	 selectedClass = ' select';
			    	}

			    
															
	                // 5. oder letztes Thumbnail-Element wird mit anderer Klasse versehen															
					if (item_value.count == 5 || item_value.count == anzahl)
					{
					var thumbnails = new Element('li', {  'id': 'tx_digipetsprojekte_thumbnails_'+item_value.uid,
														  'html': '<img name="'+item_value.uid+'" src="'+item_value.thumbnail+'" width="100" height="50" class="projekttip_last'+selectedClass+'" alt="'+item_value.thumb_title+'" title="'+	item_value.thumb_title+'"/>'}).inject(thumbnails_ul);
					}
					else
					{
					var thumbnails = new Element('li', {  'id': 'tx_digipetsprojekte_thumbnails_'+item_value.uid,
														  'html': '<img name="'+item_value.uid+'" src="'+item_value.thumbnail+'" width="100" height="50" class="projekttip'+selectedClass+'" alt="'+item_value.thumb_title+'" title="'+	item_value.thumb_title+'"/>'}).inject(thumbnails_ul);		
					}			
		   		 });
				 
				// ThumbnailTooltips Klasse setzen
				set_projekt_thumb_tips();
				
				//1. DetailObjekt der Seite anzeigen			
				set_detail_object(obj_id);	 
				
				unset_empty_object();
				 		
	     	}
			else
			{
				set_empty_object();
				
			}							
		
	};	
	
	/**
	* Folgende Funktion ermittelt die daten des Objekts, das aktuell angezeigt werden soll.
	* Kann durch klick auf ein Thumnail aufgerufen werden oder durch Navigation �ber den Pagebrowser.
	* Zudem wird sie initial aufgerufen beim Seitenload	
	*/
	function set_detail_object(obj_id) {
	
		detail_request = new Request.JSON({
			url:'index.php?eID=tx_digipetsprojekte&action=get_object',
			data: {'obj_id': obj_id},
			onComplete: function(jsonObj) {
				set_object_values(jsonObj.results);																		
			}
		}).send();	


		var set_object_values = function(values) {
		
				
			$('projekt_head').set('text', values.title);
		
			//Beschreibung1 einf�gen (Vor den Bildern);								
			$('projekt_toptext').set('html', values.text);
																												
			//Beschreibung2 einf�gen (Nach den Bildern);
			$('projekt_subtext').set('html', values.subtext);
						
			//img_detail							
			anz_images = 0;
			for (i=0; i<values.img_detail.length; i++)
			{
			
				// tooltip nur anzeigen wenn != leer
				if (values.img_detail_title[i+1] != "")
				{
					bubble_class = 'class= "tipbubble"';
				}
				else
				{
					bubble_class = 'class= "tipbubble_invisible"';
				}
				
				
			    var detailImg  = new Element('li', { 'class': ' kwick',
											 'html' : '<div '+bubble_class+'><div>'+values.img_detail_title[i+1]+'</div></div><div class="kwick_extra_box"><a href="'+ values.img_gross[i]+'" rel="lightbox[projekte]" title="'+values.img_detail_title[i+1]+'"><img src="'+ values.img_detail[i]+'"  height="200" alt="'+values.img_detail_title[i+1]+'"></a></div></li>'}).inject(detailImage_ul);				
				
				anz_images++;	
			}
			
			
					
			// Slider starten - Muss jedesmal neu gestartet werden, da der Dom gerade erst mit den relevanten Daten und Bildern gef�llt wurde
			kwicks_start(anz_images);
			Mediabox.scanPage();	
		};
	}
	
	/**
	 * Setzt leeren DOM, falls keine Checkbox gewählt
	 * oder kein Objekt gefunden wurde. 
	 */
	function set_empty_object()
	{
		$('detailbox').removeClass('sichtbar');
		$('detailbox').addClass('unsichtbar');

		$('noproject').removeClass('unsichtbar');
		$('noproject').addClass('sichtbar');
	}
	
	/**
	 * Versteckt das Platzhalter DIV für leeren Content
	 * Macht das Objekt Div sichtbar
	 */
	function unset_empty_object()
	{
		$('detailbox').removeClass('unsichtbar');
		$('detailbox').addClass('sichtbar');

		$('noproject').removeClass('sichtbar');
		$('noproject').addClass('unsichtbar');
	}
	
	/**
	* Leert DOM Elemente f�r das Detailobject
	*/
	function delete_detail_object()
	{
		$('projekt_head').empty();									
		$('projekt_toptext').empty();
		$('projekt_subtext').empty();
		detailImage_ul.empty();
	}
	
	/**
	* Leert DOM Elemente, die den Thumbnailbrowser enthalten (Navigation)
	*/
	function delete_thumbs_object()
	{
		thumbnails_ul.empty();
		
		
	}
	
	// HTTP-Request nach Formsubmit	(Bei klick auf Checkbox)(
	$('tx_digipetsprojekte_optionsform').getElements('input').addEvent('click', function(e) {	
		reload_data(1);						
	});
		
	/**
	* Daten neu laden vom Server
	*/
	function reload_data(start)
	{
		sp = start;
	// Bisherige Daten l�schen		

		
		var request2 = new Request.JSON({
			url:'index.php?eID=tx_digipetsprojekte&action=do_request&start='+sp+'&pid_list='+$('projekt_box').get('name'),
			//data: {'pid_list': $('projekt_box').get('name')},
			onComplete: function(jsonObj) {
				delete_detail_object();
				delete_thumbs_object();
				addValues(jsonObj.results, jsonObj.anzahl);
				thumb_click();
				create_pagebrowser(jsonObj.entries_per_page, sp, jsonObj.anzahl);
			}
		}).send($('tx_digipetsprojekte_optionsform'));
	}
	
	/**
	* Handelt klicks auf die Thumbnails
	*/		
	function thumb_click()
	{		 
		$('projekt_auswahl').getElements('img').addEvent('click', function(e) {		 		 
			$$('#projekt_auswahl img').removeClass('select');
	 	 	t_id = this.name;
	 	 	delete_detail_object();
	 	 	set_detail_object(t_id);		
	 	 	//grüner Rahmen ums Thumbnail setzen
	 	 	this.addClass('select');
	 	 						
		}); 
	}	

	/**
	*	Funktion baut den Pagebrowser und stellt diesen dar. 
	*   Navigiert durch die Datensatzgruppen. Die Anzahl der dargestellten
	*   Projekte gleichzeitig wird im ts festgelegt. F�r jede Gruppe wird ein
	*	Reload durchgef�hrt 
	*/
	function create_pagebrowser(entries_page, start_entry, entries_total)
	{
		var projekte_browser = $('projekt_navi_box');		
			
	
		// Anzahl der notwendigen Seiten  ceil rundet immer auf
		anz_pages = Math.ceil(entries_total / entries_page);
			
		akt_page = Math.floor(start_entry / entries_page) + 1;
		
		if (anz_pages > 0) {		
			$('projekt_nummer').set('html',  akt_page+ ' von ' + anz_pages );
		} else{
			$('projekt_nummer').set('html',  '0 von 0');
		}
		
		if (akt_page >= 1)
		{
			$('projekt_zurueck').set('name', akt_page); 
		}
		else
		{
			$('projekt_zurueck').set('name', 0);
		}
		
		
		if (akt_page < anz_pages)
		{
			$('projekt_vor').set('name', (akt_page  +1)); 
		}
		else
		{
			$('projekt_vor').set('name', (anz_pages+1)); 
		}
	
	}
		$('projekt_zurueck').addEvent('click', function(e) {								
				new Event(e).stop();
				if ($('projekt_zurueck').get('name') > 1)
				{									
					reload_data(((($('projekt_zurueck').get('name') - 2) * 5)+1));
				}
		});
		
		$('projekt_vor').addEvent('click', function(e) {								
				new Event(e).stop();
					//alert(anz_pages);
			   	if ($('projekt_vor').get('name') <= anz_pages)
				{														
					 													
					reload_data(((($('projekt_vor').get('name') - 1) * 5)+1));
				}
		});
	
}); // End DOM Ready