$(function () {

    // Cache all slides

    var $allImages = $('.frontpage-slide-images li');

    // Fade in the first slide when DOM is ready

    var $firstslide = $allImages.first();
    $firstslide.addClass('active');
    $firstslide.fadeIn(600);

    // Cache all slides

    var $allPaging = $('.frontpage-page-content a');

    // Make first slide in the list visible

    var $firstpaging = $allPaging.first();
    $firstpaging.addClass('active');

    // Cache all categories

    var $allCategories = $('.frontpage-page-category li');

    // Make first category in the list visible

    var $firstCategory = $allCategories.first();
    $firstCategory.addClass('active');

    // Make's specified category active

    function activeCategory(id) {
        $allCategories.removeClass('active').filter('[data-id="' + id + '"]').addClass('active');
    };

    // Make paging content container's width vary by longest category word

    var $ruler = $("#ruler");
    $ruler.css({ visibility: 'hidden', 'white-space': 'nowrap' });

    function GetTextLength(text) {

        $ruler.text("");
        $ruler.text(text);
        return $ruler.get(0).offsetWidth;

    };

    var longestCategoryWord = 0;

    $(".frontpage-page-category li").each(function (e) {

        var element = $(this);
        var textLength = GetTextLength(element.text());

        if (textLength > longestCategoryWord) {
            longestCategoryWord = textLength;
        }

    });

    $(".frontpage-page-category").css('width', (longestCategoryWord + 10) + 'px');

    // Function that hides a slide and shows another on page click

    function moveTo($slideTo) {

        getActiveCategory();

        var $activeslide = $allImages.filter('.active').removeClass('active');

        $activeslide.fadeOut(300, function () {
            $slideTo.fadeIn(300).addClass('active');
        });

        activePage($slideTo.data('id'));
        activeCategory($slideTo.data('id'));
    };

    // Function that moves to the next slide in the list or starts at the first

    function moveNext() {

        getActiveCategory();

        var $activeslide = $allImages.filter('.active');
        var $nextslide = $activeslide.next();

        if ($nextslide.length == 0)
            $nextslide = $allImages.first();

        moveTo($nextslide);

    };

    // Function that moves to the previous slide in the list or starts at the last

    function movePrevious() {

        getActiveCategory();

        var $activeslide = $allImages.filter('.active');
        var $prevslide = $activeslide.prev();

        if ($prevslide.length == 0)
            $prevslide = $allImages.last();

        moveTo($prevslide);

    };

    // Function that makes current slide active in the paging box

    function activePage(id) {
        $allPaging.removeClass('active').filter('[data-id="' + id + '"]').addClass('active');
        activePageId = id;
    }

    $('.go-forward span').click(function (e) {

        // Move to next || first slide
        moveNext();

        e.preventDefault();

    });

    $('.go-back span').click(function (e) {

        // Move to previous || last slide
        movePrevious();

        e.preventDefault();

    });

    // Animates next and previous button to look more like flash

    $('.go-back span, .go-forward span').hover(function (e) {
        $(this).animate({ opacity: 1.0, easing: 50 });
    }, function (e) {
        $(this).animate({ opacity: 0.5, easing: 50 });
    });

    // Initializes page event

    $allPaging.click(function (e) {

        var id = $(this).data('id');

        var $slideTo = $allImages.filter('[data-id="' + id + '"]')

        // Initialize Paging Function
        moveTo($slideTo);

        e.preventDefault();

    });

    // Gets current active category before changing it to hover

    var $preHoverCategory;

    function getActiveCategory() {
        $preHoverCategory = $allCategories.filter(".active");
    };

    // Makes equivalent category visible when hovering a page

    $allPaging.hover(function (e) {

        var element = $(this);
        var elementId = element.data("id");

        getActiveCategory();

        activeCategory(elementId);

    }, function (e) {

        var activeCategoryId = $preHoverCategory.data("id");
        activeCategory(activeCategoryId);

    });

});