/* replace image nodes for home page content, 
   setting smaller images for medium resolution */
/* added: an original prototype script as new function correctContentChildsMargins: 
   center main page elements with dhtml |
   correct css issue with no workaround for centering #contentCore */

/* author: d.b.*/
/* created: 20/06/2004 */
/* last updated: 06/07/2004 */

    /*---------------------------------------------------------------------------------- */
    /* this is customizable for maintenance */
    /*---------------------------------------------------------------------------------- */

    /* set integer for number of sections (as for june 2004 there were three of them - so three images)*/
    var globalSectionsNumber = 3;

    // IDs (of IMAGE nodes, the images that appears next to nav bar in home page) AND SOURCE FILE NAMES URIs
    // (original, high-res, filenames, WITHOUT EXTENSION, like 'promo-case-study', AND respective medium-res filename,
    // like 'promo-case-study-mediumres', are stored in an array. This array is then looped to call respective 
    // functions: 
    // createImage: create new image object and set required properties, such as new source (loads image in memory)
    // replaceNode: create new node object, and replace it in the tree
    // adjustDependentBoxes:  resize dependent boxes such as parent boxes of image (image container) and description text boxes
    // restoreListeners: restore lost listeners (show/hide and fade description texts below) when removing original image nodes from the tree

    // rules for setting IDs are like this:
    // arbitrary string (like "philosophy") for a section name
    // this string plus "Image" for image node (img html tag)
    // this string plus "Desc" for description text layers that appear/fade

    /*---------------------------------------------------------------------------------- */
    /* don't change this */
    /*---------------------------------------------------------------------------------- */
    // set path to images
    // this path resolves relatively from the HTML DOCUMENT not from the path of this script
    // this is safe because we know we are in the home page, hence below the locale (es or es) directory
    var _IMGPATH = '../images/content/';
    // set original reduced medium-resolution images
    var sectionStrings = new Array();
      for (var setSectionsNumber = 0; setSectionsNumber < globalSectionsNumber; setSectionsNumber++) {
        sectionStrings[setSectionsNumber] = new Array();
      }
 
    /*---------------------------------------------------------------------------------- */
    /* change this to add/remove sections */
    /* array must have an index followed by the respective "fixed" associative index as you see below */
    /*---------------------------------------------------------------------------------- */
    // right-most section (currently as for june 2004, a case study): 
    sectionStrings[0]['section'] = "fotorama"; // 
    sectionStrings[0]['originalImageID'] = "fotoramaImage"; // this is the image node ID (img tag ID)
    sectionStrings[0]['highresImageURI'] = "solutions-high-res"; // this is the high-res image filename without extension
    sectionStrings[0]['lowresImageURI'] = "solutions-med-res"; // this is the medium-res image filename without extension
    sectionStrings[0]['imageExtension'] = 'jpg';

    // other section (see values): 
    sectionStrings[1]['section'] = "philosophy";
    sectionStrings[1]['originalImageID'] = "philosophyImage";
    sectionStrings[1]['highresImageURI'] = "architecture-high-res";
    sectionStrings[1]['lowresImageURI'] = "architecture-med-res";
    sectionStrings[1]['imageExtension'] = 'jpg';

    // other section (see values): 
    sectionStrings[2]['section'] = "javadev";
    sectionStrings[2]['originalImageID'] = "javadevImage";
    sectionStrings[2]['highresImageURI'] = "developers-high-res";
    sectionStrings[2]['lowresImageURI'] = "developers-med-res";
    sectionStrings[2]['imageExtension'] = 'jpg';

    // for compatibility with browsers other than IE, preload images for medium resoultion before scripts starts, may 
    // solve the problem with onload event handler for images with these browsers (onload does not trigger well or at all)
    var dirtyImageCache = new Array();

    dirtyImageCache[0] = new Object();
    dirtyImageCache[0]['image'] = new Image();
    // image urls have to be hardcoded, no other solution by now, because this line of code
    //replaceImageURI(document.getElementById(sectionStrings[loopVariable]['originalImageID']).src, sectionStrings[loopVariable]['highresImageURI'], sectionStrings[loopVariable]['lowresImageURI']);
    // will return an error at this point
    dirtyImageCache[0]['image'].src = _IMGPATH + sectionStrings[0]['lowresImageURI'] + '.' + sectionStrings[0]['imageExtension']; 
    dirtyImageCache[1] = new Object();
    dirtyImageCache[1]['image'] = new Image();
    dirtyImageCache[1]['image'].src = _IMGPATH + sectionStrings[1]['lowresImageURI'] + '.' + sectionStrings[1]['imageExtension'];

    dirtyImageCache[2] = new Object();
    dirtyImageCache[2]['image'] = new Image();
    dirtyImageCache[2]['image'].src = _IMGPATH + sectionStrings[2]['lowresImageURI'] + '.' + sectionStrings[2]['imageExtension'];

