function goRandomElement() {
    var randomElement = $("#slide-holder .n").get().sort(function () {
        return Math.round(Math.random()) - 0.1
    }).slice(0, 1);

    return $(randomElement);
}

$(function () {

    var holder = $("#slide-holder");
    var aImgs = holder.find(".slide");
    var numImgs = aImgs.length;
    var widthPX = holder.get(0).clientWidth;
    var slidenav = $("#slide-nav");
    var currentElement = null;

    aImgs.each(function (i) {
        var e = $(this);

        // position for imgs
        e.css("left", "-" + parseFloat(widthPX * i).toString() + "px");

        var selectedCls = "";
        if (i == 0) {
            selectedCls = "selected";
        }

        // create right btns
        slidenav.append("<a class='n " + selectedCls + "' data-index='" + i + "' href='javascript:'></a>");

    });

    // get btns
    var $btns = $("#slide-holder .n");
    var lastBtn = $btns.last();
    var firstBtn = $btns.first();

    // auto slide every 4 second
    var timer = setInterval(function () {

        currentElement = currentElement.next();

        if (currentElement.length == 0) {
            currentElement = firstBtn;
        }

        currentElement.trigger("slide", ['true']);

    }, 5000);

    // btn event slide
    $btns.click(function () {

        currentElement = $(this);
        clearTimeout(timer); // stop timer when click on right btns
        $(this).trigger("slide", ['true']); // slide now

    });

    // slide event
    $btns.bind('slide', function (e, animateNow) {
        var getN = $(this);
        var seconds = 0;
        var pxGoAway = 0;

        if (animateNow == "true") {
            seconds = 1000;
        }

        aImgs.each(function (ii) {
            if (animateNow == "true") {
                pxGoAway = pxGoAway + 150;
            }
            $btns.removeClass("selected");
            getN.addClass("selected");

            var ee = $(this);
            var getIndex = getN.attr("data-index");
            ii = ii - parseFloat(getIndex);

            ee.animate({
                left: parseFloat(widthPX * ii) * -1
            }, seconds + pxGoAway, function () {
                // Animation complete.
            });

            // ee.css("left", "-" + parseFloat(widthPX * ii).toString() + "px");

        });

        return false;
    });

    // random start
    currentElement = goRandomElement();
    currentElement.trigger("slide", ['false']);
});