$(document).ready(function() {
  })


function to_top(position) {
  $('html, body').animate({
    scrollTop:position
  }, 'fast');
}

function load_images(post_id) {
  $('#preview').fadeTo(0, 0);
  $('#info h5').text('loading gallery...');
  $('#preview').load('load_preview.php .ajax', {
    'post_id' : post_id
  }, function() {

    $('#gallery').load('load_gallery.php .ajax', {
      'post_id' : post_id
    }, function() {
      var MAX_WIDTH = 900;
      var can_execute = true; // FOR EVENT SYNC
      var next_id = 0
      var current_img = null;
      var top_margin = 0;
      var images = new Array();
      var zind = new Array(); // memorizzo la disposizione delle immagini z-index
      var tot_images = $('#gallery img').size();
      var index = tot_images;
      var win_offset = new Array();
      //$('#info h5').text($('#img_'+tot_images).attr('title')+" | ")
      //$('#info p').text($('#img_'+tot_images).attr('alt'))
      // metto le immagini in un array

      // MAIN GALLERY
      $('#gallery img').each(function() {
        // EVENTUALLY RESIZE IMAGES (if width > 900)
        if($(this).width() > MAX_WIDTH) {
          var ratio = MAX_WIDTH/$(this).width();
          $(this).width(Math.floor($(this).width()*ratio));
          $(this).height((Math.floor($(this).height()*ratio)));
        }
        zind[index] = index;
        $(this).hide();
        $(this).attr('id', 'img_'+index);
        $(this).attr('name', index);
        images[index] = $(this);
        $(this).click(function() {
          $(this).fadeOut(50, function() {
            next_id = parseInt($(this).attr('name') - 1);
            if(next_id <= 0){
              next_id = tot_images;
            }
            /* centro verticalmente
          top_margin = Math.floor((500 - parseInt($('#img_'+next_id).height())) / 2);
          if (top_margin < 0) top_margin = 0;
          $('#img_'+next_id).css('margin-top', top_margin+'px'); */
            $('#img_'+next_id).fadeIn('slow');
            current_img = $('#img_'+next_id);
            $('#preview_container img').each(function() {
              $(this).fadeTo(200, 0.5);
            })
            $('#thumb_'+next_id).fadeTo(200, 1);

            $('#info h5').text(current_img.attr('title'))
            $('#info p').text(current_img.attr('alt'))
          })
        })
        index--;
      })
      $('#gallery img').first().fadeIn('slow');
      $('#info h5').text($('#img_'+tot_images).attr('title'))
      $('#info p').text($('#img_'+tot_images).attr('alt'))
      current_img = $('#gallery img').first();


      // THUMBNAILS
      index = tot_images;
      $('#preview_container img').each(function () {
        $(this).wrap("<div class='img_mask' />");
        // CROP THUMBNAILS - START
        var size = Math.min(parseInt($(this).width()), parseInt($(this).height()));
        var ratio = 60/size;
        $(this).width(Math.floor($(this).width()*ratio));
        $(this).height((Math.floor($(this).height()*ratio)));
        var margin_left = -Math.floor(($(this).width() - 60) / 2);
        $(this).css('margin-left', margin_left);
        // CROP THUMBNAILS - END

        $(this).fadeTo(200, 0.5);
        $(this).hover(function(){
          if($(this).attr('name') != current_img.attr('name') && can_execute)
            $(this).fadeTo(200, 1);
        }, function(){
          if($(this).attr('name') != current_img.attr('name') && can_execute)
            $(this).fadeTo(200, 0.5);
        })
        $(this).attr('id', 'thumb_'+index);
        $(this).attr('name', index);
        $(this).click(function() {
          can_execute = false;
          var clicker = $(this);
          $('#preview_container img').each(function() {
            if ($(this).attr('id') != clicker.attr('id')) {
              $(this).fadeTo(200, 0.5);
            }
          })
          $(this).fadeTo(0, 1);
          clicker = $(this);
          current_img.fadeOut(50, function() {
            next_id = parseInt(clicker.attr('name'));
            current_img = $('#img_'+next_id);
            can_execute = true;
            /*top_margin = Math.floor((500 - parseInt(current_img.height())) / 2);
          if (top_margin < 0) top_margin = 0;
          current_img.css('margin-top', top_margin+'px');*/
            current_img.fadeIn('slow');
            $('#info h5').text(current_img.attr('title'))
            $('#info p').text(current_img.attr('alt'))
          })
        })
        index--;
      })
      $('#preview').fadeTo(200, 1);
      $('#preview_container img').first().fadeTo(200, 1);
    });
  })
  
}