// Gallery V.1.0
// jQuery Plugin basierend auf Colorbox (http://colorpowered.com/colorbox/)
// 2009 (c) Electronic Minds (http://www.electronic-minds.de)
// Programmierung Yannic Stadler
(function($) {
	 $.fn.gallery = function(o) {
		// voreingestellte parameter
		var opts = {
			gFadeIn: 		750,						// einfaden einzelner bilder
			gFadeOut: 		750,						// ausfaden einzelner bilder
			gAutoplay: 		1500,						// autoplay geschwindigkeit
			gPagination: 	'Kapitel',					// titel fuer paginierung
			gNext: 			'Weiter',					// titel und beschreibung fuer weiter
			gPrev: 			'Zurück',				// titel und beschreibung fuer zurueck
			gPlay: 			'Abspielen / Stoppen',		// titel und beschreibung fuer abspielen
			gWidth: 		'845',						// breite lightbox
			gHeight: 		'auto',						// hoehe lightbox
			gReplay:		'a[href="#replay"]',		// tag fuer ein erneutes abspielen
			gOpacity:		0.5							// lightbox hintergrund
		}
		// wenn andere parameter, dann uebernehmen
		if (o != null) {
			$.extend(opts, o);
		}
		// alle funktionen
		this.each(function() {
			// finde aktuelles element
			var actualElement = $(this);
			// wrap um ul
			$(actualElement.attr('href')).wrapInner('<div id="gGallery"></div>');
			// erstelle player
			var playerElements = '<div id="gControls"><ul><li class="prev"><a href="#" title="'+opts.gPrev+'">'+opts.gPrev+'</a></li><li class="play"><a href="#" title="'+opts.gPlay+'">'+opts.gPlay+'</a></li><li class="next"><a href="#" title="'+opts.gNext+'">'+opts.gNext+'</a></li></ul></div>';
			$(actualElement.attr('href')).append(playerElements);
			// erstelle pagination
			var pagEl = $('#gGallery').find('div').length;
			pagination = '<div id="gPagination"><ol>';
			for(var i = 0; i < pagEl; i++) {
				var chapter = i + 1;
				pagination = pagination+'<li><a href="#" title="Kapitel '+chapter+'">Kapitel '+chapter+'</a></li>';
			}
			pagination = pagination+'</div></ol>';
			$('#gGallery').before(pagination);
			// erstelle timer
			$('#gPagination').after('<div id="gTimer"><div></div></div>');
			// festlegen diverser ansprechpunkte
			var gControl	 = $(actualElement.attr('href')).find('#gControls');
			var gPagination = $(actualElement.attr('href')).find('#gPagination');
			var gGallery	 = $(actualElement.attr('href')).find('#gGallery');
			var gTimer		 = $(actualElement.attr('href')).find('#gTimer');
			// css angaben
			gGallery.find('img').css({ 'position':'absolute', 'left':0, 'top':0 });
			if($.browser.msie && parseInt(jQuery.browser.version) == 7 || parseInt(jQuery.browser.version) == 6)
				gGallery.css({'clear':'none', 'width':'100%' });
			gTimer.hide(0);
			// festlegen erster punkt aktiv
			gPagination.find('li:first').addClass('active');
			// festlegen autoplay
			var gAutoplay = null;
			// verstecke alle bilder ausser erstes
			gGallery.find('div').not(':first').hide(0);
			gGallery.find('div img').not(':first').hide(0);
			// initiiere lightbox 
			$(actualElement).colorbox({
				inline:true,
				width: opts.gWidth,
				height: opts.gHeight,
				href: actualElement.attr('href'),
				opacity: opts.gOpacity
			});
			// neustart, replay
			$(opts.gReplay).click(function() {
				actualElement.click();
				return false;
			});
			actualElement.click(function() {
				gGallery.find('div').hide(0);
				gGallery.find('img').hide(0);
				gGallery.find('div:first').show(0);
				gGallery.find('img:first').show(0);
				gPagination.find('li.active').removeClass('active');
				gPagination.find('li:first').addClass('active');
				window.setTimeout(function() {gControl.find('li.play').click() }, 500);
			});
			// wenn controller geklickt werden
			gControl.find('li').click(function() {
				// finde aktuelles element
				var ae = $(this);
				// wenn prev oder next
				if(ae.hasClass('prev') || ae.hasClass('next')) {
					// jeweilige funktion ausfuehren
					if(ae.hasClass('prev')) { prev(); }
					if(ae.hasClass('next')) { next(); }
					// wenn autoplay an war kicken
					if(gAutoplay != null) {
						autoplayFunc();
					}
				} else if(ae.hasClass('play')) {
					if(ae.hasClass('active')) {
						autoplayFunc();
					} else {
						ae.addClass('active');
						gSlide();
					}
				}
				return false;
			});
			// wenn pagination geklickt wird
			gPagination.find('li').click(function(){
				autoplayFunc();
				if(!gGallery.find('img').is(':animated') && !$(this).hasClass('active')) {
					var ae = $(this);
					gPagination.find('li.active').removeClass('active');
					ae.addClass('active');
					var oldImage = gGallery.find('div:visible img:visible');
					var oldDiv = gGallery.find('div:visible');
					var newDivId = gPagination.find('ol li').index(this);
					var newDiv = gGallery.find('div').eq(newDivId);
					var newImage = newDiv.find('img:first');
					var switchPag = null;
					faden(oldImage, newImage, oldDiv, newDiv, switchPag);
					return false;
				}
			});
			// weiter funktion
			function next() {
				// checke ob bereits etwas animiert wird
				if(!gGallery.find('img').is(':animated')) {
					// finde aktuelles bild
					var oldImage = gGallery.find('img:visible');
					var oldDiv = gGallery.find('div:visible');
					// pruefen wo und ob naechstes bild
					if(oldImage.next('img').length > 0) {
						var newImage = oldImage.next('img');
						var newDiv = '';
						var switchPag = null;
					} else {
						if(oldImage.parent().next('div').length > 0) {
							var newImage = oldImage.parent().next('div').find('img:first');
							var newDiv = oldDiv.next('div');
							switchPag = 'next';
						} else {
							autoplayFunc();
							return;	
						}
					}
					// faden
					faden(oldImage, newImage, oldDiv, newDiv, switchPag);
				}
			}
			// zurueck funktion
			function prev() {
				// checke ob bereits etwas animiert wird
				if(!gGallery.find('img').is(':animated')) {
					// finde aktuelles bild
					var oldImage = gGallery.find('img:visible');
					var oldDiv = gGallery.find('div:visible');
					// pruefen wo und ob naechstes bild
					if(oldImage.prev('img').length > 0) {
						var newImage = oldImage.prev('img');
						var newDiv = '';
						var switchPag = null;
					} else {
						if(oldImage.parent().prev('div').length > 0) {
							var newImage = oldImage.parent().prev('div').find('img:last');
							var newDiv = oldDiv.prev('div');
							switchPag = 'prev';
						} else {
							return;	
						}
					}
					// faden
					faden(oldImage, newImage, oldDiv, newDiv, switchPag);
				}
			}
			// faden
			function faden(oldImage, newImage, oldDiv, newDiv, switchPag) {
				if(switchPag == 'next') {
					if(gPagination.find('li.active').next('li').length > 0) {
						var old = gPagination.find('li.active');
						gPagination.find('li.active').next('li').addClass('active');
						old.removeClass('active');
					}
					
				}
				if(switchPag == 'prev') {
					if(gPagination.find('li.active').prev('li').length > 0) {
						var old = gPagination.find('li.active');
						gPagination.find('li.active').prev('li').addClass('active');
						old.removeClass('active');
					}
				}
				$(oldImage).fadeOut(opts.gFadeOut, function() {
					if(newDiv.length != '') {
						oldDiv.hide(0);
					}
				});
				if(newDiv.length != '') {
					newDiv.show(0);
				}
				$(newImage).fadeIn(opts.gFadeIn);
			}
			// erste seite lang
			var gSlideI = 0;
			// autoplay kill
			function autoplayFunc() {
				window.clearTimeout(gAutoplay);
				gControl.find('li.active').removeClass('active');
				gTimer.find('div').stop();
				gTimer.hide(0);
				gSlideI = 0;
			}
			// autoplay funktion mit timer
			var gSlide = function () {
				gAutoplay = window.setTimeout(gSlide, opts.gAutoplay);
				gTimer.show(0);
				gTimer.find('div').css('width','0%');
				gTimer.find('div').animate({ width:'100%' }, opts.gAutoplay - 100);
				if(gSlideI > 0) {
					next();
				}
				gSlideI++;
			}
			$('#cboxClose, #cboxOverlay').click(function() {
				autoplayFunc();
			});
		});
		return false;
	}	
})(jQuery)