var root = document.documentElement;

var listSize  = 10;
var summaries = new Array(listSize);
var contents  = new Array(listSize);

for(i=0;i < listSize;i++)
{
  summaries[i] = root.getElementById("summary_"+i);
  window.status = i;
  contents[i]  = root.getElementById("content_"+i);
}

var offset  = root.createSVGPoint();
var center  = root.createSVGPoint();
center.x = 10;
center.y = 200;
var radius = 100;

var separation  = 15;
var startAngle  = 0;
var stepSize    = 3;
var iterations  = separation/stepSize;
var expanded    = false;
var working     = false;

var centralItem = 0;
var lastItem = listSize-1;

function init()
{
  oneClickDown();
  oneClickDown();
  oneClickDown();
}

function oneClickDown()
{
    if(centralItem == lastItem)
	return;

    var wasExpanded = expanded;
    collapse();

    rotateItems(0,lastItem,false);	

    startAngle -= separation;
    centralItem++;
}

function oneClickUp()
{
    if(centralItem == 0)
	return;

    var wasExpanded = expanded;
    collapse();

    rotateItems(0,lastItem,true);	
     
    startAngle += separation;
    centralItem--;

}

function rotateItems(start,end,clockwise)
{
   circle(separation/stepSize, start, end, clockwise, startAngle, 10);
}


function expand()
{
    if(expanded)
	return;

    if(centralItem > 0)
      circle(separation/stepSize, 0, centralItem-1, false, startAngle-separation, 10);
    if(centralItem < lastItem)
      circle(separation/stepSize, centralItem+1,lastItem, true, startAngle+separation, 10);

    SVGItemVisible(summaries[centralItem],false);
    SVGItemVisible(contents[centralItem],true);

    expanded = true;
}

function collapse()
{
    if(!expanded)
	return;

    if(centralItem > 0)
      circle(separation/stepSize, 0, centralItem-1, true, startAngle-separation, 10);
    if(centralItem < lastItem)
      circle(separation/stepSize, centralItem+1,lastItem, false, startAngle+separation, 6);


    SVGItemVisible(summaries[centralItem],true);
    SVGItemVisible(contents[centralItem],false);

    expanded = false;
}


function getKey(evt) 
{
   var keyCode = evt.getCharCode();
   switch(keyCode)
   {
      case 56:
        oneClickUp();
	break;
      case 50:
        oneClickDown();
	break;
      case 52:
        collapse();
	break;
      case 54:
        expand();
	break;
   }
   var keyString = String.fromCharCode(keyCode).toLowerCase();
   window.status = keyCode;
}

function circle(iterations,startIndex,endIndex,clockwise,angle,timeout) 
{
    if (iterations == 0)
    {
	working = false;
	return;
    }

    working = true;
    angle = angle + (clockwise ? stepSize : -stepSize);

    for(var i=startIndex; i <= endIndex; i++)
    {
	var matrix = summaries[i].getCTM();
	var itemAngle = angle + separation*i;
	offset.x = center.x + radius*Math.cos(itemAngle*Math.PI/180);
	offset.y = center.y + radius*Math.sin(itemAngle*Math.PI/180);
	moveSVGItemTo(summaries[i],offset.x,offset.y);
    }
    window.setTimeout("circle("+ --iterations +","+
	              startIndex+","+
		      endIndex+","+
		      clockwise+","+	
		      angle+","+
		      timeout+")",timeout);
}

function moveSVGItemTo(element,x,y)
{
   element.setAttribute("transform", "translate(" + x + "," + y + ")");
}

function SVGItemVisible(element,visible)
{
   element.setAttribute("style", visible ? "visibility:visible" : "visibility:hidden");
}