$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 900;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  $('#map1')
    .bind('mouseover', function(){
    $('#i1_v3').animate({
      'marginTop':0
    },300);
  });
  $('#map1')
    .bind('mouseout', function(){
    $('#i1_v3').animate({
      'marginTop':-40
    },300);
  });
  $('#map1')
    .bind('click', function(){
    $('#slideInner').animate({
      'marginLeft' : -slideWidth
    },2000);
  });
  $('#map11')
    .bind('click', function(){
    $('#nav_b1').animate({
      'marginTop':0
    },300);
    $('#nav_a').animate({
          'top':490
    },300);    
  });

  $('#nav_an')
    .bind('mouseover', function(){
    $('#slideInner').animate({
      'marginTop':0
    },300);
  });

  slides
    .wrapAll('<div id="slideInner"></div>')
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  $('#slideInner').css('width', slideWidth * numberOfSlides);

  $('.nav')
    .bind('click', function(){
    if($(this).attr('id')=='nav1') currentPosition = 0;
    if($(this).attr('id')=='nav2') currentPosition = 1;
    if($(this).attr('id')=='idx3') currentPosition = 2;
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },2000);
  });
});