$(function(){
     $(".main .img1").css({width: "221px",height:"185px"}); 
     $(".mirror .img1").css({width: "221px",height: "130px"});
     $(".main .img2,.main .img3,.main .img4").css({width: "185px",height: "185px"}); 
     $(".mirror .img2,.mirror .img3,.mirror .img4").css({width: "185px",height: "130px"});
     
     $(".img1").hover(
          function() { 
               $(".main ."+$(this).attr("class")).stop().animate({width: "308px",height: "256px"},250,"linear");
               $(".mirror ."+$(this).attr("class")).stop().animate({width: "308px",height: "162px"},250,"linear"); 
          },
          function(){ 
               $(".main ."+$(this).attr("class")).stop().animate({width: "221px",height:"185px"},250,"linear"); 
               $(".mirror ."+$(this).attr("class")).stop().animate({width: "221px",height: "130px"},250,"linear"); 
          }
     );
     
      $(".img2,.img3,.img4").hover(
          function() { 
               $(".main ."+$(this).attr("class")).stop().animate({width: "256px",height: "256px"},250,"linear"); 
               $(".mirror ."+$(this).attr("class")).stop().animate({width: "256px",height: "162px"},250,"linear"); 
          },
          function(){ 
               $(".main ."+$(this).attr("class")).stop().animate({width: "185px",height:"185px"},250,"linear"); 
               $(".mirror ."+$(this).attr("class")).stop().animate({width: "185px",height: "130px"},250,"linear"); 
          }
     );
     
     var active = 1;
     var links = $(".buttons").children().size();
     $("#arrow-right div").stop().animate({marginLeft: '-40px'});
     
     function page(page) {
          var mar = - (( page * 800 ) - 800 );
          $("#folio ul").stop().animate({marginLeft: mar},1000);
          for (i=1;i<= links;i++)
          {
               if ( $(".buttons a."+i).hasClass("active") )
                    $(".buttons a."+i).removeClass("active");
          }
               
          $(".buttons a."+(page)).addClass("active");
          
          if ( active == 1 )
               $("#arrow-left div").stop().animate({marginLeft: '13px'});
          
          if ( active < links )
               $("#arrow-right div").stop().animate({marginLeft: '-40px'});
               
          if ( active == links )
               $("#arrow-right div").stop().animate({marginLeft: '-71px'});
          
          if ( active > 1 )
               $("#arrow-left div").stop().animate({marginLeft: '-20px'});
     }
     
     $(".buttons a").click(function(){
          active = parseInt($(this).attr("class"));
          page(active);
     });
     
     $("#arrow-right div img,#area-right").click(function(){
          if ( active < links ) {
               active++;
               page(active);
          }
     });
     
     $("#arrow-left div img,#area-left").click(function(){
          if ( active > 1 ) {
               active--;
               page(active);
          }
     });

     
     $("#arrow-right div img,#area-right").hover(
          function() { if ( active < links ) { $("#arrow-right div").stop().animate({marginLeft: '-30px'}); } },
          function() { if ( active < links ) { $("#arrow-right div").stop().animate({marginLeft: '-40px'}); } }
     );
     
     $("#arrow-left div img,#area-left").hover(
          function() { if ( active > 1 ) { $("#arrow-left div").stop().animate({marginLeft: '-29px'}); } },
          function() { if ( active > 1 ) { $("#arrow-left div").stop().animate({marginLeft: '-19px'}); } }
     );
});