window.onresize = doResize;

function doResize()
{
  // alert("The window has been resized!");
  changeBannerSize(1);
}

function changeBannerSize(stretchTag)
{
  // stretchTag is the array ref of the image which can be expanded
  var windowSize = getWindowSize();
  var windowWidth = windowSize.windowWidth, windowHeight = windowSize.windowHeight;
  var imageNewWidth = 1, imageNewHeight = 1;
  if (windowWidth > 1024){
    imageNewWidth = 1.0;
    imageNewHeight = 1.0;	
  } else if (windowWidth > 800){
    imageNewWidth = 0.9;
    imageNewHeight = 0.9;
  } else {
    imageNewWidth = 0.8;
    imageNewHeight = 0.8;	
  }
  // window.alert( 'New Banner Size = ' + imageNewWidth + ' * ' + imageNewHeight );
  
  var bannerSize = getBannerSize();
  var bannerWidth = bannerSize.bannerWidth, bannerHeight = bannerSize.bannerHeight;
  var newBannerWidth = bannerWidth * imageNewWidth;
  var newBannerHeight = bannerHeight * imageNewHeight;  
  // calculate new pad width
  var padWidth = windowWidth - newBannerWidth, padHeight = 0;
  
  for (i in bannerImages) {
  	changeImageSize(i, imageNewHeight, imageNewWidth, stretchTag, padHeight, padWidth);  
  }

}

function getWindowSize() 
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
	// It seems these browsers include the scroll bar so...
	myWidth -= 17;
	// window.alert("Non-IE");
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
	// window.alert("IE 6+");
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
	// window.alert("IE 4 compatible");
  }
  // window.alert( 'Window size = ' + myWidth + ' * ' + myHeight );
  return {windowWidth : myWidth, windowHeight : myHeight};
}

function changeImageSize(imageTag, height, width, stretchTag, padHeight, padWidth)
{

  var imageSize = getImageSize(bannerImages[imageTag]);
  var imageWidth = imageSize.imageWidth, imageHeight = imageSize.imageHeight;
  document.getElementById(bannerImages[imageTag].imageId).height = imageHeight * height;
  document.getElementById(bannerImages[imageTag].imageId).width  = imageWidth * width;
  if (imageTag == stretchTag)
  {
  	document.getElementById(bannerImages[imageTag].imageId).height += padHeight;
    document.getElementById(bannerImages[imageTag].imageId).width  += padWidth;
  }
}

function getBannerSize()
{
  var imageSize, imageWidth, imageHeight, myWidth = 0, myHeight = 0;
  for (i in bannerImages) {
    imageSize = getImageSize(bannerImages[i]);
    imageWidth = imageSize.imageWidth, imageHeight = imageSize.imageHeight;
	myWidth += imageWidth;
    myHeight += imageHeight;
  }
  // window.alert( 'Banner Size = ' + myWidth + ' * ' + myHeight );
  return {bannerWidth : myWidth, bannerHeight : myHeight};
}

function getImageSize(picName)
{
  var myWidth = 0, myHeight = 0;
  myWidth  = picName.width;
  myHeight = picName.height;
  // window.alert ('Image size = '+ myWidth + ' * ' + myHeight);
  return {imageWidth : myWidth, imageHeight : myHeight};
} 

function getImgSize(imgSrc)
{
  var newImg = new Image();
  newImg.src = imgSrc;
  var myWidth  = newImg.width;
  var myHeight = newImg.height;
  // window.alert ('Image size = '+ myWidth + ' * ' + myHeight);
  return {imageWidth : myWidth, imageHeight : myHeight};
}
   
//preload image files
  var bannerImages = new Array();
  bannerImages[0] = new Image();
  bannerImages[0].src = "images/banner_01.jpg";
  bannerImages[0].imageId = "banner_01";
  bannerImages[1] = new Image();
  bannerImages[1].src = "images/banner_02.jpg";
  bannerImages[1].imageId = "banner_02";
  bannerImages[2] = new Image();
  bannerImages[2].src = "images/banner_03.jpg";
  bannerImages[2].imageId = "banner_03";