$(document).ready(function() {

    var index = 0;
    var last = 0;

    $("div.item").each(function(index) {
        last = last + 1;
    });

    displayByIndex(0);

    $("#hcs_2").click(function() {
        displayByID('hcs2');
        index = 1;
        return false;
    });

    $("#hcs_3").click(function() {
        displayByID('hcs3');
        index = 2;
        return false;
    });

    $("#hcs_4").click(function() {
        displayByID('hcs4');
        index = 3;
        return false;
    });

    $("#hcs_5").click(function() {
        displayByID('hcs5');
        index = 4;
        return false;
    });

    $("#hcs_6").click(function() {
        displayByID('hcs6');
        index = 5;
        return false;
    });

    $("#hcs_7").click(function() {
        displayByID('hcs7');
        index = 6;
        return false;
    });

    $("#hcs_8").click(function() {
        displayByID('hcs8');
        index = 7;
        return false;
    });


    $("#next").click(function() {
        if (index < last - 1) {
            index = index + 1;
            displayByIndex(index);
        }

        return false;
    });

    $("#prev").click(function() {
        if (index != 0) {
            index = index - 1;
            displayByIndex(index);
        }

        return false;
    });

    function displayByID(div) {

        $("div.item").each(function(i) {
            if ($(this).attr('id') == div)
                $(this).show();
            else
                $(this).hide();
        });

    }

    function displayByIndex(index) {

        $("div.item").each(function(i) {
            if (i == index)
                $(this).show();
            else
                $(this).hide();
        });

    }
});