var counter = 0;
var myTimer = {};

$(document).ready(function () {

    $('#slider li a').each(function (index) {

        if (index == 0)
            setImageSrcAndAnchorHref($(this).parent())
        else
            $('<img>').attr("src", $(this).attr('rel'));
    });

    var firstElementId = '#slider li:first';
    var elementName = $(firstElementId);

    myTimer = jQuery.timer(800, function () {
        if (elementName != 'undefined' && counter < 5) {
            setImageSrcAndAnchorHref(elementName);
            elementName = elementName.next();
            counter = counter + 1;
        } else {
            myTimer.stop();
            elementName = $(firstElementId);
            setImageSrcAndAnchorHref(elementName);
        }
    }, function () {
    });

    $('#slider li a').mouseover(function (e) {
        myTimer.stop();
        setImageSrcAndAnchorHref($(this).parent());
    });
});

function setImageSrcAndAnchorHref(element) {
    element.siblings().removeClass('active');
    element.addClass('active');
    $('#hero-image').attr('src', element.children().attr('rel'));
    $('#image-link').attr('href', element.children().attr('href'));
}