$(document).ready(function() {
var position = 0;
var slideWidth = $("#slides_container").width();
var slides = $(".slide");
var pages = slides.length;
$("#slides_container").css("overflow", "hidden");
slides.wrapAll("<div id=\"slide_inner\">")
.css({ "float" : "left", "width" : slideWidth });
$("#slide_inner").css("width", slideWidth * pages);
$("#slideshow").prepend("<span id=\"left_control\" class=\"control\"><</span>")
.append("<span id=\"right_control\" class=\"control\">></span>");
manageControls(position);
$(".control").click(function() {
position = ($(this).prop("id") == "right_control" ? position + 1 : position - 1);
manageControls(position);

$("#slide_inner").animate({ "margin-left" : slideWidth * -position });
});
function manageControls(position) {
position == 0 ? $("#left_control").hide() : $("#left_control").show();
position == pages - 1 ? $("#right_control").hide() : $("#right_control").show();
}
});