/* Copyright (c) 2011 TipTop (http://studiotiptop.de) */

/*
cycloops (Zyklop) ist ein slideshow plugIn für mittig absolute positionierte bilder mit überblendeungs-transition
*/


(function( $ ){
	
	var gallery;
	var dotsPath = "themes/bbtheme/images/cycloops/image-dots"; /* eventuell anpassen */
	var dotsHoverPath = "themes/bbtheme/images/cycloops/image-dots-active"; /* eventuell anpassen */
	var ctrls_prev_img = "themes/bbtheme/images/cycloops/ctrls-prev-btn.gif"; /* eventuell anpassen */
	var ctrls_next_img = "themes/bbtheme/images/cycloops/ctrls-next-btn.gif"; /* eventuell anpassen */
	var clickBack = "#projekt-nav-click-back"; /* eventuell anpassen */
	var clickNext = "#projekt-nav-click-next"; /* eventuell anpassen */
	var detectEnd = ".png";
	var dotsHover;
	var currentTitle = "";
	var currentImg = 0;
	var currentPos = 0;
	var allImages = [];
	var boxWidth = 0;
	var active = true;
	var loopMode = 'loop';
	var slide1 = "#slide1";
	var slide2 = "#slide2";
	var duration = 4000; /* min 200! */
	var timer = 4000; /* timer sollte länger als duration sein! */
	
	
	$.fn.cycloops = function( options, mode ) {
		
		$.doTimeout("timeOut");
		
		/* set this */
		gallery = this;
		gallery.css("position","absolute");
		
		/* set img array */
		if(options) allImages = options; else active = false;
		
		/* set array pos to end */
		var currentImg = allImages.length-1;
		
		/* loop mode */
		if(mode) { loopMode = mode;  } 
		
		/* attr width of the gallery */
		/* damit es auch schön mittig wird für den zyklopen */
		boxWidth = this.width();
		
		/* detect IE <6 */
		/* png mag der IE <6 ja nicht so richtig */
		if($.browser.msie && $.browser.version <= "6.0") detectEnd = ".gif";
		
		/* preload dot-hover */
		dotsHover = new Image();
		dotsHover.src = dotsHoverPath+detectEnd;
		
		/* add divs to gallery */
		getBox();
		
		/* add nav dots */
		getDots();
		
		/* add ctrls */
		getControls();
		
		/* add listener to dots für hover */
		/* also wenns nicht grad der aktive ist, dann hoverIn und hoverOut */
		$(".gallery-dots-hover").hover(function(){
			$(this).attr("src", dotsHoverPath+detectEnd);
		}, function(){ if( ($(this).parent().attr("name")*1) != currentImg ) $(this).attr("src", dotsPath+detectEnd); });
		
		$("#gallery-ctrls a").hover(function(){
			$(this).animate({ opacity: 0.5});
		}, function(){ $(this).animate({ opacity: 1.0}); });
		
		
		/* add listener an die dots */
		if( $(".gallery-dots-click").length > 0 ){
			$(".gallery-dots-click").click(function(){
				changeSlide( $(this).attr("name")*1 );
				return false;
			});
		}
		
		/* externer listeners: back */
		if( $(clickBack).length > 0 ){
			$(clickBack).click(function(){
				if( currentImg <= 0 ) { var nextOne = allImages.length-1; }
				else { var nextOne = (currentImg-1); }
				changeSlide( nextOne );
				return false;
			});
		}
		
		/* externer listeners: next */
		if( $(clickNext).length > 0 ){
			$(clickNext).click(function(){
				/* vorbereiten */
				if( currentImg >= allImages.length-1 ) { var nextOne = 0; }
				else { var nextOne = (currentImg+1); }
				
				changeSlide( nextOne );
				return false;
			});
		}
		
		
		
		/* allgemeine functions */
		
		function changeSlide( direction )
		{	
			/* change */
			$.doTimeout("timeOut");
			/* slides geht raus */
			if($("#slide-box").length > 0)
			{
				$("#slide-box").fadeOut(0, function(){
					if($(slide1).length > 0)
					{
						$(slide1).stop(false,true).fadeOut(0);
						$(slide1).empty();
					}
					if($(slide2).length > 0)
					{
						$(slide2).stop(false,true).fadeIn(0);
						$(slide2).empty();
					}
					showImage(direction);
				});	
			}
		}
		
		function getImage ( needle )
		{
			/* calc next position */
			var calc;
			calc = boxWidth - allImages[needle][1];
			if(calc == 0) currentPos = 0; else currentPos = Math.round(calc/2);
	
			/* set title */
			currentTitle = allImages[needle][2];
			
			/* build image */
			var img = '<img src="'+allImages[needle][0]+'" width="'+allImages[needle][1]+'" alt="" title="'+allImages[needle][2]+'" />';
			return img;
		}
		
		function getBox ( )
		{
			/* set the slides */
			$( '<div id="slide-box"><div id="slide1"></div><div id="slide2"></div></div>' ).appendTo(gallery);
		}
		
		function getTitles ( )
		{
			/* append title box */
			$( '<div id="gallery-titles" class="fago-med imagetitle">'+currentTitle+'</div>' ).appendTo(gallery.parent());
		}
		
		function getDots ( )
		{
			var box;
			var dots = "";
			for(var i=0; i<allImages.length; i++) { dots += '<a name="'+i+'" href="#" class="gallery-dots-click"><img id="dot'+i+'" class="gallery-dots-hover" src="'+dotsPath+detectEnd+'" alt="" title="" /></a>'; }
			box = '<div id="gallery-dots">'+dots+'</div>';
			
			/* set the dots */
			$(box).appendTo(gallery.parent());
		}
	
		function getControls ( )
		{
			var ctrls;
			var prev = '<a id="projekt-nav-click-back" href="#"><img src="' + ctrls_prev_img + '" alt="" title="" /></a>';
			var next = '<a id="projekt-nav-click-next" href="#"><img src="' + ctrls_next_img + '" alt="" title="" /></a>';
			ctrls = '<div id="gallery-ctrls">' + prev + next + '<div class="clear"></div></div>';
			
			/* set the dots */
			$(ctrls).appendTo(gallery.parent());
		}
			
		function setTimer ( ms, direction )
		{
			
			// for testing : $("#js").append("st"+currentImg+" ");
					
			/* timeOut schleife */
			/* via plugin: doTimeout */
			/* das true am ende sagt, dass es sich selbst überschreibt */
			$.doTimeout("timeOut", ms, function(){
				/* jetzt kommts! */
				/* damit in den slide 1 für den nächtsen div funkioniert, werden die slide vars getauscht */
				if(slide1 == "#slide1"){ slide1 = "#slide2"; slide2 = "#slide1"; }
				else if(slide1 == "#slide2"){ slide1 = "#slide1"; slide2 = "#slide2"; }
				/* und los! */
				showImage(direction);
			}, true);
		}
		
		function fadeSlide( )
		{
			//$("#js").append("fS1 ");
			/* set dots */
			/* erst mal alle auf default */
			$(".gallery-dots-hover").attr("src", dotsPath+detectEnd);
			/* jetzt der aktuelle als hover */
			$("#dot"+currentImg).attr("src", dotsHoverPath+detectEnd);
			/* transition */
			/* slide 1 kommt rein */
			//$("#js").append("fadeIn ");
			
			$(slide1).fadeIn(duration);
			
			if($("#gallery-titles").length == 0) {
				/* add title */
				getTitles( );
				$("#gallery-titles").html(currentTitle);
				Cufon.set('fontFamily', 'FagoPro-Medi').replace('#gallery-titles', { fontWeight: 500, hover: false });
				$("#gallery-titles").fadeOut(0);
				if( currentTitle != "" ) $("#gallery-titles").fadeIn(duration/2);
			} else {
				$("#gallery-titles").fadeOut(duration/2, function (){ 
					$("#gallery-titles").html(currentTitle);
					Cufon.set('fontFamily', 'FagoPro-Medi').replace('#gallery-titles', { fontWeight: 500, hover: false });
					if( currentTitle != "" ) $("#gallery-titles").fadeIn(duration/2);
				});
			}
			
			
			/* slide 2 geht raus */
			//$("#js").append("fadeOut ");
			$(slide2).fadeOut(duration, function(){
				/* kurz 200 ms warten, falls es verzögerung gibt */
				/* und dann altes bild raus */
				$(slide2).delay(200).empty();
				/* hier ist bergfest! neues bild ist drin und altes raus */
				/* jetzt weiter: */
				//$("#js").append("fS2 ");
			
				setTimer(timer, loopMode);
			});
		}
		
		function showImage( direction )
		{
			$("#slide-box").fadeIn(0, function(){
				
				/* mit slide 1 gehts los ! */
				/* erst mal kurz weg, gegen kurz aufblinken */
				$(slide1).css("visibility","hidden");
				/* array needle eins höher oder auf 0 */
				if(direction == "loop") { if( currentImg >= allImages.length-1 ) currentImg = 0; else currentImg = (currentImg+1); }
				else if(direction == "random") { currentImg =  Math.floor( (allImages.length-1) * (Math.random() % 1) ); }
				else { currentImg = direction; }
				
					
				/* img laden */
				$( getImage( currentImg ) ).load(function()
				{
					/* erst mal position mittig und alles auf 0 */
					$(slide1).css("left", currentPos);
					$(slide1).fadeOut(0);
					$(slide2).fadeIn(0);
					/* wieder da */
					$(slide1).css("visibility","visible");
					
					/* fire */
					fadeSlide();

				}).appendTo( $(slide1) );
		
			});
		}
			
		/* fire fucntion */
		if(active == true) showImage(loopMode);
		
	};
})( jQuery );