/*---------------------------------------------------------------------------------- */
/* don't change this */
/*---------------------------------------------------------------------------------- */
function reduceImages() {
  // detect medium res.
  if (screen.width && screen.width <= 800 ) {
   
    for (var o = 0; o < sectionStrings.length; o++ ) {
      //document.getElementById(sectionStrings[o]['originalImageID']).src = _IMGPATH + sectionStrings[o]['lowresImageURI'] + '.' + sectionStrings[o]['imageExtension'];
      document.images[sectionStrings[o]['originalImageID']].height = 119;
      document.getElementById(sectionStrings[o]['section']).style.width = (document.getElementById(sectionStrings[o]['originalImageID']).width + 4) + 'px';
      document.getElementById(sectionStrings[o]['section']).style.height = (document.getElementById(sectionStrings[o]['originalImageID']).height + 4) + 'px';
      document.getElementById('contentVisual').style.left = '2%';
      //document.getElementById('kneoSplash').width = '600';
      //document.getElementById('kneoSplash').height = '180';

      //window['replaceImageforSections_' + o] = createImage ( sectionStrings[o]['originalImageID'], sectionStrings[o]['highresImageURI'], sectionStrings[o]['lowresImageURI']);
      //  if (!window['replaceImageforSections_' + o] ) { return; } 
    }

  // this is also called here because is not resolution-dependent
  //correctContentChildsMargins( );

  } else {
    // else we are in high res.
    // d. = this call the function must be deactivated because this funcion does not work anymore
    // with site redesign of the homepage
    //correctContentChildsMargins();
    // the call to the function below: this function is on library header-res.js but it's not used anymore, 
    // instead the stylesheet was changed.
    // this of course affects both resloutions, but changing header height with script makes an unwanted effect:
    // the height is increased after the page loads, and this is ugly. So both resolutions are affected,
    // and perhaps this is not very good for medium resolution, but there is no other solution at least by now.
    // increaseHeaderHeight();
  }

}

function createImage ( originalNodeID, fileName, newFileName ) {

  if (!document.getElementById(originalNodeID ) || document.getElementById(originalNodeID ).nodeName != "IMG" || !fileName || !newFileName ) { alert('fail at new image object'); return false; }

    var newImageNode = new Object();
    newImageNode['image'] = new Image();
    newImageNode['image'].src = replaceImageURI(document.getElementById(originalNodeID).src, fileName, newFileName);

    // IMPORTANT: register listener AS A OBJECT METHOD for the onload handler
    newImageNode['image'].onload = function ( ) { replaceNode( newImageNode ); 
                                                  adjustDependentBoxes ( newImageNode ); 
                                                  //restoreListeners ( newImageNode['distinctiveSubID'] ); 
                                                }

    newImageNode['width'] = newImageNode['image'].width;
    newImageNode['height'] = newImageNode['image'].height;
    // keep original node ID
    newImageNode['originalID'] = originalNodeID;
    // extract distinctive sub-string from string (this string indicates different sections)
    newImageNode['distinctiveSubID'] = originalNodeID.replace("Image", "");
    // store the string of the source image, to complete custom object
    newImageNode['source'] = newImageNode['image'].src.toString();

    return newImageNode;  
}

