var imgNumber = 0; 

var imgControl1;
var imgControl2;
var imgControl3;

var backHit = false;
var forwardHit = false;
var doPause = false;

var smallArray;
var mainArray;
var sendArray;


// this is for Pre-Downloading of images.
var imgArray = new Array();
var index = 0;

// Get the ids of Thumbnail images and main images and save in array.
function Initialize(parentControlName, hdnSendCtrlId)
{
    var elems = document.getElementsByName("mainImageControl");
    
    if(elems == null)   return;
    
    mainArray = new Array();
    sendArray = new Array();
    
    if(hdnSendCtrlId != "")
        hdnSendCtrlId = hdnSendCtrlId.substring(0, hdnSendCtrlId.length - 1);
    
    for(var i=0; i<elems.length; i++)
    {
        mainArray[i] = elems[i].id;
        
        var sendControlName = hdnSendCtrlId + (i+1);
        if(document.getElementById(sendControlName) != null && document.getElementById(sendControlName).value != "")
        {
            sendArray[i] = document.getElementById(sendControlName).value;
        }
        else
        {
            sendArray[i] = ExtractSend(elems[i].src);
            document.getElementById(sendControlName).value = sendArray[i];
    }   }
    
    smallArray = new Array();
    var count = 0;
    
    for(var i=1; i<40; i++)
    {        
        var name = "";
        
        if(i < 10)
            name = "ThumbnailImage_" + i;
        else
            name = "ThumbnailImage_" + i;
            
        var obj = document.getElementById(name);
        
        if(obj != null)
        {
            smallArray[count++] = obj.id;
            PreDownloadImages(obj);
        }
    }  
    
    Play(); 
         
} 

function PreDownloadImages(smImg)
{
    if(document.getElementById("hdnCarId1").value != "" && document.getElementById("hdnCarId1").value != "0")
    {
        imgArray[index] = new Image();
        imgArray[index].src = CastToBigImageSrc(smImg.src, 0);
        index++;
    }
    
    if(document.getElementById("hdnCarId2").value != "" && document.getElementById("hdnCarId2").value != "0")
    {
        imgArray[index] = new Image();
        imgArray[index].src = CastToBigImageSrc(smImg.src, 1);
        index++;
    }
        
    if(document.getElementById("hdnCarId3").value != "" && document.getElementById("hdnCarId3").value != "0")
    {
        imgArray[index] = new Image();
        imgArray[index].src = CastToBigImageSrc(smImg.src, 2);
        index++;
    }
}

function ExtractSend(src)
{
    if(src == null || src == "")
        return "";
        
    var arr = src.split("/");
    
    if(arr.length == 0)
        return "";
        
    var image = arr[arr.length - 1];    
    
    arr = image.split("_");    
    return arr[0];
}


function ExtractCode(src)
{    
    if(src == null || src == "")
        return "";
        
    var arr = src.split("/");
    
    if(arr.length == 0)
        return "";
        
    var image = arr[arr.length - 1];    
    
    image = image.replace(".jpg", "");
    arr = image.split("_");    
    return arr[arr.length - 1];
}

function CastToBigImageSrc(smallImageSrc, mainIndex)
{
    var url = smallImageSrc;
    
    if(url.indexOf("still_0640") != -1)
        url = url.replace("still_0640", "still_0320");
        
    if(url.indexOf("st0640") != -1)
        url = url.replace("st0640", "st0320");
        
    if(url.indexOf("_Small") != -1)
        url = url.replace("_Small", "");
        
    if(sendArray != null && sendArray.length != 0)
    {
        var send = sendArray[mainIndex];
        if(send != null)
        {
            url = url.replace(sendArray[0].toString(), send.toString());
            url = url.replace(sendArray[0].toString(), send.toString());        
            return url;
        }
    }
    
    return "";
}

function UpdateAppearance(i)
{
    var obj = document.getElementById(smallArray[i]);
    if(obj == null)
        return;
        
    obj.style.border = "1";
    obj.style.borderWidth = "3px";
    obj.style.borderStyle = "solid";    
    obj.style.borderColor = "#49677b";
    
    RemoveAppearanceFormatting(i);
}

function UpdateAppearanceBack(i)
{
    var obj = document.getElementById(smallArray[i]);
    obj.style.border = "1";
    obj.style.borderWidth = "3px";
    obj.style.borderStyle = "solid";
    //obj.style.borderColor = "#696969";
    obj.style.borderColor = "#49677b";
    
    RemoveAppearanceFormattingBackward(i);
}

function RemoveAppearanceFormattingBackward(i)
{
    if(i < smallArray.length - 1)
    {
        var prevObj = document.getElementById(smallArray[i+1]);
        prevObj.style.border = "0";
        prevObj.style.borderWidth = "";
        prevObj.style.borderStyle = "";
        prevObj.style.borderColor = "";
    }  
    else if(i == smallArray.length-1)
    {
        var prevObj = document.getElementById(smallArray[0]);        
        prevObj.style.border = "0";
        prevObj.style.borderWidth = "";
        prevObj.style.borderStyle = "";
        prevObj.style.borderColor = "";
    }
}


