//*****************************************************************************
var gImageArray = [];
var gImagePreload = [];
var gCurrentIndex = 0;

var MainDIV = 0;
var gFadeTimeout = 75;
var gRotateTimeout = 2000;
var gSmallIndex = 0;

var gFrontDIV = 0;
var gBackDIV = 0;
var gPrevOption = false;

var gIsLoading = false;
var gLoadingDiv = false;
var gLoadingContent = false;
var gPendingFade = false;
var gImages = false;
var gCurrentTarget = false;

//*****************************************************************************
function parseImageNames(category, rawNames) {
  if(rawNames) {
    var names = rawNames.split(/\s+/);
    
    gImageArray = [];
    gImagePreload = [];
    for(var i = 0; i < names.length; i++) {
      var imageName = names[i].replace(/^\s+|\s+$/g, '');

      if(imageName.length > 1) {
        var tempName = category + "/" + imageName;
        gImageArray[i] = tempName;
        gImagePreload[i] = new Image(); 
        gImagePreload[i].src = gImageArray[i]; 
      }
    }
    
    if(gImageArray.length > 0) {
            
      showPrevButton(false);
      showNextButton(true);
      
      loadImage(gCurrentTarget + "Fade", gCurrentIndex);
      loadImage(gCurrentTarget + "Next", gCurrentIndex + 1, true);
      gCurrentIndex = 1;
      
      gFrontDIV = document.getElementById(gCurrentTarget);
      gFrontDIV.style.opacity = 1.0;
      gBackDIV = document.getElementById(gCurrentTarget + "Fade"); 
      PortfolioFader();    
    }        
  } 
}
//*****************************************************************************

function loadImageSet(setName, targetID) {
  gImageArray = [];
  gCurrentIndex = 0;
  gCurrentTarget = targetID;
  getImageList(setName);
}
//*****************************************************************************
function swapClass(object, newClassName) {
  if(object) {
    object.className = newClassName;
  }
}
//*****************************************************************************
function imgLoaded() {
  if(gIsLoading) {
    gIsLoading = false;
    
    if(gPendingFade) {
      gLoadingDiv.innerHTML = gLoadingContent;
      gPendingFade = false;
      PortfolioFader();
    }
  }
}
//*****************************************************************************
function optionHover(option, hoverValue) {
  if(option) {
    if(option.id != gPrevOption) {
      if(hoverValue) {
        swapClass(option, "PorfolioMenuHover");
      } else {
        swapClass(option, "PorfolioMenu");
      }
    }
  }
}
//*****************************************************************************
function optionSelect(optionID) {  
  if(optionID) {
    showDiv("PortfolioEmail", false);
    showDiv("PortfolioStart", false);
    showDiv("PortfolioMask",  true);
    showDiv("SampleBox",  true);
    showDiv("BackgroundBox",  true);
    
    if(gPrevOption) {      
      var prevOption = document.getElementById(gPrevOption);
      if(prevOption) {
        swapClass(prevOption, "PorfolioMenu");
      }
    }
    gPrevOption = optionID;
    var theOption = document.getElementById(optionID);
    swapClass(theOption, "PorfolioMenuHover");
  }   
}
//*****************************************************************************
function showPortfolio(category, target) {
  showDiv();
  gCurrentTarget = target;
  loadImageSet(category, gCurrentTarget);
}
//*****************************************************************************
function showPortfolioEmail() {
  showDiv("PortfolioEmail", true);
  showDiv("PortfolioStart", false);  
  showDiv("PortfolioMask",  false);
  showDiv("SampleBox",  false);
  showDiv("BackgroundBox",  false);

}
//*****************************************************************************
//*****************************************************************************
function loadImage(divID, index, buffer) {

  var divObj = document.getElementById(divID);
  
  if(divObj) {  
    /*
    if(buffer) {
      var tempImage = new Image();
      tempImage.onload = function() { imgLoaded(); };
      gLoadingContent = "<img src='Images/" +  gImageArray[index] + "'>";      
      gLoadingContent = divObj;
      gIsLoading = true;
      tempImage.src = gImageArray[index];
    } else {
    */
      divObj.innerHTML = "<img src='Images/" +  gImageArray[index] + "'>";
    //}
  }
}

