var o;
   
var mid;
var div; // 容器对象

var divWidth; // 容器宽
var divHeight; // 容器高
var ul;
var li;
var liSize; // 初始元素个数
var liWidth; // 元素宽
var liHeight; // 元素高
var width;
var height;

var topHeight;

function _marquee(){// 滚动
	
	if (o.direction == 'left') {
     		var l = div.scrollLeft();
     		if (o.step < 0) {
      			div.scrollLeft((l <= 0 ? width : l) + o.step);
     		} 
     		else {
      			div.scrollLeft((l >= width ? 0 : l) + o.step);
     		}
     		if (l % liWidth == 0){
     			 _pause();
     		}
    	} 
    	else {
     		var t = div.scrollTop();
     		if (o.step < 0) {
      			div.scrollTop((t <= 0 ? height : t) + o.step);
     		} 
     		else {
      			div.scrollTop((t >= height ? 0 : t) + o.step);
     		}
     		if (t % liHeight == 0){ 
     			_pause();
     		}
    	}
}

function _pause() {// 停顿
	if (o.pause > 0){
		var tempStep = o.step;
     		o.step = 0;
     		setTimeout(function() {o.step = tempStep;}, o.pause);
    	}
}




$(function() {
	
	div  = $("#marqueeDiv");
	divWidth = div.innerWidth(); 
	divHeight = div.innerHeight();
	ul = $("ul", div);
	li = $("li", ul);
	liSize = li.size(); // 初始元素个数
	liWidth = li.width(); // 元素宽
	liHeight = li.height(); // 元素高
	width = liWidth * liSize;
	height = liHeight * liSize;
	
	o = $.extend({
	speed:   parseInt(div.attr('speed')) || 30, // 滚动速度
    	step:   parseInt(div.attr('step')) || 1, // 滚动步长=li宽度
    	direction: div.attr('direction') || 'up', // 滚动方向
    	pause: parseInt(div.attr('pause')) || 5000 // 停顿时长
   	}, o || {});
		
	if ((o.direction == 'left' && width > divWidth) || (o.direction == 'up' && height > divHeight)){
	    	if (o.direction == 'left') {
     			ul.width(2 * liSize * liWidth);
     			if (o.step < 0){
     				div.scrollLeft(width);
     			}
    		} 
    		else {
     			ul.height(2 * liSize * liHeight);
     			if (o.step < 0){
     				div.scrollTop(height);
     			}
    		}
    		ul.append(li.clone()); // 复制元素
   	 	mid = setInterval(_marquee, o.speed);
    		div.hover(function(){clearInterval(mid);},function(){mid = setInterval(_marquee, o.speed);});
   	}
   		
   	   	
   	$("#next").click(function(){
   		
   		div.scrollTop(div.scrollTop()+liHeight);
   	});
   	
   	$("#back").click(function(){ 
   		if(div.scrollTop()<liHeight){
   			div.scrollTop(height);
   		}
   		div.scrollTop(div.scrollTop()-liHeight);
   	});
   	
   	$("#stopAndrun").click(function(){ 
   		var imgSrc = $(this).find("img").attr("src");
   		
   		if(imgSrc.indexOf("v3_btn_pause.gif")!= -1){
   			imgSrc = imgSrc.replace("v3_btn_pause.gif","v3_btn_run.gif");
   			$(this).find("img").attr("src",imgSrc);
   			clearInterval(mid);
   		}
   		else{
   			if(imgSrc.indexOf("v3_btn_run.gif")!= -1){
   				imgSrc = imgSrc.replace("v3_btn_run.gif","v3_btn_pause.gif");
   				$(this).find("img").attr("src",imgSrc);
   				mid = setInterval(_marquee, o.speed);
   			}
   		}
   	});

   	
   	
	
});