(function($){
	$.fn.dddSlider = function(params){
		var element = this;
		var slideWidth = 500;
		var slides = $(".slide");
		var speed  = 800;
		var speedBtwnSlides = 4500;
		var zindex=10000;
		var slideHeight = 300;
		var currentSlide = 0;
		var left1 = parseInt(slideWidth*0.6);
		var top1 = parseInt(slideHeight*0.2);
		var width1 = parseInt(slideWidth*0.6);

		var left2 = parseInt(slideWidth*0.96);
		var top2 = parseInt(slideHeight*0.3);
		var width2 = parseInt(slideWidth*0.4);

		var left3 = parseInt(slideWidth*1.25);
		var top3 = parseInt(slideHeight*0.4);
		var width3 = parseInt(slideWidth*0.2);

		var left4 = parseInt(slideWidth*1.48);
		var top4 = parseInt(slideHeight*0.5);
		var animating = false;
		var t;
		var tempTimer;
		var autoplay = true;
		if(params.autoplay==false) autoplay = params.autoplay;
		//initial slides positioning
		initialize();
		//playing the slides
		if(autoplay){//gets run from initialize
			 t = setTimeout(animateSlides,800);
		}

		//initialize function that creates all the controls and places the initial slides where they have to be placed, adding actions to buttons
		function initialize(){
			//set the appropruate zIndex to each slide
			slides.each(function(){
				zindex--;
				$(this).css({
					"zIndex": zindex
				});
				//hide the ones we don't need
				if(zindex<9996){
					$(this).hide();
				}
			});
			//display first 4 in the exact way they should be displayed
			$(slides[1]).css({
				left:left1,
				top:top1,
				width:width1
			});
			$(slides[2]).css({
				left:left2,
				top:top2,
				width:width2
			});
			$(slides[3]).css({
				left:left3,
				top:top3,
				width:width3
			});
			
			//create 3 divs onclick would initiate the moving to particular project and stopping the animation
			$(element).append('<div class="control" id="firstControl">&nbsp;</div>');
			$("#firstControl").css({
				left:slideWidth,
				top:top1,
				width: slideWidth*0.2,
				height: slideHeight*0.6
			});
			$(element).append('<div class="control" id="secondControl">&nbsp;</div>');
			$("#secondControl").css({
				left:slideWidth*1.2,
				top:top2,
				width: slideWidth*0.16,
				height:slideHeight*0.4
			});
			$(element).append('<div class="control" id="thirdControl"></div>');
			$("#thirdControl").css({
				left:slideWidth*1.36,
				top:top3,
				width: slideWidth*0.09,
				height:slideHeight*0.2
			});
			
			$(".control").bind("click",function(){
				if(autoplay){
					clearTimeout(t);
					clearTimeout(tempTimer);
					autoplay=false;
					$(".pp").attr("id","play");
				}
				switch($(this).attr('id')){
					case 'firstControl':
						animateSlides();
						break;
					case 'secondControl': 
						animateSlides();
						animateSlides();
						break;
					case 'thirdControl':
						animateSlides();
						animateSlides();
						animateSlides();
						animateSlides();
						break;
				}
			});
			//creating the play/pause button and it's functionality
			if(autoplay){
				$(element).append('<div id="pause" class="pp"></div>');
			}else{
				$(element).append('<div id="play" class="pp"></div>');
			}
			$(".pp").bind("click",function(){
				if($(this).attr('id')=='pause'){
					autoplay = false;
					$(this).attr("id","play");
					clearTimeout(t);
					clearTimeout(tempTimer);
				}else{
					autoplay = true;
					$(this).attr("id","pause");
					animateSlides();
				}
			});

		};

			function animateSlides(){
				var slide1  = currentSlide;
				var slide2 = currentSlide+1==slides.length?0:currentSlide+1;
				var slide3 = slide2+1==slides.length?0:slide2+1;
				var slide4 = slide3+1==slides.length?0:slide3+1;
				var slide5 = slide4+1==slides.length?0:slide4+1;
				var spd = speed;
				//position the last(new) slide where it should be
				if(!animating){
					clearTimeout(tempTimer);
					animating = true;
					zindex--;
					$(slides[slide5]).css({
						left:left4,
						top:top4,
						width:"0px",
						zIndex: zindex
					});
					$(slides[slide5]).show();
					$(slides[slide1]).animate({
						width: "800",
						left: -slideWidth,
						top:"-100",
						opacity: "0"
					},spd,function(){
						$(this).css({width:"0px"});
/*						$(this).animate({
							width:"0"
							left:left4,
							top:top4
						},0);*/
						animating = false;
					});
					$(slides[slide2]).animate({
						width: slideWidth,
						left: "0",
						top:"0"
					},spd);
					$(slides[slide3]).animate({
						width: width1,
						left: left1,
						top:top1
					},spd);
					$(slides[slide4]).animate({
						width: width2,
						left: left2,
						top: top2
					},spd);
					$(slides[slide5]).animate({
						opacity:"1"
					},0);
					$(slides[slide5]).animate({
						width:width3,
						left:left3,
						top:top3
					},spd);
					movecircles();
					currentSlide = slide2;
					if(autoplay){ t = setTimeout(animateSlides,speedBtwnSlides);}
				}else{
					tempTimer = setTimeout(animateSlides,spd);
				}
			};

//		});
	};
})(jQuery);