/*//////////////////////////////////////////////////////////////////////////////////////
Script Carousel v1.0

This provides the basic functionality to have a series of images that seemlessly
slide from side to side with specific actions that can be taken on the focus image.  
Here is an account of functionality below:

Page Loading:
  BuildImages(pos, dir) takes the arguments of a numeric position (pos) and a 
    direction signifier.  The position denotes which element will be displayed in
    the primary (central) node location.  The direction is significant in that it
    prevents image flicker by building in an appropriate order to the direction
    in which images are shifted (see below).  

  Build Navigation() takes no arguments and is only called once on page initialization.
    It applies the appropriate images and onclick routines for the nav buttons.

Zoom Functionality:
  ZoomIn() and ZoomOut() are simply non-argument procedures which call Zoom(type).
  
  Zoom(type) takes a single bit argument where 1 = Zoom In, and 2 = Zoom Out. It locally
    generated the Original X,Y coordinates and H,W Dimensions and calculates a set
    of differentials (dX, dY, dH, dW) based off of the # of steps in the zoom and then
    iteratively calls ZoomElement() to do the transition.

Fade (Popup) Functionality:
  ShowDiv() fades in the existing Named Div ("Product_Info").  At some point we many
    need to have dynamic Div naming to fade in and out specific Divs based on Products
    in the Highlight spot, but we can always address that later.  The Fade functionality
    itself is handled by FadeElement().
    
  HideDiv() fades out the existing named Div.  Leverages FadeElement().

Scrolling (Product) Functionality:
  SwitchLeft() and SwitchRight() are precursory functions that handle global variables
    and any necessary actions that need be performed before calling ShiftLeft() and
    ShiftRight() Respectively.
  
  ShiftLeft() and ShiftRight() are similar to Zoom above in that it generates a starting
    set of X,Y coordinates and their differetials (dX, dY) for each element to be moved.
    In this case only 4 of the 5 elements are moved based on the navigation type since
    only 1 element needs to be brought into view from outside the Carousel_Container Div.
    These utilite ShiftElement() to iteratively move the Image Objects. 

*////////////////////////////////////////////////////////////////////////////////////////


  // Default User-Set Variables - Display  (Override in Page to set)
  var intImageNode               = 1;    // The Default Product in the List to be the Focus
  var intContainer_HighlightNode = 2     // The Array Element to be the Primary Selection Node, Start at 0. (Keep as 2)
  var intContainer_TopBuffer     = 7;    // Inner Buffer in Container Div
  var intContainer_LeftBuffer    = -450; // Inner Buffer in Container Div
  var intProductInfo_Width       = 375;  // Set the Width of the Popup Div for Products
  var intProductInfo_XBuffer     = 0;    // The Center Offset for the Product Info Objects
  var intProductInfo_YBuffer     = 60;   //
  var intImage_Width             = 330;  // Set to Standard Image Width
  var intImage_Height            = 400;  // Set to Standard Image Height
  var intImage_Buffer            = 20;   // Buffer Between Images
  var intImage_YOffsetonZoom     = 8;    // This is the amount of downward offset the image shifts on zoom
  var floatImage_Zoom            = 15;   // % of Normal reduction
  var floatImage_Opacity         = 60;   // Opacity % of non-primary nodes

  // Developer Defined Variables - Behavior  (Override in Page to set)
  var intZoomDelay               = 5;    // ms Delay between frames  (Suggested 5)
  var intZoomSteps               = 25;   // Numbers of steps in Zoom (More = Smoother)  Max Suggested 50
  var intFadeDelay               = 5;    // ms Delay between frames  (Suggested 5)
  var intFadeSteps               = 25;   // Numbers of steps in Shift (More = Smoother)  Max suggested 50
  var intShiftDelay              = 5;    // ms Delay between frames  (Suggested 5)
  var intShiftSteps              = 50;   // Numbers of steps in Shift (More = Smoother)  Max Suggested 100

  // Global Variables - Static (Do Not Adjust)
  var ZoomTimer        = "";
  var FadeTimer        = "";
  var NavTimer         = "";
  var ShiftTimer       = "";
  var ZoomPauseTimer   = "";
  var ShiftCallTimer   = "";
  var boolStopMovement = false;
  var boolIsZoomed     = false;
  var boolPopupActive  = false;
  var boolScrolling    = false;
  var boolGlobalBackOrderItem = false;
  
  // Global Counters (Do Not Adjust)
  var intGlobalIterationCount     = 0;
  var intGlobalZoomIterationCount = 0;
  var intGlobalFadeIterationCount = 0;

  // Global Derived Variables (These will be reset as appropriate via GenerateCoordinates()
  var intImage_HeightZoom        = intImage_Height * ( (100 - floatImage_Zoom ) / 100);
  var intImage_WidthZoom         = intImage_Width * ( (100 - floatImage_Zoom ) / 100);
  var intZoomNodeSpacer          = 0;  

  // Defined Arrays
  arrImageName         = new Array();
  arrImages            = new Array();
  arrImageLoc_X        = new Array();
  arrImageLoc_Y        = new Array();
  arrImgSrc            = new Array();
  arrImgUrl            = new Array();
  arrItemPrdCode       = new Array();
  arrItemName          = new Array();
  arrItemDesc          = new Array();
  arrItemLong          = new Array();
  arrItemPrice         = new Array();
  arrProdQtyListName   = new Array();
  arrProdPrice         = new Array();
  arrProdColl          = new Array();
  arrProdSKU           = new Array();
  arrVarName           = new Array();
  arrVarSKU            = new Array();
  arrVarStock          = new Array();
  arrTopicCode         = new Array();
 
  // BackOrder Arrays
  arrIsBO      = new Array();
  arrBOMax     = new Array();
  arrBODate    = new Array();

  
  // Populate the Derived Array Values for Image Location
  function GenerateCoordinates() {
    // Derived Variables
    intImage_HeightZoom        = intImage_Height * ( (100 - floatImage_Zoom ) / 100);
    intImage_WidthZoom         = intImage_Width * ( (100 - floatImage_Zoom ) / 100);

    for (x=0; x<5; x++) {
      var Img = document.getElementById(arrImageName[x]);

      if (x == intContainer_HighlightNode) {
        intZoomNodeSpacer  = (intImage_Width - intImage_WidthZoom) / 2;
      }

      arrImageLoc_X.push(Math.round(intContainer_LeftBuffer + ((intImage_WidthZoom + intImage_Buffer) * x) + intZoomNodeSpacer + (intImage_Width - intImage_WidthZoom) / 2));
      arrImageLoc_Y.push(Math.round(intContainer_TopBuffer + (intImage_Height - intImage_HeightZoom)));
      arrImages.push('');
      if (x == intContainer_HighlightNode) {
        intZoomNodeSpacer = (intImage_Width - intImage_WidthZoom);
      }
    }  
  } // GenerateCoordinates()
  
  /////////////////////////
  // Begin Object Builds //
  function BuildImages(pos, dir) {
    // Set the Global Variable (intImageNode) to the Selected Image
    intImageNode = pos;
    if (dir == "" || dir == "right") { dir = "buildtoright"; } else { dir = "buildtoleft"; }

    // Derived Variables
    intContainer_Width  = parseInt(document.getElementById("Carousel_Container").style.width);
    intContainer_Height = parseInt(document.getElementById("Carousel_Container").style.height);
    intItemArray_Length = arrImgSrc.length;
    intItemArray_Curr   = 0;
    intBuildNode        = 0;
    intZoomNodeSpacer   = 0;
    boolIsZoomed        = false;
    
    // Set Image Positioning for Right Build
    if (dir == "buildtoright") {
      if (pos <= 2) {
        intItemArray_Curr = intItemArray_Length + (pos - 3);
      }
      else {
        intItemArray_Curr = pos - 3;
      }
    }
    
    // Set Image Positioning for Left Build - DK 09/15/10.
    // Note: Fixed for Dynamic Growth.
    if (dir == "buildtoleft") {
      if (pos >= (intItemArray_Length-2)) {
        intItemArray_Curr = pos - (intItemArray_Length - 2);
      }
      else {
        intItemArray_Curr = pos + 2;
      }
    }
    
    if (dir == "buildtoleft") {
      // Set the proper build node order for left builds. 
      if (intItemArray_Curr == 0) { intItemArray_Curr = intItemArray_Length -1; } else { intItemArray_Curr--; }
    }

    if (dir == "buildtoright") { 
      for (x=0; x<5; x++) {
        // Set the Image to be Displayed in the given Location
        if (intItemArray_Curr >= intItemArray_Length) { intItemArray_Curr = 0; }

        var Img = document.getElementById(arrImageName[x]);
        Img.src = arrImgSrc[intItemArray_Curr].toString();
        Img.alt = arrItemName[intItemArray_Curr].toString() + ' Collection';

        if (x != intContainer_HighlightNode) {
          // Apply Opacity for non-highlighted Nodes
          SetElementOpacity(arrImageName[x], floatImage_Opacity);
        }
        else {
          intZoomNodeSpacer  = (intImage_Width - intImage_WidthZoom) / 2;
          SetElementOpacity(arrImageName[x], 100);
        }
        Img.style.left   = arrImageLoc_X[x] + 'px';
        Img.style.top    = arrImageLoc_Y[x] + 'px';
        Img.style.height = intImage_HeightZoom + 'px';
        Img.style.width  = intImage_WidthZoom + 'px';

        intItemArray_Curr++;
      }  // For
    } // If
    else {
      for (x=4; x>=0; x--) {
        // Set the Image to be Displayed in the given Location
        if (intItemArray_Curr < 0) { intItemArray_Curr = intItemArray_Length - 1; }
        var Img = document.getElementById(arrImageName[x]);
        Img.src = arrImgSrc[intItemArray_Curr].toString();
        Img.alt = arrItemName[intItemArray_Curr].toString() + ' Collection';
        
        if (x != intContainer_HighlightNode) {
          // Apply Opacity for non-highlighted Nodes
          SetElementOpacity(arrImageName[x], floatImage_Opacity);
        }
        else {
          intZoomNodeSpacer  = (intImage_Width - intImage_WidthZoom) / 2;
          Img.style.filter = "Alpha(Opacity=100)";
          Img.style.MozOpacity = .99
        }
        Img.style.left   = arrImageLoc_X[x] + 'px';
        Img.style.top    = arrImageLoc_Y[x] + 'px';
        Img.style.height = intImage_HeightZoom + 'px';
        Img.style.width  = intImage_WidthZoom + 'px';

        intItemArray_Curr--;
      }  // For
    }
    HideQuantityDropdowns();
    ActivateAllEvents();
  } // BuildImages(pos)
  
  function BuildNavigation() {
    intContainer_Width  = parseInt(document.getElementById("Carousel_Container").style.width);  
    intContainer_Height = parseInt(document.getElementById("Carousel_Container").style.height);
    intContainer_XLoc   = 0;
    intContainer_YLoc   = 0;

    var objPopup = document.getElementById("Product_Info_Container");

    document.getElementById("Nav_Left").onclick  = SwitchLeft;
    document.getElementById("Nav_Right").onclick = SwitchRight;
    
    objPopup.style.left    = (intContainer_XLoc + intProductInfo_XBuffer + intContainer_Width / 2) + 'px';
    objPopup.style.top     = (intContainer_YLoc + intProductInfo_YBuffer) + 'px';
    objPopup.style.width   = (intProductInfo_Width) + 'px';
    objPopup.style.zIndex  = 51;
  }
  // End Object Builds //
  ///////////////////////
  
  //////////////////////////////
  // Begin Zoom Functionality //
  function ZoomIn() {
    if (!boolIsZoomed) { Zoom(1); }
  } // ZoomIn()
  
  function ZoomOut() {
    if (!boolPopupActive && boolIsZoomed) { Zoom(0); }
  } // ZoomOut()
    
  // The Zoom Function for the Center Node.
  function Zoom(type, boolHoldEvents) {
    DisableAllEvents();
    if (boolHoldEvents != true) { boolHoldEvents = false; }

    // Derived Variables
    intContainer_Width  = parseInt(document.getElementById("Carousel_Container").style.width);  
    intContainer_Height = parseInt(document.getElementById("Carousel_Container").style.height);
    intContainer_XLoc   = 0;
    intContainer_YLoc   = 0;
    intItemArray_Length = arrImgSrc.length;
    intItemArray_Curr   = 0;
    intImage_HeightZoom = intImage_Height * ( (100 - floatImage_Zoom ) / 100);
    intImage_WidthZoom  = intImage_Width * ( (100 - floatImage_Zoom ) / 100);
    intZoomNodeSpacer   = (intImage_Width - intImage_WidthZoom) / 2;
    
    // Set the Focus Image and derive locations
    var Img = document.getElementById(arrImageName[intContainer_HighlightNode]);
    var X_Begin      = parseInt(Img.style.left);
    var Y_Begin      = parseInt(Img.style.top);
    var H_Begin      = parseInt(Img.style.height);
    var W_Begin      = parseInt(Img.style.width);

    if ( type == 1 ) {
        // Switch to Large
        var ZoomType     = "Large";
        var X_End        = parseInt(intContainer_XLoc + intContainer_LeftBuffer + ((intImage_WidthZoom + intImage_Buffer) * intContainer_HighlightNode) + intZoomNodeSpacer);
        var Y_End        = parseInt(intContainer_YLoc + intContainer_TopBuffer + intImage_YOffsetonZoom);
        var H_End        = parseInt(intImage_Height);
        var W_End        = parseInt(intImage_Width);
    }
    else {
        // Switch to Small
        var ZoomType     = "Small";
        var X_End        = parseInt(intContainer_XLoc + intContainer_LeftBuffer + ((intImage_WidthZoom + intImage_Buffer) * intContainer_HighlightNode) + intZoomNodeSpacer + (intImage_Width - intImage_WidthZoom) / 2);
        var Y_End        = parseInt(intContainer_YLoc + intContainer_TopBuffer + (intImage_Height - intImage_HeightZoom));
        var H_End        = parseInt(intImage_HeightZoom);
        var W_End        = parseInt(intImage_WidthZoom);
    }
    // Get the Difference to Move
    var X_Delta       = (X_End - X_Begin) / intZoomSteps;
    var Y_Delta       = (Y_End - Y_Begin) / intZoomSteps;
    var H_Delta       = (H_End - H_Begin) / intZoomSteps;
    var W_Delta       = (W_End - W_Begin) / intZoomSteps;
        
    // Call the Mover    
    ResetGlobalZoomCounter();
    clearInterval(ZoomTimer);
    ZoomTimer = setInterval("ZoomElement('" + arrImageName[intContainer_HighlightNode] + "'," + X_Begin + "," + Y_Begin + "," + H_Begin + "," + W_Begin + "," + X_Delta + "," + Y_Delta + "," + H_Delta + "," + W_Delta + "," + boolHoldEvents + ")", intZoomDelay);
  } // Zoom(type)
  
  function ZoomElement(ImageName, X, Y, H, W, Xd, Yd, Hd, Wd, boolHoldEvents) {
    intGlobalZoomIterationCount++;
    if (intGlobalZoomIterationCount >= intZoomSteps) {
      clearInterval(ZoomTimer);
      ResetGlobalZoomCounter();
      if (Xd < 0) { boolIsZoomed = true; } else { boolIsZoomed = false; }
      if (boolHoldEvents) {} else { ActivateAllEvents(); }   
      if (!boolPopupActive && !boolScrolling) { ActivateZoomEvents(); } else { DisableZoomEvents(); DisableHighlightNodeEvents(); }
      return;
    }
    else {
      document.getElementById(ImageName).style.left   = parseInt(X + Xd * intGlobalZoomIterationCount) + 'px';
      document.getElementById(ImageName).style.top    = parseInt(Y + Yd * intGlobalZoomIterationCount) + 'px';
      document.getElementById(ImageName).style.height = parseInt(H + Hd * intGlobalZoomIterationCount) + 'px';
      document.getElementById(ImageName).style.width  = parseInt(W + Wd * intGlobalZoomIterationCount) + 'px';
    }
  }
  // End Zoom Functionality //
  ////////////////////////////
      
  //////////////////////////////////////
  // Begin Popup & Fade Functionality //
  function ShowDiv() {
    if (!boolIsZoomed) { Zoom(1); }
    // DisableHighlightNodeEvents();
    EnableClickToProductEvents();
    
    boolPopupActive = true;
    boolLockZoom    = true;

    document.getElementById("Product_Info_Container").style.display    = 'inline';
    document.getElementById("Product_Info_Container").style.visibility = 'visible';
    document.getElementById("Product_Info_Container").style.zIndex     = 100;
    
    // strObjectName = "Product_Info_" + arrImgPop[intImageNode -1];
    strObjectName = "Product_Info_Container";
    PopulateContainerInformation(intImageNode -1);

    // Call Fade In
    ResetGlobalFadeCounter();
    clearInterval(FadeTimer);
    clearInterval(NavTimer);
    FadeTimer = setInterval("FadeElement('" + strObjectName + "', 'Nav_Container', 0, 99)", intFadeSteps);
    ShowQuantityDropdowns();
  }
  
  function HideDiv(boolHoldEvents) {
    if (boolHoldEvents != true) { boolHoldEvents = false; }

    // strObjectName = "Product_Info_" + arrImgPop[intImageNode -1];
    strObjectName = "Product_Info_Container";

    if (boolPopupActive == true) {
      document.getElementById("Product_Info_Container").style.zIndex  = 51;
      ResetGlobalFadeCounter();
      clearInterval(FadeTimer);
      clearInterval(NavTimer);
      FadeTimer = setInterval("FadeElement('" + strObjectName + "', 'Nav_Container', 99, 0, 'UnDisplay()')", intFadeSteps);
    }
    if (boolIsZoomed) { 
      Zoom(0, boolHoldEvents); 
    }  
    boolPopupActive = false;
    boolLockZoom    = false;
    if (boolHoldEvents) {} else { ZoomPause(false, 'ActivateAllEvents()'); }   
  }

  function PopulateContainerInformation(Node) {
    var objContainer = document.getElementById("Product_Info_Container");
    var objProdName = document.getElementById("PI_ProdName");
    var objProdDesc = document.getElementById("PI_ProdDesc");
    var objProducts = document.getElementById("PI_Products");
    var objCollLink = document.getElementById("PI_CollLink");
    var objCollAdd  = document.getElementById("PI_CollAdd");
    
    var strCollection = arrItemName[Node];
    boolGlobalBackOrderItem = false;

    var strProdName = '<div class="FgProdName"><h2>' + arrItemName[Node] + '</h2></div>';
    var strProdDesc = '<div class="FgProdDesc">' + arrItemDesc[Node] + '</div>';
    var strCollLink = '<a href="/haircare/collection.aspx?TopicCode=' + arrTopicCode[Node] + '"><img src="/IMG/BTN_VwCllctn.gif" alt="View Collection" border="0"></a>';
    var strCollAdd  = '<a href="#" style="cursor:pointer" onclick=\'javascript:if(PSCAddSelectedProductsToBag("' + arrTopicCode[Node] + '")){HideDiv();}\'><img src="/IMG/BTN_AddToBg.gif" alt="Add To Bag" border="0" class="margin03_L"></a>';

    // Set the Products.
    var strProducts = '';
    strProducts += '<table width="100%" border="0" cellspacing="1" cellpadding="0">';
    for (var x=0; x<arrProdColl.length; x++) {
      if (strCollection == arrProdColl[x]) {
        // We've got a Product in the Collection to add to the dropdown
        strProducts += '<tr><td><div style="margin-top:4px" class="float_L AMedGREY12_B">' + arrVarName[x] + '</div>' + CheckBackOrderStatus(arrIsBO[x], arrBOMax[x], arrVarStock[x], arrBODate[x]) + '</td>';
        strProducts += '<td><div class="float_L"><span class="AMedGREY12_B">Qty</span>';
        strProducts += '<select id="' + arrProdQtyListName[x] + '" class="margin03_L TXTBOX_LtGREY_DD">';
        strProducts += '<option value="-">--</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div></td>';
        strProducts += '<td><div style="padding-top:1px" class="float_L margin05_L"><span class="AMedGREY12_B">' + arrProdPrice[x] + '</span></td>';
        strProducts += '<td><a href="/haircare/product.aspx?prdcode=' + arrProdSKU[x] + '&CategoryCode=AXE_Haircare" class="AMedGREY12_BL margin03_L">View</a></div></td>';
        strProducts += '</tr>';
      }
    }
    strProducts += '</table>';    
    objProdName.innerHTML = strProdName;
    objProdDesc.innerHTML = strProdDesc;
    objProducts.innerHTML = strProducts;
    objCollLink.innerHTML = strCollLink;
    objCollAdd.innerHTML = strCollAdd;
    
    // Update the sIFR Formatting on Product Name
    ActivateSIFR('FgProdName');
    ActivateSIFR('FgProdDesc');
    
    // Call to Manipulate the Qty Dropdown via AJAX if OOS
    for (var x=0; x<arrProdColl.length; x++) {
      if (strCollection == arrProdColl[x]) {
        PSCManagePrdAddToCartDropdown(arrVarSKU[x],arrVarStock[x]);
      }
    }
    if (boolGlobalBackOrderItem) { document.getElementById("BO_Msg").style.display = 'inline'; }
    else { document.getElementById("BO_Msg").style.display = 'none'; }
  } 
    
  function CheckBackOrderStatus(IsBackOrder,BackOrderMax,ProductStock,BackOrderDate) {
    var intThreshold = AJAX_GetTresHoldNumber();
    var boolExceedMaxBackOrder = false;

    if (IsBackOrder != '1' && IsBackOrder != '2') { return ''; }

    if (BackOrderMax == '') { BackOrderMax = 999999; }
    if (BackOrderMax < Math.abs(parseInt(ProductStock)) && parseInt(ProductStock) < 0) { boolExceedMaxBackOrder = true; }

    if ((parseInt(ProductStock) < parseInt(intThreshold)) && !boolExceedMaxBackOrder) {
      boolGlobalBackOrderItem = true;
      return '<div style="margin-top:3px;" class="ERROR">&nbsp;*</div>';    
    }    
    return '';
  }
    
  function ResetContainerInformation() {
    document.getElementById("PI_ProdName").innerHTML = '';
    document.getElementById("PI_ProdDesc").innerHTML = '';
  }
    
  function FadeElement(ObjectName, NavigationName, StartVal, EndVal, Finalize) {
    if(intGlobalFadeIterationCount >= intFadeSteps) { 
      clearInterval(FadeTimer);
      ResetGlobalFadeCounter();
      if (EndVal == 0) { HideQuantityDropdowns(); ResetAllQuantities();}
      eval(Finalize);
      return; }
    else {
      intGlobalFadeIterationCount++;
      intOpacity = Math.round( StartVal + ((EndVal - StartVal) / intFadeSteps * intGlobalFadeIterationCount) );
      
      try {
        SetElementOpacity(ObjectName, intOpacity); 
      }
      catch(e) {
        // Fail Safely
      }
    }
  }
  // End Popup & Fade Functionality //
  ////////////////////////////////////

  /////////////////////////////////////
  // Begin Image Shift Functionality //
  function SwitchLeft() {
    DisableAllEvents();
    boolScrolling = true;
    HideDiv(true);
    ResetAllQuantities();
    if (boolIsZoomed) { ZoomPause(false, 'ShiftLeft()'); } else { ShiftLeft(); }
  } // SwitchLeft()
              
  function SwitchRight() {
    DisableAllEvents();
    boolScrolling = true;
    HideDiv(true);
    ResetAllQuantities();
    if (boolIsZoomed) { ZoomPause(false, 'ShiftRight()'); } else { ShiftRight(); }
  } // SwitchRight()
  
  function ShiftLeft() {
    arrTrans_XBegin = new Array(0); 
    arrTrans_YBegin = new Array(0); 
    arrTrans_XEnd   = new Array(0); 
    arrTrans_YEnd   = new Array(0); 
    arrTrans_XDelta = new Array(0); 
    arrTrans_YDelta = new Array(0); 
    arrOpac         = new Array(0);
    arrOpac_Delta   = new Array(0);
    
    var floatOpac_DeltaIn  = (100 - floatImage_Opacity) / intShiftSteps;
    var floatOpac_DeltaOut = (floatImage_Opacity - 100) / intShiftSteps;
    
    for (x=0; x<=3; x++) {
      arrTrans_XBegin.push(parseInt(document.getElementById(arrImageName[x+1]).style.left));
      arrTrans_YBegin.push(parseInt(document.getElementById(arrImageName[x+1]).style.top));
      arrTrans_XEnd.push(parseInt(document.getElementById(arrImageName[x]).style.left));
      arrTrans_YEnd.push(parseInt(document.getElementById(arrImageName[x]).style.top));
      arrTrans_XDelta.push( (arrTrans_XEnd[x] - arrTrans_XBegin[x]) / intShiftSteps ); 
      arrTrans_YDelta.push( (arrTrans_YEnd[x] - arrTrans_YBegin[x]) / intShiftSteps ); 

      arrImages[x] = arrImageName[x+1];

      switch (x) {
        case 0 : 
          arrOpac.push(floatImage_Opacity); arrOpac_Delta.push(0); break;
        case 1 : 
          arrOpac.push(100); arrOpac_Delta.push(floatOpac_DeltaOut); break;
        case 2 : 
          arrOpac.push(floatImage_Opacity); arrOpac_Delta.push(floatOpac_DeltaIn); break;
        case 3 : 
          arrOpac.push(floatImage_Opacity); arrOpac_Delta.push(0); break;
      }
    }
    
    ResetGlobalCounter();
    ShiftTimer = setInterval("ShiftElements(arrTrans_XBegin,arrTrans_YBegin,arrTrans_XDelta,arrTrans_YDelta,arrOpac,arrOpac_Delta)", intShiftDelay);  
  } // ShiftLeft()

  function ShiftRight() {
    arrImages_Loc   = new Array(0);
    arrTrans_XBegin = new Array(0); 
    arrTrans_YBegin = new Array(0); 
    arrTrans_XEnd   = new Array(0); 
    arrTrans_YEnd   = new Array(0); 
    arrTrans_XDelta = new Array(0); 
    arrTrans_YDelta = new Array(0); 
    arrOpac         = new Array(0);
    arrOpac_Delta   = new Array(0);
    
    var floatOpac_DeltaIn  = (100 - floatImage_Opacity) / intShiftSteps;
    var floatOpac_DeltaOut = (floatImage_Opacity - 100) / intShiftSteps;

    for (x=0; x<=3; x++) {
      arrTrans_XBegin.push(parseInt(document.getElementById(arrImageName[x]).style.left));
      arrTrans_YBegin.push(parseInt(document.getElementById(arrImageName[x]).style.top));
      arrTrans_XEnd.push(parseInt(document.getElementById(arrImageName[x+1]).style.left));
      arrTrans_YEnd.push(parseInt(document.getElementById(arrImageName[x+1]).style.top));
      arrTrans_XDelta.push( (arrTrans_XEnd[x] - arrTrans_XBegin[x]) / intShiftSteps ); 
      arrTrans_YDelta.push( (arrTrans_YEnd[x] - arrTrans_YBegin[x]) / intShiftSteps ); 

      arrImages[x] = arrImageName[x];
      
      switch (x) {
        case 0 : 
          arrOpac.push(floatImage_Opacity); arrOpac_Delta.push(0); break;
        case 1 : 
          arrOpac.push(floatImage_Opacity); arrOpac_Delta.push(floatOpac_DeltaIn); break;
        case 2 : 
          arrOpac.push(100); arrOpac_Delta.push(floatOpac_DeltaOut); break;
        case 3 : 
          arrOpac.push(floatImage_Opacity); arrOpac_Delta.push(0); break;
      }

    }
    ResetGlobalCounter();
    clearInterval(ShiftTimer);
    ShiftTimer = setInterval("ShiftElements(arrTrans_XBegin,arrTrans_YBegin,arrTrans_XDelta,arrTrans_YDelta,arrOpac,arrOpac_Delta)", intShiftDelay);  
  } // ShiftRight()
    
  function ShiftElements(arrX, arrY, arrXd, arrYd, arrO, arrOd) {
    intGlobalIterationCount++;
    if (intGlobalIterationCount >= intShiftSteps) {
      clearInterval(ShiftTimer);
      ResetGlobalCounter();
      boolScrolling = false;
      if (arrXd[0] > 0) { FinalizeShift('right'); } else { FinalizeShift('left'); }
    }
    else {
      for (x=0; x<=3; x++) { 
        document.getElementById(arrImages[x]).style.left = parseInt(arrX[x] + (arrXd[x] * intGlobalIterationCount)) + 'px';
        SetElementOpacity(arrImages[x], (arrO[x] + (arrOd[x] * intGlobalIterationCount)));
      }
    }
  }
  
  function FinalizeShift(strDirection) {
    if (strDirection == 'left') {
      if (intImageNode >= arrImgSrc.length) {intNewNode = 1;} else {intNewNode = intImageNode + 1;}
      window.setTimeout("BuildImages(" + intNewNode + ", 'right')", 1 );
    }
    else {
      if (intImageNode <= 1) {intNewNode = arrImgSrc.length;} else {intNewNode = intImageNode - 1;}
      window.setTimeout("BuildImages(" + intNewNode + ", 'left')", 1 );
    }
  } // FinalizeShift()
  // End Image Shift Functionality //
  ///////////////////////////////////

  /////////////////////////////////
  // Begin Utility Functionality //
  function SetElementOpacity(Object, Value) {
    document.getElementById(Object).style.filter = "Alpha(Opacity=" + Value + ")"; // IE
    document.getElementById(Object).style.MozOpacity = Math.min(Value, 99)/100;    // FireFox
    document.getElementById(Object).style.opacity = Math.min(Value, 99)/100;       // Safari & Chrome
  }

  function UnDisplay() {
    document.getElementById("Product_Info_Container").style.display    = 'none';
    document.getElementById("Product_Info_Container").style.visibility = 'hidden';
  }  

  function ZoomPause(boolValue, Finalize) {
    if( boolIsZoomed == boolValue ) { 
      clearInterval(ZoomPauseTimer);
      
      // Run Function Post-Zoom
      eval(Finalize);
      return; }
    else {
      clearInterval(ZoomPauseTimer);
      ZoomPauseTimer = setInterval("ZoomPause(" + boolValue + ",'"+ Finalize +"')", 1)
    }
  }
  
  function ActivateZoomEvents() {
    document.getElementById(arrImageName[intContainer_HighlightNode]).onmouseover = ZoomIn;
    document.getElementById(arrImageName[intContainer_HighlightNode]).onmouseout  = ZoomOut;
  }
  
  function DisableZoomEvents() {
    document.getElementById(arrImageName[intContainer_HighlightNode]).onmouseover = '';
    document.getElementById(arrImageName[intContainer_HighlightNode]).onmouseout  = '';
  }
  
  function ActivateHighlightNodeEvents() {
    ActivateZoomEvents();
    document.getElementById(arrImageName[intContainer_HighlightNode]).onclick     = ShowDiv;
  }
  
  function DisableHighlightNodeEvents() {
    DisableZoomEvents();
    document.getElementById(arrImageName[intContainer_HighlightNode]).onclick     = '';
  }

  function EnableClickToProductEvents() {
    document.getElementById(arrImageName[intContainer_HighlightNode]).onclick     = NavigateToProduct;
  }

  function DisableAllEvents() {
    for (x=0; x<=4; x++) {
      document.getElementById(arrImageName[x]).onmouseover = '';
      document.getElementById(arrImageName[x]).onmouseout  = '';
      document.getElementById(arrImageName[x]).onclick     = '';
    } 
    document.getElementById("Nav_Left").onclick  = '';
    document.getElementById("Nav_Right").onclick = '';
  }
  
  function ActivateAllEvents() {
    document.getElementById("Nav_Left").onclick  = SwitchLeft;
    document.getElementById("Nav_Right").onclick = SwitchRight;

    for (x=0; x<=4; x++) {
      var Img = document.getElementById(arrImageName[x]);
      if (x != intContainer_HighlightNode) {
        Img.onmouseover = ZoomOut;
        Img.onmouseout  = ZoomOut;
        if (x < 2) { Img.onclick   = SwitchRight; } else { Img.onclick = SwitchLeft; }
      }
      else {
        // Define the Zoom and OnClick Functions for the Highlight Node
        Img.onmouseover = ShowDiv;
        Img.onmouseout  = HideDiv;
        Img.onclick     = ShowDiv;
      }
    }
    document.getElementById(arrImageName[intContainer_HighlightNode]).focus();
  }
  
  function NavigateToProduct() {
    // location.href = arrImgUrl[intImageNode-1];
  }
    
  function ResetGlobalCounter() {
    intGlobalIterationCount = 0;  
  }
  
  function ResetGlobalZoomCounter() {
    intGlobalZoomIterationCount = 0;  
  }
  
  function ResetGlobalFadeCounter() {
    intGlobalFadeIterationCount = 0;
  }
  
  function ResetAllQuantities() {
    for (x = 0; x<arrProdQtyListName.length; x++) {
      //document.getElementById(arrProdQtyListName[x]).selectedIndex = 0;
    }
  }
  
  function ShowQuantityDropdowns() {
    // This should only be run for IE6 as it disrupts other browsers layouts.
    if (BrowserDetect.browser == "Explorer" && BrowserDetect.Version == "6") {
      for (x = 0; x<arrProdQtyListName.length; x++) {
        //document.getElementById(arrProdQtyListName[x]).style.display = 'inline';
        //document.getElementById(arrProdQtyListName[x]).style.visibility = 'visible';
      }
    }
  }
  
  function HideQuantityDropdowns() {
    // This should only be run for IE6 as it disrupts other browsers layouts.
    if (BrowserDetect.browser == "Explorer" && BrowserDetect.Version == "6") {
      for (x = 0; x<arrProdQtyListName.length; x++) {
        //document.getElementById(arrProdQtyListName[x]).style.display = 'none';
        //document.getElementById(arrProdQtyListName[x]).style.visibility = 'hidden';
      }
    }  
  }
  // End Utility Functionality //
  ///////////////////////////////