//*****************************************************************************
function prevImage(divID) {
  if(gCurrentIndex > 0) {
    var nextSample = document.getElementById(divID + "Next");
    gFrontDIV = document.getElementById(divID);
    gFrontDIV.style.opacity = 1.0;
    gBackDIV = document.getElementById(divID + "Fade"); 
    var prevSample = document.getElementById(divID + "Prev");
    if(gFrontDIV && prevSample) {
      nextSample.innerHTML = gFrontDIV.innerHTML;
      gBackDIV.innerHTML = prevSample.innerHTML;
      if(gIsLoading) {
        gPendingFade = true;
      } else {
        PortfolioFader();
      }
      showNextButton(true);
      gCurrentIndex--;
      if(gCurrentIndex > 0) {
        loadImage(divID + "Prev", gCurrentIndex - 1, true);
      } else {
        showPrevButton(false);
      }
    }
  }
}
//*****************************************************************************
function nextImage(divID) {
  if(gCurrentIndex < gImageArray.length) {
    var prevSample = document.getElementById(divID + "Prev");
    gFrontDIV = document.getElementById(divID);
    gFrontDIV.style.opacity = 1.0;
    var nextSample = document.getElementById(divID + "Next");
    gBackDIV = document.getElementById(divID + "Fade"); 
    if(gFrontDIV && nextSample) {
      prevSample.innerHTML = gFrontDIV.innerHTML;
      gBackDIV.innerHTML = nextSample.innerHTML;
      if(gIsLoading) {
        gPendingFade = true;
      } else {
        PortfolioFader();
      }
      showPrevButton(true);
      gCurrentIndex++;
      if(gCurrentIndex < gImageArray.length) {
        loadImage(divID + "Next", gCurrentIndex, true);        
      } else {
        showNextButton(false);
      }
    }
  }
}
//*****************************************************************************
function showDiv(divID, shouldBeSeen) {
  var buttonDiv = document.getElementById(divID);
  if(buttonDiv) {
    if(shouldBeSeen) {
      buttonDiv.style.visibility = "visible";
    } else {
      buttonDiv.style.visibility = "hidden";
    }
  }
}
//*****************************************************************************
function showPrevButton(shouldBeSeen) {
  showDiv("PrevImage", shouldBeSeen);
}
//*****************************************************************************
function showNextButton(shouldBeSeen) {
  showDiv("NextImage", shouldBeSeen);
}
//*****************************************************************************
function EBFadeBox(mFrontDIV, mBackDIV) {
  this.mTimeout = 100;
  this.mFrontDIV = document.getElementById(mFrontDIV);
  if(this.mFrontDIV) {
    this.mFrontDIV.style.opacity = 1.0;

    this.mBackDIV = document.getElementById(mBackDIV);  
    if(this.mBackDIV) {        
      //this.mBackDIV.style.position = "absolute";
      // Be sure that the front is in front. :D      
      this.mFrontDIV.style.zIndex = this.mBackDIV.style.zIndex + 1;
      
      // Make sure that they line up.
      this.mBackDIV.style.top = this.mFrontDIV.getBoundingClientRect().top;
      this.mBackDIV.style.left = this.mFrontDIV.getBoundingClientRect().left;
      //this.mBackDIV.clientWidth = this.mFrontDIV.clientWidth;
      //this.mBackDIV.clientHeight = this.mFrontDIV.clientHeight;
      
      this.mBackDIV.style.opacity = 0.0;
      this.mBackDIV.style.visibility = "visible";
     
    }
  }  
}
//*****************************************************************************
function EBTransformDIV() {
  if(MainDiv) {
     MainDiv.transform();
   }
 }
 //*****************************************************************************
function PortfolioTransform(mSourceDIV, mFrontDIV, mBackDIV) {
  gTimeout = 100;
  sourceDIV = document.getElementById(mSourceDIV);
  gFrontDIV = document.getElementById(mFrontDIV);
  gBackDIV = document.getElementById(mFrontDIV);
  
  if(gFrontDIV && gBackDIV && gSourceDIV) {
    gBackDiv.innerHTML == sourceDIV.innerHTML;
    if(gIsLoading) {
      gPendingFade = true;
    } else {
      PortfolioFader();
    }
  }
}
//*****************************************************************************
function PortfolioFader() {
  var temp = false;
  if(gFrontDIV) {
    if(gFrontDIV.style.opacity > 0.1) {
      temp = Number(gFrontDIV.style.opacity) - 0.1;      
      gFrontDIV.style.opacity = temp;
      gFrontDIV.style.filter = "alpha(opacity=" +  Number(temp * 100) + ");"
      setTimeout('PortfolioFader();', gFadeTimeout);
    } else {
      gFrontDIV.style.opacity = 0.0;
      var tempContent = gFrontDIV.innerHTML;
      gFrontDIV.innerHTML = gBackDIV.innerHTML;
      gFrontDIV.style.opacity = 1.0;
      gFrontDIV.style.filter = "alpha(opacity=100);"
      gBackDIV.style.visibility = "hidden";
      gBackDIV.innerHTML = tempContent;
      gBackDIV.style.visibility = "visible";
      gFrontDIV = 0;
      gBackDIV = 0;
    }
  }  
}
//*****************************************************************************
function setUpSmallRotate() {
  gImageArray = [];
  
  //gSmallIndex = 2;
  gCurrentTarget = "SmallPic";
  getImageList("SmallImages");
    
  //loadImage("SmallPic", gSmallIndex);
  //loadImage("SmallPicHidden", gSmallIndex);
  //loadImage("SmallPicFade", gSmallIndex+1);
  
  setTimeout('RotateImage();', gRotateTimeout);  
}
//*****************************************************************************

function RotateImage() {
  // Setup for fade
  var HiddenDIV = document.getElementById("SmallPicHidden");
  gFrontDIV = document.getElementById("SmallPic");
  
  gFrontDIV.style.opacity = 1.0;  
  gBackDIV = document.getElementById("SmallPicFade"); 
  gBackDIV.innerHTML = HiddenDIV.innerHTML;
  
  //Do so
  PortfolioFader();
  // Queue up next (timeout hides load if needed.
  gSmallIndex++;
  if(gSmallIndex >= gImageArray.length - 1) {
    gSmallIndex = 0;
  }
  loadImage("SmallPicHidden", gSmallIndex);
  setTimeout('RotateImage();', gRotateTimeout);  
}
//*****************************************************************************
function trimString(value) {
  var result = "";
  return result;  
}
//*****************************************************************************
function getImageList(category) {
  var http_request = false;
  // "http://localhost:8080/MiscSites/JohnsonDesign/Images/" + 
  var feed = "Images/" + category + "/images.idx";
  if(window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if(http_request.overrideMimeType) {
      http_request.overrideMimeType('text/plain');
    }
  } else if (window.ActiveXObject) { // IE
    try {
       http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
  }

  try {    
    http_request.open("GET", feed); //, false, null, null);
  } catch(eBoom) {
    var frog = eBoom.toString(); 
  }
  http_request.onreadystatechange = function()
  {
    if(http_request.readyState == 4 
         && http_request.status == 200) {
      parseImageNames(category, http_request.responseText);
    }
  }
  http_request.send(null);  
}
//*****************************************************************************/