<!-- Hide JavaScript from really old browsers


/*******************************************************************************
**
**    1. Common JavaScript
**
*******************************************************************************/


/*******************************************************************************
**
**    Function - Resize window if it is too small to fit the site
**    ===========================================================
**
**    1) checks if the window is smaller than a 590 x 590 pixels square
**
**    2) enlarges the window on load so that the site fits into it, either:
**
**       a) only vertically
**       b) only horizontally
**       c) both vertically and horizontally
**
**       so that the window redimensioning is as minimal as possible
**       and feels as user-friendly as possible
**
**
*******************************************************************************/


function javascript_resize_window_if_too_small_to_fit_site() {


  // 1) Define minimum window inner dimension needed to fit the site

  var var_int_WindowInnerDimensionMinimum = 590;


  // 2) Get current window inner dimensions

  var var_int_WindowInnerDimensionX, var_int_WindowInnerDimensionY;


    // 2.1) All browsers except Internet Explorer on Windows
    //      (IE does not support self.innerHeight)

    if (self.innerHeight) {

      var_int_WindowInnerDimensionX = self.innerWidth;
      var_int_WindowInnerDimensionY = self.innerHeight;

    }


    // 2.2) Internet Explorer 6 and higher on Windows in Strict mode
    //      (Older IE do not support document.documentElement)

    else if (document.documentElement && document.documentElement.clientHeight) {

      var_int_WindowInnerDimensionX = document.documentElement.clientWidth;
      var_int_WindowInnerDimensionY = document.documentElement.clientHeight;

    }


    // 2.3) Other Internet Explorers on Windows

    else if (document.body) {

      var_int_WindowInnerDimensionX = document.body.clientWidth;
      var_int_WindowInnerDimensionY = document.body.clientHeight;

    }


  // 3) Check to see if window space is less than 590px horizontally

  if (var_int_WindowInnerDimensionX < var_int_WindowInnerDimensionMinimum) {


    // Calculate the width to add to the current window size

    var var_int_ResizeByWidth = var_int_WindowInnerDimensionMinimum - var_int_WindowInnerDimensionX;


    // Move the window to the upper left corner of the screen,
    // so that we have sufficient space to add to the window

    self.moveTo(0,0);


    // Add to the current window dimensions so that the site fits horizontally
    // I avoid resizeTo because it gives inconsistent cross-browser results

    self.resizeBy(var_int_ResizeByWidth,0);

  }


  // 4) Check to see if window space is less than 590px vertically

  if (var_int_WindowInnerDimensionY < var_int_WindowInnerDimensionMinimum) {


    // Calculate the height to add to the current window size

    var var_int_ResizeByHeight = var_int_WindowInnerDimensionMinimum - var_int_WindowInnerDimensionY;


    // Move the window to the upper left corner of the screen,
    // so that we have sufficient space to add to the window

    self.moveTo(0,0);


    // Add to the current window dimensions so that the site fits vertically
    // I avoid resizeTo because it gives inconsistent cross-browser results

    self.resizeBy(0,var_int_ResizeByHeight);

  }

}

// Function end


/*******************************************************************************
**
**    Function - Place focus on main text (on content pages)
**    ======================================================
**
**    Places the focus on the ContainerA2 DIV so that the user can use
**    the keyboard or mouse wheel to scroll the layer without previously
**    clicking inside.
**
**
*******************************************************************************/


function javascript_place_focus_on_main_text() {


  // Check to see if browser supports document.getElementById

  if (document.getElementById) {


    // Place the focus on ContainerA2 DIV

    document.getElementById("ContainerA2").focus();


  }

}

// Function end


