var gvi_standard_width    = 800 ;
var gvi_standard_height   = 600 ;
var gvi_mega_small_width  = 600 ;
var gvi_mega_small_height = 450 ;



//-------------------------------------
function gf_center(  argn_tag )  
  { //alert("gf_center");
    var lvn_tag       = "webpage_container_div"                   ;  // argn_tag ;  DON'T accept generic names UNTIL I have rewritten this code to handle centering
	                                                                 //                  of tags within any other tags ... currently it only centers within the client ( browser ) ;
    
	var lvi_standard_width  = gvi_standard_width                          ;
	var lvi_standard_height = gvi_standard_height                         ;
	//var lvi_standard_ratio  = lvi_standard_width / lvi_standard_height  ; 
    
	var lvi_client_width    = gf_pageWidth  ( )                            ;
	var lvi_client_height   = gf_pageHeight ( )                            ; 
	//var lvi_client_ratio  = lvi_client_width / lvi_client_height      ;
	
	//alert ( " center , client.w : " +  lvi_client_width + " , client.h : " + lvi_client_height ) ;
	//var cond1 = ( lvi_client_width  < lvi_standard_width  ) ;
	//var cond2 = ( lvi_client_height < lvi_standard_height ) ;
	//if (  cond1 || cond2 )
	//  { // the client's space is too small for an 800x600 page 
	    //alert( "too small");
		var lva_resized_values = gf_resize ( lvn_tag , lvi_standard_width , lvi_standard_height , lvi_client_width , lvi_client_height )  ;
	    gf_center_horizontal( lvn_tag , lvi_client_width  , lva_resized_values[ 0 ]  ) ;
	    gf_center_vertical  ( lvn_tag , lvi_client_height , lva_resized_values[ 1 ]  ) ;
	//  } 
	//else
	//  {  gf_center_horizontal( lvn_tag , lvi_client_width  , lvi_standard_width  ) ;
	//     gf_center_vertical  ( lvn_tag , lvi_client_height , lvi_standard_height ) ;
	//  };
	
	
  };	
	
//-------------------------------------
function gf_resize (  argn_container , argi_standard_width , argi_standard_height , argi_client_width , argi_client_height ) 	
  {	// apparently the client's screen is too small;
    // need to fit the webpage in their screen;
	
	// need to know the size of their screen
	// need to know how this compares to the standard_ratio
	// need to figure if their screen is too short or to narrow
	//    depending on this, need to resize the container 
	// lastly, center it
	
	var lvn_container       = argn_container                            ;
	
	var lvi_standard_width  = argi_standard_width                       ;
	var lvi_standard_height = argi_standard_height                      ;
	var lvi_standard_ratio  = lvi_standard_width / lvi_standard_height  ; 
    
	var lvi_client_width    = argi_client_width                         ;
	var lvi_client_height   = argi_client_height                        ; 
	var lvi_client_ratio    = lvi_client_width / lvi_client_height      ;
    
	var cond1 = ( lvi_client_width  <  gvi_mega_small_width  ) ; // for mega small screens, don't shrink it down to fit - that's obnoxious;
	var cond2 = ( lvi_client_height <  gvi_mega_small_height ) ;
	var cond3 = ( lvi_client_width  <= lvi_standard_width    ) ; // but for fairly small - yeah, shrink it a little to fit;
	var cond4 = ( lvi_client_height <= lvi_standard_height   ) ;
	if ( cond1 || cond2 )
	  {
	    var lvi_container_width  = lvi_standard_width  ;
		var lvi_container_height = lvi_standard_height ;
	  }
	else if (  cond3 || cond4 )
	  {
         if      ( lvi_client_ratio  <  lvi_standard_ratio ) // it is not very wide, ie too tall, therefore reset height
	       { //alert ( "resize A " ) ;
	         // reset lvi_client_height
	         var lvi_container_width  = lvi_client_width                      ;
		     var lvi_container_height = lvi_client_width / lvi_standard_ratio ;
		
	       }
	     else if ( lvi_client_ratio  == lvi_standard_ratio )
	       { //alert ( "resize B " ) ;
	         // don't mess with it
	         var lvi_container_width  = lvi_client_width  ;
		     var lvi_container_height = lvi_client_height ;
		
	       }
	     else if ( lvi_client_ratio  >  lvi_standard_ratio )
	       { // reset lvi_client_width
	         //alert ( "resize C " ) ;
	         var lvi_container_width  = lvi_client_height * lvi_standard_ratio ;
	         var lvi_container_height = lvi_client_height                      ;
	 
	       };
	  }
	else
	  { // the client's space is plenty big ;
	    var lvi_container_width  = lvi_standard_width  ;
		var lvi_container_height = lvi_standard_height ;
	  };
	
	document.getElementById( lvn_container ).style.width   = lvi_container_width   + 'px'  ;
	document.getElementById( lvn_container ).style.height  = lvi_container_height  + 'px'  ;
	
	return new Array( lvi_container_width , lvi_container_height );
	
  } ;

