// JavaScript Document





function theRotator() {

  //Set the opacity of all images to 0

  $('div#rotator ul li').css({opacity: 0.0});

  //Get the first image and display it (gets set to full opacity)

  $('div#rotator ul li:first').css({opacity: 1.0});

  //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

  setInterval('rotate()', 8000);



}



function rotate() {

  //Get the first image

  var current = ($('div#rotator ul li.show') ? $('div#rotator ul li.show') : $('div#rotator ul li:first'));



  //Get next image, when it reaches the end, rotate it back to the first image

  var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') : current.next()) : $('div#rotator ul li:first'));



  //Set the fade in effect for the next image, the show class has higher z-index

  next.css({opacity: 0.0})

      .addClass('show')

      .animate({opacity: 1.0}, 2000);



  //Hide the current image

  current.animate({opacity: 0.0}, 2000)

      .removeClass('show');



}





$(document).ready(function() {

//Load the slideshow

theRotator();



  /* Left second menu */

  $('.first-item-link').hover(function() {

    $('.popup-menu').hide();

    $('.first-item-link').removeClass('active');



    $(this).addClass('active');

    $(this).next('.popup-menu').show();

  });



  $('.popup-menu').mouseleave(function(){

    $(this).hide();

    $(this).prev('.hmenu-item').removeClass('active');

  });



//  Full manual - change image

  $(".thumbs a").click(function() {



    var largePath = $(this).attr("href");

    var largeAlt = $(this).attr("title");



    $("#largeImg").attr({src:largePath});

    $(".big_img").attr({href:largeAlt});


return false;

  });





  /* Popup image */

  // Вешаем обработчик на ссылки с нужным классом

  $('a.big_img').click(function() {



    var link = $(this);



    // Создаём объекты

    var frame = $('<div class="popup-frame"></div>');

    var shadow = $('<div class="popup-shadow"></div>');

    var loader = $('<div class="popup-loader"></div>');

    var image = $('<img src="' + link.attr('href') + '" alt="' + link.attr('title') + '"/>');

    var button = $('<span title="Закрыть"></span>');



    // Цепляем их к BODY, а потом друг к другу

    frame.appendTo('body');

    shadow.appendTo(frame).animate({opacity:0.6}, 300);

    loader.appendTo(frame);

    image.appendTo(loader);



    // Ждём загрузки картинки

    image.load(function() {



      button.appendTo(loader);



      var w = image.width();

      var h = image.height();



      // Анимируем загрузчик до размеров картинки

      // и одновременно смещаем к центру

      loader.addClass('popup-loaded').animate({



        width:w,

        marginLeft:-w / 2,

        height:h,

        marginTop:-h / 2



      }, 500, function() {



        loader.addClass('popup-canvas');

        image.animate({opacity:1}, 300, function() {



          // Вешаем события для закрытия картинки

          function closeit() {

            loader.remove();

            shadow.animate({opacity:0}, 300, function() {

              frame.remove();

            });

          }



          shadow.click(function() {

            closeit()

          });

          button.click(function() {

            closeit()

          });


          image.click(function() {
            closeit()
          });

          $(document).keydown(function(e) {

            if (e.which == 27) closeit();

          });

        });

      });

    });



    return false;

  });

});