var res_jpic=false;
var moveTime_jpic=100;

//对象 事件 函数
function bindEvent(element, name, func) {
	if (element.addEventListener) {
		element.addEventListener(name, func, false);
	} else if (element.attachEvent) {
		element.attachEvent("on" + name, func);
	}else{
		element["on" + name]=func;
	}
}

//onload触发函数
function bindRolling(rollingName, toDirection) {
	bindEvent(window, "load", function() {new picRolling(rollingName, toDirection);});
}

//
function picRolling(rollingName, toDirection)
{
	if(document.getElementById(rollingName)&&toDirection)
	{
		var div_=document.getElementById(rollingName);
		div_.innerHTML=div_.innerHTML+div_.innerHTML;
		div_.setAttribute("_to",toDirection);
		div_.style.position="absolute";
		div_.style.left=0+"px";
		div_.style.top=0+"px";
		
		if(toDirection=="toLeft"||toDirection=="toRight")
		{
			var borserInfo=navigator.userAgent.toLowerCase();
			if(/msie/.test(borserInfo))
			{
				div_.style.width=2*div_.childNodes[0].offsetWidth+"px";
			}
			else
			{
				div_.style.width=2*div_.childNodes[1].offsetWidth+"px";
			}
			
		}
		else
		{
			var borserInfo=navigator.userAgent.toLowerCase();
			if(/msie/.test(borserInfo))
			{
				div_.style.height=2*div_.childNodes[0].offsetHeight+"px";
			}
			else
			{
				div_.style.height=2*div_.childNodes[1].offsetHeight+"px";
			}
		}
		
		
		switch(toDirection)
		{
			case "toTop":
			var leftPos=0;
			var topPos=-1;
			break;
			
			case "toRight":
			var leftPos=1;
			var topPos=0;
			break;
			
			case "toBottom":
			var leftPos=0;
			var topPos=1;
			break;
			
			case "toLeft":
			var leftPos=-1;
			var topPos=0;
			break;
		}
		
		res_jpic=setInterval(function(){playIt(div_, leftPos, topPos)},moveTime_jpic);
		
		bindEvent(div_, "mouseover", function()
		{
			if(res_jpic){clearTimeout(res_jpic);}
		});
		
		bindEvent(div_, "mouseout", function()
		{
			if(res_jpic){clearTimeout(res_jpic);}
			var toDirection=div_.getAttribute("_to");
			switch(toDirection)
			{
				case "toTop":
				var leftPos=0;
				var topPos=-1;
				break;
				
				case "toRight":
				var leftPos=1;
				var topPos=0;
				break;
				
				case "toBottom":
				var leftPos=0;
				var topPos=1;
				break;
				
				case "toLeft":
				var leftPos=-1;
				var topPos=0;
				break;
			}
			res_jpic=setInterval(function(){playIt(div_, leftPos, topPos)},moveTime_jpic);
		});
	}
}

function playIt(div_, leftPos, topPos)
{
	var div_left=parseInt(div_.style.left);
	var div_top=parseInt(div_.style.top);
	var div_width=parseInt(div_.offsetWidth);
	var div_height=parseInt(div_.offsetHeight);
	var moveSpeed=1;//位移
	
	var theLeft=div_left+leftPos*moveSpeed;
	var theTop=div_top+topPos*moveSpeed;
	
	if(leftPos==1&&div_left>=0)
	{
		theLeft=-div_width/2;
	}
	
	if(leftPos==-1&&theLeft<=-div_width/2)
	{
		theLeft=0;
	}
	
	if(topPos==1&&div_top>=0)
	{
		theTop=-div_height/2;
	}
	
	if(topPos==-1&&theTop<=-div_height/2)
	{
		theTop=0;
	}
	
	div_.style.left=theLeft+"px";
	div_.style.top=theTop+"px";
}

function clickPlay(divId, toDirection)
{
	if(res_jpic){clearTimeout(res_jpic);}
	var div_=document.getElementById(divId);
	
	switch(toDirection)
	{
		case "toTop":
		var leftPos=0;
		var topPos=-1;
		break;
		
		case "toRight":
		var leftPos=1;
		var topPos=0;
		break;
		
		case "toBottom":
		var leftPos=0;
		var topPos=1;
		break;
		
		case "toLeft":
		var leftPos=-1;
		var topPos=0;
		break;
	}
	
	div_.setAttribute("_to",toDirection);
	res_jpic=setInterval(function(){playIt(div_, leftPos, topPos)},moveTime_jpic);
	return false;
}

bindRolling("rolling01", "toLeft");
bindRolling("rolling02", "toTop");
bindRolling("rolling03", "toTop");
bindRolling("rolling04", "toTop");