$(document).ready(function(){

  var spaces = parseInt($("div#portfolio a:first").css("margin-right"));
  var oneWidth = parseInt($("div#portfolio a:first").outerWidth());

  var offsetX = $("div#portfolio").offset().left;
  var offsetY = offsetX + $("div#portfolio").width();

  var process = 0;

  var listLength = 0;
  var listAlmostLength = 0;

  $("div#portfolio a").each(function(){
    $(this).css("left",listLength);
    listLength+=imgWidth+spaces;
    oneWidth = parseInt($("div#portfolio a:first").outerWidth());
    listAlmostLength = listLength - oneWidth;
  });

  function rotateLeft()
  {
    if(process==1)
    {
      
      $("div#portfolio a").each(function(){
        var curPosition = parseInt($(this).css("left"));
        if(curPosition >= listAlmostLength)
          curPosition = - parseInt($(this).outerWidth()) + 4;
        else
          curPosition = parseInt(curPosition)+4;
        $(this).css("left",curPosition);
      });
      setTimeout(rotateLeft,"30");
    }
  }

  function rotateRight()
  {
    if(process==-1)
    {
      $("div#portfolio a").each(function(){
        var curPosition = parseInt($(this).css("left"));
        if(curPosition < - oneWidth)
          curPosition = listAlmostLength-4;
        else
         curPosition = parseInt(curPosition)-4;
        $(this).css("left",curPosition);
      });
      setTimeout(rotateRight,"30");
    }
  }

  $("#portfolio").bind('mouseover',function(e){
    if(e.pageX > offsetX && e.pageX < offsetX + 200)
    {
      if(process != 1)
      {
        process = 1;
        rotateLeft();
      }
    }
    else if(e.pageX < offsetY && e.pageX > offsetY - 200)
    {
      if(process != -1)
      {
        process = -1;
        rotateRight();
      }
    }
    else
      process = 0;
  });

  $("#portfolio").mouseleave(function(){
    process = 0;
  });

});