/**
 * Multiple Elements Cycle Plugin.
 *
 * Provides a simple preview scrolling panel. Shows the given range of li items from the middle and
 * allows scrolling left and right within the list. Does not handle automatic scrolling / time based
 * or wrapping items around. 
 *
 * Note $.multipleElementsCycle needs to be called on a div containing a ul rather then the actual ul

 * Copyright (c) 2009 Will Rossiter (willr.co.nz)
 * Licensed under the GPL license:
 *
 * http://www.gnu.org/licenses/gpl.html
 *
 * @author Will Rossiter <will@silverstripe.com>
 * @version 0.1
 */
(function($) {
    $.fn.multipleElementsCycle = function(options){
        var defaults = {
            elementContainer: '#cycler',    // Selector for element (ul) container
            prevElement: '#cyclerLeft',    // Selector to scroll previous
            nextElement: '#cyclerRight', // Selector to scroll next
            speed: 500,                            // Speed to scroll elements
            containerWidth: false,                // Override default width 
            showCount: 4                        // Items to show from the list
        };
        
        var options = $.extend(defaults, options);  
                
        this.each(function() {
            // GET ELEMENTS
            var totalElements = $(this).find("li");
            var maxIndex = totalElements.length - 1;
            
            // WORK OUT START INDEX
            // assumes that total elements is greater then the slice
            var startIndex = Math.floor((maxIndex - options.showCount) / 2);
            var elementWidth = $(this).find("li").outerWidth(true);
            var margin = ((startIndex + 1) * elementWidth) * -1;
            var lowerIndex = startIndex + 1;
            var upperIndex = startIndex + options.showCount;
            var parent = $(this);
            
            // SORT OUT STYLES
            $(this).find(options.elementContainer).css({
                'width': (options.containerWidth) ? options.containerWidth : elementWidth * options.showCount,
                'overflow': 'hidden'
            });
            $(this).find("ul").css({
                'width': (maxIndex + 1) * elementWidth,
                'padding': '0'
            });
            
            // INIT
            cycle("load");
            
            // CLICK
            $(options.nextElement).click(function(e){ cycle("next"); return false; e.preventDefault(); });
            $(options.prevElement).click(function(e){ cycle("prev"); return false; e.preventDefault(); });    
            
            // CYCLE
            function cycle(dir){            
                switch(dir){
                    case "next":
                        if(upperIndex <= maxIndex) {
                            $(options.prevElement).show();
                            margin = margin - elementWidth;
                            upperIndex = upperIndex + 1;
                            lowerIndex = lowerIndex + 1;
                            $("ul",parent).animate({
                                    marginLeft: margin
                                },options.speed);
                                
                            if((upperIndex + 1) > maxIndex) {
                                $(options.nextElement).hide();
                            }
                        }                    
                        break;    
                    case "prev":
                        if(lowerIndex >= 0) {
                            $(options.nextElement).show();    
                            upperIndex = upperIndex - 1;
                            lowerIndex = lowerIndex - 1;
                            margin = margin + elementWidth;
                            $("ul",parent).animate({
                                marginLeft: margin
                            }, options.speed);
                            if((lowerIndex-1) < 0) {
                                $(options.prevElement).hide();
                            }
                        }
                        break;
                        
                    case "load": {
                        $("ul",parent).animate({
                            marginLeft: margin
                        }, options.speed);
                        break;
                    }
                    default:
                        break; 
                };                                                    
            };
        }); 
    };
})(jQuery);