/**
 * 乱写的一个$图片滚动插件
 * @version 0.4
 * @author  Zuolong Wang 2011-4-22 last: 2011-6-15
 * 0.4 add/fix:
 *      +:增加绑定外部元素功能:bindElement、bindElementIndex、bindElementEvent
 * 0.3 add/fix:
 *      +:增加几个事件:onStart、onPreScroll、onScrollComplete、onAllComplete
 * 0.2.1 add/fix:
 *      fix:nextId与preId元素不必在滚动内。
 *      fix:垂直滚动宽度问题
 * 0.2 add/fix:
 *      fix:垂直滚动
 * 0.1 add/fix:
 *      +:显示数量。这个和最后滚动的相配合使用
 *      +:滚动数量。
 *      +:增加了许多可配置性选项。
 * 
 * Usage：
 *              <script type="text/javascript" src="js/jquery.js"></script>
 *              <script type="text/javascript" src="js/jquery.slideimg.js"></script>
                <script type="text/javascript">
                    <!--
                        $(function(){
                            $('#slider').slideImg({
                                auto:true,  //自动滚动
                                pause:3000, //间隔时间
                                scrollElement:'.insteadImg',    //滚动内容。默认img
                                preId:'leftbutton', //左按钮
                                nextId:'rightbutton'    //右按钮
                            });
                        });
                    //-->
                </script>
 */
