/**
 * 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",
		imageWidth:		960,
		imageHeight:	395,
		videoWidth:		960,
		videoHeight:	520,

		sysLanguage:	0,
		currentPid:		0,
		slideDuration:	5000,
		transDuration:	1800,
		menueDuration:	300,

		random:			true,
		autostart:		true,
		videoMode:		false,
		videoPlayer:	null,
		
		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
			var temp = $(settings.wrap).find('span.currentPageId').text();
			var params = temp.split(':');
			settings.sysLanguage = params[0] ;
			settings.currentPid = params[1] ;
			$(settings.wrap).text('');
			// Bilder-Maße
			settings.imageWidth = $(settings.wrap).width();
			settings.imageHeight = $(settings.wrap).height();
			// Video-Maße
			settings.videoWidth = $(settings.wrap).width();
			// settings.videoHeight = Math.round((settings.videoWidth / 16) * 9);
			// Daten per Ajax laden
			$.ajax({
				type:	  	'post',
				url:	  	settings.baseUrl,
				data:	  	'eID=rpdcatslider&l='+settings.sysLanguage+'&pid='+settings.currentPid+'&imgw='+settings.imageWidth+'&imgh='+settings.imageHeight+'&random='+((settings.random == true) ? '1' : '0'),
				dataType:	'json',
				success: 	function(json) {
					// Daten übernehmen
					settings.data = json;
					// Markup des Slider generieren
					methods['generateHTML'].apply(this);
					// Autostart aktiviert?
					if (settings.autostart) {
						// 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')+';"></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');
				}
				
				// aktuellen Wrap füllen
				methods.generateWrapContent(settings.data.current);
				
				// 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 paused"></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).outerHeight() - $(settings.wrap).find('.catslider-menuWrap').outerHeight() )+ 'px');
				// Kategorie-Menü positionieren
				$(settings.wrap).find('.catslider-catMenuDropdown').css('margin-top', (0 - $(settings.wrap).find('.catslider-catMenuDropdown').outerHeight() - $(settings.wrap).find('.catslider-menuWrap').innerHeight() + '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'](); });
				$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.next').click(function(){ methods['next'](); });
				$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.prev').click(function(){ methods['prev'](); });

			}
		},
		
		
		generateWrapContent : function(pid) {
			var html = '';		
			if (settings.data.images[pid].length > 0) {
				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: 666;' : 'opacity: 0; display: none; z-index: 100;';

					// Bilder
					if (typeof settings.data.images[pid][id] == 'string') {
						// erstes Bild mit CSS-Klasse 'active' versehen
						cssClass = (first == true) ? 'class="slide active" ' : 'class="slide"';
						// Image-Tag erzeugen
						html += '<img src="'+settings.data.images[pid][id]+'" alt="Bild '+id+'" style="position: absolute; '+style+'" '+cssClass+' />';
					}
					// Videos
					else {
						// erstes Video mit CSS-Klasse 'active' versehen
						cssClass = (first == true) ? 'class="slide flowplayer active" ' : 'class="slide flowplayer"';
						// A-Tag für Videoplayer erzeugen
						html += '<a href="'+settings.data.images[pid][id]['video']+'" style="position: absolute; width: '+settings.videoWidth+'px; height: '+settings.videoHeight+'px; '+style+'" '+cssClass+'><img src="'+settings.data.images[pid][id]['still']+'" alt="Bild '+id+'" /></a>';
					}
					first = false;
				}
				// HTML in den Wrap einfügen
				$(settings.wrap).find('#'+pid+'.catslider-catWrap').append(html);
			}
			
    		// VIDEOS
    		if ($(settings.wrap).find('#'+pid+'.catslider-catWrap').find('.slide.flowplayer').length > 0) {
    			// Videoplayer initialisieren
    			$(settings.wrap).find('#'+pid+'.catslider-catWrap').find(".slide.flowplayer").flowplayer(
    				{
    					src:"typo3conf/ext/rpd_catslider/res/flowplayer/flowplayer-3.2.7.swf",
    					wmode: 'transparent'
    				},
    				{
    					// disable default controls
    					plugins: { controls: null },
    					clip: {
    						onFinish: function() {
    							this.unload();
    							$(this.catsliderWrap).catslider('switchMode');
    						}
    					},
    					onBeforeLoad: function() {
    						$(this.catsliderWrap).catslider('switchMode', 'video');
    						this.isLoading = true;
    					},
    					onLoad: function() {
    						this.isLoading = false;
    					},
    					catsliderWrap: settings.wrap,
    					isLoading: false
    				}
    			);
    			// iPad-Kombatibilität
    			$f().ipad({ simulateiDevice: false, controls: false });
			}
		},

		
		/**
		 * Zeigt das nächste Bild an.
		 * @return void
		 */
		nextSlide : function() {
			if ($(settings.wrap).find('.catslider-catWrap:visible .slide').length <= 1) {
				return;
			}
			// Videomodus?
			if (settings.videoMode == true) {
				methods['switchMode']();
			}
			// aktiven Slide suchen
			var active = $(settings.wrap).find('.catslider-catWrap:visible .slide.active');
			// nächsten SLide ermitteln
			var next = (active.next('.slide').length > 0) ? active.next('.slide') : $(settings.wrap).find('.catslider-catWrap:visible .slide: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', 666);
				next.addClass('active');
				// ehemals aktiven nach hinten stellen
				active.css('z-index', 100);
				active.removeClass('active');
			});
		},
		
		/**
		 * Slideshow starten.
		 * @return void
		 */
		start : function() {
			// Intervall für Slideshow setzen
			settings.intervall = setInterval(function () {
				methods['nextSlide']();
		    }, settings.slideDuration);
		    // Pause-Button
			$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.pause').removeClass('paused').addClass('playing');
		},

		/**
		 * Slideshow stoppen.
		 * @return void
		 */
		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.
		 * @return void
		 */
		pause : function() {
			if (settings.intervall > 0) {
				methods['stop']();
			} else {
				// nächsten Slide anzeigen
				methods['nextSlide']();
				methods['start']();
			}
		},
		
		/**
		 * Nächsten Slide anzeigen.
		 * @return void
		 */
		next : function() {
			if ($(settings.wrap).find('.catslider-catWrap:visible .slide').length <= 1) {
				return;
			}
			// Videomodus?
			if (settings.videoMode == true) {
				methods['switchMode']();
			}
			// Slideshow ggf stoppen
			if (settings.intervall > 0) {
				methods['stop']();
			}
			// aktiven Slide suchen
			var active = $(settings.wrap).find('.catslider-catWrap:visible .slide.active');
			// nächsten Slide ermitteln
			var next = (active.next('.slide').length > 0) ? active.next('.slide') : $(settings.wrap).find('.catslider-catWrap:visible .slide:first');
			// nächsten Slide einblenden
			next.css({ opacity: 1, display: 'block' });
			next.css('z-index', 666);
			next.addClass('active');
			//aktiven Slide ausblenden
			active.css({ opacity: 0, display: 'none' });
			active.css('z-index', 100);
			active.removeClass('active');
		},

		/**
		 * Vorigen Slide anzeigen.
		 * @return void
		 */
		prev : function() {
			if ($(settings.wrap).find('.catslider-catWrap:visible .slide').length <= 1) {
				return;
			}
			// Videomodus?
			if (settings.videoMode == true) {
				methods['switchMode']();
			}
			// Slideshow ggf stoppen
			if (settings.intervall > 0) {
				methods['stop']();
			}
			// aktiven Slide suchen
			var active = $(settings.wrap).find('.catslider-catWrap:visible .slide.active');
			// vorigen Slide ermitteln
			var next = (active.prev('.slide').length > 0) ? active.prev('.slide') : $(settings.wrap).find('.catslider-catWrap:visible .slide:last');
			// nächsten Slide einblenden
			next.css({ opacity: 1, display: 'block' });
			next.css('z-index', 666);
			next.addClass('active');
			//aktiven Slide ausblenden
			active.css({ opacity: 0, display: 'none' });
			active.css('z-index', 100);
			active.removeClass('active');
		},
		
		/**
		 * Toggelt zwischen Abspielen und Pausieren des Videos.
		 * @return void
		 */
		videoToggle : function() {
			// nur im Video-Modus ausführen
			if (settings.videoMode) {
				// ist die Wiedergabe angehalten?
				if ($f().getState() == 4) {
					// Wiedergabe fortsetzen
					$f().resume();
					// Icon setzen
					methods['setVideoIcon']('playing');
				}
				// alternativ: spielt der Player?
				else if ($f().getState() == 3) {
					// Wiedergabe anhalten
					$f().pause();
					// Icon setzen
					methods['setVideoIcon']('paused');
				}
			}		
		},
		
		/**
		 * Toggelt die Button-Anzeige zwischen Abspielen und Pausieren des Videos.
		 * @param string type
		 * @return void
		 */
		setVideoIcon : function(type) {
			// nur im Video-Modus ausführen
			if (settings.videoMode) {
				var btn = $(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.video');
				// ist das Pause-Icon gesetzt?
				if (type == 'playing' && btn.hasClass('paused')) {
					// Play-Icon setzen
					btn.removeClass('paused').addClass('playing');
				}
				// ist das Play-Icon gesetzt?
				else if (type == 'paused' && btn.hasClass('playing')) {
					// Pause-Icon setzen
					btn.removeClass('playing').addClass('paused');
				}
			}		
		},
		
		
		/**
		 * Zu einer anderen Kategorie switchen.
		 * @return void
		 */
		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;
				if ($(settings.wrap).find('.catslider-catWrap[id="'+id+'"]').is(':empty')) {
					methods.generateWrapContent(settings.data.current);
				}
				
				// 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.
		 * @return void
		 */
		showMenu : function() {
			$(settings.wrap).find('.catslider-menuWrap').fadeIn(settings.menueDuration);
		},
		
		/**
		 * Blendet die Menüleiste aus.
		 * @return void
		 */
		hideMenu : function() {
			$(settings.wrap).find('.catslider-menuWrap').fadeOut(settings.menueDuration);
		},
		
		/**
		 * Blendet die Menüleiste aus.
		 * @return void
		 */
		switchMode : function(mode) {
			// Slider stoppen
			methods['stop']();
			// aktuelle Maße übernehmen
			var newWidth	= $(settings.wrap).width() + 'px';
			var newHeight	= $(settings.wrap).height() + 'px';
			// Modus-Unterscheidung
			switch(mode) {
				default:
				case 'image': {
					// Modus setzen
					settings.videoMode = false;
					// Maße anpassen
					newWidth	= settings.imageWidth + 'px';
					newHeight	= settings.imageHeight + 'px';
					// Video-Button ausblenden
//					$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.video').css('display', 'none').removeClass('playing').addClass('paused');
					// Video-Player ggf. entfernen
					$f().unload();
				} break;
				case 'video': {
					// Modus setzen
					settings.videoMode = true;
					// Maße anpassen
					newWidth	= settings.videoWidth + 'px';
					newHeight	= settings.videoHeight + 'px';
				} break;
			}
			
			// auf neue Maße animieren
			$(settings.wrap).animate( {width: newWidth, height: newHeight}, 800, function() {
				// Modus-Unterscheidung
				switch (mode) {
					default:
					case 'image': {
						// Autostart aktiviert?
						if (settings.autostart) {
							// Slider starten
							methods['start']();
						}
					} break;
					case 'video': {
						// Video-Button einblenden
//						$(settings.wrap).find('.catslider-menuWrap div.catslider-btn .icon.video').css('display', 'block').removeClass('paused').addClass('playing');
					}
				}
			});
		}
	};
	
	$.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 );