var slideWidth = 700;
var slideTime = 200;
var slideBounceWidth = 10;
var slideBounceTime = 200;
var slideCaptionTime = 200;
var sliding = false;
var sliderPosition = 0;

function initSlider() {

    //Get the first image and display it
    $('#slider a.sliderimage').first().show()
    .addClass('show');

    //Get the controls and display them (if there are more than 1 images)
    if ($('#slider a.sliderimage').length > 1)
    {
        $('#slidercontrols').animate({ top: 230 }, 600);
    }

    initSliderPosition();
    updateSliderCaption();

    $("a", "#sliderright").click(function ()
    {
        slideRight();
    });
    $("a", "#sliderleft").click(function ()
    {
        slideLeft();
    });
}

function slideRight()
{
    if (sliding || $('#slider a.sliderimage').length <= 1)
    {
        return;
    }

    // Lock the slider controls
    sliding = true;

    //if no IMGs have the show class, grab the first image
    var current = ($('#slider a.show') ? $('#slider a.show') : $('#slider a.sliderimage').first());

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = current.next().hasClass('sliderimage') ? current.next() : $('#slider a.sliderimage').first();

    //Roll in the next image from the left
    next.fadeIn(10);
    next.css({ marginLeft: slideWidth })
  .animate({ marginLeft: slideWidth + slideBounceWidth }, slideBounceTime)
  .animate({ marginLeft: 0 }, slideTime)
    .addClass('show');

    //Roll out the next image to the right
    current.animate({ marginLeft: slideBounceWidth }, slideBounceTime)
    .animate({ marginLeft: -slideWidth }, slideTime)
    .removeClass('show');
    current.fadeOut(10);

    updateSliderPosition(1);
    updateSliderCaption();

    // Unlock the slider controls after the animation has finished
    setTimeout('sliding = false;', slideTime + slideBounceTime + slideCaptionTime);
}

function slideLeft()
{
    if (sliding || $('#slider a.sliderimage').length <= 1)
    {
        return;
    }

    // Lock the slider controls
    sliding = true;

    //if no IMGs have the show class, grab the first image
    var current = ($('#slider a.show') ? $('#slider a.show') : $('#slider a.sliderimage').first());

    //Get last image, if it reached the start of the slideshow, rotate it back to the last image (second-last item)
    var previous = current.prev().hasClass('sliderimage') ? current.prev() : $('#slider a.sliderimage').last();

    //Roll in the previous image from the right
    previous.fadeIn(10);
    previous.css({ marginLeft: -slideWidth })
  .addClass('show')
  .animate({ marginLeft: -slideWidth - slideBounceWidth }, slideBounceTime)
  .animate({ marginLeft: 0 }, slideTime);

    //Roll out the previous image from to the left
    current.animate({ marginLeft: -slideBounceWidth }, slideBounceTime)
    .animate({ marginLeft: slideWidth }, slideTime)
  .removeClass('show');
    current.fadeOut(10);

    updateSliderPosition(-1);
    updateSliderCaption();

    // Unlock the slider controls after the animation has finished
    setTimeout('sliding = false;', slideTime + slideBounceTime + slideCaptionTime);
}

function updateSliderCaption()
{
    var sliderImages = $('#slider a.sliderimage');
    var imageContainer = sliderImages.first();

    // Animate the text fade-in and fade-out
    // (fading the parent container doesn't work in IE so all the containers must be faded separately)
    var text = $('#slidercaptiontext');
    text.fadeOut(slideBounceTime);
    text.animate({ top: 0 }, slideTime);
    text.fadeIn(slideCaptionTime);

    var header = $('#slidercaptionheader');
    header.fadeOut(slideBounceTime);
    header.animate({ top: 0 }, slideTime);
    header.fadeIn(slideCaptionTime);

    var link = $('#slidercaptionlink');
    link.fadeOut(slideBounceTime);
    link.animate({ top: 0 }, slideTime);
    link.fadeIn(slideCaptionTime);

    for (var i = 0; i < sliderImages.length; i++)
    {
        if (i == sliderPosition)
        {
            var img = imageContainer.children().first();
            var header = escapeText(img.attr('sliderHeader'));
            var text = escapeText(img.attr('sliderText'));
            var url = imageContainer.attr('href');

            // Change the text after the text has faded out
            setTimeout('updateSliderCaptionContent(\'' + header + '\', \'' + text + '\', \'' + url + '\')', slideBounceTime);

            break;
        }

        imageContainer = imageContainer.next();
    }
}

function escapeText(text)
{
    text = text.replace("'", "\\'");
    return text;
}

function updateSliderCaptionContent(header, text, url)
{
    $('#slidercaptionheader img').first().attr('src', '/umbraco/imagegen.ashx?class=heading3&text=' + header + '&bgcolor=000000');
    $('#slidercaptiontext').html(text);
    
    // hack for 2012 site, change the link text of the slider if it points to Harpa's website
    if (url.indexOf("harpa.is") > 0) {
        $('#slidercaptionlink').html('<a href="' + url + '">Visit Harpa\'s website</a>');
    }
    else {    
        $('#slidercaptionlink').html('<a href="' + url + '">Read more</a>');
    }
}

function initSliderPosition()
{
    var images = '';

    for (var i = 0; i < $('#slider a.sliderimage').length; i++)
    {
        images += '<img src="/images/FrontandGeneral/slider_bullet_off.png" alt="" /> ';
    }

    $('#sliderposition').html(images);

    updateSliderPosition(0);
}

function updateSliderPosition(deltaPosition)
{
    var positionImages = $('#sliderposition img');

    sliderPosition += deltaPosition;
    if (sliderPosition < 0)
    {
        sliderPosition = positionImages.length - 1;
    }
    else if (sliderPosition >= positionImages.length)
    {
        sliderPosition = 0;
    }

    var img = positionImages.first();
    for (var i = 0; i < positionImages.length; i++)
    {
        if (i == sliderPosition)
        {
            img.attr('src', '/images/FrontandGeneral/slider_bullet_on.png');
        }
        else
        {
            img.attr('src', '/images/FrontandGeneral/slider_bullet_off.png');
        }

        img = img.next();
    }
}