/**
 * jQuery Plugin: TYPO3 Category Slider
 * 
 * Implements an AJAX driven image slider based on TYPO3 content.
 *
 * @author Michael Vogelmann
 *  
 */
(function( $ ){

	var settings = {
		data: null,
		wrap: 'div#sliderWrap',
		slideDuration: 3000,
		transDuration: 800,
		menueDuration: 300,
		imageWidth: 640,
		imageHeight: 480,
		currentPid: 0,
		intervall: 0,
		baseUrl: 'http://'+window.location.hostname+'/'
	};


	var methods = {
	
		/**
		 * Initialisierung des Plugins.
		 * @param object options
		 */
		init : function(options) {
			// ggf Settings überschreiben
			if (options) {
				$.extend(settings, options);
			}
			// current PID auslesen
			settings.currentPid = $(settings.wrap).find('span.currentPageId').text();
			$(settings.wrap).text('');
			settings.imageWidth = $(settings.wrap).width();
			settings.imageHeight = $(settings.wrap).height();
			// Daten per Ajax laden
			$.ajax({
				type:	  	'post',
				url:	  	settings.baseUrl,
				data:	  	'eID=rpdcatslider&pid='+settings.currentPid+'&imgw='+settings.imageWidth+'&imgh='+settings.imageHeight,
				dataType:	'json',
				success: 	function(json) {
					// Daten übernehmen
					settings.data = json;
					// Markup des Slider generieren
					methods['generateHTML'].apply(this);
					// Slider starten
					methods['start'].apply(this);
					// Menu anzeigen
					methods['showMenu'].apply();
				}     		
			});
		},
		
		/**
		 * Generiert das Markup für den Slider.
		 * @return void
		 */
		generateHTML : function() {
			// gibt es Daten?
			if (settings.data != null) {
				// Bilder anlegen
				for (var pid in settings.data.images) {
					// sind Bilder vorhanden?
					if (settings.data.images[pid].length > 0) {
						// Wrap um alle Bilder dieser Kategorie (nur aktuelle Kategorie einblenden)
						var html = '<div id="'+pid+'" class="catslider-catWrap" style="display: '+((settings.data.current == pid) ? 'block' : 'none')+';">';
						var first = true;
						for (var id in settings.data.images[pid]) {
							// erstes Bild einblenden und nach vorne stellen
							style = (first == true) ? 'opacity: 1; display: block; z-index: 999;' : 'opacity: 0; display: none; z-index: 100;';
							// erstes Bild mit CSS-Klasse 'active' versehen
							cssClass = (first == true) ? 'class="active" ' : '';
							// Image-Tag erzeugen
							html += '<img src="'+settings.data.images[pid][id]+'" alt="Bild '+id+'" style="position: absolute; '+style+'" '+cssClass+' />';
							first = false;
						}
						// Wrap schließen
						html += '</div>';
						// HTML anfügen‚
						$(settings.wrap).append(html);
					}
				}
				// wurde keinen aktuelle Kategorie gefunden?
				if ($(settings.wrap).find('.catslider-catWrap:visible').length <= 0) {
					// erste Kategorie anzeigen
					$(settings.wrap).find('.catslider-catWrap:first').css('display', 'block');
					// ID der ersten Kategorie als aktuelle ID setzen
					settings.data.current = $(settings.wrap).find('.catslider-catWrap:first').attr('id');
				}
				
				// Dropdown-Menü anlegen
				var catMenu = '';
				$(settings.wrap).find('.catslider-catWrap').each(function(){
					// aktuelle Kategorie selektieren
					var selected = (settings.data.current == $(this).attr('id')) ? ' selected' : '';
					// Menü-Item anfügen
					catMenu += '<div class="catslider-item'+selected+'">'+settings.data.categories[$(this).attr('id')]+'</div>';
				});				
				// Menüleiste anlegen
				html = '<div class="catslider-menuWrap">'
					 + '<div class="catslider-btn"><div class="icon pause"></div></div>'
					 + '<div class="catslider-btn"><div class="icon prev"></div></div>'
					 + '<div class="catslider-btn"><div class="icon next"></div></div>'
					 + '<div class="catslider-catMenuWrap">'
					 + '    <div class="catslider-catMenuTitle"></div>'
					 + '    <div class="catslider-catMenuDropdown">'+catMenu+'</div>'
					 + '</div>'
					 + '</div>';
				// HTML anfügen
				$(settings.wrap).append(html);
				// Menüleiste positionieren
				$(settings.wrap).find('.catslider-menuWrap').css('top', ($(settings.wrap).innerHeight() - $(settings.wrap).find('.catslider-menuWrap').height() + 'px'));
				// Kategorie-Menü positionieren
				$(settings.wrap).find('.catslider-catMenuDropdown').css('margin-top', (1 - $(settings.wrap).find('.catslider-catMenuDropdown').outerHeight() - $(settings.wrap).find('.catslider-menuWrap').outerHeight() + 'px'));
				// aktuelle Kategorie setzen
				$(settings.wrap).find('.catslider-catMenuWrap div.catslider-catMenuTitle').text($(settings.wrap).find('.catslider-catMenuWrap .catslider-catMenuDropdown .selected').text());
				// Hover für Menüleiste
				$(settings.wrap).find('.catslider-menuWrap').hide();
				$(settings.wrap).hover(
					function() { methods['showMenu'].apply(this); },
					function() { methods['hideMenu'].apply(this); }
				);
				// Hover für Kategorie-Menü
				$(settings.wrap).find('.catslider-catMenuWrap .catslider-catMenuDropdown').hide();
				$(settings.wrap).find('.catslider-catMenuWrap').hover(
					function() { $(this).find('.catslider-catMenuDropdown').fadeIn(settings.menueDuration); },
					function() { $(this).find('.catslider-catMenuDropdown').fadeOut(settings.menueDuration); }
				);
				// Click-Event für jedes Dropdown-Menü-Item
				$(settings.wrap).find('.catslider-catMenuDropdown .catslider-item').each(function(){
					$(this).click( function(){ methods['switchCategory'].apply(this); });
				});
				// Button-Click-Events hinzufügen
				$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.pause').click(function(){ methods['pause'].apply(); });
				$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.next').click(function(){ methods['next'].apply(); });
				$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.prev').click(function(){ methods['prev'].apply(); });
			}
		},
		
		/**
		 * Zeigt das nächste Bild an.
		 * @return void
		 */
		nextSlide : function() {
			if ($(settings.wrap).find('.catslider-catWrap:visible img').length <= 1) {
				return;
			}
			// aktiven Slide suchen
			var active = $(settings.wrap).find('.catslider-catWrap:visible img.active');
			// nächsten SLide ermitteln
			var next = (active.next('img').length > 0) ? active.next('img') : $(settings.wrap).find('.catslider-catWrap:visible img:first');
			// beide SLides anzeigen
			next.css({ opacity: 1, display: 'block' });
			active.css({ opacity: 1, display: 'block' });
			// aktuellen Slide ausblenden
			active.fadeOut(settings.transDuration, function() {
				//aktiven Slide 
				active.css({ opacity: 0, display: 'none' });
				// jetzt aktiven Slide nach vorne stellen
				next.css('z-index', 999);
				next.addClass('active');
				// ehemals aktiven nach hinten stellen
				active.css('z-index', 100);
				active.removeClass('active');
			});
		},
		
		/**
		 * Slideshow starten.
		 */
		start : function() {
			// Intervall für Slideshow setzen
			settings.intervall = setInterval(function () {
				methods['nextSlide'].apply();
		    }, settings.slideDuration);
		    // Pause-Button
			$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.pause').removeClass('paused').addClass('playing');
		},

		/**
		 * Slideshow stoppen.
		 */
		stop : function() {
			// Intervall löschen
			clearInterval(settings.intervall);
			settings.intervall = 0;
		    // Pause-Button
			$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.pause').removeClass('playing').addClass('paused');
		},
		
		/**
		 * Toggle zwischen Stop und Play.
		 */
		pause : function() {
			if (settings.intervall > 0) {
				methods['stop'].apply();
			} else {
				// nächsten Slide anzeigen
				methods['nextSlide'].apply();
				methods['start'].apply();
			}
		},
		
		/**
		 * Nächsten Slide anzeigen.
		 */
		next : function() {
			if ($(settings.wrap).find('.catslider-catWrap:visible img').length <= 1) {
				return;
			}
			// Slideshow ggf stoppen
			if (settings.intervall > 0) {
				methods['stop'].apply();
			}
			// aktiven Slide suchen
			var active = $(settings.wrap).find('.catslider-catWrap:visible img.active');
			// nächsten Slide ermitteln
			var next = (active.next('img').length > 0) ? active.next('img') : $(settings.wrap).find('.catslider-catWrap:visible img:first');
			// nächsten Slide einblenden
			next.css({ opacity: 1, display: 'block' });
			next.css('z-index', 999);
			next.addClass('active');
			//aktiven Slide ausblenden
			active.css({ opacity: 0, display: 'none' });
			active.css('z-index', 100);
			active.removeClass('active');
		},

		/**
		 * Vorigen Slide anzeigen.
		 */
		prev : function() {
			if ($(settings.wrap).find('.catslider-catWrap:visible img').length <= 1) {
				return;
			}
			// Slideshow ggf stoppen
			if (settings.intervall > 0) {
				methods['stop'].apply();
			}
			// aktiven Slide suchen
			var active = $(settings.wrap).find('.catslider-catWrap:visible img.active');
			// vorigen Slide ermitteln
			var next = (active.prev('img').length > 0) ? active.prev('img') : $(settings.wrap).find('.catslider-catWrap:visible img:last');
			// nächsten Slide einblenden
			next.css({ opacity: 1, display: 'block' });
			next.css('z-index', 999);
			next.addClass('active');
			//aktiven Slide ausblenden
			active.css({ opacity: 0, display: 'none' });
			active.css('z-index', 100);
			active.removeClass('active');
		},
		
		/**
		 * Zu einer anderen Kategorie switchen.
		 */
		switchCategory : function(element) {
			// ID der Kategorie auf negieren
			var id = -1;
			// Titel der Kategorie übernehmen
			var title = $(this).text();
			// alle Kategorien durchlaufen
			$.each(settings.data.categories, function(key, value){
				// wurde der Titel gefunden?
				if (value == title) {
					// ID übernehmen
					id = key;
				}
			});

			// wurde eine Kategorie-ID gefunden?
			if (id != -1 && id != settings.data.current) {
				// selektiertes Element deselektieren
				$(settings.wrap).find('.catslider-catMenuDropdown .catslider-item.selected').removeClass('selected');
				// neues Element selektieren
				$(this).addClass('selected');
				// Kategorie-Titel anzeigen
				$(settings.wrap).find('.catslider-catMenuTitle').text(title);
				
				// Slideshow stoppen
				methods['stop'].apply();
				// Kategorie-ID übernehmen
				settings.data.current = id;
				// aktuelle Kategorie ausblenden
				$(settings.wrap).find('.catslider-catWrap').css('display', 'none');
				// neue Kategorie einblenden
				$(settings.wrap).find('.catslider-catWrap[id="'+id+'"]').css('display', 'block');
				// Slideshow starten
				methods['start'].apply();
			}
		},
		
		/**
		 * Blendet die Menüleiste ein.
		 */
		showMenu : function() {
			$(settings.wrap).find('.catslider-menuWrap').fadeIn(settings.menueDuration);
		},
		
		/**
		 * Blendet die Menüleiste aus.
		 */
		hideMenu : function() {
			$(settings.wrap).find('.catslider-menuWrap').fadeOut(settings.menueDuration);
		}

	};
	
	$.fn.catslider = function(method)
	{	  
	  // Method calling logic
	  if ( methods[method] ) {
	    return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
	  } else if ( typeof method === 'object' || ! method ) {
	    return methods.init.apply( this, arguments );
	  } else {
	    $.error( 'Method ' +  method + ' does not exist on jQuery.catslider' );
	  }    
	
	};

})( jQuery );