/**
Javascrip Carousel effects
*/
(function()
{
    // defaults //
    //////////////

    // Animation type for trasistions options: slide or fade
    var animation = 'slide';

    // Autoplay - start the annimations automatically without user input.
    var autoplay = true;

    /**
    Browse to a position in the carousel
    */
    function browse()
    {
        autoplay = false; // Turn off autoplay if any manual input from user
        var target = $(this).attr('data-target');
        var distance = 0;
        var items = $(".carousel li");
        for( var x=0; x < items.length; x++ )
        {
            var item = items[x];
            if( item.id == target)
            {
                width = 0 - $(item).width();
                distance = x * width;

                // update slider navigation with new carousel position
                updateTargets(target);
            }
        }

        move(distance);
        return false;
    }

    /**
    Move the postion of the carousel
    @param int distance
        Number of pixels to move the carousel.
    @param function callback
        Function to run after the move annimation
    */
    function move(distance, callback)
    {
        var carousel = $(".carousel");
        carousel = carousel[0];
        if( animation == 'slide')
            $(carousel).animate({"left": distance}, 750, "linear", callback);
        if( animation == 'fade' )
        {
            $(carousel).animate({"opacity": "toggle"}, 500);
            $(carousel).animate({"left": distance}, 250, "linear");
            $(carousel).animate({"opacity": "toggle"}, 500);
        }
    }

    /**
    Calculate distance and direction to move carousel and update targets
    @param target string -- optional
        ID of target carousel slide.
    */
    function slide(target)
    {
        if( target.type === 'click' )
        {
            target = $(this).attr('data-target');
            autoplay = false; // Turn off autoplay if any manual input from user
        }

        var callback = false;
        var distance = 0;
        var items = $(".carousel li");
        for( var x=0; x < items.length; x++ )
        {
            var item = items[x];
            if( item.id === target )
            {
                width = 0 - $(item).width();
                distance = x * width;

                // update slider navigation with new carousel position
                updateTargets(target);
            }
        }

        // Deal with boundary cases and allow 'wrap around' effect
        if( target === 'boundary-start' )
        {
            var last = $(".carousel li:last-child").prev();
            last = last[0];

            // Jump visiable position in ul
            for( var x=0; x < items.length; x++ )
            {
                var item = items[x];
                if( item.id === last.id)
                {
                    width = 0 - $(item).width();
                    position = x * width;
                }
            }
            var callback = function(){$(".carousel").css("left", position);};
        }

        // Deal with boundary cases and allow 'wrap around' effect
        if( target === 'boundary-end' )
        {
            var first = $(".carousel li:first-child").next();
            first = first[0];

           // Jump visiable position in ul
            for( var x=0; x < items.length; x++ )
            {
                var item = items[x];
                if( item.id == first.id)
                {
                    width = 0 - $(item).width();
                    position = x * width;
                }
            }

           var callback = function(){$(".carousel").css("left", position);};
        }

        move(distance, callback);
        return false;
    }

    /**
    Update element data-target properties and css class
    @param string currentTarget
        Current nav element data-target attribute value
    */
    function updateTargets(currentTarget)
    {
        var nextTarget = $('#'+currentTarget).next();
        var prevTarget = $('#'+currentTarget).prev();
        nextTarget = nextTarget[0];
        prevTarget = prevTarget[0];

        // update left slider target
        var left = $('.slide-left')
        left = left[0];
        if( prevTarget !== undefined )
        {

            if(currentTarget === 'boundary-end')
            {
                var selectedTarget = prevTarget.id;
                $(left).attr('data-target', 'boundary-start');
            }
            else
            {
                var selectedTarget = currentTarget;
                $(left).attr('data-target', prevTarget.id);
            }
        }
        else
        {
            // set target to last element (ignore boundary elements)
            var last = $(".carousel li:last-child").prev();
            last = last[0];
            var selectedTarget = last.id;

            prevTarget = $(last).prev();
            prevTarget = prevTarget[0];
            $(left).attr('data-target', prevTarget.id);
        }

        // update right slider target
        var right = $('.slide-right')
        right = right[0];
        if( nextTarget !== undefined )
        {
            if(currentTarget === 'boundary-start')
            {
                var selectedTarget = nextTarget.id;
                $(right).attr('data-target', 'boundary-end');
            }
            else
            {
                var selectedTarget = currentTarget;
                $(right).attr('data-target', nextTarget.id);
            }
        }
        else
        {
            // set current to first element (ignore boundary elements)
            var first = $(".carousel li:first-child").next();
            first = first[0];
            var selectedTarget = first.id;

            nextTarget = $(first).next();
            nextTarget = nextTarget[0];
            $(right).attr('data-target', nextTarget.id);
        }

        // Set selected class on browse controls
        var controls = $(".nav-browse a ");
        for( var x=0; x < controls.length; x++ )
        {
            control = controls[x];
            if( $(control).attr('data-target') === selectedTarget )
                control.className = 'selected';
            else
                control.className = '';
        }
    }

    function init()
    {
        // Set Coursel List width - useful with dynmatic content
        var items = $('.carousel li' );
        var item = items[0];
        var width = items.length * $(item).width();
        $('.carousel').css('width', width);

        // Manage Carousel Boundaries //
        ////////////////////////////////

        // Clone the first and last none boundary elements into
        // the boundary-end and boundary-last elements, this allows the
        // slide annimation to take place when the carousel wraps.

        var startBoundary = $("#boundary-start");
        startBoundary = startBoundary[0];
         var last = $(".carousel li:last-child").prev();
        last = last[0];
        startBoundary.innerHTML = $(last).html();

        var endBoundary = $("#boundary-end");
        endBoundary = endBoundary[0];
        var first = $(".carousel li:first-child").next();
        first = first[0];
        endBoundary.innerHTML = $(first).html();

        // Carousel controls //
        ///////////////////////

        // Slide controls - Event hanlder
        var slideLeft = $(".slide-left");
        slideLeft = slideLeft[0];
        slideLeft.onclick = slide;

        var slideRight = $(".slide-right");
        slideRight = slideRight[0];
        slideRight.onclick = slide;

        // Browse controls - Event hanlder
        var controls = $(".nav-browse a ");
        for( var x=0; x < controls.length; x++ )
        {
            control = controls[x];
            control.onclick = browse;
        }

        // Set start position //
        ////////////////////////

        // This information comes from default selected element within
        // the browse controls.
        var startID = $(".nav-browse a.selected").attr('data-target');

        var items = $(".carousel li");
        for( var x=0; x < items.length; x++ )
        {
            var item = items[x];
            if( item.id == startID)
            {
                width = 0 - $(item).width();
                position = x * width;
                $(".carousel").css('left', position);
            }
        }

        // Autoplay //
        //////////////
        if( autoplay !== false )
        {
            var items = $(".carousel li");
            if( items.length < 4 )
                return;

            autoplay = $(".nav-browse a.selected").attr('data-target');
            function timer()
            {
                // Check if autoplay has been disable by any user input
                if( autoplay === false )
                {
                    clearTimeout(t);
                    return;
                }

                slide(autoplay);
                autoplay = $(".slide-right").attr('data-target');
                t = setTimeout(function(){timer();}, 4000);
            }
            timer();
        }
    }

    $(document).ready(init);

})();