;(function($) {
	$(document).ready(function() {
		//jQuery.easing.def = "easeInOutQuad";
		jQuery.easing.def = "easeInOutCirc";

		var slides = $('#slides li');
		// ready for the next animation loop
	  function Repositioning(el){
			el.removeClass("current");
			el.css({"top":"320px"});
			//el.css({"opacity":0});
	    el.find('.left h1').css({"left": "-1000px"});
	    el.find('.left p').css({"left": "-1000px"});
	    el.find('.right h2').css({"left": "5000px"});
	    el.find('.right p').css({"left": "5000px"});
	  };
		// mega animation engine
		function showSlide (obj) { 
			$(obj).addClass("current");
			$(obj).animate({"opacity":0},500);
			$(obj).animate({"top":0},0);
			$(obj).animate({"opacity":1},3000);
			$(obj).find(".left h1").animate({"left":0},2200, "easeInOutCubic");
			$(obj).find(".left p").animate({"left":0},2900, "easeInOutCubic");
			$(obj).find(".right h2").animate({"left":0},2500, "easeInOutCubic");
			$(obj).find(".right p").animate({"left":0},3200,"easeInOutCubic",function(){					
                        $(obj).delay(4000).animate({"opacity":0},500);
				// when finished the animation will call the next object
				setTimeout( function(){
//					$(obj).animate({"top":"-320px"},500);
					// console.log($(obj).next().length);
					if ($(obj).next().length) {
						showSlide( $(obj).next() );
					}else {
						showSlide( $("#slides li:first") );
					};
					// repositioning of the previous object this must be 
					setTimeout(function(){
						Repositioning($(obj));
					},1000);
					
				}, 4000 );										
			});			
		}
		showSlide(  $("#slides li:first")  );
	})
})(jQuery);