var carrouselCount = 0;
var visibleCount = 9;

//carouselPositionsArray.push(new CarouselItem(   -34, 54.95,  106.8, 139, 2, 0));
//carouselPositionsArray.push(new CarouselItem(     6, 44.95,  126.8, 169, 3, 1));
//carouselPositionsArray.push(new CarouselItem(   116, 34.95, 144.25, 192, 5, 1));
//carouselPositionsArray.push(new CarouselItem(236.95, 20.95, 1 65.4, 220, 7, 1));
//carouselPositionsArray.push(new CarouselItem(381.90,     6,    188, 250, 9, 1));
//carouselPositionsArray.push(new CarouselItem(550.95, 20.95,  165.4, 220, 8, 1));
//carouselPositionsArray.push(new CarouselItem(   693, 34.95, 144.25, 192, 6, 1));
//carouselPositionsArray.push(new CarouselItem(   819, 44.95,  126.8, 169, 4, 1));
//carouselPositionsArray.push(new CarouselItem(   849, 54.95,  106.8, 139, 1, 0));

var offsetLeft = 20;
var offsetTop = 140;

var position = new Array(visibleCount)
position[0] = { left: (offsetLeft - 34) + 'px', top: (offsetTop + 54.95) + 'px', width: 106.8, height: 139 };
position[1] = { left: (offsetLeft + 6) + 'px', top: (offsetTop + 44.95) + 'px', width: 126.8, height: 169 };
position[2] = { left: (offsetLeft + 116) + 'px', top: (offsetTop + 34.95) + 'px', width: 144.25, height: 192 };
position[3] = { left: (offsetLeft + 236.95) + 'px', top: (offsetTop + 20.95) + 'px', width: 165.4, height: 220 };
position[4] = { left: (offsetLeft + 381.90) + 'px', top: (offsetTop + 6) + 'px', width: 188, height: 250 };
position[5] = { left: (offsetLeft + 550.95) + 'px', top: (offsetTop + 20.95) + 'px', width: 165.4, height: 220 };
position[6] = { left: (offsetLeft + 693) + 'px', top: (offsetTop + 34.95) + 'px', width: 144.25, height: 192 };
position[7] = { left: (offsetLeft + 819) + 'px', top: (offsetTop + 44.95) + 'px', width: 126.8, height: 169 };
position[8] = { left: (offsetLeft + 869) + 'px', top: (offsetTop + 54.95) + 'px', width: 106.8, height: 139 };

var imagesVisibles = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);

function InitCarrousel() {
    if (document.getElementById('carrousel') != null) {
        carrouselCount = document.getElementById('carrousel').childNodes.length;
        ShowCarrousel();
    }
}

function ShowCarrousel() {
    var zIndex = 100;
    for (var ii = 0; ii < carrouselCount; ii++) {
        document.getElementById('ref' + (ii + 1)).style.display = 'none';
    }
    for (var ii = 0; ii < visibleCount; ii++) {
        zIndex += (ii < 5) ? 1 : -1;
        document.images['ref' + imagesVisibles[ii]].width = position[ii].width;
        document.images['ref' + imagesVisibles[ii]].height = position[ii].height;
        document.getElementById('ref' + imagesVisibles[ii]).style.top = position[ii].top;
        document.getElementById('ref' + imagesVisibles[ii]).style.left = position[ii].left;
        if (ii > 0 && ii < visibleCount - 1) {
            document.getElementById('ref' + imagesVisibles[ii]).style.display = 'block';
        }
        document.getElementById('ref' + imagesVisibles[ii]).style.zIndex = zIndex;
        if (ii != 4) {
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.onclick = function() { return false };
        } else {
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.onmousedown = null;
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.onclick = null;
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.decalage = null;
        }
        if (ii > 4) {
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.decalage = ii - 4;
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.onmousedown = function() { GoLeft(this.decalage) };
        }
        if (ii < 4) {
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.decalage = 4 - ii;
            document.getElementById('ref' + imagesVisibles[ii]).parentNode.onmousedown = function() { GoRight(this.decalage) };
        }
    }
}

function GoLeft(decalage) {
    for (var jj = 0; jj < decalage; jj++) {
        for (var ii = 0; ii < visibleCount - 1; ii++) {
            imagesVisibles[ii] = imagesVisibles[ii + 1];
        }
        if (imagesVisibles[visibleCount - 1] < carrouselCount) {
            imagesVisibles[visibleCount - 1]++;
        } else {
            imagesVisibles[visibleCount - 1] = 1;
        }
    }
    ShowCarrousel();
}

function GoRight(decalage) {
    for (var jj = 0; jj < decalage; jj++) {
        for (var ii = visibleCount - 1; ii > 0; ii--) {
            imagesVisibles[ii] = imagesVisibles[ii - 1];
        }
        if (imagesVisibles[0] > 1) {
            imagesVisibles[0]--;
        } else {
            imagesVisibles[0] = carrouselCount;
        }
    }
    ShowCarrousel();
}