Subversion Repositories SmartDukaan

/**
 * jQuery Slidy - A Transition Plugin - http://wbotelhos.com/slidy
 * ---------------------------------------------------------------------------------
 *
 * jQuery Slidy is a plugin that generates a customizable transitions automatically.
 *
 * Licensed under The MIT License
 *
 * @version         0.2.0
 * @since           11.16.2010
 * @author          Washington Botelho dos Santos
 * @documentation   wbotelhos.com/slidy
 * @twitter         twitter.com/wbotelhos
 * @license         opensource.org/licenses/mit-license.php MIT
 * @package         jQuery Plugins
 *
 * Usage with default values:
 * ---------------------------------------------------------------------------------
 * $('#banner').slidy();
 *
 * <div id="banner">
 *   <img src="image-1.jpg"/>
 *   <img src="image-2.jpg"/>
 *   <img src="image-3.jpg"/>
 * </div>
 *
 */

;(function($) {

        $.fn.slidy = function(settings) {

                if (this.length == 0) {
                        debug('Selector invalid or missing!');
                        return;
                } else if (this.length > 1) {
                        return this.each(function() {
                                $.fn.slidy.apply($(this), [settings]);
                        });
                }

                var opt                 = $.extend({}, $.fn.slidy.defaults, settings),
                        $this           = $(this),
                        id                      = this.attr('id'),
                        elements        = $this.children(opt.children),
                        quantity        = elements.length,
                        images          = (opt.children == 'img') ? elements : elements.find('img'),
                        timer           = 0,
                        isAnimate       = false;

                if (id === undefined) {
                        id = 'slidy-' + $this.index();
                        $this.attr('id', id); 
                }

                $this
                .data('options', opt)
                .css({
                        'cursor':       opt.cursor,
                        'height':       opt.height + 'px',
                        'overflow':     'hidden',
                        'position':     'relative',
                        'width':        opt.width + 'px'
                });

                elements.each(function(i) {
                        $(this)
                        .css({ 'position': 'absolute', 'z-index': quantity - i })
                        .attr('id', $this.attr('id') + '-' + (i + 1));
                });

                images.attr({ height: opt.height, width: opt.width }).css('border', '0');

                if (opt.children == 'a' && opt.target != '') {
                        elements.attr('target', opt.target);
                }

                elements.hide().first().show();

                if (opt.menu) {
                        $menu = $('<ul/>', { id: id + '-slidy-menu', 'class': 'slidy-menu' }).insertAfter($this);
                }

                var stop = function() {
                        clearTimeout(timer);
                }, overBanner = function() {
                        stop();
                }, overMenu = function(thiz) {
                        stop();

                        var $this               = $(this),
                                index           = $this.index(),
                                $current        = $this.parent().children('.slidy-link-selected'),
                                last            = $current.index();

                        if (index != last) {
                                $current.removeClass('slidy-link-selected');
                                $this.addClass('slidy-link-selected');

                                change(last, index);
                        }
                }, outBanner = function(thiz) {
                        go($(thiz.target).parent('a').index());
                }, outMenu = function() {
                        var $this               = $(this),
                                index           = $this.index(),
                                $current        = $this.parent().children('.slidy-link-selected'),
                                last            = $current.index();

                        go(last);
                }, clickMenu = function(thiz) {
                        stop();

                        var $this               = $(this),
                                index           = $this.index(),
                                $current        = $this.parent().children('.slidy-link-selected'),
                                last            = $current.index();

                        if (index != last) {
                                $current.removeClass('slidy-link-selected');
                                $this.addClass('slidy-link-selected');
                        }

                        go(index);
                };

                if (opt.menu) {
                        var target      = (opt.target != '') ? 'target="' + opt.target + '"' : '',
                                menu    = '',
                                parent,
                                img;

                        images.each(function() {
                                img             = $(this);
                                parent  = img.parent(opt.children);

                                menu += '<li><a href="' + parent.attr(parent.is('a') ? 'href' : 'title') + '" ' + target + '>' + img.attr('title') + '</a></li>';
                        });

                        $menu.html(menu);

                        var     space   = parseInt((opt.width / quantity) + (quantity - 1)),
                                diff    = opt.width - (space * quantity),
                                links   = $menu.children('li');

                        if (opt.action == 'mouseenter') {
                                links.mouseenter(overMenu).mouseleave(outMenu); 
                        } else if (opt.action == 'click') {
                                links.click(clickMenu);
                        } else {
                                debug('action attribute must to be "click" or "mouseenter"!');
                                return;
                        }

                        links.css('width', space)
                                .first().addClass('slidy-link-selected')
                        .end()
                                .last().css({ 'border-right': '0', 'width': (space + diff) - (quantity - 1) });
                        
                        if (opt.animation == 'slide' || opt.animation == 'fade') {
                                links.mousemove(function() {
                                        var $this = $(this);

                                        if (!$this.hasClass('slidy-link-selected')) {
                                                $this.mouseenter();
                                        }
                                });
                        }
                }

                go(0);

                if (opt.pause) {
                        $this.mouseenter(overBanner).mouseleave(outBanner);
                }

                function go(index) {
                        var total       = quantity - 1,
                                last    = null;

                        if (index > total) {
                                index = 0;
                                last = total;
                        } else if (index <= 0) {
                                index = 0;
                                last = total;
                        } else {
                                last = index - 1;
                        }

                        change(last, index);

                        timer = setTimeout(function() {
                                        go(++index);
                                }, opt.time);
                }

                function change(last, index) {
                        if (!isAnimate) {
                                isAnimate = true;

                                if (opt.animation == 'fade') {
                                        elements
                                                .eq(last).fadeOut(opt.speed)
                                        .end()
                                                .eq(index).fadeIn(opt.speed, function() {
                                                        selectMenu(index);
                                                        isAnimate = false;
                                                });
                                } else if (opt.animation == 'slide') {
                                        elements.css('z-index', 0)
                                                .eq(index).css('z-index', quantity).slideDown(opt.speed, function() {
                                                        elements.eq(last).hide();
                                                        selectMenu(index);
                                                        isAnimate = false;
                                                });
                                } else {
                                        elements
                                        .eq(last).hide()
                                        .end()
                                        .eq(index).show(0, function() {
                                                selectMenu(index);
                                                isAnimate = false;
                                        });
                                }
                        }
                };

                function selectMenu(index) {
                        if (opt.menu) {
                                $this
                                        .next('ul.slidy-menu')
                                                .children().removeClass('slidy-link-selected')
                                                        .eq(index).addClass('slidy-link-selected');
                        }
                };

                return $this;
        };

        function debug(message) {
                if (window.console && window.console.log) {
                        window.console.log(message);
                }
        };

        $.fn.slidy.defaults = {
                action:         'mouseenter',
                animation:      'fade',
                children:       'img',
                cursor:         'default',
                height:         200,
                menu:           false,
                pause:          false,
                speed:          600,
                target:         '',
                time:           3600,
                width:          710
        };

})(jQuery);