(function($){
    
    $.fn.extend({
        slideImg:function(option){
            
            var defaults = {
                auto		:	false,
                showNum         :       1,      //显示数量
                scrollNum       :       1,      //滚动数量。默认:1
                width           :       '',
                controlsShow    :	true,	//显示向前向后按钮
                continuous	:	true,	//连续的
                animateCompleted:	true,	//正在进行的动画完成才可进行下个动画
                scrollElement   :       'img',  //滚动元素
                speed		:	800,	//滚动速度
                pause		:	2000,	//间隔时间
                vertical	:	false,	//垂直
                navBarEle       :       '',     //导航所在的元素
                navButtonPre    :       '',     //导航按钮ID前缀
                navButtonEvent  :       'click',     //导航按钮触发事件
                navButtonEle    :       'li',     //导航按钮元素
                navButtonFocusClass :   'on',   //导航按钮选中Class
                preId		:	'preSp',//向后按钮id
                nextId          :	'nextSp',//向前按钮id
                /*绑定外部元素事件*/
                bindElement     :   '',
                bindElementIndex:   'index',    //索引。index:绑定对象索引  or 元素属性,如rel
                bindElementEvent:   'mouseenter',    //触发事件
                onStart        :       function(){},      //开始
                onPreScroll         :       function(){},  //每个滚动之前
                onScrollComplete    :       function(){}, //每个滚动之后
                onAllComplete       :       function(){}             //所有都滚动完成
            };
            
            
            var option = $.extend({},defaults,option);
		
            return this.each(function(){
                var obj = $(this);
                var s = $(option.scrollElement,obj).length;
                var w = $('li',obj).outerWidth(true);
                var h = $('li',obj).outerHeight(true);
                var st = s-option.showNum;
                var timeoutRes = '';
                var stop = false;
                obj.css({
                    'overflow':'hidden'
                });
                var c = 0;
                /**
                 * 导航所在的元素
                 *  默认或为空时，将视为在ojb对象中
                 */
                var navBarObj = option.navBarEle==''?obj:$('#'+option.navBarEle);
			
                var te = function(){
                    alert('a')
                }
                if (!option.vertical){
                    obj.css({
                        'width':w*option.showNum+'px'
                    });
                    $('ul',obj).css('width',s*w);
                    $('li',obj).css({
                        'float':'left'
                    });
                }
                
			
			
                if (!option.controlsShow){
                    $('#'+option.preId+',#'+option.nextId,obj).css('display','none');
                }
			
                $('#'+option.preId).click(function(){
                    animate('pre',true);
                    $(this).blur();
                });
                $('#'+option.nextId).click(function(){
                    animate('next',true);
                    $(this).blur();
                });
                
                /**
                 * 切换导航状态
                 */
                var navChange = function(){
                    var n = c+1;
                    $('.'+option.navButtonFocusClass,navBarObj).removeClass(option.navButtonFocusClass);
                    $(option.navButtonEle+'[id="'+option.navButtonPre+n+'"]',navBarObj).addClass(option.navButtonFocusClass);
                }
                /**
                 * 绑定导航切换事件
                 */
                $(option.navButtonEle+'[id^="'+option.navButtonPre+'"]',navBarObj)
                    .bind(option.navButtonEvent,function(){
                        animate(parseInt($(this).index(),10),true);
                    });
                    
                var call = function(fun){
                    if (typeof(fun) == 'function'){
                        fun();
                    }
                }
                /**
                 * 绑定外部元素事件
                 */
                if(option.bindElement!=''){
                    $(option.bindElement).bind(option.bindElementEvent,function(){
                        if(option.bindElementIndex == 'index'){
                            c = $(this).index()
                            this.c = c;
                            animateScroll();
                            clearTimeout(timeoutRes);
                        }
                    }).bind('mouseleave',function(){
                        timeOut('next',false);
                    });
                }
			
                /**
                 * 核心
                 */
                var animate = function(dir,clicked){
                    if (s<=option.showNum)
                        return;
                    if ( stop ){
                        return ;
                    }
                    /**
                     * 正在进行的动画完成才可进行下个动画
                     */
                    if (option.animateCompleted){
                        stop = true;
                    }
                    switch(dir){
                        case 'next':
                            c = (c==st) ? 0 : ( ((c+option.scrollNum)>st) ? st : c+option.scrollNum ) ;
                            break;
                        case 'pre':
                            c = ((c-option.scrollNum)<0) ? st : c-option.scrollNum ;
                            break;
                        case 'last':
                            c = st;
                            break;
                        case 'first':
                            c = 0;
                            break;
                        default:
                            c = 0;
                            break;
                    }
                    this.c = c;
                    animateScroll(clicked);
                }
                
                var animateScroll = function(clicked){
                    var speed = option.speed;
                    call(option.onPreScroll(c,s));
                    if(!option.vertical){
                        var p = (c*w*-1);
                        $('ul',obj).stop().animate({
                            'marginLeft':p
                        },speed,function(){
                            stop = false;
                            //每次滚动完成时执行
                            call(option.onScrollComplete(c,s));
                            //所有都完成时执行
                            if(c==st) call(option.onAllComplete(c,s));
                        });
                    }else{
                        var p = (c*h*-1);
                        $('ul',obj).stop().animate({
                            'marginTop':p
                        },speed,function(){
                            stop = false;
                            //每次滚动完成时执行
                            call(option.onScrollComplete(c,s));
                            if(c==st) call(option.onAllComplete(c,s));
                        });
                    }
                    
                    navChange();
                    
                    if (clicked !== true){
                        clearTimeout(timeoutRes);
                        if(option.continuous){
                            timeOut('next',false);
                        }
                    }
                }

                //init
                var timeOut = function(dir,clicked){
                    var dir = (dir==undefined?'next':dir);
                    var clicked = (clicked==undefined?false:clicked);
                    timeoutRes = setTimeout(function(){
                        animate(dir,clicked);
                    },option.pause);
                    return timeoutRes;
                }
                        
                obj.mousemove(function(){
                    clearTimeout(timeoutRes);
                }).mouseout(function(){
                    timeOut('next',false);
                });
                navBarObj.mousemove(function(){
                    clearTimeout(timeoutRes);
                }).mouseout(function(){
                    timeOut('next',false);
                });

                if(option.auto){
                    timeOut('next',false);
                }
                call(option.onStart(c,s));
            });
        }
    });
})(jQuery)