/**
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 = false;

    /**
    Browse to a position in the carousel
    */
    function browse()
    {
         autoplay = false; // Turn off autoplay if any manual input from user

        var identifier = $(this).attr('data-carousel');
        var target = $(this).attr('data-target');
        var distance = 0;
        var items = $('.carousel.'+identifier+' li');
        for( var x=0; x < items.length; x++ )
        {
            var item = items[x];
            if( item.id == target)
            {
                var width = 0 - $(item).width();
                distance = x * width;

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

        move(identifier, distance);
        return false;
    }

    /**
    Move the postion of the carousel
    @param string identifier
        Identifing class for this carousel
    @param int distance
        Number of pixels to move the carousel.
    @param function callback
        Function to run after the move annimation
    */
    function move(identifier, distance, callback)
    {
        var carousel = $(".carousel."+identifier);
        carousel = carousel[0];
        if( animation == 'slide')
            $(carousel).animate({"left": distance}, 250, "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)
    {
        // Disable autoplay on input from user
        if( target.type === 'click' )
        {
            target = $(this).attr('data-target');
            autoplay = false;
        }

        var identifier = $(this).attr('data-carousel');
        var items = $('.'+identifier+ ' li');

        var distance = 0;
        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(identifier, target);
            }
        }

        // Deal with boundary cases and allow 'wrap around' effect
        var callback = false;
        if( target === identifier+'-start' || target === identifier+'-end' )
        {
            if( target === identifier+'-start' )
                var boundary = $('.carousel.'+identifier+' li:last-child').prev();

            if( target === identifier+'-end' )
                var boundary = $('.carousel.'+identifier+' li:first-child').next();

            boundary = boundary[0];
            for( var x=0; x < items.length; x++ )
            {
                var item = items[x];
                if( item.id === boundary.id)
                {
                    width = 0 - $(item).width();
                    var position = x * width;
                }
            }

            // Set jump position completing the wrap around
            var callback = function(){$('.carousel.'+identifier).css("left", position);};
        }

        move(identifier, distance, callback);
        return false;
    }

    /**
    Update element data-target properties and css class
    @param string identifier
        Identifing class for this carousel
    @param string currentTarget
        Current nav element data-target attribute value
    */
    function updateTargets(identifier, currentTarget)
    {
        // Set selected class on browse controls//
        //////////////////////////////////////////
        var selected = currentTarget;
        if(currentTarget === identifier+'-end')
        {
            var first = $('.carousel.'+identifier+' li:first-child').next();
            selected = first[0].id
        }

        if(currentTarget === identifier+'-start')
        {
            var last = $('.carousel.'+identifier+' li:last-child').prev();
            selected = last[0].id;
        }

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


        // Update date slider tragets//
        ///////////////////////////////
        var nextTarget = $('#'+currentTarget).next();
        var prevTarget = $('#'+currentTarget).prev();
        nextTarget = nextTarget[0];
        prevTarget = prevTarget[0];

        // Left slider
        var left = $('.sliders.'+identifier+' .left')
        left = left[0];
        if( prevTarget !== undefined )
        {

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

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

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

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

    function init()
    {

        // Set Widths and Heights //
        ////////////////////////////

        var stages = $('.stage');
        for(var x=0; stages.length > x; x++)
        {
            // Set stage width and height
            var width = $(stages[x]).attr('data-width');
            $(stages[x]).width(width);

            var height = $(stages[x]).attr('data-height');
            $(stages[x]).height(height);

            var identifier = $(stages[x]).attr('data-carousel');
            var items = $('.carousel.'+identifier+' li');

            // Set carousel elements width and height
            items.width(width);
            items.height(height);

            // Set max requried carousel width
            var width = items.length * $(items[0]).width();
            $('.carousel.'+identifier).width(width);
        }

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

        // Slide controls - Event hanlder
        $(".sliders a").click(slide);

        // Browse controls - Event hanlder
        $(".nav-browse a ").click(browse);


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

        var startPosition = $(".carousel li.selected");
        startID = startPosition[0].id;

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

        // Autoplay //
        //////////////
        if( autoplay !== false )
        {
            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();}, 2000);
            }
            timer();
        }
    }

    $(document).ready(init);

})();