var intTimerId = null;
var intSlideTime = 5000;
var blSliderPlaying = true;
var blPointerOver = false;
var sliderWidth = 0;
var overlayWidth = 0;

$(document).ready(function() {
    
    // Set the image list to be exactly wide enough to accomodate items present
    sliderWidth  = $('#mediaContents ul').width() * $('#mediaContents ul li').length;
    $('#mediaContents ul').css('width', sliderWidth);
    
    overlayWidth = $('#mediaOverlayBG').width();
    
    //var descHeight = $('#mediaOverlayContent ul').height() * $('#mediaOverlayContent ul li').length;
    //$('#mediaOverlayContent ul').css('height', descHeight);
    
    // Set the initial image title
    $('.slideTitle').text($('#mediaContents ul li').eq(0).find('img').attr('alt'));

    // Setup the funtionality to slide on click
    $('#playerBar .mediaButtons li img').each(function(i,val) {
        $(this).click(function() {pauseSlide();setSlide(i);});
    });
    
    // Ensure that when the user mouses over the contents the slideshow stops
    $('#mediaContents, #mediaOverlayContent').hover(
      function () {
       blPointerOver = true; // stop slideshow on enter
      }, 
      function () {
       blPointerOver = false; // start slideshow on exit
      }
    );
    
    setSlide(0);
    
    // Start the slideshow
    intTimerId = setTimeout("nextSlide();", intSlideTime);
});

// Performs the changing of the current slide item.
function setSlide(slideIndex) {
   
    $('#playerBar .mediaButtons li img').attr('src','images/icons/circle_inactive.gif').attr('alt','inactive');
    $('#playerBar .mediaButtons li img').eq(slideIndex).attr('src','images/icons/circle_active.gif').attr('alt','active');
    
    var leftOffset = (-1 * (slideIndex * $('#mediaContents').outerWidth()));
    var topOffset = (-1 * (slideIndex * $('#mediaOverlayContent').outerHeight()));
    
    var curSlide = $('#mediaContents ul li').eq(slideIndex)
    var curImg = curSlide.find('img.slideImg');
    if(curImg.length > 0) {
        $('.slideTitle').text(curImg.attr('alt'));
    }else{
        $('.slideTitle').text('');
    }
    
    // If there is no title for this slide then hide the content overlay
    var slideTitle = $('#mediaOverlayContent ul li:eq('+slideIndex+') h2');
    var blShowOverlay = slideTitle.text().length > 0;
    if(blShowOverlay) {
        $('#mediaOverlayBG').css('width',overlayWidth);
        $('#mediaOverlayContent ul').css('width',overlayWidth);
    }else{
        $('#mediaOverlayBG').css('width','0px');
        $('#mediaOverlayContent ul').css('width','0px');
    }
    
    $('#mediaContents ul').animate({
        left: leftOffset
        }, {
        duration: 100, //1000
        specialEasing: {
            width: 'easeOutBounce',
            height: 'easeOutBounce'
        }
    });
    
    $('#mediaOverlayContent ul').animate({
        top: topOffset
        }, {
        duration: 100, //1000
        specialEasing: {
            width: 'easeOutBounce',
            height: 'easeOutBounce'
        }
    });
}

// Selects the next slide or else rotates back to start
function nextSlide(blManual) {

    // Setup next automatic call.
    clearTimeout(intTimerId);
    intTimerId = setTimeout("nextSlide();", intSlideTime); 

    // Check whether this was an auto call
    if(!blManual) {
        // Check whether the slider is permitted to play
        if(!blSliderPlaying || blPointerOver){
            return; // Do nothing
        }
    }
    
    // Setup the funtionality to slide on click
    var imgs = $('#playerBar .mediaButtons li img');
    var curImg = $('#playerBar .mediaButtons li img[alt="active"]');
    var curIndex = imgs.index(curImg);
    
    if(imgs.length == curIndex + 1) {
        setSlide(0);
    }else{
        setSlide(curIndex+1);
    }
}

// Selects the next slide or else rotates back to start
function prevSlide() {
    // Setup the funtionality to slide on click
    var imgs = $('#playerBar .mediaButtons li img');
    var curImg = $('#playerBar .mediaButtons li img[alt="active"]');
    
    var curIndex = imgs.index(curImg);
    
    if(curIndex == 0) {
        setSlide(imgs.length-1);
    }else{
        setSlide(curIndex-1);
    }
}

// stops the slider playing
function pauseSlide() {
    $('#slidePause').addClass('hidden');
    $('#slidePlay').removeClass('hidden');
    blSliderPlaying = false;
}

// starts the slider playing
function playSlide() {
    $('#slidePause').removeClass('hidden');
    $('#slidePlay').addClass('hidden');
    blSliderPlaying = true;
}