// JavaScript Document

window.onload=function(){
	prepare();
//	tiao();
}

function prepare(){
    var preview=document.getElementById("preview")
	preview.style.position="absolute"
	preview.style.left="0"
	preview.style.top="-600px"
	
	var list=document.getElementById("linklist")
	var lists=list.getElementsByTagName("a")
	for(i=0;i<lists.length;i++){
	
	    lists[0].onmouseover=function(){
		    moveElement(0,0,10)
		}
	    lists[1].onmouseover=function(){
		    moveElement(0,-200,10)
		}
	    lists[2].onmouseover=function(){
		    moveElement(0,-400,10)
		}
	    lists[3].onmouseover=function(){
		    moveElement(0,-600,10)
		}
	}
}

function moveElement(finalx,finaly,interval){
    var elem=document.getElementById("preview")
	var xpos=parseInt(elem.style.left)
	var ypos=parseInt(elem.style.top)
    
	if(elem.movement){
	    clearTimeout(elem.movement)
	}
	
	if(!elem.style.left){
	    elem.style.left="0"
	}
	if(!elem.style.top){
	    elem.style.top="0"
	}
	
	if(xpos==finalx&&ypos==finaly){
	    return true
	}
	

	if(xpos<finalx){
	var dist=Math.ceil((finalx-xpos)/10)
	    xpos+=dist
	}
	if(xpos>finalx){
	var dist=Math.ceil((xpos-finalx)/10)
	    xpos-=dist
	}
	if(ypos>finaly){
	var dist=Math.ceil((ypos-finaly)/10)
	    ypos-=dist
	}
	if(ypos<finaly){
	var dist=Math.ceil((finaly-ypos)/10)
	    ypos+=dist
	}
	elem.style.left=xpos
	elem.style.top=ypos
var repeat="moveElement("+finalx+","+finaly+","+interval+")"
	
elem.movement=setTimeout(repeat,interval)

}
//function tiao(){
//
//    var elem=document.getElementById("preview")
//	preview.style.position="absolute"
//	var xpos=parseInt(elem.style.left)
//	var ypos=parseInt(elem.style.top)
//	
//	ypos-=200;
//	if(ypos==-600){
//		ypos=0
//	}
//    moveElement(0,ypos,6)
//
//	setTimeout(tiao,3000)
//}