/*******************************************************************************
**
**    2. JavaScript for Photography portfolio
**
**
**       Several variables and functions simulate gradual fading-out ("transparent")
**       and fading-in ("opaque") of the <h1> element that contains the portfolio
**       parent section, portfolio name and the previous / next buttons, to avoid
**       visual distraction from the photograph.
**
**       1) On page load, the <h1> fades out to grey.
**       2) As soon as the user hovers the mouse over the <h1>, the <h1> fades
**          back into full color.
**       3) When fully "opaque", the a:hover is simulated on links.
**       4) As soon as the user mouses off the the <h1>, the <h1> fades out to
**          grey again.
**
**       I have tried doing the effect using alpha transparency, but it caused
**       weird bugs, especially in Safari.
**
**       So I simulate the same effect using a frame by frame approach of adding
**       or subtracting to each RGB channel in a loop, until the desired color
**       (grey for fade-out or CSS-link color for fade-in) is achieved.
**
**
*******************************************************************************/


/*******************************************************************************
**
**    Variables
**    =========
**
**    Introduce and initialize global variables.
**
**
*******************************************************************************/


// Enable (true) or disable (false) the fade-out / fade-in
// so I can adjust the links' colors.

var var_bool_EnableFade = true;


// The amount to add (fade-out) or substract (fade-in) to each RGB channel

var var_int_NumberToAddToEachRGBchannel = 10;


// Initialize the timer for the javascript_fade_process function

var var_str_FadeProcessTimer = null;


// Is the mouse over the link?

var var_bool_LinkMousedOver = false;


// Is the color faded-out and we should disable a:hover simulation?

var var_bool_aHoverSimulationDisabled = false;


// Counters (see below for more info)

var var_int_FadeProcessLoopCounter = 0;
var var_int_FadedOutLoopCounter = 0;
var var_int_FadedInLoopCounter = 0;


/*******************************************************************************
**
**    Function - Fade process
**    =======================
**
**    Loops through numerous "frames" to create a fade-in / fade-out effect.
**
**
*******************************************************************************/


