window.addEvent('domready', function() {
    var hdn = 'hdn';
    var totIncrement = 0;
    var increment = 892;

    var fx = new Fx.Style('myList', 'margin-left', {
        duration: 1000,
        transition: Fx.Transitions.Back.easeInOut,
        wait: true
    })

    //-------------------------------------
    // EVENTS for the button "previous"
    $('previous').addEvents(
    {
        'click': function(event) {
            if ((parseInt($(hdn).value)) > 1) {
                $(hdn).value = (parseInt($(hdn).value)) - 1;
                changeActiveClass(parseInt($(hdn).value));

                totIncrement = 0;
                totIncrement = (totIncrement - increment) * (parseInt($(hdn).value) - 1);
                fx.stop()
                fx.start(totIncrement);
            }
        }
    })

    $('next').addEvents(
    {
        'click': function(event) {
            if ((parseInt($(hdn).value)) < 8) {
                $(hdn).value = (parseInt($(hdn).value)) + 1;
                changeActiveClass(parseInt($(hdn).value));

                totIncrement = 0;
                totIncrement = (totIncrement - increment) * (parseInt($(hdn).value) - 1);
                fx.stop()
                fx.start(totIncrement);
            }
        }
    })

    //-------------------------------------
    // EVENTS for the individual image
    $('thumbtext1').addEvents({
        'click': function(event) {
            totIncrement = 0;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(1);
            $(hdn).value = 1;
        }
    })
    $('thumbtext2').addEvents({
        'click': function(event) {
            totIncrement = 0;
            totIncrement = (totIncrement - increment) * 1;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(2);
            $(hdn).value = 2;
        }
    })
    $('thumbtext3').addEvents({
        'click': function(event) {
            totIncrement = 0;
            totIncrement = (totIncrement - increment) * 2;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(3);
            $(hdn).value = 3;
        }
    })
    $('thumbtext4').addEvents({
        'click': function(event) {
            totIncrement = 0;
            totIncrement = (totIncrement - increment) * 3;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(4);
            $(hdn).value = 4;
        }
    })
    $('thumbtext5').addEvents({
        'click': function(event) {
            totIncrement = 0;
            totIncrement = (totIncrement - increment) * 4;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(5);
            $(hdn).value = 5;
        }
    })
    $('thumbtext6').addEvents({
        'click': function(event) {
            totIncrement = 0;
            totIncrement = (totIncrement - increment) * 5;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(6);
            $(hdn).value = 6;
        }
    })
    $('thumbtext7').addEvents({
        'click': function(event) {
            totIncrement = 0;
            totIncrement = (totIncrement - increment) * 6;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(7);
            $(hdn).value = 7;
        }
    })
    $('thumbtext8').addEvents({
        'click': function(event) {
            totIncrement = 0;
            totIncrement = (totIncrement - increment) * 7;
            fx.stop()
            fx.start(totIncrement);
            changeActiveClass(8);
            $(hdn).value = 8;
        }
    })

    function changeActiveClass(current) {
        var thumbs = ['thumbtext1', 'thumbtext2', 'thumbtext3', 'thumbtext4', 'thumbtext5', 'thumbtext6', 'thumbtext7', 'thumbtext8']

        for (i = 0; i < 8; i++) {
            if (i + 1 == current) {
                $(thumbs[i]).className = 'NavigationImagesNumberActive';
            }
            else {
                $(thumbs[i]).className = 'NavigationImagesNumberNormal';
            }
        }
    }
});