window.addEvent('domready', function() {

    /* ----------Config Vars----------- */
    var transitionTime = 450; //transition time (1 second = 1000)
    var scrollLen = 125;
    var itemCount = 10;
    var itemSize = 7;
    var prevBtn = $('prevbtn');
    var playBtn = $('playbtn');
    var nextBtn = $('nextbtn');

    /* --------end config vars-------- */


    //Slider Stuff
    var slideForward = function() {

        //now get item to slide in using new index
        var newItem = document.getElementById("slider-items-container");
        var leftPos = "0";

        if (newItem.style.left != "") {
            leftPos = newItem.style.left;
            leftPos = leftPos.replace(/px/, "");
        }

        var newLeft = parseInt(leftPos) - scrollLen;
        var itemsToGo = itemCount - itemSize;
        var maxLeft = itemsToGo * scrollLen;

        if (maxLeft >= Math.abs(newLeft)) {
            //set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
            var item_in = new Fx.Morph(newItem, {
                duration: transitionTime,
                transition: Fx.Transitions.Quad.easeInOut,
                wait: false
            });


            //we will set a beginning value here
            //this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
            item_in.start({
                'left': [leftPos, newLeft]
            });
        }

    };


    var slideBackward = function() {

        //now get item to slide in using new index
        var newItem = document.getElementById("slider-items-container");
        var leftPos = "0";

        if (newItem.style.left != "") {
            leftPos = newItem.style.left;
            leftPos = leftPos.replace(/px/, "");
        }

        var newLeft = parseInt(leftPos) + scrollLen;

        if (newLeft <= 0) {
            var item_in = new Fx.Morph(newItem, {
                duration: transitionTime,
                transition: Fx.Transitions.Quad.easeInOut,
                wait: false
            });


            //we will set a beginning value here too, but this time to make it come from left to right
            item_in.start({
                'left': [leftPos, newLeft]
            });
        }

    };
    //end slideBackward

    nextBtn.addEvent('click', function() {
        slideForward();
    });

    prevBtn.addEvent('click', function() {
        slideBackward();
    });

});

function showCap(divId) {
    document.getElementById('slide_item_cap' + divId).style.visibility = "visible";
}

function hideCap(divId) {
    document.getElementById('slide_item_cap' + divId).style.visibility = "hidden";
}

//this function is for the page load.  scroll automatically to the current product.
function slideForward(multiplier) {
    var transitionTime = 700; //transition time (1 second = 1000)
    var scrollLen = 125 * multiplier;
    var itemCount = 10;
    var itemSize = 7;
    //now get item to slide in using new index
    var newItem = document.getElementById("slider-items-container");
    var leftPos = "0";

    if (newItem.style.left != "") {
        leftPos = newItem.style.left;
        leftPos = leftPos.replace(/px/, "");
    }

    var newLeft = parseInt(leftPos) - scrollLen;
    var itemsToGo = itemCount - itemSize;
    var maxLeft = itemsToGo * scrollLen;

    if (maxLeft >= Math.abs(newLeft)) {
        //set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
        var item_in = new Fx.Morph(newItem, {
            duration: transitionTime,
            transition: Fx.Transitions.Quad.easeInOut,
            wait: false
        });


        //we will set a beginning value here
        //this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
        item_in.start({
            'left': [leftPos, newLeft]
        });
    }
}