//Clone what we've got
function cloner(){
    // Pad before
    var smfirst = $('#features_list li:first');
    var smfirstclass = $(smfirst).attr('class');
    $('#features_list_container li').each(function(){
        $(this).clone(true).insertBefore(smfirst);
    })
    lgfirst = $('#feature_panes li:first');
    $('#features_panes_container li').each(function(){
        $(this).clone(true).insertBefore(lgfirst);
    })

    // Advance to the ones we need
    $('#features_list_wrapper').css('left', (liL * lisW * limb * -1) - (offset * lisW)  + 'px');
    $('#feature_panes_wrapper').css('left', (liL * lilW * limb * -1) + 'px');
    
    // Uncomment if you want them to match
    //$('#feature_panes_wrapper').css('left', (liL * lilW * limb * -1) - (offset * lisW) + 'px');
    
    
    //Account for new length
    t = $('#features_list_container li').length
    
    // Pad after
    $('#features_list_container li:gt(' + ((t/2)-1) + ')').each(function(){
        smlast = $('#features_list li:last');
        $(this).clone(true).insertAfter(smlast);
    })
    $('#features_panes_container li:gt(' + ((t/2)-1) + ')').each(function(){
        lglast = $('#feature_panes li:last');
        $(this).clone(true).insertAfter(lglast);
    })
    
    // We hide the first item so it wont show up when the page loads. After we are done initalizing - we show it.
    $('.' + smfirstclass).css('display', 'block');
    
    //Update the li length
    liL     = $('#features_list_container li').length;
}

function adv(){
    inc = inc + 1;
    if(inc >= 1 && inc <= ((liL/3)*2)){
        move(inc, -1);
    }
}
function rev(){
    inc = inc - 1;
    if(inc >= 1 && inc <= ((liL/3)*2)){
        move(inc, 1);
    }
}


function move(page, d){
    var dir = d;
    
    //Depending on Direction - calculate how much to the Small Feature Bar
    if(d == 1){
        swp = ((page + limb + offset) * lisW * dir);
    }else{
        swp = (page * lisW * dir);
    }
    
    //Depending on Direction - calculate how much to the Large Feature Bar
    if(d == 1){
        lwp = ((page + offset) * lilW * dir);
    }else{
        lwp = ((page - offset) * lilW * dir);
    }
    
    
    if(dir == -1){
        // Amts = (LI Width (large or Small) * direction * li Move By) + large or small Wrapper Position
        var samt = (lisW * dir * limb) + swp;
        var lamt = (lilW * dir * limb) + lwp;
    }else{
        var samt = (lisW * dir * limb) - swp;
        var lamt = (lilW * dir * limb) - lwp;
    }
    
    
    $('#features_list_wrapper').animate({ left : samt  }, 500, function(){
        //FWD
        if(dir == -1){
            // At the 3/4 mark we are going to adjust the CSS
            if(page == ((liL/3)*2)){
                
                // Calculate the amount we need to move (adjust for offset)
                var amt = (-1 * (liL/3) * lisW) - (offset * lisW);
                $('#features_list_wrapper').css({ left : amt  });
                
                // Set Incrementer back to the 1/3 mark (or the first panel that is shown onload)
                inc = (liL / 3);
            }
        }
        //REV
        if(dir == 1){   
            // At the first item we are going to adjust the CSS + be sure to include the offset
            if(page == 1){
                
                // Calculate the amount we need to move (adjust for offset)
                var amt = (-1 * ((liL/3)+offset) * lisW) - (offset * lisW);
                $('#features_list_wrapper').css({ left : amt  });
                
                // Set Incrementer back to the 1/3 mark (or the first panel that is shown onload + 1 because of the offset)
                inc = ((liL / 3) + offset); 
            }
        }
    });

    
    
    $('#feature_panes_wrapper').animate({ left : lamt  }, 500, function(){
        //FWD
        if(dir == -1){
            // At the 3/4 mark we are going to adjust the CSS
            if(page == ((liL/3)*2)){
                
                // Calculate the amount we need to move
                var amt = (-1 * (liL/3) * lilW);
                $('#feature_panes_wrapper').css({ left : amt  });
                
                // Set Incrementer back to the 1/3 mark (or the first panel that is shown onload)
                inc = (liL / 3);
            }
        }
        //REV
        if(dir == 1){
            if(page == 1){
                
                // At the first item we are going to adjust the CSS + be sure to include the offset
                var amt = (-1 * ((liL/3)+offset) * lilW);
                $('#feature_panes_wrapper').css({ left : amt  });
                
                // Set Incrementer back to the 1/3 mark (or the first panel that is shown onload + 1 because of the offset)
                inc = ((liL / 3) + offset); 
            }
        }
    });
    
}

function init(){
    cloner();
    
    jQuery('#feature_arrows li.fwd a').click(function(){
         animate = false;
         adv();
         return false;
    })

    jQuery('#feature_arrows li.rev a').click(function(){
         animate = false;
         rev();
         return false;
    })

}   

$(document).ready(function () {
  
    liL     = $('#features_list_container li').length
    lisW    = 323;              // make sure to add margins & padding width = 322px + 1px right-margin
    lilW    = 980;              // make sure to add margins & padding width = 322px + 1px right-margin
    limb    = 1;                // li to move by
    offset  = 1;                // Featurette offest (moves X items to the left)
    animate = true; 
    inc     = liL;              // Set incrementer at the position of the first panel shown onload
    
    
    $(document).everyTime(10000, "features", function(i) {
        if (animate == true) {
            adv();          
        }
    });

    init();
  
});