Javascript-форум - Помогите с галереей

Всем привет. Я написал скрипт, только он несовсем правильно работает. По итогу это должнобыть чтото в стиле http://images.yandex.ru/yandsearch?p...g&rpt= simage . Сейчас имеется галерея, но не работают цыклы с переходами.
Вопрос номер 1: как case1:... запихать в цикл
Вопрос номер Как сделать так, чтоб при наведении на левый или правый крайние блоки, картинки сдвигались в соответствующую сторону.
Прошу помощи, помогите чем можете.
Вот скрипт

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title></title>
  
</head>
<body>
<style>
body 
	{
	azimuth:center;
	padding: 0px;
	margin: 0px;
	}
	
.gallery 
	{
	width: 620px;
	height: 540px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	border-style:solid;
	}

.photobig #swapper
	{
	width: 620px;
	height: 410px;
	background-repeat:no-repeat;
	background-position:center;
	background-position:top;
	background-color:#00CC99;
	position:fixed;
	margin-top:0px;
	margin-left: 0px;
	}
	
.photosmol
	{
	width: 620px;
	height: 130px;
	background-color: #CC9900;
	position:fixed;
	margin-top:410px;
	margin-left: 0px;
	}

.photosmol div.table{
   height:0;
}

.photosmol div.tr{
   height:0;
}

.photosmol div.table[class] {height:auto; display: table;}
.photosmol div.tr[class] { height:auto; display: table-row;}
.photosmol div.td[class] {float:none; display: table-cell;}

.photosmol div.td {
   height: 130px; 
   float:left;
}

.photosmol #first
	{
   width:70px;
}
.photosmol #second{
   width:120px;
}

.photosmol div.td img
{
	border: 2px;
	border:solid;
	background-color:#FFFFFF;
	padding: 2px;
	vertical-align: top;
	width:120px;
	height:90px;
}
</style>
<script type="text/javascript" language="javascript">

function swapImage(a)
	 
{
  switch(a)
  {
  		   
//		  for (var j = 1; j < 5; j++)
//		   var twoLayer;  
//	  {
//		  twoLayer = 'case '+[j]+': document.getElementById("swapper").src = "img/'+[j]+'.jpg"; break; ';
//		 document.write(twoLayer); 
//      }	
	case 0: var i=i+2;
	case 1: document.getElementById("swapper").src = "img/1.jpg"; break;
    case 2: document.getElementById("swapper").src = "img/2.jpg"; break;
    case 3: document.getElementById("swapper").src = "img/3.jpg"; break;
    case 4: document.getElementById("swapper").src = "img/4.jpg"; break;  
	case 5: document.getElementById("swapper").src = "img/5.jpg"; break; 
     default:   
  }

}
</script>

<div class="gallery">
  <div class="photobig" >
    <img id="swapper" src="img/1.jpg">
	  <div class="photosmol">
        
<div class="table">
    
      <script type="text/javascript"> 
var i=0;
	
	 var oneLayer; 

	  document.write('<div class="first"><a href="#" onmouseover="javascript:swapImage(0);">1111</a></div>');
  
	  var j=i+4;
      for (i; i < j; i++) { 
         oneLayer = '<div class="td"><img src="img/'+[i]+'.jpg" onmouseover="javascript:swapImage('+[i]+');" onmouseout="javascript:swapImage('+[i]+');" style="width:120px; height:90px;"></div>';
         document.write(oneLayer); 
      } 

      </script>

</div>
        
        </div>
  </div>
</div> 


</body>

</html>