// jQuery-voorbeeldproject
// jQuery-voorbeeld: zoombare fotonavigatie
// Herbert Braun/Noud van Kruysbergen, c't redactie, jun/jul 2009


// nummer van de getoonde foto uit de url halen
// xxxpad/ct05.html -> 5 (getal)
// var getoonde_foto = parseInt(.substr(-7, 2));
// ... werkt niet in IE, dus:
var loc = document.location.href;
var getoonde_foto = 0; // parseInt(parseFloat(loc.substr(loc.length-7, 2)));
// parseInt van parseFloat, omdat parseInt("0n") door de 0 het getal octaal interpreteert
var zichtbaar = 2; // aantal zichtbare foto's (alleen oneven getallen)
var zoom = 1.5; // zoomfaktor bij hover (beter zo laten)
var fotorand = 1; // pixels
var fotoafstand = 2; // pixel (rechts)

function horizonscroller() { // nadat het document ingelezen is:
    var $pix = $('#panel li a img'); // alle foto's
    var $li = $('#panel li'); // alle lijstelementen
    $pix.css({ // CSS-instructies
        'border-width': fotorand,
        'margin-right': fotoafstand
    });
    var fotobreedte = 80; // $pix.width(); // fotobreedte en -hoogte inlezen
    var fotohoogte = 60; // $pix.height();

    var aantal = $li.length; // aantal alle foto's
    //if (!(zichtbaar % 2)) zichtbaar++; // zichtbaar is dan in ieder geval oneven
    var opschuiven = (zichtbaar - 1) / 2; // aantal foto's links en rechts van getoonde_foto
    var eerste_zichtbaar = getoonde_foto - opschuiven;
    var laatste_zichtbaar = getoonde_foto + opschuiven;

    var knoppen = function() { // scrollen voorbereiden
        $('#naar_links, #naar_rechts').removeClass('klikbaar').unbind(); // eventuele knoppen-funkties annuleren
        if (eerste_zichtbaar > 1) $('#naar_links').addClass('klikbaar').click(naar_links); // als er links ...
        // ... of rechts verborgen foto's zijn, dan de betreffende knop klikbaar maken en van een klikfunctie voorzien
        if (aantal > laatste_zichtbaar) $('#naar_rechts').addClass('klikbaar').click(naar_rechts);
    }

    var naar_links = function() { // scrol naar links
        eerste_zichtbaar--; // teller aanpassen
        laatste_zichtbaar--;
        // de functie begint te tellen bij nul, de Variabelen (eerste_zichtbaar, laatste_zichtbaar) beginnen echter met nummer 1
        $li.eq(eerste_zichtbaar - 1).show(); // eerstse verborgen foto tonen
        $li.eq(laatste_zichtbaar).hide(); // laatste zichtbare foto verbergen
        knoppen(); // ga naar voorbereiden scrollen
    }
    var naar_rechts = function() {
        $li.eq(eerste_zichtbaar - 1).hide(); // eerste zichtbare foto verbergen
        $li.eq(laatste_zichtbaar).show(); // laatste verborgen foto tonen
        eerste_zichtbaar++;
        laatste_zichtbaar++;
        knoppen();
    }

    if (eerste_zichtbaar < 1) { // teller aanpassen, als de getoonde foto dicht bij het begin ...
        eerste_zichtbaar = 1;
        laatste_zichtbaar = zichtbaar;
    } else if (laatste_zichtbaar > aantal) { // ... of het einde van de lijst staat
        eerste_zichtbaar = aantal - zichtbaar + 1;
        laatste_zichtbaar = aantal;
    }
    $li.slice(0, eerste_zichtbaar - 1).hide(); // verbergt de foto's voor de eerst zichtbare
    $li.slice(laatste_zichtbaar).hide(); // verbergt de foto's na de laatst zichtbare
    $li.eq(0).before('<li id="naar_links"></li>'); // voeg de knoppen toe
    $li.eq(aantal - 1).after('<li id="naar_rechts"></li>');
    knoppen(); // scrolfunctie voorbereiden
}

// jQuery-voorbeeldproject
// jQuery-voorbeeld: zoombare fotonavigatie
// Herbert Braun/Noud van Kruysbergen, c't redactie, jun/jul 2009


