var pageItemCount = 6;
var currentPage = 1;
var scrollPos;

$(function() {
    if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement;
    }
    else if (typeof document.body != 'undefined') {
        scrollPos = document.body;
    }

    changeData();
});
function changeData() {
    $.ajax({
        url: 'data/product.xml',
        type: 'GET',
        dataType: 'xml',
        timeout: 10000,
        beforeSend: function() {

        },
        error: function() {

        },
        success: function(xml) {
            var item = 0;

            $('#solution').empty();

            $(xml).find('item').each(function() {
                item += 1;
                if (item > (pageItemCount * (currentPage - 1)) && item <= pageItemCount * currentPage) {
                    var url = $(this).children("url").text();
                    var img = $(this).children("image").text();
                    var name = $(this).children("name").text();

                    var html = '<a href="' + url + '"><img src="' + img + '" alt="' + name + '"/></a><br />' + name;
                    $('<li></li>')
                            .html(html)
                            .appendTo('#solution');

                }
            });
            addPager(item);
            $(scrollPos)
					.animate({ scrollTop: 250}, 1000);
        }
    });

}
function addPager(item) {
    $('.solutionpage').empty();
    // currentPage = 1;
    var pageCount = Math.ceil(item / pageItemCount);
    if (pageCount > 1) {
        for (var i = 1; i <= pageCount; i++) {
            var str = "";
            if (i == currentPage) {
                str = '<a style="color:#ff3300;cursor:pointer" onclick="changePage(' + i + ')" >' + i + '</a>'
            } else {
                str = '<a style="color:#000;cursor:pointer" onclick="changePage(' + i + ')" >' + i + '</a>'
            }
            $(str)
        .appendTo('.solutionpage');
        }
    }
}

function changePage(id) {
    if (id != currentPage) {
        currentPage = id;
        changeData();
    }
}