(function($) {
    $.fn.wiSlide = function(options) {
	var moveTime = 5000;
	var animeTime = 1000;
	var slides = $(this).find('.slide img');
	var currentPosition = -1;
	var interval = false;
	var startMarginLeft = 0;
	var imageSpace = 8; // FIXME

	/* add overflow attritube to full fill photos in the area */
	$('#slideshow').css('overflow', 'hidden');

	/* wrap all img in the same div. */
	slides.wrapAll('<div id="slideInner"></div>').css({
	  'float' : 'left',
	});
	  
	/* resize the area with the total image size */
	$('#slideInner').css('width', $('#slideshow').width() * slides.size());

	/* after movetime milliseconds, the rightbutton will be clicked */
	interval = setInterval(function() { $('#rightControl').click(); }, moveTime);

	/* When a category link is clicked */
	$('.category').bind('click', function() {
	  var obj = this;
	  var category = obj.innerHTML;
	  
	  /* look for the first img with alt text matching category name */
	  for (var i = 0; i < slides.size(); ++i) {
	    /* if we find it.. */
	    if ($(slides[i]).attr('alt') == category) {
	      /* set current position to the new image. */
	      currentPosition = i - 1;
	      /* then move to */
	      $('#rightControl').click();
	      break;
	    }
	  }
	});

	/* when next / prev is clicked */
	$('.control').bind('click', function() {
	  /* remove autoslide timer */
	  clearInterval(interval);

	  /* store currentPosition to tmp */
	  var tmp = currentPosition;
	  /* increment/decrement current position according to button */
	  currentPosition = ($(this).attr('id') == 'rightControl') ?
	      currentPosition + 1 :
	      currentPosition - 1;

	  /* if we don't move. return */
	  if (tmp == currentPosition)
	      return;

	  /* if position is next to last img. go back to first */
	  if (currentPosition >= slides.size())
	      currentPosition = 0;

	  /* if position is prev to first img. go back to last */
	  if (currentPosition < 0)
	      currentPosition = slides.size() - 1;

	  /* find the next position in pixel */
	  position = 0;
	  for (var i = 0; i < currentPosition; ++i)
	    position += ($(slides[i]).width() + (imageSpace * 2));

	  /* thoses loops set opacity to images been arround current one */
	  var opacity = 1.0;
	  for (var i = currentPosition; i < slides.size(); i++, opacity -= 0.2)
	      $(slides[i]).fadeTo(500, opacity < 0.4 ? 0.4 : opacity);
	  var opacity = 1.0;
	  for (var i = currentPosition; i >= 0; i--, opacity -= 0.2)
	      $(slides[i]).fadeTo(500, opacity < 0.4 ? 0.4 : opacity);

	  /* real position of the slide */
	  startMarginLeft = (window.innerWidth / 2) -
	      ($(slides[currentPosition]).width() / 2) - imageSpace;

	  /* animate the scene and move to position */
	  $('#slideInner').animate({
		  'marginLeft' : startMarginLeft - position
	    }, animeTime);

	  /* set back timer for autoslider */
	  interval = setInterval(function() { $('#rightControl').click(); }, moveTime);
	});

	/* first time. we send a right click to position all the stuff */
	$('#rightControl').click();
	return slides;
    }
})(jQuery);


$(window).load(
  function() {
    $('#slideshow').wiSlide();
  }
);

/*
$(document).ready(function() {
   $('#slideshow').wiSlide();
});
*/