var imgCount;
var imgPointer;
var imgNames = new Array("/b2c/Portals/0/Images/AEVS_Kiosk1.png", "/b2c/Portals/0/Images/AEVS_Kiosk2.png", "/b2c/Portals/0/Images/AEVS_Kiosk3.png","/b2c/Portals/0/Images/AEVS_Kiosk4.png","/b2c/Portals/0/Images/kiosk_2_scroll.jpg");
var timer_delay = 15; // Timer delay interval in milliseconds
var roll_delay = 1000;
var roll_wait = 0; // when this is >= roll_delay, reset and roll.
var vY = 2; // vertical speed on roll.
var imgPreload;

var imgTagIn;
var imgTagOut;

var imgWidth = 0;
var imgHeight = 0;
var rotate_transit = false;

var tMargin = 181;
var tMax = 181;
var tContainer;

function preload_roll() // Preload those images.
{
    
    imgPreload = new Array();
    var i = 0;
    for (i = 0; i < imgNames.length; i++) 
    {
        imgPreload[i] = new Image();
        imgPreload[i].src = imgNames[i];
    }
    //document.body.style.backgroundColor = "#000000";
}

function roll_init() // Preload images, init vars, and init the timer.
{
    preload_roll(); // Preload function call

    // init vars
    imgCount = imgPreload.length;
    imgPointer = 0;
    imgWidth = 215;
    imgHeight = 181;

    // init displayed image tags.
    imgTagIn = document.getElementById('roll_in');
    imgTagOut = document.getElementById('roll_out');

    tContainer = document.getElementById('img_container');
    //document.getElementById('img_wrap').style.margin = "0";
    //imgTagIn.style.position = "absolute";
    //document.getElementById('img_wrap').innerHTML = "" + tMax;
    imgTagOut.style.margin = "0";
    imgTagIn.style.margin = "0";
    //imgTagIn.style.marginTop = "" + (-1 * 0) + "px";
    //imgTagOut.style.marginTop = "-50px";
    imgTagIn.src = imgNames[0];
    imgTagOut.src = imgNames[0];
    //document.body.style.backgroundColor = "#000000";
    tMax = imgTagOut.offsetWidth;
    
    setInterval("tick()", timer_delay);
}
function tick() 
{
    roll_wait += timer_delay;
    if (roll_wait >= roll_delay) 
    {
        rotateInit();
        rotate_transit = true;
        roll_wait = 0;
    }
    if (rotate_transit == true)
        rotate();
}
function rotateInit() 
{
    imgPointer += 1;
    if (imgPointer >= imgCount)
        imgPointer = 0;
    imgTagIn.src = imgNames[imgPointer];
    tMargin = tMax;
    //imgTagIn.style.display = "block";
    //document.body.style.backgroundColor = "#000000";
}
function rotate() 
{
    roll_wait = 0;
    tMargin -= vY;
    if (tMargin <= 0) {
        tMargin = tMax;
        imgTagOut.src = imgTagIn.src;
        tContainer.style.marginLeft = "" + (-1 * tMargin) + "px";
        rotate_transit = false;
        //imgTagIn.style.display = "none";
    }
    else 
    {
        tContainer.style.marginLeft = "" + (-1 * tMargin) + "px";
        //document.getElementById('junk').innerHTML = ""+imgTagIn.style.top;
        //document.body.style.backgroundColor = "#000000";
    }
}

// when page loads run roll init to get things going.
$(document).ready(function() 
{
    roll_init();
});