var slides;
var divSlideShow;
var slideShowWidth;
var slideShowHeight;
var zindexStart = 100;
var animationTime = 10000;
var sleepTime = 10000;

$(document).ready(function(){

	divSlideShow = $('div.slideshow'); 
	slideShowWidth = divSlideShow.width();
	slideShowHeight = divSlideShow.height();
	slides = $('.slide');
	
	var img;
	var ratio;
	var currWidth;
	var currHeight;
	var reqHeight;
	
	
	for(var i=0; i<slides.length; i++){
		div = slides.eq(i);
		div.css('z-index', (zindexStart-i));
		div.css('top', '0px');
		div.css('left', '0px');
		img = div.children('img');
		//img.hide();
		var imgSize = img.attr('alt').split('x');
		currWidth = imgSize[0]*1;
		currHeight = imgSize[1]*1;

		/* resize width */
		ratio = currWidth/slideShowWidth;
		reqHeight = Math.floor(currHeight/ratio);

		if (slideShowHeight <= reqHeight){
			img.attr('src', function (arr){return img.attr('src')+',w='+slideShowWidth;})
		} else {
			/* resize height */
			img.attr('src', function (arr){return img.attr('src')+',h='+slideShowHeight;})
		}
		
		div.css('width', slideShowWidth+'px');
		div.css('height', slideShowHeight+'px');
		div.css('display', 'block');
	}
	
	startSlideShow(sleepTime);
});

function startSlideShow(time){
	setTimeout('slideShow()', time);
}

function slideShow(){
	divSlideShow.children('div:first').animate({opacity: "hide"}, animationTime, null, function(){
		moveDiv();
	});
}

function moveDiv(){
	/* cleaning styles and moving div */
	var divToRemove = divSlideShow.children('div:first');
	divToRemove.children('img').css('top', '0px').css('left', '0px');
	divToRemove.css('top', '0px').css('left', '0px').width(slideShowWidth).height(slideShowHeight).remove().appendTo(divSlideShow);
	
	slides = $('.slide');
	
	for(var i=0; i<slides.length; i++){
		div = slides.eq(i);
		div.css('z-index', (zindexStart-i));
		div.css('display', 'block');
		
		if (i == 0){
			div = divSlideShow.children('div:first');
			img = div.children('img');
			
			if (slideShowWidth < img.width() && (img.width()-slideShowWidth) > 20) {
				img.animate({left: -(img.width()-slideShowWidth)+'px'}, 10000, null, getEfect);
			} else if (slideShowHeight < img.height() && (img.height()-slideShowHeight) > 20){
				img.animate({top: -(img.height()-slideShowHeight)+'px'}, 10000, null, getEfect);
			} else {
				getEfect();
			}
			
		}
	}
}

function getEfect(){
	var randomnumber=Math.floor(Math.random()*5)

	switch (randomnumber){
		//remove right part
		case 0:
			var oldDiv = divSlideShow.children('div:first');
			var newDiv = oldDiv.clone();

			//setting position
			oldDiv.css('z-index', zindexStart+1);
			newDiv.css('z-index', zindexStart);
			
			//cropping div
			newDiv.width(Math.round(oldDiv.width()*0.75));

			//adding to the slide show on the second position
			oldDiv.after(newDiv);

			//hiding pictrue fragment (div)
			oldDiv.animate({opacity: "hide"}, time, null, function(){
				oldDiv.remove();
				startSlideShow(10);
			});
			
			break;
		
		//remove left part
		case 1:
			var oldDiv = divSlideShow.children('div:first');
			var newDiv = oldDiv.clone();
			var img = newDiv.children('img');

			//repair css left value ("left:auto" problem)
			img.css('left', (img.css('left').replace('px','')*1) ? img.css('left') : '0px');

			//setting position
			oldDiv.css('z-index', zindexStart+1);
			newDiv.css('z-index', zindexStart);
			
			//cropping div
			var newArea = Math.round(oldDiv.width()*0.75);
			newDiv.width(newArea);
			newDiv.css('left', oldDiv.width()-newArea + 'px');
			
			img.css('left', ((img.css('left').replace('px','')*1)-(oldDiv.width()-newArea)) + 'px');
			
			//adding to the slide show on the second position
			oldDiv.after(newDiv);

			//hiding pictrue fragment (div)
			oldDiv.animate({opacity: "hide"}, time, null, function(){
				oldDiv.remove();
				startSlideShow(10);
			});
			
			break;
			
		//remove bottom part
		case 2:
			var oldDiv = divSlideShow.children('div:first');
			var newDiv = oldDiv.clone();

			//setting position
			oldDiv.css('z-index', zindexStart+1);
			newDiv.css('z-index', zindexStart);
			
			//cropping div
			newDiv.height(Math.round(oldDiv.height()*0.75));

			//adding to the slide show on the second position
			oldDiv.after(newDiv);

			//hiding pictrue fragment (div)
			oldDiv.animate({opacity: "hide"}, time, null, function(){
				oldDiv.remove();
				startSlideShow(10);
			});
			
			break;
		
		//remove top part
		case 3:
			var oldDiv = divSlideShow.children('div:first');
			var newDiv = oldDiv.clone();
			var img = newDiv.children('img');
			
			//repair css top value ("top:auto" problem)
			img.css('top', (img.css('top').replace('px','')*1) ? img.css('top') : '0px');

			//setting position
			oldDiv.css('z-index', zindexStart+1);
			newDiv.css('z-index', zindexStart);
			
			//cropping div
			var newArea = Math.round(oldDiv.height()*0.75);
			newDiv.height(newArea);
			newDiv.css('top', oldDiv.height()-newArea + 'px');
			img.css('top', ((img.css('top').replace('px','')*1)-(oldDiv.height()-newArea)) + 'px');

			//adding to the slide show on the second position
			oldDiv.after(newDiv);

			//hiding pictrue fragment (div)
			oldDiv.animate({opacity: "hide"}, time, null, function(){
				oldDiv.remove();
				startSlideShow(10);
			});
			
			break;
		
		default:
			startSlideShow(10);
	}
}