var items_count = 0;
		function load_images(xml_url)
		{
		items_count = 0;
		$.ajax({
				type: "GET",
				url: xml_url,
				dataType: "xml",
				success: function(xml) 
				{
					$(xml).find('site').each(function()
					{
						var title = $(this).find('title').text();
						var hide = 'display:none;';	
						$("#ps_container").append("<div id='img_"+(items_count)+"' class='img_div' style='"+hide+"'></div>");
						items_count++;
					});	
				}
		});
		}
            $(function() {
				/**
				* navR,navL are flags for controlling the albums navigation
				* first gives us the position of the album on the left
				* positions are the left positions for each of the 5 albums displayed at a time
				*/
                var navR,navL	= false;
				var first		= 1;

				var $ps_albums 		= $('#ps_albums');
				/**
				* number of albums available
				*/
				var elems			= $ps_albums.children().length;
				
				/**
				* move the first 5 albums to the viewport
				*/
				
				/**
				* next album
				*/
				
				/**
				* we move the first album (the one on the left) to the left side of the window
				* the next 4 albums slide one position, and finally the next one in the list
				* slides in, to fill the space of the first one
				*/
				
				var $ps_container 	= $('#ps_container');
				var $ps_overlay 	= $('#ps_overlay');
				var $ps_close		= $('#ps_close');
				/**
				* when we click on an album,
				* we load with AJAX the list of pictures for that album.
				* we randomly rotate them except the last one, which is
				* the one the User sees first. We also resize and center each image.
				*/
				

				$ps_albums.bind('click',function(){
					var xml_url = $(this).attr("title");
					load_images(xml_url);
					$ps_container.html('<a id="ps_next_photo" class="ps_next_photo" style="display:none;"></a><a id="ps_prev_photo" class="ps_prev_photo" style="display:none;"></a>');
					$ps_container.show();		
					$ps_overlay.show();	
					$ps_close.show();
					next_photo();
					prev_photo();
					$('#ps_next_photo').show();
					$('#ps_prev_photo').show();
					var $elem = $(this);
					var $loading 	= $('<div />',{className:'loading'});
					$elem.append($loading);
					$ps_container.find('img').remove();
					$.ajax({
							type: "GET",
							url: xml_url,
							dataType: "xml",
							success: function(xml) 
							{
								var cnt = 0;
								$(xml).find('site').each(function()
								{
									var item_source = $(this).find('img').text();
									var title = $(this).find('title').text();
									
									$('<img />').load(function(){
										var $image = $(this);
										$image.attr("id","i_"+cnt);
										$("#img_"+cnt).html(title.replace("\\n","<br />"))
										++cnt;
										resizeCenterImage($image);
										$ps_container.append($image);
										var r		= Math.floor(Math.random()*41)-20;
										if(cnt < items_count){
											$image.css({
												'-moz-transform'	:'rotate('+r+'deg)',
												'-webkit-transform'	:'rotate('+r+'deg)',
												'transform'			:'rotate('+r+'deg)',
												'-o-transform'		:'rotate('+r+'deg)'
											});
										}
										
										if(cnt == items_count){
											$loading.remove();
											$ps_container.show();
											$ps_close.show();
											$ps_overlay.show();
											var $current 	= $ps_container.find('img:last');
											$('.img_div').hide();
											var cid = $current.attr("id").split("_");	
											var h = $current.attr("width");
											var h4 = $current.css("marginLeft");
											var h5 = $current.css("marginTop");
											var new_h = parseInt(h5.replace("px",""));
											var div_h = $("#img_"+cid[1]).css("height");
											var new_h2 = parseInt(div_h.replace("px",""));
											var hh = (-new_h+new_h2);
											$("#img_"+cid[1]).css({'top':'48%'});
											$("#img_"+cid[1]).css({'marginTop':'-'+hh+'px'});
											$("#img_"+cid[1]).css({'width':(h)+1});
											$("#img_"+cid[1]).css({"left":"50%",'marginLeft':h4});
											$("#img_"+cid[1]).show();
										}
										
									}).attr('src',item_source);
							});
						}
					});
				});
				/**
				* when hovering each one of the images, 
				* we show the button to navigate through them
				*/
				$ps_container.live('mouseenter',function(){
					$('#ps_next_photo').show();
					$('#ps_prev_photo').show();
				}).live('mouseleave',function(){
					$('#ps_next_photo').hide();
					$('#ps_prev_photo').hide();
				});
				
				/**
				* navigate through the images: 
				* the last one (the visible one) becomes the first one.
				* we also rotate 0 degrees the new visible picture 
				*/
				function next_photo ()
				{
				$('#ps_next_photo').bind('click',function(){
					var $current 	= $ps_container.find('img:last');
					var r			= Math.floor(Math.random()*41)-20;
					
					$('.img_div').hide();
					
					var cid = new Array();
					cid = $current.attr('id').split("_");
					$("#img_"+cid[1]).hide();
					var currentPositions = {
						marginLeft	: $current.css('margin-left'),
						marginTop	: $current.css('margin-top')
					}
					
					var $new_current = $current.prev();
					var cid = new Array();
					cid = $new_current.attr('id').split("_");

					$current.animate({
						'marginLeft':'225px',
						'marginTop':'-365px'
					},250,function(){
						$(this).insertBefore($ps_container.find('img:first'))
							   .css({
									'-moz-transform'	:'rotate('+r+'deg)',
									'-webkit-transform'	:'rotate('+r+'deg)',
									'transform'			:'rotate('+r+'deg)',
									'-o-transform'		:'rotate('+r+'deg)'
								})
							   .animate({
									'marginLeft':currentPositions.marginLeft,
									'marginTop'	:currentPositions.marginTop
									},250,function(){
										$new_current.css({
											'-moz-transform'	:'rotate(0deg)',
											'-webkit-transform'	:'rotate(0deg)',
											'transform'			:'rotate(0deg)',
											'-o-transform'		:'rotate(0deg)'
										});
										
										var h = $new_current.attr("width");
										var h4 = $new_current.css("marginLeft");
										var h5 = $new_current.css("marginTop");
										var new_h = parseInt(h5.replace("px",""));
										var div_h = $("#img_"+cid[1]).css("height");
										var new_h2 = parseInt(div_h.replace("px",""));
										var hh = (-new_h+new_h2);
										
										$("#img_"+cid[1]).css({'top':'48%'});
										$("#img_"+cid[1]).css({'marginTop':'-'+hh+'px'});
										$("#img_"+cid[1]).css({'width':(h)+1});
										$("#img_"+cid[1]).css({"left":"50%",'marginLeft':h4});
										$("#img_"+cid[1]).show();
							   });
						});

				});
				}
				
				function prev_photo()
				{
				$('#ps_prev_photo').bind('click',function(){
					var $current 	= $ps_container.find('img:first');
					var r			= Math.floor(Math.random()*41)-20;
					
					$('.img_div').hide();
					
					var cid = new Array();
					cid = $current.attr('id').split("_");
					var currentPositions = {
						marginLeft	: $current.css('margin-left'),
						marginTop	: $current.css('margin-top')
					}
					var $new_current = $current.next();
					$current.animate({
						'marginLeft':'225px',
						'marginTop':'-360px'
					},250,function(){
						$(this).insertAfter($ps_container.find('img:last'))
							   .css({
									'-moz-transform'	:'rotate(0deg)',
									'-webkit-transform'	:'rotate(0deg)',
									'transform'			:'rotate(0deg)',
									'-o-transform'		:'rotate(0deg)'
								},function()
								{									
									var cid = new Array();
									cid = $(this).attr('id').split("_");
									

								})
							   .animate({
									'marginLeft':currentPositions.marginLeft,
									'marginTop'	:currentPositions.marginTop
									},250,function(){
										$new_current.css({
											'-moz-transform'	:'rotate('+r+'deg)',
											'-webkit-transform'	:'rotate('+r+'deg)',
											'transform'			:'rotate('+r+'deg)',
											'-o-transform'		:'rotate('+r+'deg)'
										});

									var h = $('#i_'+cid[1]).attr("width");
									var h4 = $('#i_'+cid[1]).css("marginLeft");
									var h5 = $('#i_'+cid[1]).css("marginTop");
									var new_h = parseInt(h5.replace("px",""));
									var div_h = $("#img_"+cid[1]).css("height");
									var new_h2 = parseInt(div_h.replace("px",""));
									var hh = (-new_h+new_h2);
									$("#img_"+cid[1]).css({'top':'48%'});
									$("#img_"+cid[1]).css({'marginTop':'-'+hh+'px'});
									$("#img_"+cid[1]).css({'width':(h)+1});
									$("#img_"+cid[1]).css({"left":"50%",'marginLeft':h4});
									$("#img_"+cid[1]).show();

							   });
					});
				});
				}
				/**
				* close the images view, and go back to albums
				*/
				$('#ps_close').bind('click',function(){
					$ps_container.hide();
					$ps_close.hide();
					$ps_overlay.fadeOut(400);
					
				});
				
				/**
				* resize and center the images
				*/
				function resizeCenterImage($image){
					var theImage 	= new Image();
					theImage.src 	= $image.attr("src");
					var imgwidth 	= theImage.width;
					var imgheight 	= theImage.height;
					
					var containerwidth  = 500;
					var containerheight = 500;
					
					if(imgwidth	> containerwidth){
						var newwidth = containerwidth;
						var ratio = imgwidth / containerwidth;
						var newheight = imgheight / ratio;
						if(newheight > containerheight){
							var newnewheight = containerheight;
							var newratio = newheight/containerheight;
							var newnewwidth =newwidth/newratio;
							theImage.width = newnewwidth;
							theImage.height= newnewheight;
						}
						else{
							theImage.width = newwidth;
							theImage.height= newheight;
						}
					}
					else if(imgheight > containerheight){
						var newheight = containerheight;
						var ratio = imgheight / containerheight;
						var newwidth = imgwidth / ratio;
						if(newwidth > containerwidth){
							var newnewwidth = containerwidth;
							var newratio = newwidth/containerwidth;
							var newnewheight =newheight/newratio;
							theImage.height = newnewheight;
							theImage.width= newnewwidth;
						}
						else{
							theImage.width = newwidth;
							theImage.height= newheight;
						}
					}
					$image.css({
						'width'			:theImage.width,
						'height'		:theImage.height,
						'margin-top'	:-(theImage.height/2)-10+'px',
						'margin-left'	:-(theImage.width/2)-10+'px'	
					});
					
				}
            });