/* These values are initialised within ASP.Net */
var IMG_ICON_ID_PREIX;
var IMG_ID_PREIX;

var transitionSpeed = 1000;
var currentBgIndex = 1;
var currentTextIndex = 1;
var currentIcon = 1;
var canEnter = 1;

var timer;
var imageCount;
var imageCounter = 2;
var transitionInterval = 5000;
var transitionsEnabled = true;
var imagesList;
var imagesLinkList;
var mediaPanelHeights = [320, 420];

function InitialiseMediaPanel() {

    $('#' + IMG_ID_PREIX + '1').show();
    $('#' + IMG_ICON_ID_PREIX + '1').addClass('SelectedImageIcon');
    if (transitionsEnabled && imageCount > 1)
        timer = window.setInterval(Slideshow, transitionInterval);
}

function Slideshow() {
    ChangeBackgroundImage(imageCounter++, false);
    if (imageCounter > imageCount)
        imageCounter = 1;
}

function addListener(element, type, expression, bubbling) {
    bubbling = bubbling || false;
    if (window.addEventListener) { // Standard
        element.addEventListener(type, expression, bubbling);
        return true;
    } else if (window.attachEvent) { // IE
        element.attachEvent('on' + type, expression);
        return true;
    } else return false;
}

function TransitionImage(index) {
    $('#loading').hide();

    $('#' + IMG_ICON_ID_PREIX + currentIcon).removeClass('SelectedImageIcon');
    $('#' + IMG_ICON_ID_PREIX + index).addClass('SelectedImageIcon');
    currentIcon = index;

    var newImageId = '#' + IMG_ID_PREIX + index;
    var currentImageId = '#' + IMG_ID_PREIX + currentBgIndex;
    $(currentImageId).css('z-index', 2);
    $(newImageId).css('z-index', 1);
    $(newImageId).show();

    $(currentImageId).fadeOut(transitionSpeed, function () {
        currentBgIndex = index;
        canEnter = 1;
    });
}

function ChangeBackgroundImage(index, stopSlideshow) {

    // First check if the selected image is not the current image and that a transition is not in progress.
    if (currentBgIndex != index && canEnter == 1) {

        // Consume the lock so no other images can be selected during this transition.
        canEnter = 0;

        if (stopSlideshow)
            window.clearInterval(timer);

        /* 
        * Display the currently selected images. 
        */
        var newImageId = '#' + IMG_ID_PREIX + index;
        var currentImageId = '#' + IMG_ID_PREIX + currentBgIndex;

        if ($(newImageId).length == 0) {
            var imageDiv = document.createElement('div');
            var cacheImage = document.createElement('img');  // create the requested image

            if (imagesLinkList[index - 1] != null) {
                var imageLink = document.createElement('a');
                imageLink.setAttribute('href', imagesLinkList[index - 1]);
                $(imageLink).append(cacheImage);
                $(imageDiv).append(imageLink);
            }
            else
                $(imageDiv).append(cacheImage);

            imageDiv.id = IMG_ID_PREIX + index;
            imageDiv.setAttribute('class', 'Photo');
            imageDiv.style.cssText = 'position: absolute;top: 0px;left: 0px; float: left;display:none;';
            addListener(cacheImage, 'load', function (e) { TransitionImage(index); }, false);
            $(currentImageId).after(imageDiv);
            $('#loading').fadeIn(1200); // show();
            cacheImage.src = imagesList[index - 1];
        }
        else
            TransitionImage(index);
    }
}