var slider={
  item_width: 0,
  button_min: 0, // slider
  button_max: 0, 
  button_max_correction: -2, 
  button_width: 29, 
  slider_min: 0, // container
  slider_max: 0,
  slider_max_correction: 6,
  animating: false,
  domsel: 'div#browser',
  stopAni: function(){ slider.animating = false; },
  stopAni2: function(){ },
  speed: 340,
  easing: 'swing',
  item_count: 0
}
$(document).ready(function() {
  // activate javascript slider
  slider.item_count = $(slider.domsel).find("li").length;
  
  $(slider.domsel + " div#viewport").css({
    height: '100px',
    overflow: 'hidden'
  });
  $(slider.domsel + " div#slidertrack").show();

  // auto config
  // item width
  $(slider.domsel).find("li").each(function(i) {
    if (i == 0) {
      l = $(this).offset().left;
    }
    if (i == 1) {
      slider.item_width = $(this).offset().left - l;
    }
  });
  
  if(slider.item_count < 6) {
    $(slider.domsel + " div#slidertrack").hide();
    $(slider.domsel + " div#viewport").css({
    	height: '110px'
    });
  }
  
  // image slider
  slider.slider_max = $(slider.domsel).find("li").length * slider.item_width;
  slider.slider_max = slider.slider_max - $(slider.domsel).css('width').replace(/px/, '') + slider.slider_max_correction;

  // slider (button)
  slider.button_max = $(slider.domsel + " div#slidertrack").css('width').replace(/px/, '') - (slider.button_width *2) - $(slider.domsel + " div#sliderimage").css('width').replace(/px/, '') + slider.button_max_correction;

  // init the dragging
  $(slider.domsel + " div#sliderimage").draggable({ 
    axis:        'x', 
    containment: 'parent', 
    start:       function(event, ui) { $("body").css({cursor: 'pointer'}); },
    drag:        function(event, ui) { $("div#viewport ul").css('left', '-' + ui.position.left / slider.button_max * slider.slider_max + 'px'); },
    stop:        function(event, ui) { $("body").css({cursor: 'default'}); }
  });
  
  // init the scroll buttons
  $(slider.domsel + " div#leftarrow").bind('click', function () {
    if (!slider.animating) {
      slider.animating = true;
      slide(-1);
    }
  });
  $(slider.domsel + " div#rightarrow").bind('click', function () {
    if (!slider.animating) {
      slider.animating = true;
      slide(1);
    }
  });
  slider.max_visible_count = slider.slider_max / slider.item_width;
  
  // initial slide, instantly
  // we want to slide only as far as we have to; with 7 items, sliding to 0 will stay, sliding to 6 will show the 7th, sliding to 3 will show the 4th item in CENTER!!
//  slider_start_relative = slider.item_count - slider.max_visible_count;
  slider_start_active = slider_start_active/(slider.item_count-1)* slider.max_visible_count;
  slide(slider_start_active, 1);
});

function slide(dir, speedOverride) {
  // absolute scroll
  var s = dir * slider.item_width;
  var newleft = 0;
  
  if (speedOverride) {
    slider.oldspeed = slider.speed;
    slider.speed = speedOverride;
  }
  
  if ( ($(slider.domsel + " div#viewport ul").css('left').replace(/auto/, 0).replace(/px/,'')*-1) +s <= slider.slider_max && ($(slider.domsel + " div#viewport ul").css('left').replace(/auto/, 0).replace(/px/,'') *-1) +s >= slider.slider_min) {
    // scroll allowed
	newleft = $(slider.domsel + " div#viewport ul").css('left').replace(/auto/, 0).replace(/px/,'') - s; 
	slide2(newleft);
    $(slider.domsel + " div#viewport ul").animate({left: newleft +'px'}, slider.speed, slider.easing, slider.stopAni );
  }
  else if (dir > 0) {
	newleft =  (-1*slider.slider_max);
	slide2(newleft);
    $(slider.domsel + " div#viewport ul").animate({left: newleft +'px'}, slider.speed, slider.easing, slider.stopAni);
  }
  else if (dir < 0) {
	newleft = (-1*slider.slider_min);
	slide2(newleft);
    $(slider.domsel + " div#viewport ul").animate({left: newleft +'px'}, slider.speed, slider.easing, slider.stopAni);
  }

  if (speedOverride) { // reset
    slider.speed = slider.oldspeed;
  }
}

function slide2(newleft) {
	$(slider.domsel + " div#sliderimage").animate({left: (-1*newleft / slider.slider_max * slider.button_max) +'px'}, slider.speed, slider.easing, slider.stopAni2);	
}