/*------------------------------------------------------------------ 

[JavaScript jquery.fenoGallery.js] 

Project:    		Feno 
Version:    		1.0 
Last change:    	
Autor:		    	Roland Loesslein (rl) 
Primary use:    	Script 

-------------------------------------------------------------------*/


(function($){
	var $$;
	$$ = $.fn.fenoGallery = function( options ) {  
  		
  		var defaults = {  
			thumbWidth 			: 17,
			visibleThumbs		: 30,
			useCaption			: false,
			thumbsWidthOffset 	: 0,
			timerValue			: 3000,
			isSlideshow			: false,
			isLightbox			: false,
			showAllThumbs		: false
		};  
		
		options = $.extend(defaults, options);

  		return this.each(function() {  
  			$$.options			= options;
   			$$.gallery 			= this;
   			$$.timer;
   			$$.timerValue 		= $$.options.timerValue;
   			$$.currentImage 	= 0;
   			$$.isLightbox 		= $$.options.isLightbox;
   			$$.isPlaying		= false;
   			$$.isTransitionRunning= false;
   			
   			$$.numOfImages 		= $('div#thumbs ul li', this).length;
   			$$.container 		= $('div#images', this);
   			$$.thumbnails 		= $('div#thumbs ul', this);
   			$$.thumbnailsCont 	= $('#thumbs', this);
   			$$.prevButton 		= $('div.navigation a.prev', this);
   			$$.nextButton 		= $('div.navigation a.next', this);
			$$.caption			= $('#servicearea');
			$$.projectShortcut	= $('#search');
			 
						
   			if( $$.isLightbox ){
   				$('a',$$.container).lightBox();
   				$('a img', $$.container).parent().click( function(){
					$$.initLightbox( );
				} );
			}
			
   			
   			var totalWidth = ($$.options.thumbWidth * $$.numOfImages);
   			$($$.thumbnails).css('width', totalWidth );
   			if( $$.numOfImages > $$.options.visibleThumbs && !$$.options.showAllThumbs ) $($$.thumbnailsCont).css('width', ( $$.options.visibleThumbs * $$.options.thumbWidth) + 1 +$$.options.thumbsWidthOffset );
   			else  $$.thumbnailsCont.css('width', 'auto');
   			
   			//hide button navigation if neccessary
   			if( $$.numOfImages <= $$.options.visibleThumbs){
   				$($$.prevButton).addClass('disable');
   				$($$.nextButton).addClass('disable');
   			}
   			
   			if( $$.numOfImages < 2 ){
   				$($$.thumbnailsCont).css('display', 'none');
   			}
   			
   			$($$.prevButton).click( function(){
   				if( $$.currentImage != 0){
					var index = $$.currentImage - 1;
					$(' li:eq(' + index + ') a', $$.thumbnails).click();
				}
   				return false;
   			} );
   			
   			$($$.nextButton).click( function(){
   				if( $$.currentImage < $$.numOfImages ){
					var index = $$.currentImage + 1;
					$(' li:eq(' + index + ') a', $$.thumbnails).click();
				}
   				return false;
   			} );
   			
   			if( $$.options.isSlideshow ) {
   				// add slideshow Button
   				var l = startLabel ? startLabel : "Slideshow starten";
   				$('#product-list').empty().append('<a href="" title="Slideshow starten" class="slideshowlink">'+l+'</a>');
   				$$.playBut			= $('a.slideshowlink');
	   			$($$.playBut).click( function(){
	   				if( $$.isPlaying ){
	   					var pl = startLabel ? startLabel : "Slideshow starten";
	   					$$.isPlaying = false;
						$($$.playBut).text( pl );
						clearTimeout( $$.timer );
	   					return false;
	   				} else {
	   					var sl = stopLabel ? stopLabel : "Slideshow stoppen";
	   					$$.isPlaying = true; 
						$($$.playBut).text( sl );
						//$($$.nextButton).click();
						$$.triggerNextImage();
	   					return false;
	   				}
	   			});
	   			
	   			$($$.container).click( function(){ $($$.nextButton).click(); } );
	   			
	   			$$.loadCaption( $(' li:eq(0) a', $$.thumbnails).attr('name') );
	   			
	   			$$.triggerNextImage = function() {
	   				var index = ($$.currentImage + 1) % $$.numOfImages ;
	   				
					if( true ){
						
						var self = $(' li:eq(' + index + ') a', $$.thumbnails);
						if( self && !self.hasClass('active')){
			    			
				    		//set current image
				    		$$.currentImage = index;
				    		
				    		//switch styles
				    		$('li a', $$.thumbnails).removeClass('active');
							self.addClass('active');
							
							//load new image
							var src 		= self.attr('rel');
							var dest 		= self.attr('type');
							var caption 	= self.attr('title');
							var projectId 	= self.attr('name');
							$$.loadImage( src, dest, caption, index );
							if( $$.options.isSlideshow ) $$.loadCaption( projectId );
						 
							$$.checkStripPosition( index, $$.options.thumbWidth, $$.options.visibleThumbs );
			    		}
						
					}
					$$.timer = setTimeout( $$.triggerNextImage , $$.timerValue);
			   		return false;
				}
   			}
   			
   			$('#thumbs ul li', this).each(function(i){
 				
 				//add click functionality to thumbnails
			    $('a', this).click( function( ){
			    	//check if image is already visible
			    	if( !$(this).hasClass('active') && !$$.isTransitionRunning ){
			    		
			    		//set current image
			    		$$.currentImage = i;
			    		
			    		//switch styles
			    		$('li a', $$.thumbnails).removeClass('active');
						$(this).addClass('active');
						
						//load new image
						var src 		= $(this).attr('rel');
						var dest 		= $(this).attr('type');
						var caption 	= $(this).attr('title');
						var projectId 	= $(this).attr('name');
						$$.loadImage( src, dest, caption, i );
						if( $$.options.isSlideshow ) $$.loadCaption( projectId );
						 
						$$.checkStripPosition( i, $$.options.thumbWidth, $$.options.visibleThumbs );
						
						if( $$.isPlaying ){
	   						var pl = startLabel ? startLabel : "Slideshow starten";
							$$.isPlaying = false;
							$($$.playBut).text( pl );
							clearTimeout( $$.timer );
	   					}
			    	}
			    	return false;
			    });
			});
			
			if( $$.options.isSlideshow && $.cookie( 'projectGalleryIndex' ) > 0 ){
				var index = $.cookie( 'projectGalleryIndex' );
				$(' li:eq(' + index + ') a', $$.thumbnails).click();
			}
			
		});
	};
	
	
	$$.loadImage = function( src, dest, caption, index  ) {
		
		$$.isTransitionRunning = true;
	
		$('ul li', $$.container).addClass('kicked').addClass('oldLightbox').find('img').css({'position' : 'absolute', 'z-index' : '205' });
		$('ul li.lightboxHelper', $$.container).remove();
		
		$('a', $$.thumbnails).each(
			function(i){
				
				if( i == index){
					var imgPath 		= 'ul li.new a';
					var imgItem 		= '<li class="new newLightbox"><a href="'+dest+'" title="'+caption+'"></a></li>';
				 	if( !$$.isLightbox ){
				 		imgItem 	= '<li class="new newLightbox"></li>';
				 		imgPath 		= 'ul li.new';
				 	}	
					$('ul',$$.container).append( imgItem );
					
					var img = new Image();
  
			  		// wrap our new image in jQuery, then:
			  		$(img)
			    	// once the image has loaded, execute this code
			    	.load(function () {
			      		// set the image hidden by default    
			      		$(this).hide();
			    
			    	  	$(imgPath, $$.container)
			     	 		.empty()
			        		// then insert our image
			        		.append(this);
			    			
			    			if( $$.options.isSlideshow ) $.cookie( 'projectGalleryIndex', index );
			    			
			      			// fade our image in to create a nice effect
			    	 		$(this).fadeIn( 500, function(){
			    	 			$$.isTransitionRunning = false;
			    	 			$('li.kicked', $$.container).remove();
								$('li.new a', $$.container).click( function(){
									$$.initLightbox();
								} );
								$('li.new', $$.container).removeClass('new');
								if( $('#jquery-lightbox p.caption') ) $('#jquery-lightbox p.caption').text( caption );
			    	 		});
			    	})
			    
			    	// if there was an error loading the image, react accordingly
			    	.error(function () {
						$$.isTransitionRunning = false;
			    	})
			    	.attr('src', src)
			    	.attr('style', 'position: absolute; top: 0; left: 0; z-index:210');
					
				}else{
					$('ul', $$.container).append('<li class="lightboxHelper newLightbox"><a href="'+$(this).attr('type')+'" title="'+$(this).attr('title')+'"></a></li>');
					if( !$$.isLightbox ) $('ul li.newLightbox', $$.container).removeClass('newLightbox'); 
				}
				if( $$.isLightbox ) $('ul li.newLightbox a',$$.container).lightBox();
			}
		);	
	}
	
	
	$$.checkStripPosition = function( index, thumbsWidth, visibleThumbs){
		var currentPosition = $($$.thumbnails).css('left');
		currentPosition 	= Number(currentPosition.substr(0, currentPosition.length-2));
		
		var position = currentPosition;
		if( !currentPosition ) currentPosition = 0;
		
		var mostrightindex 	= index + (visibleThumbs/2);
		var mostleftindex 	= index - (visibleThumbs/2);
		mostleftindex = mostleftindex < 1 ? 1 : mostleftindex;
		if( index>visibleThumbs/2 && ( mostrightindex * thumbsWidth) >= (visibleThumbs-1)*thumbsWidth) {
			
			if( mostrightindex >= $$.numOfImages-2  ){ // end of thumbrow?
				position = -1 * ($$.numOfImages - visibleThumbs) * thumbsWidth;
			}else{
				position = -1 * (mostrightindex-(visibleThumbs-2)) * thumbsWidth;
			}
		}else if( mostleftindex*thumbsWidth <= 1*thumbsWidth){
			if( index > 1){
				position = -1 * (mostleftindex-1) * thumbsWidth;
			}else{
				position = 0;
			}
		}
		
		if( $$.options.showAllThumbs ) position = 0;
		
		$($$.thumbnails).animate({ left: position }, 500);
	}
	
	
	$$.centerThumbs = function ( index, thumbsWidth, visibleThumbs ){}
	
	$$.initLightbox = function(){
		if( true || $$.isLightbox ){
		
			// create thumbs for lightbox
			var activeIndex;
			var galleryCopy = $('#meta #gallery').html();
			$('#jquery-lightbox').append( galleryCopy );
			$('#jquery-lightbox #thumbs ul li a').each( function( idx ){
				$(this).attr('rel', $(this).attr('type') ); // set rel of all links to big image
				$(this).attr('type', '' );
				if( $(this).hasClass('active') ){
					activeIndex = idx;
					$(this).removeClass('active');
				}
			});
			$('#jquery-lightbox #thumbs').hide();
			$('#jquery-lightbox #images ul li a img').hide(); // hide current image
			$('#jquery-lightbox').fenoGalleryThumbHover( { offsetY:388 } );
			$('#jquery-lightbox').fenoGallery( { visibleThumbs: 50, isSlideshow:false, showAllThumbs:true } );
			$('#jquery-lightbox').append('<p class="caption"></p>');
			$('#jquery-lightbox').fadeIn( 500, function(){
				if( $$.numOfImages > 1 )$('#jquery-lightbox #thumbs').hide().fadeIn();
				$('#jquery-lightbox #thumbs ul li:eq(' + activeIndex + ') a').click();
				$$.originalLogo = $('#logo').html();
				$('#logo').empty().append('<img width="235" height="17" border="0" title="feno - before light and beyond" alt="feno - before light and beyond" src="fileadmin/templates_v2/img/logo_green.png"/>');
			});	
			$('#jquery-lightbox').click( function(){ 
				if( $$.currentImage < $$.numOfImages-1 ){
					$($$.nextButton).click(); 
				} else {
					$('#jquery-overlay').click(); 
				}
			} );
			
			// reinit small gallery
			var self = this;
			$('#jquery-overlay').click(function() {
				$('#gallery.smallGallery').fenoGalleryThumbHover( { offsetY:177 } );
				$('.smallGallery').fenoGallery( { visibleThumbs: 16, isLightbox:true, showAllThumbs:false } );
				$('#logo').empty().append( $$.originalLogo );
				// set active index
				var p = $('#gallery #thumbs ul li a.active').parent();
				$$.currentImage = $('#gallery #thumbs ul li').index(p);
			});
			
			
			
		}
	}	
	
	
	
	$$.loadCaption = function( projectId ){
		/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	 	 * 
	 	 * USE THIS ON LIVE SYSTEM
	     *
	 	 *!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/		
		
		$.get("index.php", { L:langId, type:500, pId : projectId }, function(data){
  			$('h2', $$.caption).text($('h1', data).text());
    		$('p', $$.caption).text($('p', data).text());
    		$($$.projectShortcut).empty().append( $('a', data) );
    		$('a',$$.projectShortcut ).addClass('projectlink');
		});
	}
})(jQuery);