var scroll = {
    // calculats width of all icons
    calculateWidth: function(outerWidth) {
        // default to outer width (includes margins)
        if(typeof(outerWidth) == 'undefined') {
            var outerWidth = true;
        }
        // EDIT THIS SECTION, HAVE THIS LOOK FOR OFFSET OF LAST CHILD OF DIV *figures out relative size*
        var $lastLi = $('#content > ul > li:last-child');
        if($lastLi.exists()) {
            var ulWidth = $lastLi[0].offsetLeft + $lastLi.outerWidth();
            if(outerWidth) {
                var ulPadding = fav4.scroller.padding * 2;
                return ulWidth + ulPadding;
            }
            return ulWidth;
        }
    },
    positionMenu: function() {
        var $menu = $('#content');
        var width = $(window).width();
        var ulWidth = fav4.scroll.calculateWidth();
        var iconWidth = fav4.iconWidth;
        // position menu in center if smaller than window width
        if(ulWidth < width) {
            $menu
                .removeClass('dynamic')
                .addClass('static')
                .css({
                    width: ulWidth+'px',
                    left: '50%',
                    marginLeft: '-'+(ulWidth / 2)+'px'
                })
            ;
        }
        // remove styles if not
        else {
            $menu
                .removeClass('static')
                .addClass('dynamic')
                .removeAttr('style');
        }
        // position icons in center
        $menu.scrollLeft((ulWidth-width) / 2);
    },
    getRatios: function() {
        var $menu = $('#content');
        //Get menu width
        var menuWidth = $menu.width();
        var ulWidth = fav4.scroll.calculateWidth();
        var menuOffset = $menu.offset().left;
        var ratio = ((ulWidth - menuWidth) / menuWidth);
        var menuRatio = menuOffset * ratio;
        return { ratio: ratio, menuRatio: menuRatio };
    },
    bindEvents: function() {
        var $menu = $('#content');
        var ratios = fav4.scroll.getRatios();
        // handles position of menu on mousemove dom event
        $(window)
            .bind('resize.scroll', function() {
                $('#content').css('overflow', 'hidden');
                var ratios = fav4.scroll.getRatios();
                fav4.scroll.positionMenu();
                $menu
                    .unbind('mousemove.scroll')
                    .bind('mousemove.scroll', function(e){
                        var x = e.pageX;
                        if(!fav4.noScrollMode && x!= 0) {
                            content.scrollLeft = (x * ratios.ratio) - ratios.menuRatio;
                        }
                    })
                ;
                $('#content').css('overflow', '');
            })
        ;
        $menu.bind('mousemove.scroll', function(e){
            var x = e.pageX;
            if(!fav4.noScrollMode && x!= 0) {
                var content = document.getElementById('content');
                content.scrollLeft = (x * ratios.ratio) - ratios.menuRatio;
            }
        });
    },
    unbindEvents: function() {
        var $menu = $('#content');
        $menu.unbind('mousemove.scroll');
        $(window).unbind('resize.scroll');
    }
}