// start function "handleClickEvent" when DOM is ready
window.addEvent('domready', function() {
	// parameter is false because no clickEvents are set after DOM is ready
	handleClickEvent(false);
});


// This function adds clickEvents and removes them first, when an Thumbelement
// is exchanged after an AJAX-Response
// This is necessary because, after exchangeing the clicked thumbElement
// it has no clickEvent and when you just add it new, other thumbs get an additional clickEvent.
// The function call handleClickEvent(false) just adds clickEvents
// The function call handleClickEvent(true) removes all clickEvents bevor new clickEvents are added
function handleClickEvent(cleanEvent) {	
	// remove clickEvents when cleanEvent is true
	if (cleanEvent) {
//		$$('div.thumb_element').removeEvent('click', slideShowClick);
		$$('div.thumb_element').removeEvents('click');
	}
	// Adds click-Event to the Thumbnails of the Slideshow
	$$('div.thumb_element').addEvent('click', slideShowClick);
}


//
var slideShowClick = function() {
	// set variables
	var slideShowImage = '';
	var slideShowThumb = '';
	//-------------------------------------------------------------
	// get id of the slideshow main image and create an URL parameter out of it
	// structure of the id is "1id_2id_3id"
	// 1id is the current page id
	// 2id is the current sys_language_uid
	// 3id is the uid of the slideshow main image
	$$('div.slideshow_image').each(function(element) {
		slideShowImage = '&slideshowimage='+element.id;
	});
	// get the id/uid of the slideshow clicked thumb and create an URL parameter out of it
	slideShowThumb = '&slideshowthumb='+this.id;

	var loader = $('slideshow_loader').empty().addClass('slideshow_ajax_loading');
	//-------------------------------------------------------------
	// get the id of the thumbElementWrapper
	var thumbID = this.parentNode.id;
	// get the wrapper of the main image
	var slideimage = $('thextcollection_slideshow');
	// get the wrapper of the thumb
	var slidethumb = $(thumbID);
	//-------------------------------------------------------------
	// set send properties
	this.set('send', {
		// definition when the sended request gets an response
		onComplete: function(response) {
			loader.removeClass('slideshow_ajax_loading');
			// the response is formatted in an JSON structure
			// and this will decode the JSON structure to JavaScript object structure
			var obj = JSON.decode(response);

			// fade out main image, replace it with the new one and fade in again
			slideimage.fade('hide');
			slideimage.set('html', obj.slideShowImageElement);
			slideimage.fade(1);

			// select img-element 
//			var element = $$('#' + slideimage.id + ' img');
			// add load-event to the first img-element to fade it in when image is completely loaded
//			element[0].addEvent('load', function(){
//				slideimage.fade(1);
//			});			



			// fade out thumb image, replace it with the new one and fade in again
			slidethumb.fade('hide');
			slidethumb.set('html', obj.slideShowThumbElement);
			slidethumb.fade(1);


			// select img-element and add load-event to fade it in when image is completely loaded
//			$$('#' + slidethumb.id + ' img').addEvent('load', function(){
//				slidethumb.fade(1);
//			});


			// call the handleClickEvent with a true parameter, to remove all clickEvents and set them new.
			handleClickEvent(true);
		}
	});
	// send the following request
	this.send('index.php?eID=user_thextcollection_pi1_slideshow'+slideShowImage+slideShowThumb);
}