﻿     onload = function () {  
   
       timer = 0;  
       current = 1;  
       button = 1;  
   
       showTime = 3000; // 4500  
   
       pictures = $('#buttons div img').length;  
       width = $('#p1 img').outerWidth();  
   
       $('#buttons div img').animate({ opacity: 0.4 });  
       $('#buttons #b1 img').animate({ opacity: 1 });  
       $('#buttons #b1 img').css("borderColor", "#888");  
   
       $('#p1').animate({ "left": "0px" }, 400, "swing");  
       $('#loading').css("display", "none");  
   
       timer = setTimeout("autoPlay()", showTime);  
   
       $("#next").click(function () {  
         button = current;  
         current++  
         if (current == (pictures + 1)) { current = 1 }  
         animateLeft(current, button)  
       });  
   
       $("#previous").click(function () {  
         button = current;  
         current--  
         if (current == 0) { current = pictures }  
         animateRight(current, button)  
       });  
   
       $("#buttons div").click(function () {  
         button = current;  
         clickButton = $(this).attr('id');  
         current = parseInt(clickButton.slice(1));  
         if (current > button) { animateLeft(current, button) }  
         if (current < button) { animateRight(current, button) }  
       });  
   
       function animateRight(current, button) {  
         $('#p' + current).css("left", -width + "px");  
         $('#p' + current).animate({ "left": "0px" }, 450, "swing");  
         $('#p' + button).animate({ "left": width + "px" }, 450, "swing");  
         setbutton()  
       }  
   
       $("#wrap").mouseover(function () { clearTimeout(timer); });  
       $("#wrap").mouseout(function () { timer = setTimeout("autoPlay()", showTime); });  
   
     }  
   
     function autoPlay() {  
       button = current;  
       current++  
       if (current == (pictures + 1)) { current = 1 }  
       animateLeft(current, button)  
   
       timer = setTimeout("autoPlay()", showTime);  
     }  
   
     function animateLeft(current, button) {  
       $('#p' + current).css("left", width + "px");  
       $('#p' + current).animate({ "left": "0px" }, 450, "swing");  
       $('#p' + button).animate({ "left": -width + "px" }, 450, "swing");  
       setbutton()  
     }  
   
     function setbutton() {  
       $('#b' + button + ' img').animate({ opacity: 0.4 })  
                         .css("borderColor", "#444");  
       $('#b' + current + ' img').animate({ opacity: 1 })  
                         .css("borderColor", "#888");  
     }    
     
