(function ($j) {

    $.fn.slidr = function (options) {

        var defaults = {
            scrollSpeed: 400, //'slow' or 'fast' / or numbers i.e 100, 200, 400 etc
            waitTime: 5, //time in seconds
            slideContainer: null,
            visibleArea: 60 //area of the handle

        };

        var settings = $j.extend(defaults, options);

        return this.each(function () {

            //setup
            var itemWidth = new Array();
            var item = null;
            var count = 0;
            var itemsNum = null;
            var endPosArr = new Array();
            var startPosArr = new Array();
            var count = 0;
            var timer = null;
            //get cointainers
            var container = $j(this);
            var itemsContainer = $j('li', container);

            //get number of carousel items
            itemsNum = itemsContainer.length;

            //set up dimesions
            var singleItemWidth = container.width();
            var singleItemHeight = itemsContainer.height();

            //add js class for css3 
            container.addClass('js');

            //set the open class
            itemsContainer.eq(0).addClass('open');



            //check to see if carouel is greater than 1 item
            if (itemsNum <= 1) return false;

            var autoScroll = function () {
                count++;

                if (count >= itemsNum) count = 0;

                $j('.handle', container).eq(count).trigger('click');
                clearTimeout(timer);
                timer = setTimeout(autoScroll, settings.waitTime * 1000);
            }

            var handleClick = function (elem, startPos, endPos, idx) {

                var animateActive = false;
                //items animate out
                //if the last item is clicked then reset the width

                $j(elem).css({ 'width': itemWidth[idx] + 'px' });

                //check if this is the correct item in the stack
                itemsContainer.each(function (index) {
                    var itemCurrentPos = parseInt($j(this).css('left'));

                    if (itemCurrentPos != endPosArr[index]) {
                        if (endPosArr[index] < endPosArr[idx]) {
                            $j(this).css({ 'width': itemWidth[index] + 'px' });

                            //animate
                            $j(this).animate({
                                left: endPosArr[index] + 'px'
                            });
                        }

                    } else if (itemCurrentPos != startPosArr[index]) {

                        if (startPosArr[index] > startPosArr[idx]) {
                            $j(this).animate({
                                left: startPosArr[index] + 'px'
                            }, function () {
                                //set the width of the item back to visible area
                                $j(this).css({ 'width': settings.visibleArea + 'px' });
                            });

                        }
                        endpos = startPos;
                    }

                });

                //set the autoScroll to continue from where you last clicked
                count = $j(elem).index();

                //add or remove class
                $j(elem).addClass('open');
                $j(elem).prevAll().removeClass('open');
                $j(elem).nextAll().removeClass('open');

                var currentPos = parseInt($j(elem).css('left'));
                //animate clicked item
                $j(elem).animate({
                    left: endPos + 'px'
                });

            }



            //set the items position on the carousel in reverse order
            itemsContainer.each(function (index) {

                //set the width of the item
                var offsetWidth = 20;
                //offset is so the borders are visible
                if (index == itemsNum - 1) {
                    offsetWidth = 0;
                }

                var newWidth = $j(this).width() - (parseInt(settings.visibleArea) * parseInt(index)) - offsetWidth;
                itemWidth.push(newWidth);

                if (index == 0) {
                    $j(this).css({ 'left': '0', 'z-index': '1', 'position': 'absolute' });

                    //populate the first position with 0
                    startPosArr.push(0);
                    endPosArr.push(0);

                } else {
                    var zIndex = itemsNum - index;
                    var leftPos = singleItemWidth - ((zIndex) * settings.visibleArea);
                    $j(this).css({ 'left': leftPos + 'px', 'z-index': index, 'width': settings.visibleArea + 'px' });

                    //set the start slide positions
                    startPosArr.push(leftPos);

                    //increment the endPosArr by the width of the handle
                    endPosArr.push(parseInt(settings.visibleArea) * parseInt(index));
                }


            });

            //initiate click function
            container.bind('click', function (evt) {
                var myTarget = $j(evt.target);
                if (myTarget.is('.handle')) {
                    item = myTarget.parent('li');
                    handleClick(item, startPosArr[item.index()], endPosArr[item.index()], item.index());
                }
            });

            //init url click function
            $j('.carousel-info').click(function (evt) {
                var cta = $j('h2 a', this).attr('href');
                window.location = (cta);
            });


            //reset timer on hover
            itemsContainer.mouseover(function (evt) {
                clearTimeout(timer)
            });
            itemsContainer.mouseout(function (evt) {
                timer = setTimeout(autoScroll, settings.waitTime * 1000);
            });

            //start autoScroll
            timer = setTimeout(autoScroll, settings.waitTime * 1000);

        });
    };



})(jQuery);