/************************************************************/

$(function() {
    var carousel = $('#FP_carousel');
    var news = carousel.find('ul.news');
    var controls = null; // Will hold the ul with the controls
    var timer = null; // Will hold the timer div
    var wait = 8000; // Milliseconds to wait for auto-switching
    var widths = [];   // Will hold the widths of each image
    var items_size = news.find('li').length;
    var initialized = false;

    if (!items_size) { return; }

    // Controls html to append
    var controls_str = '';

    controls_str += '<div id="controls">';
    controls_str += '<ul class="controls">';

    for (var i = 1; i <= items_size; i++) {


        controls_str += '<li><a href="#">';
        controls_str += i;

        // var src = news.find('li')(i).find('div.carousel_cell')(0).find('div.text_content')(0).find('img').length;
        var src = news.find('li div.carousel_cell div.text_content img').eq(i - 1).attr('src');
        var filename = src.split('/')[src.split('/').length - 1];
        controls_str += '<img src="http://www.tbnewswatch.com/Pictures/thumbnails/' + filename + '" src="TbNewsWatch.com"/>';

        controls_str += '</a></li>';
        if (i % 8 == 0) { controls_str += '</ul><ul class="controls">'; }
    }
    controls_str += '</ul>';
    controls_str += '</div>';

    // Cache the controls list
    if (items_size > 1) { controls = carousel.prepend(controls_str).find('ul.controls'); 

    // Make the first button in controls active
    controls.find('ul:first li:first a').addClass('active');

    // Hook to the controls' click events
    controls.find('li a').click(function(event) { move_news($(this)); return false; });
};
    // Append the timer and cache it
    //  timer = carousel.append('<div class="timer"></div>').find('div.timer');

    // Store each item's width and calculate the total width
    news.find('li div.carousel_cell')
        .each(function(i, e) {
            widths[i] = $(e).width();
            if (all_images_loaded()) { init_carousel(); }
        })
        .load(function(e) {
            var i = news.find('li div').index(this);
            widths[i] = $(this).width();
            if (all_images_loaded()) { init_carousel(); }
        });

    /***********************************************************************/
    function all_images_loaded() {
        return (items_size == widths.length) && (jQuery.inArray(0, widths) < 0);
    }

    /**********************************************************************/
    function move_news(new_active) {


        // Move unless it is already moving
        if ($('#FP_carousel ul.news:animated').length > 1) {
            return false;
        }

        var current_active = controls.find('li a.active');


        if (new_active == 'next') {
            var next = current_active.parent().next().find('a');

            if (!next.length) { next = controls.find('li:first a'); }

            new_active = next;
        }

        var current_index = parseInt(current_active.text(), 10) - 1;
        var new_index = parseInt(new_active.text(), 10) - 1;

        // this is a hack
        if (isNaN(current_index)) { current_index = 0; }

        var move_to = new_index - current_index;

        if (!move_to) { return false; }

        var direction = (move_to > 0) ? '-=' : '+=';

        var move = 0;
        var bottom = Math.min(current_index, new_index);
        var top = Math.max(current_index, new_index);

        while (bottom < top) {

            move += widths[bottom];
            bottom++;

        }


        news.animate({ marginLeft: direction + move }, 1);

        new_active.addClass('active');
        current_active.removeClass('active');
    }

    /**********************************************************************/
    function animate_timer() {
        //      timer.stop().css({width: '100px'}).animate({width: '1px'}, wait);
    }

    /**********************************************************************/
    // Initializer, called when all images are loaded
    function init_carousel() {

        if (initialized) { return false; }

        // Set the news ul total width
        var width = 0;
        for (var i = 0; i < widths.length; i++) { width += widths[i]; }
        news.width(width);

        // Make the news change every X seconds
        //     setInterval(function() { move_news('next'); animate_timer(); }, wait);
        //     animate_timer();

        initialized = true;

    }
});