﻿/*
* Scroll it! v1.5 - jQuery menu widget
* Copyright (c) 2010 Andres Pi
*
* contact: andres(at)dreamsiteweb.com
*          http://www.dreamsiteweb.com
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html

HORIZONTAL SCROLLING
$('.slider').scrollIt({
menuHeight: 85,
itemHeight: 85,
menuWidth: 460,
initialItem:2,
itemWidth: 150
});

VERTICAL SCROLLING
$('.slider2').scrollIt({
menuHeight: 265,
itemHeight: 85,
menuWidth: 150,
initialItem:1,
scrollItwrapper: 'scrollIt-wrapper-v',
vertical:true
});

*/

(function ($) {

    jQuery.fn.scrollIt = function (settings) {
        return this.each(function (i) {
            $(this).wrap("<div />")
            $this = $(this).parent();
            settings = jQuery.extend({
                menuHeight: 104, //menu height
                menuHeightAdd: 0,
                itemHeight: 104, //height of each item
                menuWidth: 'auto', //menu width
                menuListMarginLeft: 0,
                menuListMarginTop: 0,
                itemMargin: 5, //margin between items
                menuWidthAdd: 0, //space for the arrows
                itemWidth: 'auto', //widht of each item
                scrollDuration: 1000, // duration of the animation
                scrollItwrapper: 'scrollIt-wrapper', //class for wrapper of the menu. If you have more than one per page you should use different for each slider
                scrollItwrapperMargin: '0 auto', // margin for the wrapper
                animationEffect: 'swing', //effect for the transition(swing or linear)
                initialItem: 0, // if want to go to other item than the first in the beginning. The first is "0"
                vertical: false, // orientation of the menu
                minItems: 1 //Minimum amount of items before being able to scroll through
            }, settings);

            var scrollInterval = settings.scrollDuration + 1;
            $this.addClass('scrollIt-menu').css('height', settings.menuHeight);
            //item setup
            var menuItems = $this.find('li')
            menuItems.css({
                'height': settings.itemHeight,
                'width': settings.itemWidth
            });
            $this.find('li:last-child').addClass('last');

            //settings for the wrapper
            $this.wrap('<div class=' + settings.scrollItwrapper + '></div>');
            $('.' + settings.scrollItwrapper).css({
                //position: 'relative',
                width: settings.menuWidth + settings.menuWidthAdd,
                margin: settings.scrollItwrapperMargin,
                height: settings.menuHeight + settings.menuHeightAdd
            });

            var menuList = $($this.children());

            //arrows
            //$this.parent().prepend('<div class="arrowLeft scrollIt-prev scrollIt-arrow"><img src="images/btn-leftArrow.png" class="thunder-roll-over" /></div><div class="arrowRight scrollIt-next scrollIt-arrow"><img src="images/btn-rightArrow.png" class="thunder-roll-over" /></div>');
            //$this.parent().append('<div class="arrowRight scrollIt-next"><img src="images/btn-rightArrow.png" /></div>');

            //Horizontal functions
            function scrollH() {
                var maginInitialItem = (settings.initialItem * settings.itemWidth) + (settings.initialItem * settings.itemMargin);
                if (Math.abs(maginInitialItem) < Math.abs(settings.menuWidth - (settings.itemWidth * menuItems.length)) && menuItems.length * settings.itemWidth > settings.menuWidth) {
                    settings.menuListMarginLeft -= maginInitialItem;
                    menuList.css('margin-top', settings.menuListMarginTop);
                } else {
                    settings.menuListMarginLeft -= (Math.abs((settings.itemMargin * (menuItems.length - 1)) + (settings.itemWidth * menuItems.length) - settings.menuWidth));
                    menuList.css('margin-top', settings.menuListMarginTop);
                }

                //menuList.css('margin-left', settings.menuListMarginLeft);
                $(".scrollIt-prev").click(
                    function () {
                        if (menuItems.length > settings.minItems) {
                            scrollMenuUp();
                            if ($(this).hasClass('scrollIt-arrow-active')) {
                                $(this).addClass('scrollIt-arrow-hover');
                            }
                        }
                    });

                $(".scrollIt-next").click(
                    function () {
                        if (menuItems.length > settings.minItems) {
                            scrollMenudown();
                            if ($(this).hasClass('scrollIt-arrow-active')) {
                                $(this).addClass('scrollIt-arrow-hover');
                            }
                        }
                    });
                //add styles to the ul
                $('.' + settings.scrollItwrapper).find('ul').css({
                    'width': (settings.itemMargin * menuItems.length) + (settings.itemWidth * menuItems.length),
                    'height': settings.itemHeight
                });

                $this.css('width', settings.menuWidth)

                $this.find('li').css({
                    'float': 'left',
                    marginRight: settings.itemMargin
                });

                function scrollMenuUp() {
                    if (settings.menuListMarginLeft < 0) {
                        settings.menuListMarginLeft += (settings.itemWidth + settings.itemMargin);
                        menuList.animate({
                            marginLeft: settings.menuListMarginLeft
                        }, settings.scrollDuration, settings.animationEffect);
                        iluminaFlecha();
                    }
                }

                function scrollMenudown() {
                    if (Math.abs(settings.menuListMarginLeft) < Math.abs(settings.menuWidth - (settings.itemWidth * menuItems.length)) && menuItems.length * settings.itemWidth > settings.menuWidth) {
                        settings.menuListMarginLeft -= (settings.itemWidth + settings.itemMargin);
                        menuList.animate({
                            marginLeft: settings.menuListMarginLeft
                        }, settings.scrollDuration, settings.animationEffect);
                        iluminaFlecha();
                    }
                }
                //actives the arrows
                function iluminaFlecha() {
                    if (Math.abs(settings.menuListMarginLeft) < Math.abs(settings.menuWidth - (settings.itemWidth * menuItems.length)) && menuItems.length * settings.itemWidth > settings.menuWidth) {
                        $("." + settings.scrollItwrapper + " .scrollIt-next").addClass('scrollIt-arrow-active');
                    } else {
                        $("." + settings.scrollItwrapper + " .scrollIt-next").removeClass('scrollIt-arrow-active');
                    }
                    if (settings.menuListMarginLeft < 0) {
                        $("." + settings.scrollItwrapper + " .scrollIt-prev").addClass('scrollIt-arrow-active');
                    } else {
                        $("." + settings.scrollItwrapper + " .scrollIt-prev").removeClass('scrollIt-arrow-active');
                    }
                }
                iluminaFlecha();
            }

            //Vertical function
            function scrollV() {
                var maginInitialItem = (settings.initialItem * settings.itemHeight) + (settings.initialItem * settings.itemMargin);

                if (Math.abs(maginInitialItem) < Math.abs(settings.menuHeight - (settings.itemHeight * menuItems.length)) && menuItems.length * settings.itemHeight > settings.menuHeight) {
                    settings.menuListMarginTop -= maginInitialItem;
                    menuList.css('margin-top', settings.menuListMarginTop);
                } else {
                    /*settings.menuListMarginTop -= (Math.abs((settings.itemMargin * (menuItems.length-1)) + (settings.itemHeight * menuItems.length) - settings.menuHeight));
                    menuList.css('margin-top', settings.menuListMarginTop);*/
                }

                $(".scrollIt-prev").click(
                    function () {
                        if (menuItems.length > settings.minItems) {
                            scrollMenuUp();
                            if ($(this).hasClass('scrollIt-arrow-active')) {
                                $(this).addClass('scrollIt-arrow-hover');
                            }
                        }
                    });

                $(".scrollIt-next").click(
                    function () {
                        if (menuItems.length > settings.minItems) {
                            scrollMenudown();
                            if ($(this).hasClass('scrollIt-arrow-active')) {
                                $(this).addClass('scrollIt-arrow-hover');
                            }
                        }
                    });

                $("." + settings.scrollItwrapper + " .scrollIt-prev").hover(
                    function () {
                        intervalo = setInterval(scrollMenuUp, scrollInterval);
                        if ($(this).hasClass('scrollIt-arrow-active')) {
                            $(this).addClass('scrollIt-arrow-hover');
                        }
                    },
                    function () {
                        clearInterval(intervalo);
                        $(this).removeClass('scrollIt-arrow-hover');
                    }
                    );

                $("." + settings.scrollItwrapper + " .scrollIt-next").hover(
                    function () {
                        intervalo = setInterval(scrollMenudown, scrollInterval);
                        if ($(this).hasClass('scrollIt-arrow-active')) {
                            $(this).addClass('scrollIt-arrow-hover');
                        }
                    },
                    function () {
                        clearInterval(intervalo);
                        $(this).removeClass('scrollIt-arrow-hover');
                    }
                    );
                //add styles to the ul
                $('.' + settings.scrollItwrapper).addClass('vertical').find('ul').css({
                    'width': settings.menuWidth,
                    'height': (settings.itemMargin * menuItems.length) + (settings.itemHeight * menuItems.length)
                });
                $this.find('li').css('margin-bottom', settings.itemMargin);

                function scrollMenuUp() {
                    if (settings.menuListMarginTop < 0) {
                        settings.menuListMarginTop += (settings.itemHeight + settings.itemMargin);
                        menuList.animate({
                            marginTop: settings.menuListMarginTop
                        }, settings.scrollDuration, settings.animationEffect);
                        iluminaFlecha();
                    } else {
                        clearInterval(intervalo);
                    }
                }
                function scrollMenudown() {
                    if (Math.abs(settings.menuListMarginTop) < Math.abs(settings.menuHeight - (settings.itemHeight * menuItems.length)) && menuItems.length * settings.itemHeight > settings.menuHeight) {
                        settings.menuListMarginTop -= (settings.itemHeight + settings.itemMargin);
                        menuList.animate({
                            marginTop: settings.menuListMarginTop
                        }, settings.scrollDuration, settings.animationEffect);
                        iluminaFlecha();
                    } else {
                        clearInterval(intervalo);
                    }
                }
                //actives the arrows
                function iluminaFlecha() {
                    if (Math.abs(settings.menuListMarginTop) < Math.abs(settings.menuHeight - (settings.itemHeight * menuItems.length)) && menuItems.length * settings.itemHeight > settings.menuHeight) {
                        $("." + settings.scrollItwrapper + " .scrollIt-next").addClass('scrollIt-arrow-active');
                    } else {
                        $("." + settings.scrollItwrapper + " .scrollIt-next").removeClass('scrollIt-arrow-active');
                    }
                    if (settings.menuListMarginTop < 0) {
                        $("." + settings.scrollItwrapper + " .scrollIt-prev").addClass('scrollIt-arrow-active');
                    } else {
                        $("." + settings.scrollItwrapper + " .scrollIt-prev").removeClass('scrollIt-arrow-active');
                    }
                }
                iluminaFlecha();
            }

            if (settings.vertical == false) {
                scrollH()
            } else {
                scrollV();
            }
        });
    };

})(jQuery);
