Javascript-форум - Анимированный tab или галерея картинок

день добрый!
не судите строго, я всего 4 недели изучаю HTML, CSS и javascript.
подскажите плз, как оптимизировать мой скрипт?? в моем случае всё работает как я и хотел, но не знаю как избавиться от повторения сценария.....вот коды

Код:

<!DOCTYPE html>

<html>

        <head>

                <title>portfolio</title>

                <script type='text/javascript' src='js/jquery.js'></script>

                <script type='text/javascript' src='js/script.js'></script>

                <link rel='stylesheet' href='css/style.css' type='text/css'>

        </head>

<body>

<div class='master'> <!-- контейнер -->

        

        <div class='button' id='but1'></div>

        <div class='button' id='but2'></div>

        <div class='button' id='but3'></div>

        

<div class='view'> <!-- видимая область -->        

        

        <div class='box' id='box1'><img src='img/1.png'></div>

        <div class='box' id='box2'><img src='img/2.png'></div>

        <div class='box' id='box3'><img src='img/3.png'></div>

        

</div>

</div>        

        </body>

</html>

Код:

* {

        margin: 0;

        padding: 0;

}

body {

background: #000;

}

.master{ 

width: 800px; 

height: 700px;  

position: relative;

margin:0 auto;

}

.view{ 

width: 800px;

height: 600px;  

position: absolute;

bottom: 0px;

overflow: hidden;

}

.box{ 

width: 800px; 

height: 600px;  

position: absolute;

left: 800px;

bottom: 600px;

}

.button{

width: 100px;

height: 40px;

position: relative;

top: 0px;

cursor: pointer;

border: 1px solid #fff;

margin:5px;

float: left;

}

var t = 600 //время анимации

$(document).ready(function(){
	
	$('#but1').click(function(){ 
		$('#box1').animate({left: '0px', bottom:'0px'}, t);
			setTimeout(function () {
				$('.box').not('#box1').css({ left:'800px', bottom:'600px', zIndex:'10'});
						$('#box1').css({zIndex:'5'}); 				
		},t);		
	});
	
	$('#but2').click(function(){
		$('#box2').animate({left: '0px', bottom:'0px'} , t);
			setTimeout(function () {
				$('.box').not('#box2').css({left:'800px', bottom:'600px', zIndex:'10'});						
						$('#box2').css({zIndex:'5'}); 
		},t);	
	});

	$('#but3').click(function(){ 
		$('#box3').animate({left: '0px', bottom:'0px'}, t);
			setTimeout(function () {
				$('.box').not('#box3').css({left:'800px', bottom:'600px', zIndex:'10'});							
						$('#box3').css({zIndex:'5'}); 
		},t);							
	});


});

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #000; } .master{ width: 800px; height: 700px; position: relative; margin:0 auto; } .view{ width: 800px; height: 600px; position: absolute; bottom: 0px; overflow: hidden; } .box{ width: 800px; height: 600px; position: absolute; left: 800px; bottom: 600px; } .button{ width: 100px; height: 40px; position: relative; top: 0px; cursor: pointer; border: 1px solid #fff; margin:5px; float: left; } </style> <script> $(function() { var t = 600, buttons = $('.button'), boxs = $('.box'); buttons.click(function(){ var i = buttons.index(this), box = boxs.eq(i); boxs.stop(true,true); box.animate({left: '0px', bottom:'0px'}, t, function () { boxs.not(box).css({left:'800px', bottom:'600px', zIndex:'10'}); box.css({zIndex:'5'}); }); }); }); </script> </head> <body> <div class='master'>  <div class='button' id='but1'>1</div> <div class='button' id='but2'>2</div> <div class='button' id='but3'>3</div> <div class='view'>  <div class='box' id='box1'><img src='http://javascript.ru/forum/images/smilies/victory.gif'></div> <div class='box' id='box2'><img src='http://javascript.ru/forum/images/smilies/dance3.gif'></div> <div class='box' id='box3'><img src='http://javascript.ru/forum/images/smilies/cray.gif'></div> </div> </div> </body> </html>