//public vars
var counter = 0;
var items = 0;
var xmlLoaded = false;
var file;
var images = [];
var current = 0;
var width = 307;
var height = 201;
var visible = [];

//number of visible items at once
var span = 6;

$(document).ready(function() {
    $("#scroller div div").each(function() {
        items = items + 1;
    });
    $("#scroller").css("width", items * 85);
    loadXML();
    visible[0] = 0;
    visible[1] = 5;
});

function moveLeft(amount) {
    if (counter != 0) {
        if (counter < span) {
            amount = counter;
        }
        var left = amount * 85;

        $('#scroller').animate({ "left": "+=" + left + "px" }, 1000);
        counter = counter - amount;
        counter = (counter < span) ? 0 : counter;

        visible[0] = (counter);
        visible[1] = (counter + 5);
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblCurrent").html("current: " + current);
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblCounter").html("counter: " + counter);
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblVisible").html("visible: " + visible[0] + "-" + visible[1] + "  left: " + left);
    }
}
function moveRight(amount) {

    if (counter < items - span) {
        counter = counter + amount;
        
        var left = amount * 85;
        $('#scroller').animate({ "left": "-=" + left + "px" }, 1000);
        visible[0] = (counter);
        visible[1] = (counter + 5);
//        $("#ctl00_ctl00_cphBody_cphAboutBody_lblCurrent").html("current: " + current);
//        $("#ctl00_ctl00_cphBody_cphAboutBody_lblCounter").html("counter: " + counter);
//        $("#ctl00_ctl00_cphBody_cphAboutBody_lblVisible").html("visible: " + visible[0] + "-" + visible[1]);
    }

}
function prev() {
    if (current > 0) {
        updateHighlight(current - 1);
    }
    if (current < visible[0]) {
        moveLeft(span);
    }
    if (current> visible[1]) {
        moveRight(span);
    }
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblCurrent").html("current: " + current);
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblCounter").html("counter: " + counter);
}
function next() {
    if (current < items) {
        updateHighlight(current + 1);
    }
    if (current > visible[1]) {
        moveRight(span);
    }
    if (current < visible[0]) {
        moveLeft(span);
    }
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblCurrent").html("current: " + current);
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblCounter").html("counter: " + counter);
}

function updateHighlight(id) {
//    $("#ctl00_ctl00_cphBody_cphAboutBody_lblCurrent").html("current: " + id);
    file.find('item').each(function() {
        
        //create the array of images
        var image = $(this).attr('imgid');
        images[images.length] = image;

        if (id == $(this).attr('id')) {
            current = id;
            var yearString = $(this).attr('year');
            //var textString = $(this).find('story').text();
            var titleString = $(this).find('title').text();

            $("#num").html(yearString);
            //$("#title").html(titleString);
            $("#mainImg").attr("src", "images/" + image);
            $("#desc").html(titleString);

            

            $("#scroller div div").each(function() {
                $(this).removeClass("active");
            });
            $("#liImg" + id).addClass("active");
        } //each
    });      //xml
} //update highlight


function loadXML() {
    $.ajax({
        url: 'scripts/timeline.xml',
        type: 'GET',
        dataType: 'xml',
        error: function() {
            alert('Error loading XML document');
        },
        success: function(xml) {
            xmlLoaded = true;
            xmlDoc = $(xml);
            file = $(xml);

            //preload Images
            file.find('item').each(function() {
                pic1 = new Image(width, height);
                pic1.src = "/about/inside/history/images/" + $(this).attr('imgid');
            });
        } //success
    }); //ajax
}