/**************************************************
* picRotatorJScript.js
* Rodrigo Neri
* October 03, 2008
**************************************************/

var fadingCount = 0;
var imageIndexCount = 1;

var theImage;
var theImage2;
var theImageDiv;
var theImage2Div;
                                            
var tbWidth = 102; //fixed toolbar width
var tbHeight = 24; //fixed toolabar height
var toolBar;

var rotationFlag = 0; //'0' is slideshow is running '1' is not

var pictureFlag = 1; // rotate between the picture in the front and the picture in the back
var nextOrPrevDelayFlag = 0; // changes the direction of the picture
                             // 0 will move forward and 1 will move 1 picture backward                             
var picLocation = "m-imgs/";
var rotationSpeed = "90";
var totalNumOfImgs = 8;
var totalLinksCount = 8;

var myLinks = new Array();

myLinks[0] ="iphonemyh_1.png";
myLinks[1] ="iphonemyh_2.png";
myLinks[2] ="iphonemyh_3.png";
myLinks[3] ="iphonemyh_4.png";
myLinks[4] ="iphonemyh_5.png";
myLinks[5] ="iphonemyh_6.png";
myLinks[6] ="iphonemyh_7.png";
myLinks[7] ="iphonemyh_8.png";


/* adds an Event, used for the loadToolBar and 
make sure that the loadToolBar function is called 
on load. 
*/
function addEvent(obj, evType, fn)
{ 
 if (obj.addEventListener)
 { 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } 
 else if (obj.attachEvent)
 { 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } 
 else 
 { 
   return false; 
 } 
}

/* This function takes care of the images rotation
when the picture1 fades out it puts that picture behind picture2
and changes picture1 URL, it also takes care of the direction of the
rotation if it is backward or forward
*/
function fadeOut()
{
  if(rotationFlag == 0)
  {  
      theImage = document.getElementById("myPic");
      theImage2 = document.getElementById("myPic2");  
      //theImageURL = document.getElementById("myPicURL");
      //theImage2URL = document.getElementById("myPic2URL"); 
      theImageDiv = document.getElementById("myPicDiv");
      theImage2Div = document.getElementById("myPic2Div");  
      theblankImg = document.getElementById("blankImg");
      
      theImage.onload = "";  // setting to empty because if not theImage it will keep reloading

      if(fadingCount <= 0)
      {
        fadingCount = 12;        
      
        if(pictureFlag == 1)
        {                   
          if(nextOrPrevDelayFlag == 0) // moves forward
          {
            theImageDiv.style.zIndex = 4;   // set to the image1 to be behind the one that is comming
            theImage2Div.style.zIndex = 10; // set the image2 to be up front
            setOpacity(theImage, 120);   
            setOpacity(theImageDiv, 120);              
            pictureFlag = 2;            
          
            // modify the URL of the picture that was faded to the next picture's URL 
            theImage.src = picLocation + myLinks[imageIndexCount]; 
            //theImageURL.href = myLinksURL[imageIndexCount];
            imageIndexCount++; 
            
            //after the last image it changes the index back to the first one
            if(imageIndexCount >= totalNumOfImgs)
            {
              imageIndexCount = 0;
            }            
               
          }
          else //moves backward
          {
            nextOrPrevDelayFlag = 0;
            
            theImageDiv.style.zIndex = 4;   // set to the image1 to be behind the one that is comming
            theImage2Div.style.zIndex = 10; // set the image2 to be up front
            setOpacity(theImage, 120); 
            setOpacity(theImageDiv, 120);  
            pictureFlag = 2;
          }
        }
        else
        {                   
          if(nextOrPrevDelayFlag == 0) //moves forward
          {
            theImage2Div.style.zIndex = 4; // set to the image2 to be behind the one that is comming
            theImageDiv.style.zIndex = 10; // set the image to be up front
            setOpacity(theImage2, 120);
            setOpacity(theImage2Div, 120);              
            pictureFlag = 1;
            
            // modify the URL of the picture that was faded to the next picture's URL 
            theImage2.src = picLocation + myLinks[imageIndexCount];
            //theImage2URL.href = myLinksURL[imageIndexCount];          
            imageIndexCount++; 
            
            //after the last image it changes the index back to the first one
            if(imageIndexCount >= totalNumOfImgs)
            {
              imageIndexCount = 0;
            }            
          }
          else //moves backward
          {
            nextOrPrevDelayFlag = 0; 
            
            theImage2Div.style.zIndex = 4; // set to the image2 to be behind the one that is comming
            theImageDiv.style.zIndex = 10; // set the image to be up front
            setOpacity(theImage2, 120);
            setOpacity(theImage2Div, 120);              
            pictureFlag = 1;     
          }
        }        
              
        //changing the pictures 
        setTimeout("delayFade()", 50);  
        return;
      }
      else
      {
        // this portion of the code takes care of the fading of the picture, 
        // based on the fadingCount, which handles the opacity
      
        fadingCount--;
        if(pictureFlag == 1)
        {
           setOpacity(theImage, fadingCount*10);
           setOpacity(theImageDiv, fadingCount*10);               
        }
        else
        {
           setOpacity(theImage2, fadingCount*10); 
           setOpacity(theImage2Div, fadingCount*10);             
        }
        setTimeout("fadeOut()", 50);
      }
  }
}


/*
this function takes care of the opacity on both IE and Firefox,
either browser just ignore the other one's opacity change call.
*/
function setOpacity(obj, opacity)
{    
  // IE
  obj.style.filter = "alpha(opacity:"+opacity+")"; 
   // Firefox
  obj.style.opacity = opacity/100;  
}


function pauseRotatiton()
{
   rotationFlag = 1;
}

function resumeRotatiton()
{
   if(rotationFlag == 1)
   {
      rotationFlag = 0;
      delayCount = 0;
      fadeOut();
   }
}

var delayCount = 0;

/*
this function takes care of the images rotation time
*/
function delayFade()
{
  if(delayCount >= rotationSpeed)
  {
     delayCount = 0;
     setTimeout("fadeOut()", 50);
     return;     
  }
  delayCount++;
  setTimeout("delayFade()", 50);
}

/*
when the previous Picture button is clicked,
it changes some indexes around and get everything ready for a
fadeOut() function call.
*/
function prevPicture()
{   
    if(totalNumOfImgs > 1)
    {
        nextOrPrevDelayFlag = 1; 
        imageIndexCount--; 
        
        if(imageIndexCount < 0)
        {
          imageIndexCount = totalNumOfImgs - 1;
        }            

        delayCount = rotationSpeed;     
        
        if(pictureFlag == 1)
        {            
          theImage2.src = picLocation + myLinks[imageIndexCount];
          //theImage2URL.href = myLinksURL[imageIndexCount];          
        } 
        else
        {
          theImage.src = picLocation + myLinks[imageIndexCount];
          //theImageURL.href = myLinksURL[imageIndexCount];
        }             
    }                    
}

function nextPicture()
{
   delayCount = rotationSpeed;
}