var picNumber = 0;
var picTimer;
var imageDir = "images/imagerotator/";
var picMax = 0;
var imgPic = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgTitle = new Array();
var pauseFlag = "N";
var xmlhttp;

xspManageEvent(window, "load", setUp);

function setUp()
{
  var rotator = document.getElementById("imgrotator");
  xspManageEvent(rotator, "mouseover", pauseImage);
  xspManageEvent(rotator, "mouseout", unpauseImage);
  requestImageData();
}

function requestImageData()
{
  if(!xmlhttp) 
    xmlhttp = xspGetXmlHttpRequest();
  if(!xmlhttp)
    return;
  
  var url = "includes/imagelist.php?a=1";
  xmlhttp.open('GET', url, true);
  xmlhttp.onreadystatechange = processImageDataResponse;
  xmlhttp.send(null);
}

function processImageDataResponse()
{
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
  {
    //alert(xmlhttp.responseText);
    eval("var imgdta = " + xmlhttp.responseText);
    loadImageData(imgdta);
  }
}

function loadImageData(dta)
{
  for(i=0;i<dta.txt.length;i++)
  {
    imgText[i] = dta.txt[i];
  }
  for(i=0;i<dta.titles.length;i++)
  {
    imgTitle[i] = dta.titles[i];
  }
  for(i=0;i<dta.links.length;i++)
  {
    imgLink[i] = dta.links[i];
  }
   for(i=0;i<dta.pics.length;i++)
  {
    imgPic[i]=new Image();
    imgPic[i].src=imageDir + dta.pics[i];
  }
  picMax = (dta.pics.length-1);
  showFirstItem();
}

function showFirstItem()
{
  document.getElementById("rotimgcontainer").innerHTML = "<a id ='rotImageAnchor' href='http://www.xemax.com/"+imgLink[0]+"'><img id='rotimage' height='300' width='400' src='" + imgPic[0].src + "' /></a>";
  document.getElementById("imgtext").innerHTML = "<span class='titleprimary1'>"+imgTitle[0].toUpperCase()+"</span>"
    +imgText[0]+"<a href='http://www.xemax.com/"+imgLink[0]+"' class='primary2med'>More Info...";
  startTimer();
}

function startTimer()
{
  picTimer = setTimeout(changePicture, 5000);
}

function pauseImage()
{
  clearTimeout(picTimer);
  pauseFlag = "Y";
}

function unpauseImage()
{
  pauseFlag = "N";
  startTimer();
}

function imageBack()
{
  if(picNumber<1)
   picNumber=picMax;
  else
   picNumber--;
  var curimg = imgPic[picNumber];
  var curtext = picNumber;
  blendimage("rotimgcontainer", "rotimage", curimg, 500);
  blendtext("rotTextTop", curtext, 500);
  if(pauseFlag=="N")
  {
    clearTimeout(picTimer);
    startTimer();
  }
}

function imageForward()
{
  changePicture();
}

function changePicture()
{
  if(picNumber>=picMax)
    picNumber=0;
  else
    picNumber++;
  var curimg = imgPic[picNumber];
  var curtext = picNumber;
  blendimage("rotimgcontainer", "rotimage", curimg, 500);
  blendtext("rotTextTop", curtext, 500);
  //document.getElementById("info").innerHTML = "PicNumber: " + curimg + "<br />Text: " + curtext;
  if(pauseFlag=="N")
  {
    clearTimeout(picTimer);
    startTimer();
  }
}

function blendtext(divid, txt, millisec)
{
  var trantime = millisec/2;
 
  var id = divid;
  opacity(id, 100, 0, 250);
  
  setTimeout("step2(" + txt + ")", 250);
  //document.getElementById("imgrottext").innerHTML = sampleText[cnt-1];
  //opacity(id, 50, 100, trantime);
}

function step2(txt)
{
  document.getElementById("rotImageAnchor").href = "http://www.xemax.com/"+imgLink[txt];
  document.getElementById("rotTextTop").innerHTML = "<span class='titleprimary1'>"+imgTitle[txt].toUpperCase()+"</span>"
    +imgText[txt]+"<a href='http://www.xemax.com/"+imgLink[txt]+"' class='primary2med'>More Info...</a>";
  opacity("rotTextTop", 0, 100, 250);
}

function opacity(id, opacStart, opacEnd, millisec) { 
    //speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i--) { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } else if(opacStart < opacEnd) { 
        for(i = opacStart; i <= opacEnd; i++) 
            { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } 
} 

function blendimage(divid, imageid, imagefile, millisec) { 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 
     
    //set the current image as background 
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")"; 
   
    //make image transparent 
    changeOpac(0, imageid); 
     
    //make new image 
    //document.getElementById(imageid).src = imageDir + imagefile; 
    document.getElementById(imageid).src = imagefile.src; 
    
    //fade in image 
    for(i = 0; i <= 100; i++) { 
        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed)); 
        timer++; 
    } 
} 

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
}