////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
  function left() {
    key="default";
    id = parseInt(parseInt(FOTO.Slider.data['default']['currentId']) - parseInt(1));

    thumbstr = '.photoslider_thumb:eq('+ id +')';
    thumb = $(thumbstr);

    var bar = thumb.parent();
    var nav = bar.parent();
    var parent = nav.parent();
    var key = parent.attr('id');
    var slot = thumb.attr('slot');
    if(id == null){
      id = 0;
    }
    if(slot == null){
      slot = 0;
    }

    FOTO.Slider.resetTimer(key);

    //now we have everything we need, let's load in the main image
    FOTO.Slider.setMainImage(key,id);

    //if we already are animating stop
    if(FOTO.Slider.data[key]['interval'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['interval']);
    if(FOTO.Slider.data[key]['intervalThumb'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['intervalThumb']);

    //let's move our thumb into position
    if(FOTO.Slider.data[key]['currentId'] != null){
      //move the thumbnail back up
      SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[imageid$='+FOTO.Slider.data[key]['currentId']+']').get(0),'top','20px','0px',500,SKEL.Transitions.quadOut);
      //NOTE: we don't want to clear FOTO.Slider interval incase the user clicks really fast (unless we kept track of every animation)
    }

    FOTO.Slider.data[key]['currentId'] = id;
    FOTO.Slider.data[key]['currentSlot'] = slot;

    //animate our div down
    FOTO.Slider.data[key]['intervalThumb'] = SKEL.EFFECTS.Slide.animate(thumb,'top','0px','20px',250,SKEL.Transitions.quadOut);

    //where are we right now?
    var currentPos = FOTO.Slider.findRelativePos(bar.get(0));
    var navWidth = parseInt($(nav).css('width'));
    var slots = Math.floor(navWidth / FOTO.Slider.data[key]['thumbWidth']);

    //where do we need to be?
    //we want to position the clicked on div in the dead center

    //alternative method
    //var centerStart = (-FOTO.Slider.data[key]['thumbWidth'] * slot) + ((FOTO.Slider.data[key]['thumbWidth'] * (slots/2)) - (FOTO.Slider.data[key]['thumbWidth']/2));

    var centerStart = (navWidth / 2) - ( (+FOTO.Slider.data[key]['thumbWidth'] * (slot) ) + (FOTO.Slider.data[key]['thumbWidth']/2) ) ;

    var barFrom = currentPos['x']+'px';
    var barTo = centerStart+'px';

//    window.alert('thumb '+thumb+' key'+key+' from '+barFrom+' to '+barTo+ ' navWidth '+navWidth+' thumb '+FOTO.Slider.data[key]['thumbWidth']+' slot '+slot+' center'+centerStart);

    FOTO.Slider.data[key]['interval'] = SKEL.EFFECTS.Slide.animate(bar,'left',barFrom,barTo,1000,SKEL.Transitions.backOut);

  }

////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
  function last() {
    key="default";

    id = parseInt(parseInt($('.photoslider_thumb').length) - parseInt(1));

    thumbstr = '.photoslider_thumb:eq('+ id +')';
    thumb = $(thumbstr);

    var bar = thumb.parent();
    var nav = bar.parent();
    var parent = nav.parent();
    var key = parent.attr('id');
    var slot = thumb.attr('slot');
    if(id == null){
      id = 0;
    }
    if(slot == null){
      slot = 0;
    }

    FOTO.Slider.resetTimer(key);

    //now we have everything we need, let's load in the main image
    FOTO.Slider.setMainImage(key,id);

    //if we already are animating stop
    if(FOTO.Slider.data[key]['interval'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['interval']);
    if(FOTO.Slider.data[key]['intervalThumb'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['intervalThumb']);

    //let's move our thumb into position
    if(FOTO.Slider.data[key]['currentId'] != null){
      //move the thumbnail back up
      SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[imageid$='+FOTO.Slider.data[key]['currentId']+']').get(0),'top','20px','0px',500,SKEL.Transitions.quadOut);
      //NOTE: we don't want to clear FOTO.Slider interval incase the user clicks really fast (unless we kept track of every animation)
    }

    FOTO.Slider.data[key]['currentId'] = id;
    FOTO.Slider.data[key]['currentSlot'] = slot;

    //animate our div down
    FOTO.Slider.data[key]['intervalThumb'] = SKEL.EFFECTS.Slide.animate(thumb,'top','0px','20px',250,SKEL.Transitions.quadOut);

    //where are we right now?
    var currentPos = FOTO.Slider.findRelativePos(bar.get(0));
    var navWidth = parseInt($(nav).css('width'));
    var slots = Math.floor(navWidth / FOTO.Slider.data[key]['thumbWidth']);

    //where do we need to be?
    //we want to position the clicked on div in the dead center

    //alternative method
    //var centerStart = (-FOTO.Slider.data[key]['thumbWidth'] * slot) + ((FOTO.Slider.data[key]['thumbWidth'] * (slots/2)) - (FOTO.Slider.data[key]['thumbWidth']/2));

    var centerStart = (navWidth / 2) - ( (+FOTO.Slider.data[key]['thumbWidth'] * (slot) ) + (FOTO.Slider.data[key]['thumbWidth']/2) ) ;

    var barFrom = currentPos['x']+'px';
    var barTo = centerStart+'px';

//    window.alert('thumb '+thumb+' key'+key+' from '+barFrom+' to '+barTo+ ' navWidth '+navWidth+' thumb '+FOTO.Slider.data[key]['thumbWidth']+' slot '+slot+' center'+centerStart);

    FOTO.Slider.data[key]['interval'] = SKEL.EFFECTS.Slide.animate(bar,'left',barFrom,barTo,1000,SKEL.Transitions.backOut);
  }

////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
  function first() {
    key="default";
    id = 0;

    thumbstr = '.photoslider_thumb:eq('+ id +')';
    thumb = $(thumbstr);

    var bar = thumb.parent();
    var nav = bar.parent();
    var parent = nav.parent();
    var key = parent.attr('id');
    var slot = thumb.attr('slot');
    if(id == null){
      id = 0;
    }
    if(slot == null){
      slot = 0;
    }

    FOTO.Slider.resetTimer(key);

    //now we have everything we need, let's load in the main image
    FOTO.Slider.setMainImage(key,id);

    //if we already are animating stop
    if(FOTO.Slider.data[key]['interval'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['interval']);
    if(FOTO.Slider.data[key]['intervalThumb'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['intervalThumb']);

    //let's move our thumb into position
    if(FOTO.Slider.data[key]['currentId'] != null){
      //move the thumbnail back up
      SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[imageid$='+FOTO.Slider.data[key]['currentId']+']').get(0),'top','20px','0px',500,SKEL.Transitions.quadOut);
      //NOTE: we don't want to clear FOTO.Slider interval incase the user clicks really fast (unless we kept track of every animation)
    }

    FOTO.Slider.data[key]['currentId'] = id;
    FOTO.Slider.data[key]['currentSlot'] = slot;

    //animate our div down
    FOTO.Slider.data[key]['intervalThumb'] = SKEL.EFFECTS.Slide.animate(thumb,'top','0px','20px',250,SKEL.Transitions.quadOut);

    //where are we right now?
    var currentPos = FOTO.Slider.findRelativePos(bar.get(0));
    var navWidth = parseInt($(nav).css('width'));
    var slots = Math.floor(navWidth / FOTO.Slider.data[key]['thumbWidth']);

    //where do we need to be?
    //we want to position the clicked on div in the dead center

    //alternative method
    //var centerStart = (-FOTO.Slider.data[key]['thumbWidth'] * slot) + ((FOTO.Slider.data[key]['thumbWidth'] * (slots/2)) - (FOTO.Slider.data[key]['thumbWidth']/2));

    var centerStart = (navWidth / 2) - ( (+FOTO.Slider.data[key]['thumbWidth'] * (slot) ) + (FOTO.Slider.data[key]['thumbWidth']/2) ) ;

    var barFrom = currentPos['x']+'px';
    var barTo = centerStart+'px';

//    window.alert('thumb '+thumb+' key'+key+' from '+barFrom+' to '+barTo+ ' navWidth '+navWidth+' thumb '+FOTO.Slider.data[key]['thumbWidth']+' slot '+slot+' center'+centerStart);

    FOTO.Slider.data[key]['interval'] = SKEL.EFFECTS.Slide.animate(bar,'left',barFrom,barTo,1000,SKEL.Transitions.backOut);
  }

////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
  function right() {
    key="default";
    id = parseInt(parseInt(FOTO.Slider.data['default']['currentId']) + parseInt(1));

    thumbstr = '.photoslider_thumb:eq('+ id +')';
    thumb = $(thumbstr);

    var bar = thumb.parent();
    var nav = bar.parent();
    var parent = nav.parent();
    var key = parent.attr('id');
    var slot = thumb.attr('slot');
    if(id == null){
      id = 0;
    }
    if(slot == null){
      slot = 0;
    }

    FOTO.Slider.resetTimer(key);

    //now we have everything we need, let's load in the main image
    FOTO.Slider.setMainImage(key,id);

    //if we already are animating stop
    if(FOTO.Slider.data[key]['interval'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['interval']);
    if(FOTO.Slider.data[key]['intervalThumb'])
      SKEL.EFFECTS.Slide.stopByIntervalId(FOTO.Slider.data[key]['intervalThumb']);

    //let's move our thumb into position
    if(FOTO.Slider.data[key]['currentId'] != null){
      //move the thumbnail back up
      SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[imageid$='+FOTO.Slider.data[key]['currentId']+']').get(0),'top','20px','0px',500,SKEL.Transitions.quadOut);
      //NOTE: we don't want to clear FOTO.Slider interval incase the user clicks really fast (unless we kept track of every animation)
    }

    FOTO.Slider.data[key]['currentId'] = id;
    FOTO.Slider.data[key]['currentSlot'] = slot;

    //animate our div down
    FOTO.Slider.data[key]['intervalThumb'] = SKEL.EFFECTS.Slide.animate(thumb,'top','0px','20px',250,SKEL.Transitions.quadOut);

    //where are we right now?
    var currentPos = FOTO.Slider.findRelativePos(bar.get(0));
    var navWidth = parseInt($(nav).css('width'));
    var slots = Math.floor(navWidth / FOTO.Slider.data[key]['thumbWidth']);

    //where do we need to be?
    //we want to position the clicked on div in the dead center

    //alternative method
    //var centerStart = (-FOTO.Slider.data[key]['thumbWidth'] * slot) + ((FOTO.Slider.data[key]['thumbWidth'] * (slots/2)) - (FOTO.Slider.data[key]['thumbWidth']/2));

    var centerStart = (navWidth / 2) - ( (+FOTO.Slider.data[key]['thumbWidth'] * (slot) ) + (FOTO.Slider.data[key]['thumbWidth']/2) ) ;

    var barFrom = currentPos['x']+'px';
    var barTo = centerStart+'px';

//    window.alert('thumb '+thumb+' key'+key+' from '+barFrom+' to '+barTo+ ' navWidth '+navWidth+' thumb '+FOTO.Slider.data[key]['thumbWidth']+' slot '+slot+' center'+centerStart);

    FOTO.Slider.data[key]['interval'] = SKEL.EFFECTS.Slide.animate(bar,'left',barFrom,barTo,1000,SKEL.Transitions.backOut);
  }