Source

<script type="text/javascript">
    //<![CDATA[
    $(function(){
        scrollSet = new ScrollSet(<?php echo count($newsList)-1 ?>);
        scrollSet.available(<?php echo bool2str($sf_context->get('scrollSet')) ?>);
        scrollSet.regComponents([new ScrollNav, new ScrollBar, new ScrollItems]);
    });
    //]]>
</script>

<div class="fl">
    <h3 class="pageDesc"><?php echo get_response_meta('description') ?></h3>
    <?php
        $rendered = '';
        foreach($newsList as $news) {
            $rendered .= get_partial('item', compact('news'));
        }
        include_partial('global/scrollItems', compact('rendered'));
    ?>
</div>

<?php include_partial('global/scrollBar') ?>

<div class="clear"></div>

<?php if ($pager->haveToPaginate()): ?>
    <?php include_partial('global/pager', compact('pager')) ?>
<?php endif; ?>
                    

/*
 * This file is part of the pwp package.
 * (c) 2009-2010 Victor Rad' <victor.v.rad[at]gmail.com>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/**
 * Registers and operates a set of scroll components
 */
ScrollSet = function (itemsCount)
{
    var components  = new Array();
    var isAvailable = true;
    this.itemsCount = itemsCount;
    this.itemCurr   = 0;

    /**
   * Register and Initialize components
   */
    this.regComponents = function (comps)
    {
        components = components.concat(comps);
        if (true == isAvailable){
            for (var i in components){
                if (components[i]){
                    components[i].init();
                }
            }
        }
    }

    /**
   * Call eventScroll method for all registered components
   */
    this.eventScroll = function (itemCurr, called)
    {
        this.itemCurr = itemCurr;
        for (var i in components){
            if (components[i] !== called){
                components[i].eventScroll(itemCurr);
            }
        }
    }

    /**
   * Check and set the availability of ScrollSet
   */
    this.available = function (isAvailable)
    {
        var hrefWithoutAnchor = String(window.location).replace(/\#.*$/, "");
        var timelife = 365;

        // listen for click event on checkBox form
        $('#scrollSetCheckBox').click(function()
        {
            if($('#scrollSetCheckBox').is(':checked')){
                $.cookie('scrollSet', 'true', {
                    expires: timelife,
                    path: '/'
                });
                window.location = hrefWithoutAnchor;
            }else{
                $.cookie('scrollSet', 'false', {
                    expires: timelife,
                    path: '/'
                });
                window.location = hrefWithoutAnchor;
            }
        })

        // if the window size is less for minimum and cookie scrollSet not defined
        if (780 > $(window).height() && null == $.cookie('scrollSet')){
            $.cookie('scrollSet', 'false', {
                expires: timelife,
                path: '/'
            });
            window.location = hrefWithoutAnchor;
        }

        this.isAvailable = isAvailable;
        return this;
    }

}

/**
 * Scroll bar
 */
ScrollBar = function ()
{
    var thisInst = this;
    /**
   * Initialize scroll box
   */
    this.init = function()
    {
        $('#scroller').slider({
            orientation: 'vertical',
            value:  scrollSet.itemsCount,
            min: 0,
            max:  scrollSet.itemsCount,
            step: 1,
            animate: true,
            slide: function(event, ui)
            {
                var itemCurr = Math.abs(ui.value - scrollSet.itemsCount);
                scrollSet.eventScroll(itemCurr, thisInst);
            }
        });
        // initialize scroll arrows
        $('#scrollBarContent .buttonDown').click(function(){
            if (scrollSet.itemCurr < scrollSet.itemsCount){
                scrollSet.eventScroll(scrollSet.itemCurr + 1, thisInst);
            }
        })
        $('#scrollBarContent .buttonUp').click(function(){
            if (scrollSet.itemCurr > 0){
                scrollSet.eventScroll(scrollSet.itemCurr - 1, thisInst);
            }
        })
        //hover states on scroll arrows
        $('.ui-icons').hover(
            function() {
                if (!$(this).hasClass('fix-hover')){
                    $(this).addClass('ui-state-hover');
                }
            },
            function() {
                if (!$(this).hasClass('fix-hover')){
                    $(this).removeClass('ui-state-hover');
                }
            }
            );
        $('#scroller').find('.ui-slider-handle').append('<span class="ui-icon ui-icon-grip-dotted-horizontal dotted-horizontal"></span>');
    }

    /**
   * Do scroll (called from ScrollSet)
   */
    this.eventScroll = function(itemCurr)
    {
        var itemSlider = Math.abs(itemCurr - scrollSet.itemsCount);
        $('#scroller').slider('value', itemSlider);
    }
}

/**
 * Items navigator
 */
ScrollNav = function ()
{
    var thisInst = this;
    /**
   * Initialize scroll box
   */
    this.init = function()
    {
        $('.itemsNav li').click(function(){
            var itemCurr = $('.itemsNav li').index(this);
            scrollSet.eventScroll(itemCurr, thisInst);
        })
    }

    /**
   * Do scroll (called from ScrollSet)
   */
    this.eventScroll = function(itemCurr)
    {
        $('.itemsNav .curr').removeClass('curr ui-corner-all');
        $('.itemsNav li:eq('+itemCurr+')').addClass('curr ui-corner-all');
    }
}

/**
 * Items of scrolling
 */
ScrollItems = function ()
{
    var thisInst = this;
    /**
   * Initialize scroll items
   */
    this.init = function()
    {
        scrollableApi = $('#scrollable').scrollable(
        {
            vertical: true,
            size: 1,
            clickable: false,
            speed: 200,
            onSeek: function(){
                scrollSet.eventScroll(this.getIndex(), thisInst);
            }
        }).mousewheel({
            api: true
        });
    }

    /**
   * Do scroll (called from ScrollSet)
   */
    this.eventScroll = function(itemCurr)
    {
        scrollableApi.seekTo(itemCurr);
    }
}