var Slider = {};
var descriptionSpeed = 1000;
var fadeSpeed = 1500;
var delay = 10000;
var description;
var image;
var offset = function () {return $("#slider .wrapper").offset().left + image.width()}

$(window).resize(function() {
	
	description.animate({left: offset()},0) 
});

Slider.init = function() {
	
	$("<div id='description'></div>").appendTo($('#slider'));
	
	image = $('#slider .wrapper div:first-child');
	image.css({"display": "none"});	
    description = $("#description");
	
	Slider.createSlide();	
}

Slider.createSlide = function() {
		
	image.css({"display": "none"});	
	$(image.attr("desc")).appendTo(description);
	description.css({left: $(window).width()});
	description.animate({left: offset()}, descriptionSpeed, "easeInOutCubic", Slider.animateImage)
}

Slider.animateImage = function() {
	
	image.fadeIn(fadeSpeed, "easeOutSine")
			.delay(delay)
			.fadeOut(fadeSpeed, "easeOutSine", Slider.hideDescription)
	
}

Slider.hideDescription = function() {
	
	description.animate({left: -1.5 * description.width()}, descriptionSpeed, "easeInSine", Slider.loop);
	
}

Slider.loop = function() {
	
	image = image.next().length ? image.next() : $('#slider .wrapper div:first-child');
	description.text("");
	Slider.createSlide();
	
}