function javascript_fade_process(var_int_NumberToAddToEachRGBchannel) {


  // If the fade-in / fade-out is enabled.
  // I can temporarily disable it (variable above) when adding new pictures.

  if (var_bool_EnableFade == true) {


    // Concatenate the color of the <h1> and rolled-off links.
    // I use RGB(255,255,255) CSS notation to avoid unnecessary
    // RGB to HEX conversions.

    var var_int_CSSaLinkBackgroundColorRGB = "RGB(" + R + "," + G + "," + B + ")";


    // If we are fading out
    // (var_int_NumberToAddToEachRGBchannel is a positive number),
    // add 1 to the fade process loop counter

    if (var_int_NumberToAddToEachRGBchannel > 0) {

      var_int_FadeProcessLoopCounter++;

    }


    // JavaScript cannot change CSS pseudo selectors, in this case, the a:hover.
    // As I loop through the background color of links, I redefine the <a> element
    // and kill the a:hover coded in the CSS file. Therefore, I have to simulate
    // the a:hover with JavaScript roll-over and roll-out events on the links.
    //
    // The events are separated: <h1> for the global fading, <a> for a:hover.
    //    
    // However, when the mouse rolls off the <a> to the <h1>, in microsecond,
    // the loop manages to fade out the color by just a tiny bit. So I have
    // to count the loops of the fade-out cycle and skip the first "frame" to avoid
    // this small color change. The problem resembles the disjointed menus problem
    // that I have been solving in the past with a counter.
    //
    // Fade process length varies depending on the difference between the start
    // and end color. Approx 25 frames/loops on average.
    //
    //
    // If the current frame equals 0 we are fading-in or already faded-in (opaque).
    //
    // If the current frame equals 1 we started to fade-out, SKIP THIS ONE.
    //
    // If the current frame is greater than 1 we are fading-out

    if (var_int_FadeProcessLoopCounter != 1) {


      // Add (in case of fade-out = higher RGB values = lighter)
      //
      // or
      //
      // substract (in case of fade-in = lower RGB values = darker)
      // (with a minus sign passed through function variable)
      //
      // always the same amount to each RGB channel for even gradation.

      R += var_int_NumberToAddToEachRGBchannel;
      G += var_int_NumberToAddToEachRGBchannel;
      B += var_int_NumberToAddToEachRGBchannel;


      // Limit the addition of the same values on every loop (frame)
      // till each RGB channel becomes the same value = light grey

      if (R >= var_int_FadedOutRGBchannelValue) {
        R = var_int_FadedOutRGBchannelValue;
      }

      if (G >= var_int_FadedOutRGBchannelValue) {
        G = var_int_FadedOutRGBchannelValue;
      }

      if (B >= var_int_FadedOutRGBchannelValue) {
        B = var_int_FadedOutRGBchannelValue;
      }


      // Limit the subtraction of the same values on every loop (frame)
      // till each RGB channel restores to the original opaque link color values

      if (R <= var_int_CSSaLinkBackgroundColor_R) {
        R = var_int_CSSaLinkBackgroundColor_R;
      }

      if (G <= var_int_CSSaLinkBackgroundColor_G) {
        G = var_int_CSSaLinkBackgroundColor_G;
      }

      if (B <= var_int_CSSaLinkBackgroundColor_B) {
        B = var_int_CSSaLinkBackgroundColor_B;
      }

    } // End if (var_int_FadeProcessLoopCounter != 1)


    // IS THE JOB DONE AND WE SHOULD STOP THE LOOP?
    // ============================================

    // Initialize a variable that will tell us when the job is done
    // (completely faded-out or faded-in)

    var var_bool_JobDone = null;


    // The function needs 3 extra frames to redefine the CSS color & color-background
    // properties. Otherwise, sometimes the fade process finishes at the complete
    // fade out / fade in, sometimes just 1 or 2 frames before it.
    //
    // Result: sometimes neutral grey, sometimes hued grey;
    //         sometimes the original colors, sometimes slightly lighter colors.
    //
    // Even though the JavaScript values are the good ones, the process finishes
    // at random. Maybe because of execution sequence, color iteration or some bug.
    //
    // So I have to start a counter when the color values equal the fade-out /
    // fade-in state, then go through 3 extra loops. Overkill it.


    // If current RGB values equal the faded out RGB value (we are mathematically
    // completely faded-out (grey)), add 1 to the counter.

    if (( R == var_int_FadedOutRGBchannelValue ) &&
        ( G == var_int_FadedOutRGBchannelValue ) &&
        ( B == var_int_FadedOutRGBchannelValue )) {

          var_int_FadedOutLoopCounter++;
    }


    // 1) We have skipped 1 frame to mitigate the mouse-out gap.
    // 2) We have repeatedly told JavaScript (3 times) to fade-out completely!

    if ((var_int_FadeProcessLoopCounter > 2) && (var_int_FadedOutLoopCounter > 3)) {


      // OK, job done.

      var_bool_JobDone = true;

    }


    // If current RGB values equal the original RGB values (we are mathematically
    // completely faded-in (opaque)), add 1 to the counter.

    if (( R == var_int_CSSaLinkBackgroundColor_R ) &&
        ( G == var_int_CSSaLinkBackgroundColor_G ) &&
        ( B == var_int_CSSaLinkBackgroundColor_B )) {

          var_int_FadedInLoopCounter++;

    }


    // 1) We are not fading-out. We have finished fading-in, normally.
    // 2) We have repeatedly told JavaScript (3 times) to fade-in completely!

    if ((var_int_FadeProcessLoopCounter == 0) && (var_int_FadedInLoopCounter > 3)) {


      // OK, job done.

      var_bool_JobDone = true;

    }


    // CONTINUE THE LOOP
    // =================

    // 1) I am not showing a simulated a:hover.
    // 2) The RGB color of fade-out / fade-in is not complete.

    if ((var_bool_LinkMousedOver != true) && (var_bool_JobDone != true)) {


      // Check to see if browser supports getElementById

      if (document.getElementById) {


        // Apply color to H1 and links (getElementById instead of getElementsByTagName
        // for bulletproofness and to avoid yet another loop)

        document.getElementById("ContainerA1H1").style.color = var_int_CSSaLinkBackgroundColorRGB;
        document.getElementById("ContainerA1H1linkToParentSection").style.backgroundColor = var_int_CSSaLinkBackgroundColorRGB;
        document.getElementById("ContainerA1H1linkToNext").style.backgroundColor = var_int_CSSaLinkBackgroundColorRGB;
        document.getElementById("ContainerA1H1linkToPrevious").style.backgroundColor = var_int_CSSaLinkBackgroundColorRGB;


        // Set a timeout (25 milliseconds) and then call the current function again
        // to create a loop. Frame by frame animation.

        var_str_FadeProcessTimer = setTimeout("javascript_fade_process(" + var_int_NumberToAddToEachRGBchannel + ")", 25);  


      } // End browser check


    } // End continue the loop


    // STOP THE LOOP
    // =============
    //
    // Looks like either the color fade-out / fade-in is finished or I am simulating a:hover.
    // Stop the loop... by doing nothing.

    else {


    // Keep for debugging purposes.
    //
    // alert("Job done!");


    // Unset the var_str_FadeProcessTimer, just in case

      if (var_str_FadeProcessTimer) {

        clearTimeout(var_str_FadeProcessTimer);

      }

    } // End loop control


    // ARE WE FADED-OUT AND SHOULD DISABLE A:HOVER SIMULATION?
    // =======================================================
    //
    // I don't want to show the a:hover effect on a faded-out, grey links.
    // First, bring the colors back, second, show the a:hover.

    // If RGB colors are at least darker (more faded-in, more opaque, smaller RGB
    // value) than the original colors plus 1 dose of lightness, or, in other terms,
    // if we have looped max through 1 frame of fade-out process.

    if (( R <= var_int_CSSaLinkBackgroundColor_R + var_int_NumberToAddToEachRGBchannel ) &&
        ( G <= var_int_CSSaLinkBackgroundColor_G + var_int_NumberToAddToEachRGBchannel ) &&
        ( B <= var_int_CSSaLinkBackgroundColor_B + var_int_NumberToAddToEachRGBchannel )) {


          // Keep the a:hover simulation

          var_bool_aHoverSimulationDisabled = false;

    }


    // Otherwise, seems like we are fading out or already completely faded out (grey)

    else {


      // Disable the a:hover simulation

      var_bool_aHoverSimulationDisabled = true;


    } // End are we faded-out and should disable a:hover simulation


  } // End if the fade-in / fade-out is enabled.


}

