$(function() 
{
  var length = 2200;
  var conveyor    = $(".content-conveyor", $("#timeline"));
  var item        = $(".timeline_item", $("#timeline"));

  //set length of conveyor
  conveyor.css("width", length + (item.length) * parseInt(item.css("width")));

  //config
  var sliderOpts = {
    max: (length + (item.length) * parseInt(item.css("width"))) - parseInt($(".viewer", $("#timeline")).css("width")),
    
    slide: function(e, ui) { 
      conveyor.css("left", "-" + ui.value + "px");
    }
  };

  //create slider
  $("#slider").slider(sliderOpts);

  $("#arrow-right").click(function() 
  {
    var current = ($(".ui-slider-handle").css('left'));
    var curstep = (parseInt(current) / 57)+1;
    
    if (curstep > 10)
    {
      return false;
    }
    
    conveyor.css("left", "-" + (645*curstep) + "px");
    $(".ui-slider-handle").css('left', (57*curstep));
  });

  $("#arrow-left").click(function() 
  {
    var current = ($(".ui-slider-handle").css('left'));
    var curstep = (parseInt(current) / 57)+1;
    
    if (curstep < 2)
    {
      return false;
    }

    conveyor.css("left", "-" + (645*(curstep-2)) + "px");
    $(".ui-slider-handle").css('left', (57*(curstep-2)));
  });


});