var prev = null;
var next = null;
var slidesContainer = null;
var slides = null;
var slide1 = null;
var slidesTotal = null;
var pos = 1;
var w = 0;
var step = 0;
var fpos = 0;

$(function() {
  $('div#catalogue').css('overflow','visible');

  prev = $('#prev');
  next = $('#next');
  slidesContainer = $('#viewport div div');
  $('#viewport div a').each(function (elem, el) {
    w += $(el).width();
  });
  step = 400;//$('#viewport div').width()*.5;
  fpos = w / step -.5;
  next.click(showNext);
  prev.click(showPrev);
  $('#viewport div a').fancybox({
    type : 'image',
    padding : '0',
    transitionIn : 'elastic',
    transitionOut : 'fade',
    showCloseButton : false,
    titleShow : false,
    hideOnContentClick : true
  });
  fadeNext();
  fadePrev();
});

function showNext() {
  if (pos < fpos) {
    slidesContainer.animate({
      'margin-left':-step*(pos)+'px'
    },400);
    pos++;
    fadeNext();
  }
  return false;
}

function showPrev() {
  if (pos > 1) {
    slidesContainer.animate({
      'margin-left':-step*(pos - 2)+'px'
    },400);
    pos--;
    fadePrev();
  }
  return false;
}

function fadeNext() {
  if (pos >= fpos) {
    next.fadeTo(200, .2);
  }
  if (pos < fpos) {
    prev.fadeTo(200, 1);
  }
}

function fadePrev() {
  if (pos > 1) {
    next.fadeTo(200, 1);

  }
  if (pos <= 1) {
    prev.fadeTo(200, .2);
  }
}