// Function end


/*******************************************************************************
**
**    Function - Fade out h1 and links
**    ================================
**
**    Launches the fade out of h1 and links.
**
**
*******************************************************************************/


function javascript_fade_out_h1_and_links() {


  // Check to see if browser supports getElementById

  if (document.getElementById) {


    // Reset the faded-in loop counter (stop overkilling)

    var_int_FadedInLoopCounter = 0;


    // Check to see if var_str_FadeProcessTimer exists and clear the timer

    if (var_str_FadeProcessTimer) {

      clearTimeout(var_str_FadeProcessTimer);

    }


    // Call the javascript_fade_process() function, inputting a POSITIVE number
    // to add to each RGB channel value. That function will loop until the RGB
    // values grow (get lighter) and reach the faded-out value.

    javascript_fade_process(var_int_NumberToAddToEachRGBchannel);


  } // End browser check


}

// Function end


/*******************************************************************************
**
**    Function - Fade in h1 and links
**    ===============================
**
**    Launches the fade in of h1 and links.
**
**
*******************************************************************************/


function javascript_fade_in_h1_and_links() {


  // Check to see if browser supports getElementById

  if (document.getElementById) {


    // Reset the fade process loop counter to control mouse-out gap.

    var_int_FadeProcessLoopCounter = 0;


    // Reset the faded-out loop counter (stop overkilling)

    var_int_FadedOutLoopCounter = 0;


    // Check to see if var_str_FadeProcessTimer exists and clear the timer

    if (var_str_FadeProcessTimer) {

      clearTimeout(var_str_FadeProcessTimer);

    }


    // Call the javascript_fade_process() function, inputting a NEGATIVE number
    // to subtract from each RGB channel value. That function will loop until
    // the RGB values diminish (get darker) and reach the faded-in value.

    javascript_fade_process(-var_int_NumberToAddToEachRGBchannel);


  } // End browser check


}

