//<script type="text/javascript">
/**************************************
preload images for use in the mouseover
**************************************/
//if( document.images ) { //check that changing images is supported
//  var overVariableImg = new Image(); overVariableImg.src = "LOCATION_OF_MOUSEOVER_IMAGE";
//  var outVariableImg = new Image(); outVariableImg.src = "LOCATION_OF_MOUSEOUT_IMAGE";
//}
//</script>
  function LoadImages()
   {
      var im = new Image();
      im.src = "1/1.jpg";
   }
function onMouseOver1()
  {
 document.getElementById("div1").style.height="359px";
 document.getElementById("div1").style.width="499px";
 document.getElementById("img1").style.height="359px";
 document.getElementById("img1").style.width="499px";
 document.getElementById("divMainTop").style.height="360px";
 document.getElementById("divMainBottom").style.height="200px";
 document.getElementById("div3").style.marginTop="0px";
 document.getElementById("div4").style.marginTop="0px";
  }   
function onMouseOut1()
  {
 document.getElementById("div1").style.backgroundColor="white"; // Works
 document.getElementById("div1").style.height="200px";
 document.getElementById("div1").style.width="300px";
 document.getElementById("img1").style.height="200px";
 document.getElementById("img1").style.width="300px";
 document.getElementById("divMainTop").style.height="280px";
 document.getElementById("divMainBottom").style.height="280px";
 document.getElementById("div3").style.marginTop="80px";
 document.getElementById("div4").style.marginTop="80px";
 }      
function onClick1()
  {
 iCurrentSeasonNum = 0; // 1
 iCurrentImgNum = 0;    // it will start at 1
 ShowSelectionScreen();
 ShowNextImg();
 ShowImages();
  }
function onMouseOver2()
  {
 document.getElementById("div2").style.height="359px";
 document.getElementById("div2").style.width="499px";
 document.getElementById("div2").style.left="301px";
 document.getElementById("img2").style.height="359px";
 document.getElementById("img2").style.width="499px";
 document.getElementById("divMainTop").style.height="360px";
 document.getElementById("divMainBottom").style.height="200px";
 document.getElementById("div3").style.marginTop="0px";
 document.getElementById("div4").style.marginTop="0px";
  }   
function onMouseOut2()
  {
 document.getElementById("div2").style.backgroundColor="white"; // Works
 document.getElementById("div2").style.height="200px";
 document.getElementById("div2").style.width="300px";
 document.getElementById("img2").style.height="200px";
 document.getElementById("img2").style.width="300px";
 document.getElementById("divMainTop").style.height="280px";
 document.getElementById("divMainBottom").style.height="280px";
 document.getElementById("div3").style.marginTop="80px";
 document.getElementById("div4").style.marginTop="80px";
  }      
function onClick2()
  {
 iCurrentSeasonNum = 1; // 2
 iCurrentImgNum = 0;    // it will start at 1
 ShowSelectionScreen();
 ShowNextImg();
 ShowImages();
  }
function onMouseOver3()
  {
 document.getElementById("div3").style.height="359px";
 document.getElementById("div3").style.width="499px";
 document.getElementById("div3").style.left="1px";
 document.getElementById("img3").style.height="359px";
 document.getElementById("img3").style.width="499px";
 document.getElementById("divMainTop").style.height="200px";
 document.getElementById("divMainBottom").style.height="360px";
 document.getElementById("div4").style.marginTop="160px";
 document.getElementById("div3").style.marginTop="0px";
  }   
function onMouseOut3()
  {
 document.getElementById("div3").style.backgroundColor="white"; // Works
 document.getElementById("div3").style.height="200px";
 document.getElementById("div3").style.width="300px";
 document.getElementById("img3").style.height="200px";
 document.getElementById("img3").style.width="300px";
 document.getElementById("divMainTop").style.height="280px";
 document.getElementById("divMainBottom").style.height="280px";
 document.getElementById("div4").style.marginTop="80px";
 document.getElementById("div3").style.marginTop="80px";
  }      
