(function($){
 jQuery.fn.extend({
    autoScroll:function(obj){

	var widths;
    var heights;
    var delay;
    var speed;
    var num;
    var _this;
    var _ul;
    var myTimmer;
    var index = 0;
    var style;
    var style_on;

    widths = obj.width ? parseInt(obj.width, 10) : _this.find("img:first").width();
    heights = obj.height ? parseInt(obj.height, 10) : _this.find("img:first").height();

    delay = obj.delay ? parseInt(obj.delay, 10) : 4500; //Delay

    style = {float:"left",
        color:"#0788D4",
		textAlign:"center",
		lineHeight:"22px",
		width:"21px",
		height:"21px",
		fontFamily:"Arial",
		fontSize:"12px",
		cursor:"pointer",
		overflow:"hidden",
		margin:"3px 1px",
		border:"1px solid #0788D4",
		background:"#FFFFFF"
    }

    style_on = {color:"#fff",
	    lineHeight:"22px",
		width:"21px",
		height:"21px",
		fontFamily:"Arial",
		fontSize:"12px",
		margin:"3px 1px",
		border:"1px solid #00CCFF",
		background:"#0788D4",
		fontWeight:"bold"
    }

    $(this).wrapInner("<div id='innerbox'></div>");
    $(this).find("*").css({padding:0,border:0,margin:0})
    $(this).css({overflow: "hidden",
	    width: widths,
		height: heights,
		position: "relative"});
    _this = $("#innerbox");
    num = _this.find("img").length;
	_this.find("img").css({float:'left', margin:0, padding:0, position:'relative', 'z-index':'100'});
    _this.find("a img").eq(0).css({display: "block"})
    _this.parent().append("<ul id='num_ul'></ul>")
    _ul = $("#num_ul")
    $("#num_ul").css({position:'absolute',right:'3px',bottom:'1px','z-index':'500'})
    if (num > 1) {
	    for(var i = 1;i <= num; i++){
	        _ul.append("<li>" + i + "</li>");
	    }
    }
    $("#num_ul li").css(style);
	_ul.find("#scrollAd li").eq(0).css(style_on).siblings().css(style);

    $("#num_ul li").mouseover(function(){
        index=$("#num_ul li").index(this);
        showImg(index);
        clearInterval(myTimmer);
    });

    _this.hover(function() {
        if(myTimmer)
            clearInterval(myTimmer)
        },
        function(){
            myTimmer = setInterval(function(){
                showImg(index);
                index++;
                if(index == num) index = 0;
            },delay)
    });
   
    function showImg(i){
        //_this.stop(true, false).animate({top: -heights * i}, speed);
		var tmp = speed;
		if (i == 0 && myTimmer <= 2) {
		    speed = 100;
		}
        _ul.find("li").eq(i).css(style_on).siblings().css(style);
		$("#t" + (i+1)).css("display", "block");
		$("#a" + (i+1)).css("display", "block");
		for (var j = 0; j < num; j++) {
		    if (j == i) {
			    continue;
			} else {
			    $("#t" + (j+1)).css("display", "none");
				$("#a" + (j+1)).css("display", "none");
		    }
		}
		speed = tmp;
		}
	
    myTimmer = setInterval(function(){
            showImg(index);
            index++;
            if(index == num) {
		        index = 0;
            }
        },
		delay
	)}//end of the autoScroll
 })
})(jQuery)
