var galCar = new Array();
function addGalleryCar(gcID) {
    $(window).load(function () {
        thisIndex = galCar.length;
        galCar[thisIndex] = document.getElementById(gcID);
        if (galCar[thisIndex] == null) return false;

        galCar[thisIndex].wrapper = galCar[thisIndex].getElementsByTagName('div')[0];
        galCar[thisIndex].imgList = galCar[thisIndex].getElementsByTagName('img');
        galCar[thisIndex].galLength = galCar[thisIndex].imgList.length;
        galCar[thisIndex].displayWidth = galCar[thisIndex].offsetWidth;
        galCar[thisIndex].pos = 0;
        galCar[thisIndex].left = 0;
        galCar[thisIndex].animate = 'false';
        galCar[thisIndex].parentNode.style.position = 'relative';
        galCar[thisIndex].backButton = document.createElement('span');
        galCar[thisIndex].backButton.innerHTML = 'back';
        galCar[thisIndex].backButton.className = 'back';
        galCar[thisIndex].backButton.style.display = 'none';
        galCar[thisIndex].backButton.item = thisIndex;
        galCar[thisIndex].parentNode.appendChild(galCar[thisIndex].backButton);
        galCar[thisIndex].nextButton = document.createElement('span');
        galCar[thisIndex].nextButton.innerHTML = 'next';
        galCar[thisIndex].nextButton.className = 'next';
        galCar[thisIndex].nextButton.item = thisIndex;

        //loop through all images to get total width
        tempWidth = 0;
        for (i = 0; i < galCar[thisIndex].galLength; i++) {
            tempWidth = tempWidth + galCar[thisIndex].imgList[i].width;
        }
        //alert(tempWidth);

        // Hide the next arrow display width is larger than required
        if (tempWidth <= galCar[thisIndex].displayWidth) {
            galCar[thisIndex].nextButton.style.display = 'none';
        }

        galCar[thisIndex].parentNode.appendChild(galCar[thisIndex].nextButton);
        galCar[thisIndex].width = (3 * galCar[thisIndex].galLength) + tempWidth;
        galCar[thisIndex].wrapper.style.width = galCar[thisIndex].width + 10 + 'px';
        //galCar[thisIndex].wrapper.style.right = '-100px';
        galCar[thisIndex].nextButton.onclick = function () {
            i = this.item;
            galCar[i].pos = galCar[i].pos + galCar[i].displayWidth;
            //alert('pos='+galCar[i].pos+' >= '+(galCar[i].width - 82*3));
            if (galCar[i].pos >= (galCar[i].width - galCar[i].displayWidth)) {
                galCar[i].pos = galCar[i].width - galCar[i].displayWidth;
                galCar[i].nextButton.style.display = 'none';
                galCar[i].backButton.style.display = 'block';
            }
            else {
                galCar[i].backButton.style.display = 'block';
            }
            if (galCar[i].animate == 'false') {
                galCar[i].animate = 'true';
                $(galCar[i].wrapper).animate({ left: '-' + galCar[i].pos + 'px' }, 100, 'linear', function () {
                    galCar[i].animate = 'false'
                })
                /*animate[animate.length] = function(){
                galCar[i].left += 20;
                if (galCar[i].pos < galCar[i].left) {
                galCar[i].left = galCar[i].pos;
                animate[galCar[i].animate] = null;
                galCar[i].animate = 'false'
                }
                galCar[i].wrapper.style.left = -galCar[i].left + 'px';
                }*/
            }
            else if (galCar[i].animate == 'true') {
                $(galCar[i].wrapper).stop();
                $(galCar[i].wrapper).animate({ left: '-' + galCar[i].pos + 'px' }, 100, 'linear', function () {
                    galCar[i].animate = 'false'
                })
            }
        }
        galCar[thisIndex].backButton.onclick = function () {
            i = this.item;
            galCar[i].pos = galCar[i].pos - galCar[i].displayWidth;
            if (galCar[i].pos <= 0) {
                galCar[i].pos = 0;
                galCar[i].backButton.style.display = 'none';
                galCar[i].nextButton.style.display = 'block';
            }
            else {
                galCar[i].nextButton.style.display = 'block';
            }
            if (galCar[i].animate == 'false') {
                galCar[i].animate = 'true';
                $(galCar[i].wrapper).animate({ left: '-' + galCar[i].pos + 'px' }, 100, 'linear', function () {
                    galCar[i].animate = 'false'
                })
                /*animate[animate.length] = function(){
                galCar[i].left -= 20;
                if (galCar[i].pos > galCar[i].left) {
                galCar[i].left = galCar[i].pos;
                animate[galCar[i].animate] = null;
                galCar[i].animate = 'false'
                }
                galCar[i].wrapper.style.left = -galCar[i].left + 'px';
                }*/
            }
            else if (galCar[i].animate == 'true') {
                $(galCar[i].wrapper).stop();
                $(galCar[i].wrapper).animate({ left: '-' + galCar[i].pos + 'px' }, 100, 'linear', function () {
                    galCar[i].animate = 'false'
                })
            }
        }
    });
}