var slider = {
    items: 0,
    width: 0,
    border: 20,
    margin: 15,
    visibleArea: 988,
    navigationWidth: 20
};

function moveLeft() {
    if (slider.width - slider.visibleArea > parseInt($('image-slider-box').style.left) * -1 - slider.navigationWidth) {
        new Effect.Move($('image-slider-box'), {
            x: -10,
            y: 0,
            duration: .1,
            mode: 'relative',
            transition: Effect.Transitions.linear,
            afterFinish: moveLeft,
            queue: {
                scope: 'slider'
            }
        });
    }
}

function moveRight() {
    if (0 > parseInt($('image-slider-box').style.left) - slider.navigationWidth) {
        new Effect.Move($('image-slider-box'), {
            x: 10,
            y: 0,
            duration: .1,
            mode: 'relative',
            transition: Effect.Transitions.linear,
            afterFinish: moveRight,
            queue: {
                scope: 'slider'
            }
        });
    }
}

function clearEffectQueue() {
    Effect.Queues.get('popup').each(function(effect) { effect.cancel(); });
}

function enteringThumb(obj) {
    clearEffectQueue('appear', obj);
    var myImg = popupImages.get(obj.rel);

    $('dImage').src = myImg.path;
    $('dImage').width = myImg.width;
    $('dImage').height = myImg.height;

    $('detail-image-image').width = myImg.width;
    $('detail-image-image').height = myImg.height;
    $('detail-image-subtitle').innerHTML = $(obj.rel).title;

    $('dImage').onLoad = new Effect.Appear('detail-image-box', { queue: { scope: 'popup' } });
}

function leavingThumb(obj) {
    clearEffectQueue('fade', obj);
    new Effect.Fade('detail-image-box', { queue: { scope: 'popup' } });
}