/*
     *from: http://www.quirksmode.org/js/events_mouse.html
     */
    
   
    var totalPage=0;
    var offset=10;
    var selectedTarget=null;
    var selectedOldTarget=null;
    var pageArray=new Array();
    var pageContainer=null;
    var nextPageNav=null;
    var prevPageNav=null;
    function initPage(){
        initPaging(500);  
    }
    function initPaging(totalRecord)
    {
       
        var sisa =totalRecord%offset;
        var tmpTotal=(totalRecord-sisa);
        if(tmpTotal<0)
            totalPage=1;
        else
            totalPage =tmpTotal/offset + (sisa>0?1:0);
            
         createHalaman();   
     
    }
    function createHalaman()
    {
        pageContainer=document.getElementById("pageFormating");
        addFiveMorePage();
      
        selectTarget(pageArray[0]);
       
        nextPageNav=createNextNav();
        prevPageNav=createPrevNav();
        
        redrawPage();
     
    }
     function addFiveMorePage()
    {
        var curIndex=getCurrentIndex();
        var distanceFromEndOfArray=pageArray.length-curIndex;
        if(distanceFromEndOfArray<(offset*2))
        {
            var lastLoadedPage=pageArray.length;
            var toPage=lastLoadedPage+parseInt(offset/2);
            if(totalPage<toPage)
                toPage=totalPage;
            for(var i=lastLoadedPage;i<toPage;i++)
            {
                pageArray[i]=createPage(i+1);
            }
          
        }
    }

   function redrawPage()
    {
        removeAllPage();
        var curIndex=getCurrentIndex();
        if((curIndex-1)>=0)
            pageContainer.appendChild(prevPageNav);
        var pageFrom=getPageToDrawFrom(curIndex);
        var pageTo=getPageToDrawTo(curIndex);
        for(var i=pageFrom;i<pageTo;i++){
            pageContainer.appendChild(pageArray[i]);
        }
        
        if((curIndex+1)<totalPage)
            pageContainer.appendChild(nextPageNav);
            
        pageContainer.appendChild(getTotalPageText());
              
    }
  
    function getPageToDrawFrom(currentIndex){
        var result=currentIndex-(offset/2);
        if(result<0) result=0
        return result;
    }
  
    function getPageToDrawTo(currentIndex){
        var result;
        if(currentIndex >=0 && currentIndex <(offset/2)-1){
            result=(offset/2);
        }
        else{
            result=currentIndex+parseInt((offset/2));
        }
        if(result>totalPage)
                result=totalPage;
        return result;
    }
    function getTotalPageText()
    {
        var span=document.createElement("span");
        var totalText=document.createTextNode(" dari " + totalPage + " halaman");
        span.appendChild(totalText);
        return span;
    }

    function getCurrentIndex(){
        var result=0;
        if(selectedTarget==null) 
            result= 0;
        else {
            for(var i=0;i<pageArray.length;i++){
                if(pageArray[i]==selectedTarget){
                    result=i;
                    break;
                }
            }
        }
        return result;
    }
    function removeAllPage(){
        if ( pageContainer.hasChildNodes() )
        {
            while ( pageContainer.childNodes.length >= 1 )
            {
                pageContainer.removeChild( pageContainer.firstChild );       
            } 
        }
    }
    function createPage(number){
        var p=document.createElement('span');
        var pNo=document.createTextNode(number);
        p.appendChild(pNo);
        setDefault(p);
        return p;
    }
     function createNextNav(){
        var p=document.createElement('span');
        var pNext=document.createTextNode("»");
        
        p.appendChild(pNext);
        p.className ="prevnextpaging";
        addEventHandler(p,"click",selectNextPage);
        p.onmouseover=changeToMouseOverColor;
        p.onmouseout=changeToDefaultColor;
        return p;
    }
    function createPrevNav(){
        var p=document.createElement('span');
        var pNo=document.createTextNode("«");
        p.appendChild(pNo);
        p.className ="prevnextpaging";
        addEventHandler(p,"click",selectPrevPage);
        p.onmouseover=changeToMouseOverColor;
        p.onmouseout=changeToDefaultColor;
        return p;
    }
   
    function changeToMouseOverColor(e)
    {
        var target=getMouseInTarget(e);
      
         target.className="mouseOver";
    }
    function changeToDefaultColor(e)
    {
        var target=getMouseOutTarget(e);
       
         target.className="paging";
    }
    function showPage(e)
    {
        var target=getMouseInTarget(e);
     
        selectedOldTarget=selectedTarget;
        selectTarget(target);
        setDefault(selectedOldTarget);
        
        addFiveMorePage();
        redrawPage();
        
        var curIdx=getCurrentIndex();
        loadPage(curIdx+1);
        scroll(0,0);
    }
    function selectNextPage(e){
        var curIndex=getCurrentIndex();
        var nextCurIndex=curIndex+1;
        if(totalPage<nextCurIndex)
            nextCurIndex=totalPage;
        
        var nextTarget=pageArray[nextCurIndex];

        fireEvent(nextTarget,"click");
    }
    function selectPrevPage(e){
        var curIndex=getCurrentIndex();
        var nextCurIndex=curIndex-1;
        if(nextCurIndex<0)
            nextCurIndex=0;
        
        var nextTarget=pageArray[nextCurIndex];

        fireEvent(nextTarget,"click");
    }
    function selectTarget(target){
        target.className ="selectedPage";
        target.onmouseover=null;
        target.onmouseout=null;
        target.onclick=null;
     
        selectedTarget=target;
    }
    function setDefault(target){
        target.className="paging";
        target.onclick=showPage;
        target.onmouseover=changeToMouseOverColor;
        target.onmouseout=changeToDefaultColor;
 
    }
   
    function getMouseInTarget(e) {
	    if (!e) var e = window.event;
	    var relTarg = e.target || e.toElement|| e.srcElement;
	    return relTarg;
    }
    function getMouseOutTarget(e) {
	    if (!e) var e = window.event;
	    var relTarg = e.target || e.fromElement;
	     return relTarg;
    }