function onClick3()
  {
 iCurrentSeasonNum = 2; // 3
 iCurrentImgNum = 0;    // it will start at 1
 ShowSelectionScreen();
 ShowNextImg();
 ShowImages();
  }
function onMouseOver4()
  {
 document.getElementById("div4").style.height="359px";
 document.getElementById("div4").style.width="499px";
 document.getElementById("div4").style.left="301px";
 document.getElementById("img4").style.height="359px";
 document.getElementById("img4").style.width="499px";
 document.getElementById("divMainTop").style.height="200px";
 document.getElementById("divMainBottom").style.height="360px";
 document.getElementById("div4").style.marginTop="0px";
 document.getElementById("div3").style.marginTop="160px";
  }   
function onMouseOut4()
  {
 document.getElementById("div4").style.backgroundColor="white"; // Works
 document.getElementById("div4").style.height="200px";
 document.getElementById("div4").style.width="300px";
 document.getElementById("img4").style.height="200px";
 document.getElementById("img4").style.width="300px";
 document.getElementById("divMainTop").style.height="280px";
 document.getElementById("divMainBottom").style.height="280px";
 document.getElementById("div3").style.marginTop="80px";
 document.getElementById("div4").style.marginTop="80px";
  }      
function onClick4()
  {
 iCurrentSeasonNum = 3; // 4
 iCurrentImgNum = 0;    // it will start at 1
 ShowSelectionScreen();
 ShowNextImg();
 ShowImages();
  }
/*******************************************************************************************************/

//first, tell the browsers to react to the event
if( document.captureEvents && Event.KEYUP ) {
  //remove this part if you do not need Netscape 4 to work
  document.captureEvents( Event.KEYUP );
}
/* this next line tells the browser to detect a keyup
event over the whole document and when it detects it,
it should run the event handler function 'alertkey' */
document.onkeyup = alertkey;
/*******************************************************************************************************/
//now create the event handler function to process the event
function alertkey(e) {
  if( !e ) {
    //if the browser did not pass the event information to the
    //function, we will have to obtain it from the event register
    if( window.event ) {
      //Internet Explorer
      e = window.event;
    } else {
      //total failure, we have no way of referencing the event
      return;
    }
  }
  if( typeof( e.keyCode ) == 'number'  ) {
    //DOM
    e = e.keyCode;
  } else if( typeof( e.which ) == 'number' ) {
    //NS 4 compatible
    e = e.which;
  } else if( typeof( e.charCode ) == 'number'  ) {
    //also NS 6+, Mozilla 0.9+
    e = e.charCode;
  } else {
    //total failure, we have no way of obtaining the key code
    return;
  }
  
  // k=75, esc=27, <-=37, ->=39
  if(e == 27)
  {
    //window.alert('The key pressed has keycode ' + e + ' and is key ' + String.fromCharCode( e ) );
 HideSelectionScreen();
  }
  else if(e == 39)
  {
    ShowNextImg();
  }
  else if(e == 37)
  {
    ShowPreviousImg();
  }
}
/*****************************************************************************************************************/
var myInterval;
var viewPortWidth;
var viewPortHeight;
var iCurrentSeasonNum; // 1-4
var iCurrentImgNum = 0;
var astrWorkingDirectory = new Array();  // 1, 2, 3, 4
astrWorkingDirectory[0] = "1";
astrWorkingDirectory[1] = "2";
astrWorkingDirectory[2] = "3";
astrWorkingDirectory[3] = "4";
var aiImgMax = new Array(); // count pics ...aiImgMax.length
aiImgMax[0] = "13";
aiImgMax[1] = "15";
aiImgMax[2] = "14";
aiImgMax[3] = "15";
function GetWindowSize()
{
  //Provided by most browsers, but importantly, not Internet Explorer.
  //window.innerHeight/Width
  //Provided by many browsers, including Internet Explorer.
  viewPortHeight = document.body.clientHeight;
  viewPortWidth = document.body.clientWidth;
  alert("document.body.clientWidth=" + viewPortWidth + ". document.body.clientHeight=" + viewPortHeight + ".");
  //Provided by most DOM browsers, including Internet Explorer.
  viewPortHeight = document.documentElement.clientHeight;
  viewPortWidth = document.documentElement.clientWidth;
  alert("document.documentElement.clientWidth=" + viewPortWidth + ". document.documentElement.clientHeight=" + viewPortHeight + ".");
}
function ShowImages()
  { 
     myInterval = window.setInterval("ShowNextImg()",4000);
  //window.setTimeout(function (a,b) {clearInterval(myInterval);},3500);
  }
