var imgdir     = "./images/nums/"; //change this to match image directory
   var link_count = 10;
   var linxinrow  = 10;
   var page_prefix = "packaging0";
   /* -------------------------------------------------- */
   // constants
   var UNVISITED = 0, VISITED = 1;
   /* -------------------------------------------------- */
   var cookies_enabled       = true;
   var links                 = new Array();
   var flags                 = new Array();
   var unvisited_src         = imgdir + "%d.gif";
   var visited_src           = imgdir + "%d_visited.gif";
   var hover_src             = imgdir + "%d_hover.gif";
   var _template  = "<a href=\"" + page_prefix + "%d.html\">" +
                    "<img src=\"" + imgdir + "%d.gif\" id=\"%d\" " +
                    "onclick=\"set_visited(this.id)\" " +
                    "onmouseout=\"lolite(this.id)\" " +
                    "onmouseover=\"hilite(this.id)\"></a>";
   /* -------------------------------------------------- */
   var maxidx = link_count - 1, curridx = 0;
   
   function stringToFlags( str )
   {
      var re = /,/g;
      var s  = str.replace( re, '' );
      
      for( var i = 0; i < s.length; i++ )
      {
         flags[ i ] = parseInt( s.substr( i , 1 ) );
      }
      //alert( "stringToFlags " + flags.join('') );
   }
   
   function createFlags()
   {
      for( var i = 0; i < link_count; i++ )
         { flags[ i ] = UNVISITED; }
      return flags;   
   }
   
   function goLeft( id )
   {
      var obj  = document.getElementById( id );
      var html = "";
      var k    = 0;

      if( curridx > 0 )
      {  --curridx;
         for( k = curridx; curridx != maxidx + 1 && k < curridx + linxinrow; k++ )
            { html += links[k] + "\n"; }
         obj.innerHTML = html;
         
         for( k = curridx; curridx != maxidx + 1 && k < curridx + linxinrow; k++ )
         { 
            if( flags.length > 0 && flags[ k ] == VISITED )
            {  
               var loop_obj = document.getElementById( ( k + 1 ).toString( 10 ) );
               if( loop_obj )
                 { loop_obj.src = templatize( visited_src, k + 1 ); }   
            }
         }
      }
   }

   function goRight( id )
   {
      var obj  = document.getElementById( id );
      var html = "";
      var k    = 0;
      //alert( curridx + linxinrow + " " + link_count );
      if( curridx + linxinrow < link_count )
      {  ++curridx;
         for( k = curridx; curridx != maxidx + 1 && k < curridx + linxinrow; k++ )
            { html += links[k] + "\n"; }
         obj.innerHTML = html;
        
        for( k = curridx; curridx != maxidx + 1 && k < curridx + linxinrow; k++ )
        { 
            if( flags.length > 0 && flags[ k ] == VISITED )
            {  
               var loop_obj = document.getElementById( ( k + 1 ).toString( 10 ) );
               if( loop_obj )
                 { loop_obj.src = templatize( visited_src, k + 1 ); }   
            }
        }         
      }
   }

   function templatize( template, replacement )
   {
      var re = /%d/g;
      return ( template.replace( re, replacement ) );
   }

   function hilite( id )
   {
      var obj = document.getElementById( id );
      obj.src = templatize( hover_src, parseInt( id ) );
   }

   function lolite( id )
   {
      var obj = document.getElementById( id );
      var idx = parseInt( id );  
      if( extract_page_idx() == parseInt( id ))
         { return; }    
      obj.src = templatize( ( flags[ idx - 1 ] == VISITED ) ? visited_src :
                                                              unvisited_src,
                                                              idx );                                                       
   }

   function set_visited( id )
   {
      var i   = parseInt( id ) - 1;     
      //var html = templatize( visited_src, parseInt( id ) );
      flags[ i ] = VISITED; 
   }

   function extract_page_idx()
   {
      var idx = document.location.href.lastIndexOf('/' );
      var url = "", pg_idx = -1; 
      
      if( idx > -1 )
      {
         url = document.location.href.substr( idx + 1 );
         url = url.substr( url.indexOf( page_prefix ) + page_prefix.length );
         pg_idx = url.substring( 0, url.lastIndexOf( ".htm" ) );
         //alert( url + " " + pg_idx );
         return parseInt( pg_idx );
      }      
   }
   
   function init_links()
   {      
      var tpl = unvisited_src;
      var obj; 
      var idx = extract_page_idx();
      
      for( var i = 1; i < link_count + 1; i++)
      {                
         links[ i - 1 ] = templatize( _template, parseInt( i ) );
         //alert( flags[ i - 1 ] + " " + i );
         tpl = flags.length > 0 && flags[ i - 1 ] == VISITED ? visited_src :
                                                               unvisited_src;

         obj = document.getElementById( i.toString( 10 ) );
         if( obj )
           { obj.src = templatize( tpl, i ); }   
      } //alert( links );
      
      if( idx > -1 )
      {
         hilite( idx );
      }
   }