// nummer van de getoonde foto uit de url halen
// xxxpad/ct05.html -> 5 (getal)
// var getoonde_foto = parseInt(.substr(-7, 2));
// ... werkt niet in IE, dus:
var imgloc = document.location.href;
var imggetoonde_foto = 1; // parseInt(parseFloat(loc.substr(loc.length-7, 2)));
// parseInt van parseFloat, omdat parseInt("0n") door de 0 het getal octaal interpreteert
var imgzichtbaar = 2; // aantal zichtbare foto's (alleen oneven getallen)
var imgzoom = 1.5; // zoomfaktor bij hover (beter zo laten)
var imgfotorand = 1; // pixels
var imgfotoafstand = 2; // pixel (rechts)

function imghorizonscroller() { // nadat het document ingelezen is:
    var $pix = $('#images li a img'); // alle foto's
    var $li = $('#images li'); // alle lijstelementen
    $pix.css({ // CSS-instructies
        'border-width': imgfotorand,
        'margin-right': imgfotoafstand
    });
    var fotobreedte = 80; // $pix.width(); // fotobreedte en -hoogte inlezen
    var fotohoogte = 60; // $pix.height();

    var aantal = $li.length; // aantal alle foto's
    //if (!(imgzichtbaar % 2)) imgzichtbaar++; // zichtbaar is dan in ieder geval oneven
    var opschuiven = (imgzichtbaar - 1) / 2; // aantal foto's links en rechts van getoonde_foto
    var eerste_zichtbaar = imggetoonde_foto - opschuiven;
    var laatste_zichtbaar = imggetoonde_foto + opschuiven;

    var knoppen = function() { // scrollen voorbereiden
        $('#imgnaar_links, #imgnaar_rechts').removeClass('imgklikbaar').unbind(); // eventuele knoppen-funkties annuleren
        if (eerste_zichtbaar > 1) $('#imgnaar_links').addClass('imgklikbaar').click(naar_links); // als er links ...
        // ... of rechts verborgen foto's zijn, dan de betreffende knop klikbaar maken en van een klikfunctie voorzien
        if (aantal > laatste_zichtbaar) $('#imgnaar_rechts').addClass('imgklikbaar').click(naar_rechts);
    }

    var naar_links = function() { // scrol naar links
        eerste_zichtbaar--; // teller aanpassen
        laatste_zichtbaar--;
        // de functie begint te tellen bij nul, de Variabelen (eerste_zichtbaar, laatste_zichtbaar) beginnen echter met nummer 1
        $li.eq(eerste_zichtbaar - 1).show(); // eerstse verborgen foto tonen
        $li.eq(laatste_zichtbaar).hide(); // laatste zichtbare foto verbergen
        knoppen(); // ga naar voorbereiden scrollen
    }
    var naar_rechts = function() {
        $li.eq(eerste_zichtbaar - 1).hide(); // eerste zichtbare foto verbergen
        $li.eq(laatste_zichtbaar).show(); // laatste verborgen foto tonen
        eerste_zichtbaar++;
        laatste_zichtbaar++;
        knoppen();
    }

    if (eerste_zichtbaar < 1) { // teller aanpassen, als de getoonde foto dicht bij het begin ...
        eerste_zichtbaar = 1;
        laatste_zichtbaar = imgzichtbaar;
    } else if (laatste_zichtbaar > aantal) { // ... of het einde van de lijst staat
        eerste_zichtbaar = aantal - imgzichtbaar + 1;
        laatste_zichtbaar = aantal;
    }
    $li.slice(0, eerste_zichtbaar - 1).hide(); // verbergt de foto's voor de eerst zichtbare
    $li.slice(laatste_zichtbaar).hide(); // verbergt de foto's na de laatst zichtbare
    $li.eq(0).before('<li id="imgnaar_links"></li>'); // voeg de knoppen toe
    $li.eq(aantal - 1).after('<li id="imgnaar_rechts"></li>');
    knoppen(); // scrolfunctie voorbereiden
}

// jQuery-voorbeeldproject
// jQuery-voorbeeld: zoombare fotonavigatie
// Herbert Braun/Noud van Kruysbergen, c't redactie, jun/jul 2009


