function DoubbleSlider(elem, indexNum){
    var nextButton = document.getElementById("sl_next_"+indexNum);
    var prevButton = document.getElementById("sl_prev_"+indexNum);
    var canvas= document.getElementById("sl_canvas_"+indexNum);
    var elemWidth = 131;
    var buttonWidth = 8;
    var elemList = new Array();
    var firstIx;
    var secondIx;
    var inMotion = false;
    var startingNum = canvas.children.length
    for (var i = 0; i < startingNum; i++){
        var curChild = canvas.children[0];
        elemList.push(curChild);
        canvas.removeChild(curChild);
    }
    var currentFirstIndex = 0;
    function buildFinal(){
        firstIx = currentFirstIndex;
        if(firstIx >= elemList.length){
            firstIx = 0;
        }
        secondIx = firstIx + 1;
        if(secondIx >= elemList.length){
            secondIx = 0;
        }
        canvas.appendChild(elemList[firstIx]);
        canvas.appendChild(elemList[secondIx]);
        
    }
    function goNext(){
        if(inMotion){
            return;
        }
        addAtEnd();
        inMotion = true;
        jQuery(canvas).animate({left: buttonWidth - elemWidth}, 300, 'swing', finalizeNext);
    }
    function finalizeNext(){
        canvas.removeChild(elemList[firstIx]);
        canvas.style.left = buttonWidth +"px";
        firstIx ++;
        if (firstIx >= elemList.length){
            firstIx = 0;
        }
        secondIx++;
        if(secondIx >= elemList.length){
            secondIx = 0;
        }
        inMotion = false;
    }
    function addAtEnd(){
        var thirdIx = secondIx + 1;
        if (thirdIx >= elemList.length){
            thirdIx = 0;
        }
        canvas.appendChild(elemList[thirdIx]);
    }
    function goPrev(){
        if(inMotion){
            return;
        }
        addAtFront();
        inMotion = true;
        jQuery(canvas).animate({left: buttonWidth}, 300, 'swing', finalizePrev);
    }
    function finalizePrev(){
        canvas.removeChild(elemList[secondIx]);
        secondIx = firstIx;
        firstIx = secondIx-1;
        if(firstIx < 0){
            firstIx = elemList.length -1;
        }
        inMotion = false;
    }
    function addAtFront(){
        
        canvas.style.left = (buttonWidth - elemWidth) + "px";
        var zeroIx = firstIx - 1;
        if (zeroIx < 0){
            zeroIx = elemList.length -1;
        }
        canvas.insertBefore(elemList[zeroIx], elemList[firstIx]);
    }
    nextButton.onclick = goNext;
    prevButton.onclick = goPrev;
    buildFinal();
}
