﻿/*  WIDGET ROTATOR PLUGIN By COLIN WISEMAN for the INLINE CMS */
(function ($) {

    var WidgetRotator = function (element) {

        var elem = $(element);
        var obj = this;

        var nexts = $(elem).find(".next"); // each widget rotator has a next button
        var prevs = $(elem).find(".previous"); // each widget rotator has a back button

        var currentPage = 0; //  the current page is the horizontal scroll of the rotator
        var siblingBlocks = null;
        var current = 0;
        var holder = null;
        var moving = false;

        this.init = function (settings) {

            // each rotator has a block holder, think of the block holder as a "window", where the blocks slide past, making them visible.           
            holder = $(elem).children("." + settings['window-class'])[0];
            if (holder != null) {

                // now get all the blocks that are related - siblings :D
                // we will now move the blocks to the correct position, so that the developer doesn't
                // need to work all that out!       
                siblingBlocks = $(holder).children("." + settings['item-class']);
                $(siblingBlocks).each(function (index, obj) {
                    $(this).css("left", current);
                    $(this).css("top", 0);
                    current += parseInt($(this).css("width")); // the next block's position will be the current position + the width of the one we just placed

                    $(this).attr("index", index);
                    index++;
                });

                $(holder).find("a.previous,a.next").each(function (index, obj) {
                    // we generally use # as the href on a tags that we want to "work", but don't want to go anywhere.  This helps with styling.
                    // but this messes around with movement on the page.
                    // remove the # tag at this point so that the styles are applied, but the hash tag doesn't work.
                    $(this).attr("href", "");
                });

                $(nexts).click(function (e) {

                    var aBetterEventObject = $.Event(e);
                    // Now you can do what you want: (Cross-browser)
                    aBetterEventObject.preventDefault(); // stop any clicks from redirecting the site without our say so.

                    if (!moving) // if it is moving, we won't want to set a page, otherwise things might go gooey!
                    {
                        moving = true;

                        var visible = Math.floor(parseInt($(elem).css("width")) / parseInt($(siblingBlocks[currentPage]).css("width")));

                        // i want to move by "visible" number of items to index xxx                        
                        var moveToIndex = ((visible * 2) + currentPage - 1);
                        var loops = 0;

                        if (moveToIndex > siblingBlocks.length - 1) {
                            // there isn't enough to move a full "visible" by
                            // what can we move by?                            
                            loops = (visible - (moveToIndex % (siblingBlocks.length - 1)));
                        }
                        else
                            loops = visible; // there is enough space to move by the whole "visible" count

                        if (loops > 0) {
                            var moveBy = 0;
                            for (ii = 1; ii <= loops; ii++) {
                                moveBy += parseInt($(siblingBlocks[currentPage + 1]).css("width"));
                                currentPage++;
                            }
                            siblingBlocks.each(function (index, obj) {
                                var currentLeft = parseInt($(this).css("left"));
                                // subtract the moveBy as we are moving to the right
                                var newLeft = currentLeft - moveBy;
                                $(this).animate({ left: newLeft + "px" }, "1000", function () {
                                    moving = false;                                    
                                });
                            });
                        }
                        else
                            moving = false;
                    }

                });

                $(prevs).click(function (e) {

                    var aBetterEventObject = $.Event(e);
                    // Now you can do what you want: (Cross-browser)
                    aBetterEventObject.preventDefault(); // stop any clicks from redirecting the site without our say so.

                    if (!moving) // if it is moving, we won't want to set a page, otherwise things might go gooey!
                    {
                        moving = true;
                        var visible = Math.floor(parseInt($(elem).css("width")) / parseInt($(siblingBlocks[currentPage]).css("width")));
                        var moveToIndex = (currentPage - visible);

                        if (moveToIndex < 0)
                            moveToIndex = 0;

                        loops = currentPage - moveToIndex;
                        if (loops > 0) {
                            var moveBy = 0;
                            for (ii = 1; ii <= loops; ii++) {
                                moveBy += parseInt($(siblingBlocks[currentPage - 1]).css("width"));
                                currentPage--;
                            }

                            siblingBlocks.each(function (index, obj) {
                                var currentLeft = parseInt($(this).css("left"));
                                // subtract the moveBy as we are moving to the right
                                $(this).animate({ left: "+=" + moveBy + "px" }, "1000", function () { moving = false; });
                            });

                        }

                        moving = false;

                        if (moveToIndex > siblingBlocks.length - 1) {
                            // there isn't enough to move a full "visible" by
                            // what can we move by?                            
                            visible = (visible - (moveToIndex % (siblingBlocks.length - 1)));
                        }

                    }
                });
            }
        };
    }

    $.fn.widgetrotator = function (options) {
        var settings = {
            'window-class': 'block-holder',
            'item-class': 'block'
        };

        return this.each(function () {
            if (options) {
                $.extend(settings, options);
            }

            var element = $(this);

            // Return early if this element already has a plugin instance
            if (element.data('widgetrotator')) return;

            var widgetrotator = new WidgetRotator(this);
            widgetrotator.init(settings);

            // Store plugin object in this element's data
            element.data('widgetrotator', widgetrotator);

        });
    };

})(jQuery);