// nummer van de getoonde foto uit de url halen
// xxxpad/ct05.html -> 5 (getal)
// var getoonde_foto = parseInt(.substr(-7, 2));
// ... werkt niet in IE, dus:
var mediaImageloc = document.location.href;
var mediaImagegetoonde_foto = 1; // parseInt(parseFloat(loc.substr(loc.length-7, 2)));
// parseInt van parseFloat, omdat parseInt("0n") door de 0 het getal octaal interpreteert
var mediaImagezichtbaar = 2; // aantal zichtbare foto's (alleen oneven getallen)
var mediaImagezoom = 1.5; // zoomfaktor bij hover (beter zo laten)
var mediaImagefotorand = 1; // pixels
var mediaImagefotoafstand = 2; // pixel (rechts)

function mediaImagehorizonscroller(initiativeID) { // nadat het document ingelezen is:
    var $pix = $('#mediaImages' + initiativeID + ' li a img'); // alle foto's
    var $li = $('#mediaImages' + initiativeID + ' li'); // alle lijstelementen
    $pix.css({ // CSS-instructies
        'border-width': mediaImagefotorand,
        'margin-right': mediaImagefotoafstand
    });
    var fotobreedte = 80; // $pix.width(); // fotobreedte en -hoogte inlezen
    var fotohoogte = 60; // $pix.height();

    var aantal = $li.length; // aantal alle foto's
    if (!(mediaImagezichtbaar % 2)) mediaImagezichtbaar++; // zichtbaar is dan in ieder geval oneven
    var opschuiven = (mediaImagezichtbaar - 1) / 2; // aantal foto's links en rechts van getoonde_foto
    var eerste_zichtbaar = mediaImagegetoonde_foto - opschuiven;
    var laatste_zichtbaar = mediaImagegetoonde_foto + opschuiven;

    var knoppen = function() { // scrollen voorbereiden
        $('#mediaImagenaar_links, #mediaImagenaar_rechts').removeClass('mediaImageklikbaar').unbind(); // eventuele knoppen-funkties annuleren
        if (eerste_zichtbaar > 1) $('#mediaImagenaar_links').addClass('mediaImageklikbaar').click(naar_links); // als er links ...
        // ... of rechts verborgen foto's zijn, dan de betreffende knop klikbaar maken en van een klikfunctie voorzien
        if (aantal > laatste_zichtbaar) $('#mediaImagenaar_rechts').addClass('mediaImageklikbaar').click(naar_rechts);
    }

    var naar_links = function() { // scrol naar links
        eerste_zichtbaar--; // teller aanpassen
        laatste_zichtbaar--;
        // de functie begint te tellen bij nul, de Variabelen (eerste_zichtbaar, laatste_zichtbaar) beginnen echter met nummer 1
        $li.eq(eerste_zichtbaar - 1).show(); // eerstse verborgen foto tonen
        $li.eq(laatste_zichtbaar).hide(); // laatste zichtbare foto verbergen
        knoppen(); // ga naar voorbereiden scrollen
    }
    var naar_rechts = function() {
        $li.eq(eerste_zichtbaar - 1).hide(); // eerste zichtbare foto verbergen
        $li.eq(laatste_zichtbaar).show(); // laatste verborgen foto tonen
        eerste_zichtbaar++;
        laatste_zichtbaar++;
        knoppen();
    }

    if (eerste_zichtbaar < 1) { // teller aanpassen, als de getoonde foto dicht bij het begin ...
        eerste_zichtbaar = 1;
        laatste_zichtbaar = mediaImagezichtbaar;
    } else if (laatste_zichtbaar > aantal) { // ... of het einde van de lijst staat
        eerste_zichtbaar = aantal - mediaImagezichtbaar + 1;
        laatste_zichtbaar = aantal;
    }
    $li.slice(0, eerste_zichtbaar - 1).hide(); // verbergt de foto's voor de eerst zichtbare
    $li.slice(laatste_zichtbaar).hide(); // verbergt de foto's na de laatst zichtbare
    $li.eq(0).before('<li id="mediaImagenaar_links"></li>'); // voeg de knoppen toe
    $li.eq(aantal - 1).after('<li id="mediaImagenaar_rechts"></li>');
    knoppen(); // scrolfunctie voorbereiden
}

// jQuery-voorbeeldproject
// jQuery-voorbeeld: zoombare fotonavigatie
// Herbert Braun/Noud van Kruysbergen, c't redactie, jun/jul 2009


