// Constants
var ITEM_WIDTH = 280;
var DISPLAY_INTERVAL = 5000;
var ANIMATION_INTERVAL = 16;

// Animation support
var requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var startTime = window.mozAnimationStartTime || (new Date()).getTime();

// Flow control variables
var itemIndex = 0;
var itemOffset = ITEM_WIDTH;

///
/// Animate items
///
function animateNewsItems(timestamp) {

    // Active animation - Shift new items by 1 col
    if (itemOffset > 0) {

        // Calculate elapsed time since last repaint
        var drawStart = (timestamp || (new Date()).getTime());
        var diff = drawStart - startTime - DISPLAY_INTERVAL;

        // Reset startTime to this repaint
        startTime = drawStart;

        // Shift by one step with time-based animation
        itemOffset -= parseInt(-diff / 1000.0);

        // Update position and clip
        $("#newsItem1").css("left", (-ITEM_WIDTH + itemOffset) + 'px');
        $("#newsItem2").css("left", itemOffset + 'px');
        $("#newsItem3").css("left", (ITEM_WIDTH + itemOffset) + 'px');
        $("#newsItem1").css("clip", 'rect(0px ' + ITEM_WIDTH + 'px 80px ' + (ITEM_WIDTH - itemOffset) + 'px)');
        $("#newsItem3").css("clip", 'rect(0px ' + (ITEM_WIDTH - itemOffset) + 'px 80px 0px)');

        // Next step
        if (requestAnimationFrame)
            requestAnimationFrame(animateNewsItems);
        else
            window.setTimeout("animateNewsItems()", ANIMATION_INTERVAL);
    }
    else {

        itemOffset = ITEM_WIDTH;
        advanceIndex();

        // Swizzle items
        setNewsItemData("newsItem1", arrNewsData[getItemIndex(0)]);
        setNewsItemData("newsItem2", arrNewsData[getItemIndex(1)]);
        setNewsItemData("newsItem3", arrNewsData[getItemIndex(2)]);

        // Update position and clip
        $("#newsItem1").css("left", '0px');
        $("#newsItem2").css("left", itemOffset + 'px');
        $("#newsItem3").css("left", (2 * itemOffset) + 'px');
        $("#newsItem1").css("clip", 'rect(0px ' + ITEM_WIDTH + 'px 80px 0px)');
        $("#newsItem3").css("clip", 'rect(0px 0px 80px 0px)');      // T R B L - Hide 3rd element

        // Next animation step
        window.setTimeout(function () { animateNewsItems(); }, DISPLAY_INTERVAL);
    }
}

///
/// Set news item details
///
function setNewsItemData(itemId, data) {

    // Set link title
    $("#" + itemId + " .newsItemLink").text(data.name);
    // Set summary text
    $("#" + itemId + " .newsItemSummary").text(data.summary);
    // Set link url
    $("#" + itemId).attr("href", data.link);
}

///
/// Perform basic initialization
///
function initNewsItems() {

    setNewsItemData("newsItem1", arrNewsData[getItemIndex(0)]);
    setNewsItemData("newsItem2", arrNewsData[getItemIndex(1)]);
    setNewsItemData("newsItem3", arrNewsData[getItemIndex(2)]);

    // Set item position and clip
    $("#newsItem1").css("left", '0px');
    $("#newsItem2").css("left", itemOffset + 'px');
    $("#newsItem3").css("left", (2 * itemOffset) + 'px');
    $("#newsItem3").css("clip", 'rect(0px 0px 80px 0px)');      // T R B L - Hide 3rd element

    // Next animation step
    window.setTimeout(function () { animateNewsItems(); }, DISPLAY_INTERVAL);
}

///
/// Get next index
///
function advanceIndex() {

    itemIndex++;

    if (itemIndex > (arrNewsData.length - 1)) {
        itemIndex = 0;
    }
}

///
/// Get index with offset
///
function getItemIndex(offset) {

    if (offset == 0) {
        return itemIndex;
    }
    else {
        if (itemIndex + offset >= arrNewsData.length) {
            // Result is out of bounds - add to start
            return itemIndex + offset - arrNewsData.length;
        }
        else {
            return itemIndex + offset;
        }
    }
}

$(document).ready(initNewsItems);