var text = ['Focus on sustainability', 'Diversity in education levels, experience and disciplines', 'Global perspective', 'Personalization of member experience'];
var images = ['/Images/slideshow1.png', '/Images/slideshow2.png', '/Images/slideshow3.png', '/Images/slideshow4.png'];
var timeouts = [5000, 7000, 7000, 7000]

var $sliderContainer;
var $sliderBG;
var $header;
var $desc;

var currentText;
var currentImage;
var currentTimeout;
var previousImage = null;
var currentSlideIndex;
var previousSlideIndex;

$(window).ready(function () {
    // set opacity for desciption background
    $('#slider-description-background').css('opacity', '0.5');

    createPagers();
    changeSlide(0);

    var imgs = [];
    for (x = 0; x < images.length; x++) {
        var img = new Image();
        img.src = images[x];
        imgs.push(img);
    }   //for
});

function createPagers() {
    var $pagersContainer = $('#slider-pager');
    var borderWidth = 2;
    var right = 30;

    for (var x = 0; x < text.length - 1; x++) {
        $pagersContainer.append('<div class="page" />');
    }   //for

    var left = parseInt($pagersContainer.css('left').replace('px', ''));
    var pageWidth = parseInt($pagersContainer.find('.page:first').css('width').replace('px', ''));

    $pagersContainer.css('left', left - (((pageWidth + (borderWidth * 2)) * text.length) + right));
    $pagersContainer.find('.page').css({
        border: borderWidth + 'px solid #565656',
        marginLeft: 2
    });

    var opacity = '0.3';
    var index = 0;
    $pagersContainer.find('.page').each(function () {
        // add hover
        $(this).hover(function () { pageOver($(this)) }, function () { pageOut($(this)) });

        // add id
        $(this).attr('id', index);

        // add click
        $(this).click(function () {
            changeSlide($(this).attr('id'))
        });

        //change opacity
        $(this).css('opacity', opacity);

        index++;
    });
}

function changeSlide(index) {
    index = parseInt(index);

    if (currentTimeout) {
        clearTimeout(currentTimeout);
    }   //if

    loadParameters(index);
    changeText();
    changeHiglightedPage();
    fadeOutBackground(function () { fadeInBackground() });

    currentTimeout = setTimeout('nextSlide()', 5000);
}

function nextSlide() {
    changeSlide((currentSlideIndex + 1) % text.length);
}

function loadParameters(slideIndex) {
    currentText = text[slideIndex];
    previousImage = currentImage;
    currentImage = images[slideIndex];
    previousSlideIndex = currentSlideIndex;
    currentSlideIndex = slideIndex;
}

function changeText() {
    $text = $('#slider-description');

    $text.fadeOut(function () {
        $text.html(currentText);
        $text.fadeIn();
    });
}

function pageOver($elem) {
    $elem.animate({
        opacity: '1'
    });
}

function pageOut($elem) {
    $elem.animate({
        opacity: '0.3'
    });
}

function changeHiglightedPage() {
    var $page = $('#' + currentSlideIndex);
    var $prevPage = $('#' + previousSlideIndex);

    $page.unbind('mouseenter mouseleave');
    $prevPage.hover(function () { pageOver($prevPage) }, function () { pageOut($prevPage) });

    $page.animate({
        opacity: '1'
    });

    $prevPage.animate({
        opacity: '0.3'
    });
}

function fadeOutBackground(callback) {
    if (previousImage) {
        $('#img2').css('background-image', 'url(' + previousImage + ')');

        $('#img1').fadeOut(function () {
            if (callback) {
                callback();
            }   //if
        });
    }
    else {
        if (callback) {
            callback();
        }   //if
    }   //else
}

function fadeInBackground() {
    $('#img1').css('background-image', 'url(' + currentImage + ')');
    $('#img1').fadeIn();
}