$('#mark-00').css("background", "#ffffff url(mark-00.png) center center no-repeat");
$('#mark-01').css("background", "#ffffff url(mark-01.png) center center no-repeat");
$('#mark-25').css("background", "#ffffff url(mark-25.png) center center no-repeat");
$('#mark-000').css("background", "#ffffff url(mark-000.png) center center no-repeat");
$('#mark-26').css("background", "#ffffff url(mark-26.png) center center no-repeat");
$('#mark-02').css("background", "#ffffff url(mark-02.png) center center no-repeat");
$('#mark-03').css("background", "#ffffff url(mark-03.png) center center no-repeat");
$('#mark-04').css("background", "#ffffff url(mark-04.png) center center no-repeat");
$('#mark-05').css("background", "#ffffff url(mark-05.png) center center no-repeat");
$('#mark-06').css("background", "#ffffff url(mark-06.png) center center no-repeat");
$('#mark-07').css("background", "#ffffff url(mark-07.png) center center no-repeat");
$('#mark-08').css("background", "#ffffff url(mark-08.png) center center no-repeat");
$('#mark-09').css("background", "#ffffff url(mark-09.png) center center no-repeat");
$('#mark-10').css("background", "#ffffff url(mark-10.png) center center no-repeat");
$('#mark-11').css("background", "#ffffff url(mark-11.png) center center no-repeat");
$('#mark-12').css("background", "#ffffff url(mark-12.png) center center no-repeat");
$('#mark-13').css("background", "#ffffff url(mark-13.png) center center no-repeat");
$('#mark-14').css("background", "#ffffff url(mark-14.png) center center no-repeat");
$('#mark-15').css("background", "#ffffff url(mark-15.png) center center no-repeat");
$('#mark-16').css("background", "#ffffff url(mark-16.png) center center no-repeat");
$('#mark-17').css("background", "#ffffff url(mark-17.png) center center no-repeat");
$('#mark-18').css("background", "#ffffff url(mark-18.png) center center no-repeat");
$('#mark-19').css("background", "#ffffff url(mark-19.png) center center no-repeat");
$('#mark-20').css("background", "#ffffff url(mark-20.png) center center no-repeat");
$('#mark-21').css("background", "#ffffff url(mark-21.png) center center no-repeat");
$('#mark-22').css("background", "#ffffff url(mark-22.png) center center no-repeat");
$('#mark-23').css("background", "#ffffff url(mark-23.png) center center no-repeat");
$('#mark-24').css("background", "#ffffff url(mark-24.png) center center no-repeat");


$(window).resize(function() {
  $('#gallery').height($(window).height());
  $('.navi').css('top',(($(window).height())/2-35));
});


$('#next').click(function() { next(300);});
$('#prev').click(function() { prev(300);});

function next(speed){
  var $active = jQuery('#gallery .img.active');
  if ( $active.length == 0 ) $active = jQuery('#gallery div:last');
  var $next =  $active.next().length ? $active.next()
      : $('#gallery div:first');
      
  $('#gallery').css('backgroundColor',$next.css('backgroundColor'));
  $next.addClass('next-active');
  $next.stop().animate({opacity: 1}, speed*2);
  $active.stop().animate({opacity: 0}, speed, function() {
  });
  $active.removeClass('active');
  $next.removeClass('next-active');
  $next.addClass('active');
}

function prev(speed){
  var $active = jQuery('#gallery .img.active');
  if ( $active.length == 0 ) $active = jQuery('#gallery div:first');
  var $next =  $active.prev().length ? $active.prev()
      : $('#gallery div:last');
  $('#gallery').css('backgroundColor',$next.css('backgroundColor'));
  $next.addClass('next-active');
  $next.stop().animate({opacity: 1}, speed*2);
  $active.stop().animate({opacity: 0}, speed, function() {
  });
  $active.removeClass('active');
  $next.removeClass('next-active');
  $next.addClass('active');
};


$(function() {
  $('#gallery').height($(window).height());
  $('.navi').css('top',(($(window).height())/2-35));
  $('.img').animate({opacity:0}, 0);
  $('#mark-00').animate({opacity: 1}, 0);
  setInterval( "next(1000)", 4000 );
});