//-------------------------------------
function gf_center_horizontal( args_tag_id , argi_client_width , argi_object_width )
  { var lvi_object_width = argi_object_width ;
    var lvi_client_width = argi_client_width ;
    if ( lvi_client_width > lvi_object_width )
	  { var lvi_difference                                = lvi_client_width    - lvi_object_width       ;
        var lvi_difference_half                           = lvi_difference      / 2                      ;
        var lvi_percent                                   = lvi_difference_half / lvi_client_width * 100 ;
		document.getElementById( args_tag_id ).style.left = lvi_percent         + '%'                    ;
	  }
	else
	  { document.getElementById( args_tag_id ).style.left = '0%' ;
	  } ; 
	  }
	  
//-------------------------------------
function gf_center_vertical( args_tag_id , argi_client_height , argi_object_height )
  { var lvi_object_height = argi_object_height ;
    var lvi_client_height = argi_client_height ; 
    //alert("clientheight : " + lvi_client_height + " , " + lvi_object_height ) ;
	if ( lvi_client_height > lvi_object_height )
	  { var lvi_difference                                = lvi_client_height   - lvi_object_height       ;
        var lvi_difference_half                           = lvi_difference      / 2                       ;
        var lvi_percent                                   = lvi_difference_half / lvi_client_height * 100 ;
		document.getElementById( args_tag_id ).style.top  = lvi_percent         + '%'                     ;
		//alert("top : " + lvi_percent ) ;
	  }
	else
	  { document.getElementById( args_tag_id ).style.top = '0%' ;
	  } ; 
  }

//-------------------------------------
function gf_pageWidth() 
  { var lvi_A      = window.innerWidth        ;
	    
	var lvo_B      = document.documentElement             ;
    var lvi_B      = document.documentElement.clientWidth ;
		
	var lvo_C      = document.body             ;
    var lvi_C      = document.body.clientWidth ;
		
	return  lvi_A     !=     null ? lvi_A : lvo_B      &&       lvi_B ?   lvi_B : lvo_C    !=      null ? lvi_C : null  ;
    // return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
  } ;
  
//-------------------------------------
function gf_pageHeight() 
  { var lvi_A      = window.innerHeight        ;
	    
	var lvo_B      = document.documentElement              ;
    var lvi_B      = document.documentElement.clientHeight ;
		
	var lvo_C      = document.body              ;
    var lvi_C      = document.body.clientHeight ;
		
    return  lvi_A     !=    null ? lvi_A : lvo_B       &&       lvi_B ? lvi_B : lvo_C     !=     null ? lvi_C : null   ;
//return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
  }	; 

//-------------------------------------
function gf_handle_body_background( )
  { var lvo_top    = document.getElementById( "body_background_top_div"    ) ;
    var lvo_middle = document.getElementById( "body_background_middle_div" ) ;
    var lvo_bottom = document.getElementById( "body_background_bottom_div" ) ;
	
	var lvi_standard_height = gvi_standard_height                 ; // 600
	var lvi_client_height   = gf_pageHeight ( )                          ; // varies on resize
	
	var cond2 = ( lvi_client_height <  gvi_mega_small_height ) ;
	var cond4 = ( lvi_client_height <= lvi_standard_height   ) ;
	if ( cond2 )
	  { lvo_top   .style.top    = 0                                                                           + "px" ;
	    lvo_top   .style.height = 0                                                                           + "px" ;
		
		lvo_middle.style.top    = 0                                                                           + "px" ;
        lvo_middle.style.height = lvi_standard_height                                                         + "px" ;
		
		lvo_bottom.style.top    = lvi_standard_height                                                         + "px" ;
		lvo_bottom.style.height = 0                                                                           + "px" ;
	  }
	else if ( cond4 )
	  { lvo_top   .style.top    = 0                                                                           + "px" ;
	    lvo_top   .style.height = 0                                                                           + "px" ;
	    
		lvo_middle.style.top    = 0                                                                           + "px" ;
        lvo_middle.style.height = lvi_client_height                                                           + "px" ;
        
		lvo_bottom.style.top    = lvi_client_height                                                           + "px" ;
		lvo_bottom.style.height = 0                                                                           + "px" ;
	  }
	else
	  { lvo_top   .style.top    = 0                                                                           + "px" ;
	    lvo_top   .style.height = ( ( lvi_client_height - lvi_standard_height ) / 2 )                         + "px" ;
	    
		lvo_middle.style.top    = ( ( lvi_client_height - lvi_standard_height ) / 2 )                         + "px" ;
        lvo_middle.style.height = lvi_standard_height                                                         + "px" ;
        
		lvo_bottom.style.top    = ( ( ( lvi_client_height - lvi_standard_height ) / 2 ) + lvi_standard_height )  + "px" ;
		lvo_bottom.style.height = ( ( lvi_client_height - lvi_standard_height ) / 2 )                            + "px" ;
	  };
		
  } ;