/*
*
* Carousel v4.0.2
*
* 2009-09-17
* Paul Porthouse 
*
* A carousel-type component which has a list of links down the right-hand side
* and a pane containing an image, title and description on the left. Once the
* component is active, it starts cycling through the links/panes.
*
* Version History:
*
*       2011-08-16
*          Resolved a problem which was causing the carousel 
*          when clicked on the image of the first item to not
*          redirect to the link
*       2011-05-04
*          Resolved an issue with the carousel which was causing
*          a crash when you click on the carousel image
*       2011-03-04
*          Changed the carousel to use jQuery rather than YUI
*          as we are phasing out YUI.
*		2010-12-03
*          Changed the carousel so that rather than starting
*          with a list, it starts as the carousel and just 
*          won't rotate without javascript.
*		2009-10-14
*			Made the carousel smaller, limited to 8 items and
*			removed the pause button. If you click on an item
*			it now stops the cycling.
*		2009-09-17 
*			Initial version
*
*/

// ensure the namespace exists
if (typeof (SouthTynesideCouncil) === 'undefined') { SouthTynesideCouncil = {}; }
if (typeof (SouthTynesideCouncil.WebTeam) === 'undefined') { SouthTynesideCouncil.WebTeam = {}; }

SouthTynesideCouncil.WebTeam.Carousel = function() {
    var carousel = null,
        controlLinks = [],
        controlPages = [],
        started = false,
        pageShownTime = 5000,
        transitionTime = 500,
        timeoutId = null,
        previousPage = 0,
        currentPage = 0,
        nextPage = 1;



    function initialise() {
        var links = [],
            i = 0;

        // get a reference to the container
        carousel = $('#carousel-container');

        if (!carousel) {
            // container not found, so exit
            return;
        }

        // attach the click event to the carousel
        carousel.click(event_LinkClicked);

        // build up a list of links
        controlLinks = $('ul#carousel-link-list > li');
        for (i = 0; i < controlLinks.length; i++) {
            controlLinks[i] = $(controlLinks[i]);
        }

        // build up a list of pages
        controlPages = $('#carousel-page-holder > div');
        for (i = 0; i < controlPages.length; i++) {
            controlPages[i].setAttribute('page', i);
            controlPages[i] = $(controlPages[i]);
        }

        // get a list of the actual links
        links = $('ul#carousel-link-list > li > a');
        for (i = 0; i < links.length; i++) {
            links[i].setAttribute('page', i);
            links[i].setAttribute('url', links[i].getAttribute('href'));
            controlPages[i].context.setAttribute('url', links[i].getAttribute('href'));

            if (i !== 0) {
                links[i].setAttribute('href', 'javascript:void(0);');
            }
        }

        startCarousel();
    }

    function startCarousel() {
        // set the flag to say the carousel is started
        started = true;

        // set the timeout for the next page
        timeoutId = window.setTimeout(moveToNextPage, pageShownTime);
    }

    function moveToNextPage() {
        // increment the pages
        previousPage = currentPage;
        currentPage = nextPage;
        nextPage++;
        if (nextPage >= controlPages.length) {
            nextPage = 0;
        }

        // remove the actual url from the previous link
        $('a', controlLinks[previousPage])[0].setAttribute('href', 'javascript:void(0);');

        // fade the previous page out
        controlPages[previousPage].fadeOut('fast', function() {
            // fade the current page in
            controlPages[currentPage].fadeIn('slow');
            // fade in the arrow on the current link
            $('img', controlLinks[currentPage]).fadeIn('slow');
            // change the colour of the current link
            $('a', controlLinks[currentPage]).animate({ backgroundColor: '#cccccc' }, 'slow');

            // add the actual url to the current link
            $('a', controlLinks[currentPage])[0].setAttribute('href', $('a', controlLinks[currentPage])[0].getAttribute('url'));
        });
        // fade out the arrow on the previous link
        $('img', controlLinks[previousPage]).fadeOut('slow');
        // change the colour of the previous link
        $('a', controlLinks[previousPage]).animate({ backgroundColor: '#f5f5f5' }, 'slow');

        // reset the counter for the next page move
        if (started) {
            if (timeoutId !== null) {
                window.clearTimeout(timeoutId);
                timeoutId = null;
            }
            timeoutId = window.setTimeout(moveToNextPage, pageShownTime);
        }
    }

    function event_LinkClicked(ev) {
        var target = ev.target;

        // we are interested in the a tag
        if ($(ev.target).closest('ul#carousel-link-list').length > 0) {
            if (ev.target.tagName === 'li') {
                target = $('a', target)[0];
            }
        } else if ($(ev.target).closest('div.carousel-page').length > 0) {
            target = $(ev.target).closest('div.carousel-page')[0];
        }


       /* if ($(ev.target).closest('ul#carousel-link-list') !== null && ev.target.tagName === 'li') {
            ev.target = $('a', target)[0];
        } else if (ev.target.tagName === 'p') {
            ev.target = $(target).closest('div.carousel-page');
        }*/

        // only do this if we aren't on the item which was clicked
        if (parseInt(target.getAttribute('page'), 10) !== currentPage) {
            // set the nextPage to be the page which was clicked
            nextPage = parseInt(target.getAttribute('page'), 10);
            // clear the timeout
            if (timeoutId !== null) {
                window.clearTimeout(timeoutId);
            }
            // stop the carousel
            started = false;
            // move to the next page
            moveToNextPage();
            // stop any bubbling of the event
            ev.preventDefault();
        } else if (target.className.indexOf('carousel-page') > -1) {
            document.location.href = target.getAttribute('url');
        }
    }

    // set up the onDocumentReady event to start the control
    jQuery(document).ready(initialise);
};

var theCarousel = new SouthTynesideCouncil.WebTeam.Carousel();