function RemoveAppearanceFormatting(i)
{
    if(i >= 1)
    {
        var prevObj = document.getElementById(smallArray[i-1]);
        prevObj.style.border = "0";
        prevObj.style.borderWidth = "";
        prevObj.style.borderStyle = "";
        prevObj.style.borderColor = "";
    }
    else if(i == 0)
    {
        var prevObj = document.getElementById(smallArray[smallArray.length-1]);        
        prevObj.style.border = "0";
        prevObj.style.borderWidth = "";
        prevObj.style.borderStyle = "";
        prevObj.style.borderColor = "";
    }    
    else if(i == smallArray.length)
    {
        var prevObj = document.getElementById(smallArray[0]);        
        prevObj.style.border = "0";
        prevObj.style.borderWidth = "";
        prevObj.style.borderStyle = "";
        prevObj.style.borderColor = "";
    }
}

function ClearOldStatus()
{
    RemoveAppearanceFormatting(imgNumber);    
    doPause= false;    
    forwardHit = true;
}

function Play()
{   
    if(smallArray == null)  return;
    
    if(mainArray == null)   return;  
        
    if(!doPause)
    {       
        var i = imgNumber;   
    
        if(imgNumber < smallArray.length - 1)
        {
            imgNumber++;
        }
        else
        {   
            ResetCount();
        }
        
        var smImg = document.getElementById(smallArray[i]);        
        
        UpdateAppearance(i);
        
        if(document.getElementById("hdnCarId1").value != "" && document.getElementById("hdnCarId1").value != "0" && mainArray[0] != null)
            document.getElementById(mainArray[0]).src = CastToBigImageSrc(smImg.src, 0);
         
        if(document.getElementById("hdnCarId2").value != "" && document.getElementById("hdnCarId2").value != "0" && mainArray[1] != null)
            document.getElementById(mainArray[1]).src = CastToBigImageSrc(smImg.src, 1);
            
        if(document.getElementById("hdnCarId3").value != "" && document.getElementById("hdnCarId3").value != "0" && mainArray[2] != null)
            document.getElementById(mainArray[2]).src = CastToBigImageSrc(smImg.src, 2);
            
        setTimeout(Play, 4000);
    }    
}

function Pause()
{
    if(!doPause)
    {
        doPause = true;    
    }
    else
    {
        doPause = false;
        Play();
    }
}

function Forward()
{ 
    doPause=true;
    if(smallArray == null)  return;
    
    if(mainArray == null)   return;

    forwardHit = true;
    
    if(backHit)
    {
        imgNumber++;
        backHit = false;   
    }    
    var i = imgNumber;   
    
    if(imgNumber < smallArray.length - 1)
    {
        imgNumber++;
    }
    else
    {   
        ResetCount();
    }
    
    var smImg = document.getElementById(smallArray[i]);        
    
    UpdateAppearance(i);
    
    if(document.getElementById("hdnCarId1").value != "" && document.getElementById("hdnCarId1").value != "0")
        document.getElementById(mainArray[0]).src = CastToBigImageSrc(smImg.src, 0);
     
    if(document.getElementById("hdnCarId2").value != "" && document.getElementById("hdnCarId2").value != "0")
        document.getElementById(mainArray[1]).src = CastToBigImageSrc(smImg.src, 1);
        
    if(document.getElementById("hdnCarId3").value != "" && document.getElementById("hdnCarId3").value != "0")
        document.getElementById(mainArray[2]).src = CastToBigImageSrc(smImg.src, 2);
}

function BackWard()
{
    if(smallArray == null) return;
    
    if(mainArray == null) return;  
     
    backHit = true;   ///////
    
    if(forwardHit)
    {
        imgNumber--;
        forwardHit = false;
    }
    
    if(imgNumber >= 1)////////
        imgNumber--;
    else
        imgNumber = smallArray.length-1;
    
    var i = imgNumber;
    
    var smImg = document.getElementById(smallArray[i]);        
    
    UpdateAppearanceBack(i);
    
    if(document.getElementById("hdnCarId1").value != "" && document.getElementById("hdnCarId1").value != "0")
        document.getElementById(mainArray[0]).src = CastToBigImageSrc(smImg.src, 0);
     
    if(document.getElementById("hdnCarId2").value != "" && document.getElementById("hdnCarId2").value != "0")
        document.getElementById(mainArray[1]).src = CastToBigImageSrc(smImg.src, 1);
        
    if(document.getElementById("hdnCarId3").value != "" && document.getElementById("hdnCarId3").value != "0")
        document.getElementById(mainArray[2]).src = CastToBigImageSrc(smImg.src, 2);
}

function ResetCount()
{
    imgNumber = 0;///////////
}
 
function EnforcePause()
{
    if(!doPause)
    {
        doPause = true;    
    }    
}