window.addEvent('domready', function() {
    imageGallery();
});

function imageGallery() {
    $('kfControls').style.display = 'block';
    var testMode = false;

    var currentslide = 1;
    var itemWidth = 751;

    // Number of items to load on startup.
    var initItemCount = 7;
    var container = $('kfMIV');
    var items = container.getElementById('items');
    var smlCollection = items.getElementById('thumbImageContainer');
    var wrapper = container.getElementById('wrapper');
    var shiftLeft = container.getElementById('moveleft');
    var shiftRight = container.getElementById('moveright');
    var totalItems;
    var jump;
    var itemCount;
    var jumpSize;
    var endPos;
    // Play on startup?
    var autoPlay = true;

    // If testing.
    if (testMode) {
        var duration = 2000;
    }
    else {
        var duration = 15000;
    }
    // Array top stor all data in;
    var dataStore = [];

    // Create initItemCount number of items on screen
    for (var i = 0; i <= initItemCount; i++) {
        createEntry(i);
    }

    // function to create one element on the page at a time
    function createEntry(g) {
        dataStore = kfjCarousel[g];
        // Create a group element.
        var group = document.createElement('li');

        // Give the element an ID
        group.setAttribute('id', g);

        // Create the large images

        //Create the holder for the large images and assign it an ID
        var imgLrgHld = document.createElement('div');
        imgLrgHld.className = 'mainImageContainer';
        var propertyName = document.createElement('div');
        propertyName.className = 'caption';

        var imgSmlHld = document.createElement('div');
        imgSmlHld.className = 'thumbImageContainer';
        var imgSmlList = document.createElement('ul');

        //Add the large images to the holder (imgLrgHld)        
        for (var x = 0; x < 3; x++) {

            var imgLrg = document.createElement('div');

            if (x == 0) {
                imgLrg.style.zIndex = "50";
            }

            imgLrg.setAttribute('id', 'kfLrgImg' + g + x);
            imgLrg.className = 'kfLrgImg';

            imgLrg.innerHTML = "<a href='" + dataStore[x].url + "' title='" + dataStore[x].alt + "' ><img src='" + dataStore[x].imageLrg + "' height='390' width='546' alt='" + dataStore[x].alt + "' \/><\/a>";
            imgLrgHld.appendChild(imgLrg);
            imgLrg.style.position = "absolute";

            //Create the holder for the small images and assign it an ID
            imgSmlHld.appendChild(imgSmlList);

            var imgSml = document.createElement('li');

            imgSml.innerHTML = "<a onclick=\"kfChangeImage('kfLrgImg" + g + x + "')\" title='" + dataStore[x].caption + "'><img src='" + dataStore[x].imageSml + "' width='169' height='121' class='border' alt='" + dataStore[x].alt + "' \/><\/a>";
            imgSmlList.appendChild(imgSml);
        }

        propertyName.innerHTML = "<a href='" + dataStore[0].url + "' title='View Property' >" + dataStore[0].name + "<\/a>";

        imgLrgHld.appendChild(propertyName);

        group.appendChild(imgLrgHld);
        group.appendChild(imgSmlHld);

        items.appendChild(group);
        dataStore = null;
        group = null;
        imgLrgHld = null;
        imgSmlHld = null;
        imgSmlList = null;
        totalItems = initItemCount + 1;
        items.style.width = eval("'" + Number(totalItems * itemWidth) + "px'");
        jump = Number(Math.round(wrapper.clientWidth / (items.clientWidth / totalItems)));
        itemCount = initItemCount;
        jumpSize = jump * itemWidth;
        endPos = items.clientWidth - jumpSize;
    }

    var pos = 0;

    var scroll = new Fx.Scroll(wrapper, {
        offset: { 'x': 0, 'y': 0 },
        duration: 999,
        transition: Fx.Transitions.easeInOut
    });
    function autoShift() {
        if (currentslide >= totalItems) {
            currentslide = 1;
            pos = 0;
            scroll.start(pos);
        }
        else {
            currentslide++;
            pos += jumpSize;
            scroll.start(pos);
        }
    }

    if (autoPlay) {
        timer = setInterval(autoShift, duration);
    }

    $('items').getElements('div.thumbImageContainer').addEvent('click', function() {
        if (autoPlay) {
            clearInterval(timer);
            timer = setInterval(autoShift, duration);
        }
    });

    shiftLeft.addEvent('click', function(event) {
        if (autoPlay) {
            clearInterval(timer);
            timer = setInterval(autoShift, duration);
        }
        event = new Event(event).stop();
        if (currentslide <= 1) {
            currentslide = totalItems;
            pos = endPos;
            scroll.start(pos);
        }
        else {
            currentslide--;
            pos += -jumpSize;
            if (pos < 0) {
                pos = 0;
            }
            scroll.start(pos);
        }
    });
    shiftRight.addEvent('click', function(event) {
        if (initItemCount < kfjCarousel.length - 1) {
            initItemCount++;
            createEntry(totalItems);

        }

        if (autoPlay) {
            clearInterval(timer);
            timer = setInterval(autoShift, duration);
        }
        event = new Event(event).stop();
        if (currentslide >= totalItems) {
            currentslide = 1;
            pos = 0;
            scroll.start(pos);
        }
        else {
            currentslide++;
            pos += jumpSize;
            scroll.start(pos);
        }
    });
    scroll.toLeft();
}
// Add the fade in/out effect.
var z = 81;
var prevImage = null;
function kfChangeImage(imageID) {

    nextImage = $(imageID);

    if (nextImage.style.zIndex != z) {

        z++;

        nextImage.style.zIndex = z;

        nextImage.style.filter = "alpha(opacity = 0)";
        nextImage.style.opacity = "0";

        nextImage.fade(0, 1);

        prevImage = nextImage;

        nextImage = null;
    }
}