// JavaScript Document

(function($){
	$('body').ready(function(){
		var images = ['a.jpg','b.jpg','c.jpg','d.jpg','e.jpg'];
		var startIndex = 1;
		var total = images.length;
		var currentIndex = 0;
		
			var screenW = 0;
			var screenH = 0;
		var $currentImage = null;
		
		function swapImage(){
			currentIndex ++;
			if(currentIndex > total) currentIndex = 1;
			
			
			var $nextImage = $('img#ss-img-'+currentIndex);
			
			var show = function(){
				
				if($currentImage!=null){
					$currentImage.fadeOut(500,function(){
						$(this).removeClass('ss-showing');
					});
				}
				
				
				$nextImage.addClass('nextImage').addClass('ss-showing');
				$nextImage.show().fadeOut(0);
				
				sizeImage(currentIndex - 1,$nextImage);
				
				$nextImage.fadeIn(500,function(){
					$currentImage = $nextImage;
					$nextImage.removeClass('nextImage');
					$nextImage = null;				
					setTimeout(swapImage, 2500);
				});
			}
			
			if($nextImage == null || $nextImage.length != 1){
				var img = new Image();
				img.onload = function(){
					
					$nextImage = $('<img alt="" id="ss-img-'+currentIndex+'"/>');
					$nextImage.attr('_w',img.width);
					$nextImage.attr('_h',img.height);
					$nextImage.attr('src',img.src);
					$nextImage.appendTo('#slideshow');
					
					
					show();
				}
				img.onerror = function(){
					setTimeout(swapImage, 500);
				}
				img.src = 'images/'+images[currentIndex-1];
				
			}else{
				show();
			}
		}
		
		
		function sizeImage (idx,selector){
			var $img = $(selector);
			
			var imgW = $img.attr('_w');
			var imgH = $img.attr('_h');
			var scale = 1;
			
			if(imgW > screenW){
				scale = screenW / imgW;
			}
				
			if( imgW * scale < screenW )
				scale = screenW / imgW;
			
			if( imgH * scale < screenH )
				scale = screenH / imgH;

			//console.log(imgW,imgH,scale,imgW*scale,imgH*scale);
			
			// align to center
			var tx = screenW * 0.5 - imgW * scale * 0.5;
			var ty = screenH * 0.5 - imgH * scale * 0.5;
			if(ty < 0 ) ty = 0;
			$img
				.css('left', tx)
				.css('top', ty)
				.width(imgW * scale)
				.height(imgH * scale);

		}
		
		// fired when screen resizze
		function resizeHandler(){
			screenW = $(window).width();
			if(screenW < $('#topbar img').width()) screenW = $('#topbar img').width();
			
			screenH = $(window).height() - 60;
			
			$('#slideshow').width(screenW).height(screenH);
			
			// we only resize all showing image
			$('#slideshow img.ss-showing').each(sizeImage);
		}
		
		// handling size
		$(window).bind('resize',resizeHandler);
		
		
		resizeHandler();
		swapImage();
	});
})(jQuery);