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() {
  if ($(slider.domsel).length > 0) {
    // 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);	
}