function writeNavi()
{
  var topNavi = document.getElementById("topNavi");
  var alphaArr = genAvailAlphabets();
  var htmlStr="";
  var alphabets = new Array("A", "B", "C", "D", "E", "F",
				            "G", "H", "I", "J", "K", "L",
				            "M", "N", "O", "P", "Q", "R",
				            "S", "T", "U", "V", "W", "X",
				            "Y", "Z");
  var comboStr="";
  var comboArr;

  comboArr = new Array(10,20,30,50,100);

  comboStr+="<select name='maxRowsMenu' class='text' style='width:40' onChange=\"currPage=0;currMaxRowsPerPage=value;pageAction();writeNavi(); \">";

  for(var f=0;f<comboArr.length;f++)
  {
    if(comboArr[f]==currMaxRowsPerPage)
	{
	  comboStr+="<option value='"+comboArr[f]+"' selected>"+comboArr[f];
	}
	else
	{
	  comboStr+="<option value='"+comboArr[f]+"'>"+comboArr[f];
	}
  }
  comboStr+="</select>";

  htmlStr+="<table width='90%' align='center' cellspacing='1' cellpadding='1' class='naviText' border='0'>"
            +"<tr>";

  if("all"==currAlpha.toLowerCase())
  {
	htmlStr+="<td align='center' width='16'><b>[all]</b></td>";
  }
  else
  {
	htmlStr+="<td align='center' width='16'><a href='#' onClick=\"currPage=0;filterView('all','title',true);writeNavi()\"><b>all</b></a></td>";
  }

  for(var i=0;i<alphabets.length;i++)
  {
    var isLink = false;
	for(var k=0;k<alphaArr.length;k++)
	{
	  if(alphabets[i] == alphaArr[k])
	  {
	    isLink = true;
	  }
	}
	if(isLink)
	{
	  if(alphabets[i].toLowerCase()==currAlpha.toLowerCase())
	  {
	    htmlStr+="<td align='center'><b>["+alphabets[i]+"]</b></td>";
	  }
	  else
	  {
	    htmlStr+="<td align='center'><a href='#' onClick=\"currPage=0;filterView('"+alphabets[i].toLowerCase()+"','title',true);writeNavi()\"><b>"+alphabets[i]+"</b></a></td>";
	  }
	}
	else
	{
	  htmlStr+="<td align='center'>"+alphabets[i]+"</td>";
	}
  }
  
  htmlStr+="<td align='right' width='60'><b>Show: </b></td><td align='left' width='30'>"+comboStr+"</td>";

  htmlStr+="</tr>"
          +"<tr>"
		    +"<td colspan='29'>"
			  +"<table class='naviText' align='center' cellpadding='1' cellspacing='1' border='0'>"
			    +"<tr>"
				  +"<td>- <b><a href='#' onClick=\"pageAction('first');writeNavi()\">first</a></b></td>"
				  +"<td>- <b><a href='#' onClick=\"pageAction('prev');writeNavi()\">prev</a></b></td>"			
				  +"<td>- This is Page "+(currPage+1)+" of "+currTotalPages+"</td>"
				  +"<td>- <b><a href='#' onClick=\"pageAction('next');writeNavi()\">next</a></b></td>"
				  +"<td>- <b><a href='#' onClick=\"pageAction('last');writeNavi()\">last</a></b> -</td>"
				+"</tr>"
			  +"</table>"
			+"<td>"
		  +"</tr>";

  htmlStr+="</table>";

  topNavi.innerHTML = htmlStr;
}

function genAvailAlphabets()
{
  var alphaStr = "";
  var tmpAlpha="";
  var tmpArr = new Array();
  var counter = 0;

  for(var k=0;k<songs.length;k++)
  { 
    tmpArr[k] = songs[k].title;
  }

  tmpArr.sort();
  
  for(var i=0;i<tmpArr.length;i++)
  {
    if(alphaStr.length==0)
	{
	  alphaStr+=tmpArr[i].substring(0,1).toUpperCase()+"*";
	  tmpAlpha = tmpArr[i].substring(0,1).toLowerCase();
	  counter++;
	}
	else if(tmpArr[i].substring(0,1).toLowerCase()!=tmpAlpha)
	{
	  alphaStr+=tmpArr[i].substring(0,1).toUpperCase()+"*";
	  tmpAlpha = tmpArr[i].substring(0,1).toLowerCase();
	  counter++;
	}
  }
  return alphaStr.split("*");
}