// nummer van de getoonde foto uit de url halen
// xxxpad/ct05.html -> 5 (getal)
// var getoonde_foto = parseInt(.substr(-7, 2));
// ... werkt niet in IE, dus:
var mediaVideoloc = document.location.href;
var mediaVideogetoonde_foto = 1; // parseInt(parseFloat(loc.substr(loc.length-7, 2)));
// parseInt van parseFloat, omdat parseInt("0n") door de 0 het getal octaal interpreteert
var mediaVideozichtbaar = 2; // aantal zichtbare foto's (alleen oneven getallen)
var mediaVideozoom = 1.5; // zoomfaktor bij hover (beter zo laten)
var mediaVideofotorand = 1; // pixels
var mediaVideofotoafstand = 2; // pixel (rechts)

function mediaVideohorizonscroller(initiativeID) { // nadat het document ingelezen is:
    var $pix = $('#mediaVideos' + initiativeID + ' li a img'); // alle foto's
    var $li = $('#mediaVideos' + initiativeID + ' li'); // alle lijstelementen
    $pix.css({ // CSS-instructies
        'border-width': mediaVideofotorand,
        'margin-right': mediaVideofotoafstand
    });
    var fotobreedte = 80; // $pix.width(); // fotobreedte en -hoogte inlezen
    var fotohoogte = 60; // $pix.height();

    var aantal = $li.length; // aantal alle foto's
    if (!(mediaVideozichtbaar % 2)) mediaVideozichtbaar++; // zichtbaar is dan in ieder geval oneven
    var opschuiven = (mediaVideozichtbaar - 1) / 2; // aantal foto's links en rechts van getoonde_foto
    var eerste_zichtbaar = mediaVideogetoonde_foto - opschuiven;
    var laatste_zichtbaar = mediaVideogetoonde_foto + opschuiven;

    var knoppen = function() { // scrollen voorbereiden
        $('#mediaVideonaar_links, #mediaVideonaar_rechts').removeClass('mediaVideoklikbaar').unbind(); // eventuele knoppen-funkties annuleren
        if (eerste_zichtbaar > 1) $('#mediaVideonaar_links').addClass('mediaVideoklikbaar').click(naar_links); // als er links ...
        // ... of rechts verborgen foto's zijn, dan de betreffende knop klikbaar maken en van een klikfunctie voorzien
        if (aantal > laatste_zichtbaar) $('#mediaVideonaar_rechts').addClass('mediaVideoklikbaar').click(naar_rechts);
    }

    var naar_links = function() { // scrol naar links
        eerste_zichtbaar--; // teller aanpassen
        laatste_zichtbaar--;
        // de functie begint te tellen bij nul, de Variabelen (eerste_zichtbaar, laatste_zichtbaar) beginnen echter met nummer 1
        $li.eq(eerste_zichtbaar - 1).show(); // eerstse verborgen foto tonen
        $li.eq(laatste_zichtbaar).hide(); // laatste zichtbare foto verbergen
        knoppen(); // ga naar voorbereiden scrollen
    }
    var naar_rechts = function() {
        $li.eq(eerste_zichtbaar - 1).hide(); // eerste zichtbare foto verbergen
        $li.eq(laatste_zichtbaar).show(); // laatste verborgen foto tonen
        eerste_zichtbaar++;
        laatste_zichtbaar++;
        knoppen();
    }

    if (eerste_zichtbaar < 1) { // teller aanpassen, als de getoonde foto dicht bij het begin ...
        eerste_zichtbaar = 1;
        laatste_zichtbaar = mediaVideozichtbaar;
    } else if (laatste_zichtbaar > aantal) { // ... of het einde van de lijst staat
        eerste_zichtbaar = aantal - mediaVideozichtbaar + 1;
        laatste_zichtbaar = aantal;
    }
    $li.slice(0, eerste_zichtbaar - 1).hide(); // verbergt de foto's voor de eerst zichtbare
    $li.slice(laatste_zichtbaar).hide(); // verbergt de foto's na de laatst zichtbare
    $li.eq(0).before('<li id="mediaVideonaar_links"></li>'); // voeg de knoppen toe
    $li.eq(aantal - 1).after('<li id="mediaVideonaar_rechts"></li>');
    knoppen(); // scrolfunctie voorbereiden
}