function replaceImageURI( completeURL, parseSubStr, newSubStr ) {
  if (!parseSubStr || typeof(parseSubStr) != "string" || !newSubStr || typeof(newSubStr) != "string" ) { return false; }
  // change names with medium res. image
  var exchange = completeURL.replace(parseSubStr, newSubStr);
  return exchange;
}

function replaceNode ( nodeImageObj ) {
    if (!nodeImageObj || typeof(nodeImageObj ) != "object" || !document.getElementById(nodeImageObj['distinctiveSubID'] + "Anchor") || !document.getElementById(nodeImageObj['distinctiveSubID'] + "Image") ) { return false; }

    // replace nodes and manipulate image nodes
    document.getElementById(nodeImageObj['distinctiveSubID'] + 'Anchor').removeChild(document.getElementById(nodeImageObj['distinctiveSubID'] + 'Anchor').getElementsByTagName('img')[0]);
    var newImageNode = document.createElement('IMG');
    newImageNode.setAttribute("src", nodeImageObj['source']);
    newImageNode.setAttribute("width", nodeImageObj['width']);
    newImageNode.setAttribute("height", nodeImageObj['height']);
    newImageNode.setAttribute("border", 0);
    // restoring the id re-apply original css rules, thus forcing the image to
    // be original high-res width. (!) solution: remove width information from original stylesheet 
    newImageNode.id = nodeImageObj['originalID'];

    // set actually the new node directly
    document.getElementById(nodeImageObj['distinctiveSubID'] + 'Anchor').appendChild(newImageNode);
}

function adjustDependentBoxes( nodeImageObj ) {
  if ( !nodeImageObj || !document.getElementById(nodeImageObj['distinctiveSubID']) || !document.getElementById(nodeImageObj['distinctiveSubID'] + "Desc") ) { return false; }

  var actParentBox = document.getElementById(nodeImageObj['distinctiveSubID']);
  var actDescriptionBox = document.getElementById(nodeImageObj['distinctiveSubID'] + "Desc");

  actParentBox.style.width = nodeImageObj['width'] + 4 + 'px';
  actParentBox.style.height = nodeImageObj['width'] + 4 + 'px';
  actParentBox.style.padding = '2px';

  actDescriptionBox.style.width = nodeImageObj['width'] + 'px';
  actDescriptionBox.style.top = '145px';

}

// restore (inline) listeners that are deleted when removing image nodes
function restoreListeners ( genericID ) {

    if (!genericID || typeof(genericID) != "string" || !document.getElementById(genericID + "Image") || !document.getElementById(genericID + "Desc") ) { return false; }
 
    document.getElementById(genericID + 'Image').onmouseover = function ( ) { document.getElementById(genericID + 'Desc').style.visibility = 'visible'; fadeText(genericID + 'Desc'); } 
    document.getElementById(genericID + 'Image').onmouseout = function ( ) { document.getElementById(genericID + 'Desc').style.visibility = 'hidden'; abortFade(); }
 
}

// center home page elements
function correctContentChildsMargins() {
  // block elements obj
  // parent block
  var contentCore = document.getElementById('contentCore');
  // main nav block
  var contentNav = document.getElementById('contentNav');
  // visual block with images
  var contentVisual = document.getElementById('contentVisual');
  // element obj widths
  var contentCoreWidth = contentCore.offsetWidth;
  // sum of widths for child elements in parent block
  var contentCoreElementsWidth = contentNav.offsetWidth + contentVisual.offsetWidth;
  // calculate position to apply to the left
  var marginDisplay = contentCoreWidth - contentCoreElementsWidth;
  var marginToApply = marginDisplay / 2;
    // if position is large enough (high res mainly), apply
    // original line was: >= 25, but this is only for high res, it must work also in medium res.
    if (marginToApply > 5 ) {
      // do not apply this line below because it moves the nav bar to the right and this is not wanted
      //contentNav.style.left = marginToApply.toString() + 'px';
      contentVisual.style.left = (marginToApply + 20).toString() + 'px';
    }
}

// remove or edit this listener because it overrides any other listener set before in script or html
//window.onload = reduceImages;