function doLeft()
{
     if(offset == 0)  return;
     offset --;
     document.getElementById("thumb1").src = "SDpics\\" + picName[offset]; 
     document.getElementById("thumb2").src = "SDpics\\" + picName[offset+1];
     document.getElementById("thumb3").src = "SDpics\\" + picName[offset+2];
     document.getElementById("thumb4").src = "SDpics\\" + picName[offset+3];

     document.getElementById("leftArrow").src = "img\\left.png";
     if(offset == 0)
     {
         document.getElementById("leftArrow").src = "img\\leftDisabled.png";
     }
     if(offset +numPic > 4)
         document.getElementById("rightArrow").src = "img\\right.png";
     selected++;
     if(selected > 4)
        document.getElementById("thumb4").border = 1; 
     doBorder();
}

function doRight()
{
     if(offset + 4 == numPic)  return;
     offset ++;
     document.getElementById("thumb1").src = "SDpics\\" + picName[offset]; 
     document.getElementById("thumb2").src = "SDpics\\" + picName[offset+1];
     document.getElementById("thumb3").src = "SDpics\\" + picName[offset+2];
     document.getElementById("thumb4").src = "SDpics\\" + picName[offset+3];

     document.getElementById("leftArrow").src = "img\\left.png";
     if(offset + 4 == numPic)
     {
         document.getElementById("rightArrow").src = "img\\rightDisabled.png";
     }
     selected--;
     if(selected == 0)
         document.getElementById("thumb1").border = 1; 
     doBorder();
}

function doPic1()
{
    selected = 1;
    doBorder();
    document.getElementById("topPic").src = "SDpics\\" + picName[offset]; 
    document.getElementById("topPic").width =  picX[offset]; 
    document.getElementById("topPic").height = picY[offset]; 
    document.getElementById("picname").innerHTML = picName[offset].substr(0,picName[offset].length-4);
	   
}

function doPic2()
{
    selected = 2;
    doBorder();
    document.getElementById("topPic").src = "SDpics\\" + picName[offset+1]; 
    document.getElementById("topPic").width =  picX[offset+1]; 
    document.getElementById("topPic").height = picY[offset+1]; 
    document.getElementById("picname").innerHTML = picName[offset+1].substr(0,picName[offset+1].length-4);
	   
}
function doPic3()
{
    selected = 3;
    doBorder();
    document.getElementById("topPic").src = "SDpics\\" + picName[offset+2]; 
    document.getElementById("topPic").width =  picX[offset+2]; 
    document.getElementById("topPic").height = picY[offset+2]; 
    document.getElementById("picname").innerHTML = picName[offset+2].substr(0,picName[offset+2].length-4);
	   
}
function doPic4()
{
    selected = 4;
    doBorder();
    document.getElementById("topPic").src = "SDpics\\" + picName[offset+3]; 
    document.getElementById("topPic").width =  picX[offset+3]; 
    document.getElementById("topPic").height = picY[offset+3]; 
    document.getElementById("picname").innerHTML = picName[offset+3].substr(0,picName[offset+3].length-4);
	   
}

function doBorder()
{
    if(selected == 1)
    {
   	    document.getElementById("thumb1").border = 2; 
   	    document.getElementById("thumb2").border = 1; 
   	    document.getElementById("thumb3").border = 1; 
   	    document.getElementById("thumb4").border = 1; 
    }
    if(selected == 2)
    {
   	    document.getElementById("thumb1").border = 1; 
   	    document.getElementById("thumb2").border = 2; 
   	    document.getElementById("thumb3").border = 1; 
   	    document.getElementById("thumb4").border = 1; 
    }
    if(selected == 3)
    {
   	    document.getElementById("thumb1").border = 1; 
   	    document.getElementById("thumb2").border = 1; 
   	    document.getElementById("thumb3").border = 2; 
   	    document.getElementById("thumb4").border = 1; 
    }
    if(selected == 4)
    {
   	    document.getElementById("thumb1").border = 1; 
   	    document.getElementById("thumb2").border = 1; 
   	    document.getElementById("thumb3").border = 1; 
   	    document.getElementById("thumb4").border = 4; 
    }

	
}