$(document).ready(function() {

    var index = 0;
    var last = 0;

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

    displayByIndex(0);

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

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

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

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

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

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

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

    $("#hcsd_9").click(function() {
        displayByID('hcsd9');
        index = 8;
        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();
        });

    }
});