function ShowNextImg()
  { 
    iCurrentImgNum++;
 if(iCurrentImgNum > aiImgMax[iCurrentSeasonNum])
   iCurrentImgNum = 1; // images start at 1
 document.getElementById("imgBigBase").src = astrWorkingDirectory[iCurrentSeasonNum] + "/" + iCurrentImgNum + ".jpg" ;
 var str = astrWorkingDirectory[iCurrentSeasonNum] + "/" + iCurrentImgNum + ".jpg" ;
 //var sss = 1;
 //document.getElementById("bodyThe").background = astrWorkingDirectory[iCurrentSeasonNum] + "\\" + iCurrentImgNum + ".JPG" ; // no work
  }
  
function ShowPreviousImg()
  { 
    iCurrentImgNum--;
 if(iCurrentImgNum < 1)
   iCurrentImgNum = aiImgMax[iCurrentSeasonNum]; // images start at 1
 document.getElementById("imgBigBase").src = astrWorkingDirectory[iCurrentSeasonNum] + "/" + iCurrentImgNum + ".jpg" ;
 var str = astrWorkingDirectory[iCurrentSeasonNum] + "/" + iCurrentImgNum + ".jpg" ;
  }
  
function ShowSelectionScreen()
  { 
    document.getElementById("divMainTop").style.display="none";
 document.getElementById("divMainBottom").style.display="none";
    document.getElementById("imgBigBase").style.display="block";
    ShowNextImg();
  }
function HideSelectionScreen() 
  {
    clearInterval(myInterval);
 document.getElementById("imgBigBase").style.display="none";
 document.getElementById("divMainTop").style.display="block";
 document.getElementById("divMainBottom").style.display="block";
  }
function onMouseClickImgMain() // HideSelectionScreen()   might be better to make it move next
  {
    ShowNextImg();
  }
function MakeImgBtn()
{
    var divParent = document.getElementById('div_body');
 var newImgBtnNext = document.createElement('img');
 newImgBtnNext.setAttribute('id','imgBtnNext');
 newImgBtnNext.setAttribute('src','images/NEXT-TAB.png');
 //newImgBtnNext.setAttribute('class','putButton');
 newImgBtnNext.setAttribute('className','putButton'); // we dont care about this
 
 //newImgBtnNext.setAttribute("style","{ position:'absolute',  top:'150px', left:'820px', width:'35px', height:'150px'}");
 //newImgBtnNext.innerHTML = "src='images/NEXT-TAB.png'"; //.... this is just test
    divParent.appendChild(newImgBtnNext);
    /*var imgBtnNext = document.createElement( 'img', {
        id:        'imgBtnNext',
        className: 'body-text',
  src:'images/NEXT-TAB.png',
        style:     {
      position:'absolute',
   top:'150px',
   left:'820px',
   width:'35px',
   height:'150px'
        },
        events:    {
            mouseover: function(){ this.style.backgroundColor="red";   },
            mouseout:  function(){ this.style.backgroundColor="white"; }
        }
    });*/
 /*$("#div1").hover(
   function () {onMouseOver1();}, 
   function () {onMouseOut1();}
   );*/
   
 /*  
   var xLeft;
   var yTop=$("#imgBtnNext").css("top"); 
   alert("Top of btn=" + yTop + "."); 
*/
/***   MakeImgBtn(); // this is created, so move it around
  
 document.getElementById("imgBtnNext").style.position="absolute";  // 
 document.getElementById("imgBtnNext").style.left="300px";  // works
 document.getElementById("imgBtnNext").style.top="100px";  // works
// alert("Continue!!!!!");   
// document.getElementById("imgBtnNext").style.left="300px";  // works
 ***/
 
 
}