function GetEl(el){return document.getElementById(el);}

//  Border Javascript
var border = {
	with:GetEl('ULWithBorder'),
	without:GetEl('ULWithoutBorder'),
	target:GetEl('PositionedList')
};

border.with.onclick = function(){ShowBorder(true, border.target);}
border.without.onclick = function(){ShowBorder(false, border.target);}

function ShowBorder(bool, ele){
	if(bool){
		ele.style.border = '1px solid black';
		ele.style.margin = '-1px 0 0 -1px';
	} else {
		ele.style.border = '0';
		ele.style.margin = '0';
	}
}

//  Positioning Javascript
var hpos = {
	tl:GetEl('Position_TL_H'),
	tr:GetEl('Position_TR_H'),
	bl:GetEl('Position_BL_H'),
	br:GetEl('Position_BR_H'),
	mov:GetEl('Moving_H'),
	ele:GetEl('H'),
	timer:'',
	moving:false,
	vert:-50,
	horz:-50
}

hpos.tl.onclick = function(){PosH(hpos, 't', 'l')}
hpos.tr.onclick = function(){PosH(hpos, 't', 'r')}
hpos.bl.onclick = function(){PosH(hpos, 'b', 'l')}
hpos.br.onclick = function(){PosH(hpos, 'b', 'r')}
hpos.mov.onclick = function(){if(!hpos.moving){MovH(hpos);}}

function PosH(lih, vt, hz){
	if (vt == 't'){
		lih.vert = -50;
	} else {
		lih.vert = 150;
	}
	if (hz == 'l'){
		lih.horz = -50;
	} else {
		lih.horz = 150;
	}
	lih.ele.style.top = lih.vert + 'px';
	lih.ele.style.left = lih.horz + 'px';
	if(lih.moving){
		clearTimeout(lih.timer);
	}
	lih.moving = false;
}
function MovH(hpos){
	hpos.ele.style.top = hpos.vert +'px';
	hpos.ele.style.left = hpos.horz + 'px';
	if ((hpos.horz<150) && (hpos.vert==-50)){
		hpos.horz++;
	} else if ((hpos.horz==150) && (hpos.vert<150)){
		hpos.vert++;
	} else if ((hpos.horz>-50) && (hpos.vert==150)){
		hpos.horz--;
	} else if ((hpos.horz==-50) && (hpos.vert>-50)){
		hpos.vert--;
	}
	hpos.timer = setTimeout("MovH(hpos)",10);
	hpos.moving = true;
}