jQuery(document).ready(function() {
    jQuery(function() {
    	var ie 			= false;
    	if (jQuery.browser.msie) {
    		ie = true;
    	}
    	//current album/image displayed 
    	var enableshow  = true;
    	var current		= -1;
    	var album		= -1;
    	//windows width
    	var w_width 	= jQuery(window).width();
    	//caching
    	var $albums 	= jQuery('#pp_thumbContainer div.album');
    	var $loader		= jQuery('#pp_loading');
    	var $next		= jQuery('#pp_next');
    	var $prev		= jQuery('#pp_prev');
    	var $images		= jQuery('#pp_thumbContainer div.content img');
    	var $back		= jQuery('#pp_back');
    	
    	//we wnat to spread the albums through the page equally
    	//number of spaces to divide with:number of albums plus 1
    	var nmb_albums	= $albums.length;
    	var spaces 		= w_width/(nmb_albums+1);
    	var cnt			= 0;
    	//preload all the images (thumbs)
    	var nmb_images	= $images.length;
    	var loaded  	= 0;
    	$images.each(function(i){
    		var $image = jQuery(this);
    		jQuery('<img alt="" />').load(function(){
    			++loaded;
    			if(loaded == nmb_images){
    				//also rotate each picture of an album with a random number of degrees
    				$images.each(function(){
    					var $this 	= jQuery(this);
    					var r 		= Math.floor(Math.random()*41)-20;
    					$this.transform({'rotate': r + 'deg'});
    				});
    			}
    		}).attr('src', $image.attr('src'));
    	});
    	
    	function spreadPictures(){
    		var $album 	= $albums;
    		//track which album is opened
    		album		= $album.index();
    		//now move the current album to the left 
    		//and at the same time spread its images through 
    		//the window, rotating them randomly. Also hide the description of the album
    		
    		//store the current left for the reverse operation
    		$album.data('left',$album.css('left'))
    			  .stop()
    			  .find('.descr').stop().animate({'bottom':'0px'},200);
    		var total_pic 	= $album.find('.content').length;
    		var cnt			= 0;
    		//each picture
    		$album.find('.content')
    			  .each(function(){
    			var $content = jQuery(this);
    			++cnt;
    			//window width
    			var w_width 	= jQuery("div#main").width();
    			var spaces 		= w_width/(total_pic+3);
    			var left		= (spaces*cnt) - (140/5);
    			var r 			= Math.floor(Math.random()*41)-20;
    			//var r = Math.floor(Math.random()*81)-40;
    			$content.stop().animate({'left':left+'px'},1,function(){
    				jQuery(this).unbind('click')
    					   .bind('click',showImage)
    					   .unbind('mouseenter')
    					   .bind('mouseenter',upImage)
    					   .unbind('mouseleave')
    					   .bind('mouseleave',downImage);
    			}).find('img')
    			  .stop()
    			  .animate({'rotate': r+'deg'},1);
    			$back.stop().animate({'left':'0px'},1);
    		});
    	}
    	
    	// spreadPictures at the beginning
    	spreadPictures();
    	
    	//displays an image (clicked thumb) in the center of the page
    	//if nav is passed, then displays the next / previous one of the 
    	//current album
    	function showImage(nav){
    		if(!enableshow) return;
    		enableshow = false;
    		if(nav == 1){
    			//reached the first one
    			if(current==0){
    				enableshow = true;
    				return;
    			}
    			var $content = jQuery('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')').find('.content:nth-child('+parseInt(current)+')');
    			//reached the last one
    			if($content.length==0){
    				enableshow = true;
    				current-=2;
    				return;
    			}	
    		}
    		else
    			var $content = jQuery(this);
    		
    		//show ajax loading image
    		$loader.show();
    		
    		//there's a picture being displayed
    		//lets slide the current one up
    		if(current != -1){
    			hideCurrentPicture();
    		}

    		current 				= $content.index();
    		var $thumb				= $content.find('img');
    		var imgL_source 	 	= $thumb.attr('alt');
    		var imgL_description 	= $thumb.next().html();
    		//preload the large image to show
    		jQuery('<img style="" alt="" />').load(function(){
    			var $imgL 	= jQuery(this);
    			//resize the image based on the windows size
    			resize($imgL);
    			//create an element to include the large image
    			//and its description
    			var $preview = jQuery('<div />',{
    				'id'		: 'pp_preview',
    				'className'	: 'pp_preview',
    				'html'     	: '<div class="pp_descr"><span>'+imgL_description+'</span></div><a href="#" id="close_current_image"><img src="fileadmin/img/fancy_close.png" title="Ansicht Schließen" /></a>',
    				'style'		: 'visibility:hidden; z-index:1000;'
    			});
    			$preview.prepend($imgL);
    			jQuery('#pp_gallery').prepend($preview);
    			
        		// close current preview image
        		jQuery('a#close_current_image').click(function() {
    		            hideCurrentPicture();
        		    return false;
        		});
    			
    			var largeW 				= $imgL.width()+20;
    			var largeH 				= $imgL.height()+10+45;
    			//change the properties of the wrapping div 
    			//to fit the large image sizes
    			$preview.css({
    				'width'			:largeW+'px',
    				'height'		:largeH+'px',
    				'marginTop'		:-largeH/2-20+'px',
    				'marginLeft'	:-largeW/2+'px',
    				'visibility'	:'visible'
    			});
    			
    			//enable cufon for the description
    			Cufon.replace('.pp_descr');
    			
    			//show navigation
    			showNavigation();
    			
    			//hide the ajax image loading
    			$loader.hide();
    			
    			//slide up (also rotating) the large image
    			var r 			= Math.floor(Math.random()*41)-20;
    			if(ie)
    				var param = {
    					'top':'50%'
    				};
    			else
    				var param = {
    					'top':'50%',
    					'rotate': r+'deg'
    				};
    			$preview.stop().animate(param,500,function(){
    				enableshow = true;
    			});
    		}).error(function(){
    			//error loading image. Maybe show a message : 'no preview available'?
    		}).attr('src',imgL_source);	
    	}
    	
    	//click next image
    	$next.bind('click',function(){
    		current+=2;
    		showImage(1);
    	});
    	
    	//click previous image
    	$prev.bind('click',function(){
    		showImage(1);
    	});
    	
    	//slides up the current picture
    	function hideCurrentPicture(){
    		current = -1;
    		var r 	= Math.floor(Math.random()*41)-20;
    		if(ie)
    			var param = {
    				'top':'-150%'
    			};
    		else
    			var param = {
    				'top':'-150%',
    				'rotate': r+'deg'
    			};
    		jQuery('#pp_preview').stop()
    						.animate(param,500,function(){
    							jQuery(this).remove();
    						});
    	}
    	
    	//shows the navigation buttons
    	function showNavigation(){
    		$next.stop().animate({'right':'0px'},100);
    		$prev.stop().animate({'left':'0px'},100);
    	}
    	
    	//hides the navigation buttons
    	function hideNavigation(){
    		$next.stop().animate({'right':'-40px'},300);
    		$prev.stop().animate({'left':'-40px'},300);
    	}
    	
    	//mouseenter event on each thumb
    	function upImage(){
    		var $content 	= jQuery(this);
    		$content.stop().animate({
    			'marginTop'		: '-30px'
    		},400).find('img')
    			  .stop()
    			  .animate({'rotate': 'deg'},400);
    	}
    	
    	//mouseleave event on each thumb
    	function downImage(){
    		var $content 	= jQuery(this);
    		var r 			= Math.floor(Math.random()*41)-20;
    		$content.stop().animate({
    			'marginTop'		: '0px'
    		},400).find('img').stop().animate({'rotate': r + 'deg'},400);
    	}
    	
    	//resize function based on windows size
    	function resize($image){
    		var widthMargin		= 50
    		var heightMargin 	= 200;
    		
    		var windowH      = jQuery(window).height()-heightMargin;
    		var windowW      = jQuery(window).width()-widthMargin;
    		var theImage     = new Image();
    		theImage.src     = $image.attr("src");
    		var imgwidth     = theImage.width;
    		var imgheight    = theImage.height;
    
    		if((imgwidth > windowW)||(imgheight > windowH)){
    			if(imgwidth > imgheight){
    				var newwidth = windowW;
    				var ratio = imgwidth / windowW;
    				var newheight = imgheight / ratio;
    				theImage.height = newheight;
    				theImage.width= newwidth;
    				if(newheight>windowH){
    					var newnewheight = windowH;
    					var newratio = newheight/windowH;
    					var newnewwidth =newwidth/newratio;
    					theImage.width = newnewwidth;
    					theImage.height= newnewheight;
    				}
    			}
    			else{
    				var newheight = windowH;
    				var ratio = imgheight / windowH;
    				var newwidth = imgwidth / ratio;
    				theImage.height = newheight;
    				theImage.width= newwidth;
    				if(newwidth>windowW){
    					var newnewwidth = windowW;
    					var newratio = newwidth/windowW;
    					var newnewheight =newheight/newratio;
    					theImage.height = newnewheight;
    					theImage.width= newnewwidth;
    				}
    			}
    		}
    		$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
    	}
    });
});