$(function() {
        var navR,navL  = false;
        var first  = 1;
        var positions   = {
          '0'  : 0,
          '1'   : 170,
          '2'   : 340,
          '3'   : 510,
          '4'   : 680
        }
        var $ps_albums   = $('#ps_albums');
        var elems    = $ps_albums.children().length;
        var $ps_slider  = $('#ps_slider');
   
        var hiddenRight   = $(window).width() - $ps_albums.offset().left;
        $ps_albums.children('div').css('left',hiddenRight + 'px');
        $ps_albums.children('div:lt(5)').each(
          function(i){
            var $elem = $(this);
            $elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
              if(elems > 5)
              enableNavRight();
            });
          }
        );

        $ps_slider.find('.next').bind('click',function(){
          if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
          disableNavRight();
          disableNavLeft();
          moveRight();
        });

        function moveRight () {
          var hiddenLeft   = $ps_albums.offset().left + 163;
          var cnt = 0;
          $ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
          var $this = $(this);
          $ps_albums.children('div').slice(first,parseInt(first+4)).each(
          function(i){
            var $elem = $(this);
            $elem.animate({'left': positions[i] + 'px'},800,function(){
              ++cnt;
              if(cnt == 4){
                $ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
                //$this.hide();
                ++first;
                if(parseInt(first + 4) < elems)
                  enableNavRight();
                  enableNavLeft();
                });
              }
            });
          }
        );
      });
    }

    $ps_slider.find('.prev').bind('click',function(){
      if(first==1  || !navL) return;
      disableNavRight();
      disableNavLeft();
      moveLeft();
    });

    function moveLeft () {
      var hiddenRight   = $(window).width() - $ps_albums.offset().left;
      var cnt = 0;
      var last= first+4;
      $ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
        var $this = $(this);
        $ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
        function(i){
          var $elem = $(this);
          $elem.animate({'left': positions[i+1] + 'px'},800,function(){
          ++cnt;
          if(cnt == 4){
            $ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
            //$this.hide();
            --first;
            enableNavRight();
            if(first > 1)
              enableNavLeft();
            });
          }
          });
        }
        );
      });
    }

    function disableNavRight () {
      navR = false;
      $ps_slider.find('.next').addClass('disabled');
    }
    function disableNavLeft () {
      navL = false;
      $ps_slider.find('.prev').addClass('disabled');
    }
    function enableNavRight () {
      navR = true;
      $ps_slider.find('.next').removeClass('disabled');
    }
    function enableNavLeft () {
      navL = true;
      $ps_slider.find('.prev').removeClass('disabled');
    } 

    var $ps_container   = $('#ps_container');
    var $ps_overlay   = $('#ps_overlay');
    var $ps_close  = $('#ps_close');
    $ps_albums.children('div').bind('click',function(){
      var $elem = $(this);
      var album_name   = 'album' + parseInt($elem.index() + 1);
      var $loading   = $('<div />',{className:'loading'});
      $elem.append($loading);
      $ps_container.find('img').remove();
      $.get('photostack.php', {album_name:album_name} , function(data) {
      var items_count  = data.length;
      for(var i = 0; i < items_count; ++i){
        var item_source = data[i];
        var cnt   = 0;
        $('<img />').load(function(){
        var $image = $(this);
        ++cnt;
        resizeCenterImage($image);
        $ps_container.append($image);
        var r  = Math.floor(Math.random()*41)-20;
        if(cnt < items_count){
          $image.css({
          '-moz-transform'  :'rotate('+r+'deg)',
          '-webkit-transform'  :'rotate('+r+'deg)',
          'transform'    :'rotate('+r+'deg)'
          });
        }
        if(cnt == items_count){
          $loading.remove();
          $ps_container.show();
          $ps_close.show();
          $ps_overlay.show();
        }
        }).attr('src',item_source);
      }
      },'json');
    });

    $ps_container.live('mouseenter',function(){
      $('#ps_next_photo').show();
    }).live('mouseleave',function(){
      $('#ps_next_photo').hide();
    });

    $('#ps_next_photo').bind('click',function(){
      var $current   = $ps_container.find('img:last');
      var r    = Math.floor(Math.random()*41)-20;

      var currentPositions = {
      marginLeft  : $current.css('margin-left'),
      marginTop  : $current.css('margin-top')
      }
      var $new_current = $current.prev();

      $current.animate({
      'marginLeft':'250px',
      'marginTop':'-385px'
      },250,function(){
      $(this).insertBefore($ps_container.find('img:first'))
         .css({
          '-moz-transform'  :'rotate('+r+'deg)',
          '-webkit-transform'  :'rotate('+r+'deg)',
          'transform'    :'rotate('+r+'deg)'
        })
         .animate({
          'marginLeft':currentPositions.marginLeft,
          'marginTop'  :currentPositions.marginTop
          },250,function(){
          $new_current.css({
            '-moz-transform'  :'rotate(0deg)',
            '-webkit-transform'  :'rotate(0deg)',
            'transform'    :'rotate(0deg)'
          });
         });
      });
    });

    $('#ps_close').bind('click',function(){
      $ps_container.hide();
      $ps_close.hide();
      $ps_overlay.fadeOut(400);
    });

    function resizeCenterImage($image){
      var theImage   = new Image();
      theImage.src   = $image.attr("src");
      var imgwidth   = theImage.width;
      var imgheight   = theImage.height;

      var containerwidth  = 460;
      var containerheight = 330;

      if(imgwidth  > containerwidth){
      var newwidth = containerwidth;
      var ratio = imgwidth / containerwidth;
      var newheight = imgheight / ratio;
      if(newheight > containerheight){
        var newnewheight = containerheight;
        var newratio = newheight/containerheight;
        var newnewwidth =newwidth/newratio;
        theImage.width = newnewwidth;
        theImage.height= newnewheight;
      }
      else{
        theImage.width = newwidth;
        theImage.height= newheight;
      }
      }
      else if(imgheight > containerheight){
      var newheight = containerheight;
      var ratio = imgheight / containerheight;
      var newwidth = imgwidth / ratio;
      if(newwidth > containerwidth){
        var newnewwidth = containerwidth;
        var newratio = newwidth/containerwidth;
        var newnewheight =newheight/newratio;
        theImage.height = newnewheight;
        theImage.width= newnewwidth;
      }
      else{
        theImage.width = newwidth;
        theImage.height= newheight;
      }
      }
      $image.css({
      'width'    :theImage.width,
      'height'  :theImage.height,
      'margin-top'  :-(theImage.height/2)-10+'px',
      'margin-left'  :-(theImage.width/2)-10+'px'
      });
      }
      });