var boxArea = document.getElementById('boxArea');
boxArea.innerHTML += 
		"<div style='float:right;text-align:center;'>"+
        "<table cellspacing=3 cellpadding=0 id='paging-table' align=center><tr>"+
            "<td><a href='javascript:void(0)' onclick='javascricpt:_move(-1)' >&#171;</a></td>"+
            "<td><a href='javascript:void(0)' onclick='javascricpt:_move(+1)' >&#187;</a></td>"+
        "</tr></table>"+
		"</div>";


var ptab = document.getElementById('paging-table');
var psec = document.getElementById('paged-section');
var boxes = psec.getElementsByTagName('div');
var totalDivs = boxes.length;
var currentIx = 0;
var previousFrame = 0;
var timeOut;
var windowSize = 3;

for(var i=0;i<totalDivs;i++)
{
	var y = ptab.rows[0].insertCell(ptab.rows[0].cells.length-1);
	y.innerHTML = '<a href="javascript:showBox('+i+')">' + (i+1) + '</a>';	
	y.className = 'page-num-cell';
}

function showBox(num)
{
	if(num >= totalDivs)
		num = 0;
	if(num < 0)
		num = totalDivs-1;

	boxes[currentIx].style.borderColor = '#d2d2d2';
	boxes[num].style.borderColor = '#b1b1b1';
				
	var currentFrame = Math.floor(num/windowSize);

	for(var i=0; i<totalDivs; i++)
	{
		boxes[i].style.display = i >=(currentFrame*windowSize) && i < ((currentFrame+1)*windowSize)? 'block':'none';
	}

	if(Math.floor(currentIx/windowSize) != currentFrame )	            
		previousFrame = currentFrame;
	
	
	currentIx = num;
	
	clearTimeout(timeOut);
	timeOut = setTimeout("_move(1);",2500);
}

function _move(offset)
{            
	showBox(currentIx + offset);
	
}

showBox(0);