// Function end


/*******************************************************************************
**
**    Function - a:hover simulation on roll-over
**    ==========================================
**
**    Simulates a:hover on links.
**
**
*******************************************************************************/


function javascript_a_hover_simulation_rollover(var_str_Object) {


  // Check to see if browser supports getElementById...

  if (document.getElementById) {


    // If the links are not faded-out and a:hover simulation is not disabled

    if (var_bool_aHoverSimulationDisabled == false) {


      // Change the background-color CSS property of the link referenced through
      // "this" keyword to black. Creates the same effect as a:hover.

      var_str_Object.style.backgroundColor = "#000000";


      // Say that the mouse is over the link. Stop fading out.

      var_bool_LinkMousedOver = true;


    } // End if the links are not faded-out and a:hover simulation is not disabled 


  } // End browser check


}

// Function end


/*******************************************************************************
**
**    Function - a:hover simulation on roll-out
**    =========================================
**
**    Simulates a:hover on links.
**
**
*******************************************************************************/


function javascript_a_hover_simulation_rollout(var_str_Object) {


  // Check to see if browser supports getElementById...

  if (document.getElementById) {


    // Revert the background-color CSS property of the link referenced through
    // "this" keyword to the original color. Creates the same effect as a:hover.

    var_str_Object.style.backgroundColor = var_int_CSSaLinkBackgroundColorHEX;


    // Say that the mouse is no longer over the link.
    // Do whatever needed: fade out, keep faded-in if over the <h1>...

    var_bool_LinkMousedOver = false;


  } // End browser check


}

// Function end


/*******************************************************************************
**
**    3. JavaScript for Digital retouching images portfolios
**
**
**       Note
**       ====
**
**       I reverted to the oldskool JavaScript rollovers instead of CSS because
**       I was getting some weird "flickering" effects in Safari. Even with preload.
**
*******************************************************************************/


/*******************************************************************************
**
**    Function - Image preloader
**    ==========================
**
**    Preloads the rollover image.
**
**
*******************************************************************************/


function javascript_image_preloader($var_str_ImageToPreload) {

  newImageObject = new Image();
  newImageObject.src = $var_str_ImageToPreload;

}

// Function end


/*******************************************************************************
**
**    Function - Image roll out
**    =========================
**
**    When the mouse is NOT over the image (out).
**
**
*******************************************************************************/


function javascript_image_roll_out($var_str_ImageA) {


  // Replace the image src by the "AFTER" version of the digital retouching image

  document.PortfolioImage.src=$var_str_ImageA;


  // Check to see if browser supports document.getElementById

  if (document.getElementById) {


    // Hide the "BEFORE" text notice

    document.getElementById("BeforeVersion").style.display = 'none';


    // Show the "AFTER" text notice

    document.getElementById("AfterVersion").style.display = 'block';


  }

}

// Function end


/*******************************************************************************
**
**    Function - Image roll over
**    ==========================
**
**    When the mouse is over the image.
**
**
*******************************************************************************/


function javascript_image_roll_over($var_str_ImageB) {


  // Replace the image src by the "BEFORE" version of the digital retouching image

  document.PortfolioImage.src=$var_str_ImageB;


  // Check to see if browser supports document.getElementById

  if (document.getElementById) {


    // Show the "BEFORE" text notice

    document.getElementById("BeforeVersion").style.display = 'block';


    // Hide the "AFTER" text notice

    document.getElementById("AfterVersion").style.display = 'none';


  }

}

// Function end


// End hiding JavaScript from really old browsers -->