var sliderIntervalId = 0;
var sliderWidth = 0;
var sliding = false;

var sliderIntervalId1 = 0;
var sliderWidth1 = 0;
var sliding1 = false;

var sliderIntervalId2 = 0;
var sliderWidth2 = 0;
var sliding2 = false;

var sliderIntervalId3 = 0;
var sliderWidth3 = 0;
var sliding3 = false;

var slideSpeed = 20;

function Slide()
{
   if(sliding)
      return;
   sliding = true;
   if(sliderWidth == 650)
   {
      sliderIntervalId = setInterval('SildeLeftRun()', 15);      
   }
   else
   {      
      sliderIntervalId = setInterval('SildeRightRun()', 15);      
   }
   document.getElementById('divmain').style.display='none';
   document.getElementById('div2').style.display='none';
   document.getElementById('div2').style.width='0px';
   document.getElementById('div3').style.display='none';
   document.getElementById('div3').style.width='0px';
   document.getElementById('div4').style.display='none';
   document.getElementById('div4').style.width='0px';
   document.getElementById('div1').style.display='block';
   sliderWidth1 = 0;
   sliderWidth2 = 0;
   sliderWidth3 = 0;
   
}

function SildeLeftRun()
{
   slider = document.getElementById('div1');
   
   if(sliderWidth <= 0)
   {
      sliding = false;
      sliderWidth = 0;
      slider.style.width = '0px';
      clearInterval(sliderIntervalId);
      DefaultState();
   }
   else
   {
      sliderWidth -= slideSpeed;      
      if(sliderWidth <0)
         sliderWidth = 0;
      slider.style.width = sliderWidth + 'px';      
   }   
}

function SildeRightRun()
{
   slider = document.getElementById('div1');
   if(sliderWidth>= 650)
   {
      sliding = false;
      sliderWidth = 650;
      slider.style.width = '650px';
      clearInterval(sliderIntervalId);
   }
   else
   {
      sliderWidth += slideSpeed;
      if(sliderWidth> 650)
         sliderWidth = 650;
      slider.style.width = sliderWidth + 'px';       
   }
}


function Slide1()
{
   if(sliding1)
      return;
   sliding1 = true;
   if(sliderWidth1 == 650)
   {
      sliderIntervalId1 = setInterval('SildeLeftRun1()', 30);      
   }
   else
   {      
      sliderIntervalId1 = setInterval('SildeRightRun1()', 30);      
   }
   document.getElementById('divmain').style.display='none';
   document.getElementById('div2').style.display='block';
   document.getElementById('div1').style.display='none';
   document.getElementById('div1').style.width='0px';
   document.getElementById('div3').style.display='none';
   document.getElementById('div3').style.width='0px';
   document.getElementById('div4').style.display='none';
   document.getElementById('div4').style.width='0px';
   sliderWidth=0;
   sliderWidth2 = 0;
   sliderWidth3 = 0;
}

function SildeLeftRun1()
{
   slider = document.getElementById('div2');
   
   if(sliderWidth1 <= 0)
   {
      sliding1 = false;
      sliderWidth1 = 0;
      slider.style.width = '0px';
      clearInterval(sliderIntervalId1);
      DefaultState();
   }
   else
   {
      sliderWidth1 -= slideSpeed;      
      if(sliderWidth1 <0)
         sliderWidth1 = 0;
      slider.style.width = sliderWidth1 + 'px';      
   }   
}

function SildeRightRun1()
{
   slider = document.getElementById('div2');
   if(sliderWidth1>= 650)
   {
      sliding1 = false;
      sliderWidth1 = 650;
      slider.style.width = '650px';
      clearInterval(sliderIntervalId1);
   }
   else
   {
      sliderWidth1 += slideSpeed;
      if(sliderWidth1> 650)
         sliderWidth1 = 650;
      slider.style.width = sliderWidth1 + 'px';       
   }
}

function Slide2()
{
   if(sliding2)
      return;
   sliding2 = true;
   if(sliderWidth2 == 650)
   {
      sliderIntervalId2 = setInterval('SildeLeftRun2()', 30);      
   }
   else
   {      
      sliderIntervalId2 = setInterval('SildeRightRun2()', 30);      
   }
   document.getElementById('divmain').style.display='none';
   document.getElementById('div3').style.display='block';
   document.getElementById('div1').style.display='none';
   document.getElementById('div1').style.width='0px';
   document.getElementById('div2').style.display='none';
   document.getElementById('div2').style.width='0px';
   document.getElementById('div4').style.display='none';
   document.getElementById('div4').style.width='0px';
   sliderWidth=0;
   sliderWidth1 = 0;
   sliderWidth3 = 0;
}

