/**
 * @author Abdellah
 */
function abPrevNext(target, triggerPrev, triggerNext, parentWidth, numPages){
    target = $(target);
    triggerPrev = $$(triggerPrev);
    triggerNext = $$(triggerNext);
    numPages = numPages || $('numPages').get('text') || 1;
    
    $$(triggerPrev, triggerNext).getParent().removeClass('hidden');
    target.getParent().set('style', 'overflow:hidden');
    
    triggerPrev.addEvent('click', function(){
        leftMargin = target.getStyle('margin-left').toInt();
        if (leftMargin < 0) {
            target.morph({
                'margin-left': [leftMargin + 'px', (leftMargin + parentWidth) + 'px']
            });
            triggerNext.fade(1);
        }
        else {
            this.fade(.2);
        }
        return false;
    })
    triggerNext.addEvent('click', function(){
        leftMargin = target.getStyle('margin-left').toInt();
        if (leftMargin > -(parentWidth * (numPages - 1))) {
            target.morph({
                'margin-left': [leftMargin + 'px', (leftMargin - parentWidth) + 'px']
            });
            triggerPrev.fade(1);
        }
        else {
            this.fade(.2);
        }
        return false;
    })
    
}

function abSlider(targets, parentWidth){
    triggerPrev = $$('.triggerPrev');
    triggerNext = $$('.triggerNext');
    numPages = $$('.numPages').get('text');
    leftMargin = new Array();
    $$('.controller').removeClass('hidden');
    $$(targets).each(function(target, i){
    
        target.getParent().set('style', 'overflow:hidden');
        
        triggerPrev[i].addEvent('click', function(e){
            e.stop();
            leftMargin[i] = target.getStyle('margin-left').toInt();
            if (leftMargin[i] < 0) {
                target.morph({
                    'margin-left': [leftMargin[i] + 'px', (leftMargin[i] + parentWidth) + 'px']
                });
                triggerNext[i].fade(1);
            }
            else {
                triggerPrev[i].fade(.2);
            }
        })
        triggerNext[i].addEvent('click', function(e){
            e.stop();
            leftMargin[i] = target.getStyle('margin-left').toInt();
            if (leftMargin[i] > -(parentWidth * (numPages[i] - 1))) {
                target.morph({
                    'margin-left': [leftMargin[i] + 'px', (leftMargin[i] - parentWidth) + 'px']
                });
                triggerPrev[i].fade(1);
            }
            else {
                triggerNext[i].fade(.2);
            }
        })
        
    })
}