function SildeLeftRun2()
{
   slider = document.getElementById('div3');
   
   if(sliderWidth2 <= 0)
   {
      sliding2 = false;
      sliderWidth2 = 0;
      slider.style.width = '0px';
      clearInterval(sliderIntervalId2);
      DefaultState();
   }
   else
   {
      sliderWidth2 -= slideSpeed;      
      if(sliderWidth2 <0)
         sliderWidth2 = 0;
      slider.style.width = sliderWidth2 + 'px';      
   }   
}

function SildeRightRun2()
{
   slider = document.getElementById('div3');
   if(sliderWidth2>= 650)
   {
      sliding2 = false;
      sliderWidth2 = 650;
      slider.style.width = '650px';
      clearInterval(sliderIntervalId2);
   }
   else
   {
      sliderWidth2 += slideSpeed;
      if(sliderWidth2> 650)
         sliderWidth2 = 650;
      slider.style.width = sliderWidth2 + 'px';       
   }
}

function Slide3()
{
   if(sliding3)
      return;
   sliding3 = true;
   if(sliderWidth3 == 650)
   {
      sliderIntervalId3 = setInterval('SildeLeftRun3()', 30);      
   }
   else
   {      
      sliderIntervalId3 = setInterval('SildeRightRun3()', 30);      
   }
   document.getElementById('divmain').style.display='none';
   document.getElementById('div4').style.display='block';
   document.getElementById('div1').style.display='none';
   document.getElementById('div1').style.width='0px';
   document.getElementById('div2').style.display='none';
   document.getElementById('div2').style.width='0px';
   document.getElementById('div3').style.display='none';
   document.getElementById('div3').style.width='0px';
   sliderWidth=0;
   sliderWidth1 = 0;
   sliderWidth2 = 0;
}

function SildeLeftRun3()
{
   slider = document.getElementById('div4');
   
   if(sliderWidth3 <= 0)
   {
      sliding3 = false;
      sliderWidth3 = 0;
      slider.style.width = '0px';
      clearInterval(sliderIntervalId3);
      DefaultState();
   }
   else
   {
      sliderWidth3 -= slideSpeed;      
      if(sliderWidth3 <0)
         sliderWidth3 = 0;
      slider.style.width = sliderWidth3 + 'px';      
   }      
}

function SildeRightRun3()
{
   slider = document.getElementById('div4');
   if(sliderWidth3>= 650)
   {
      sliding3 = false;
      sliderWidth3 = 650;
      slider.style.width = '650px';
      clearInterval(sliderIntervalId3);
   }
   else
   {
      sliderWidth3 += slideSpeed;
      if(sliderWidth3> 650)
         sliderWidth3 = 650;
      slider.style.width = sliderWidth3 + 'px';       
   }
}


function ChangePic(no)
{
    if(no==1)
    {
        document.getElementById('img1').src="Thumb/C2.gif";
    }
    else if(no==2)
    {
        document.getElementById('img2').src="Thumb/G2.gif";
    }
    else if(no==3)
    {
        document.getElementById('img3').src="Thumb/S2.gif";
    }
    else if(no==4)
    {
        document.getElementById('img4').src="Thumb/T2.gif";
    }
}
function DefaultPic()
{
    document.getElementById('img1').src="Thumb/C1.gif";
    document.getElementById('img2').src="Thumb/G1.gif";
    document.getElementById('img3').src="Thumb/S1.gif";
    document.getElementById('img4').src="Thumb/T1.gif";
}
function DefaultState()
{
    document.getElementById('div1').style.display='none';
    document.getElementById('div1').style.width='0px';  
    document.getElementById('div2').style.display='none';
    document.getElementById('div2').style.width='0px';
    document.getElementById('div3').style.display='none';
    document.getElementById('div3').style.width='0px';  
    document.getElementById('div4').style.display='none';
    document.getElementById('div4').style.width='0px';
    sliderWidth=0;
    sliderWidth1 = 0; 
    sliderWidth2 = 0; 
    sliderWidth3 = 0; 
    document.getElementById('divmain').style.display='block';
}
