þÿ// http://stackoverflow.com/questions/964734/hitting-enter-does-not-post-form-in-ie8/4629047#4629047
jQuery.fn.handle_enter_keypress_for_ie8 = function() {
  if ($.browser.msie){
    $(this).find('input').keypress(function(e){
      // If the key pressed was enter
      if (e.which == '13') {
        $(this).closest('form')
        .find('button[type=submit],input[type=submit]')
        .filter(':first').click();
      }
    });
  }
}


/* **** */
$(function(){

    initMandjeFormulieren();

    initNepKnoppen(); // tbv. iPad

    initBanier();
    initCatVouwers();
    initLogin();
    initZoek();
    initArtikelLijst();
    initSbArtikelLijst();
    initSchermbreedte();
    // initSchermhoogte(); // bij vast kop+menu

    initInhoudHoogte();

    ////
    $(window).resize(initSchermbreedte);
    // $(window).resize(initSchermhoogte); // bij vast kop+menu
});


/* **** */
function initMandjeFormulieren()
{
    $('form.mandje').submit(vulMandje);
}

function vulMandje()
{
    var form = $(this),
        knop = $('input:image', form),
        knop_start_src = knop.attr('src'),
        // zie ook css/site.css
        melding = $('<div></div>');

    // even wachten
    knop.attr('src', 'img/spinner_24.gif').attr('disabled', true);

    // met AJAX het mandje vullen
    $.post(
        'index.php',
        $(this).serialize()+'&mandje_ajax=1',
        function(data) {
            if (data == 'ok')
            {
                melding.addClass('mandje_gevuld');

                // mandje in kop verversen
                $('#mandje').load('mandje.php');
            }
            else
            {   // oeps
                melding.addClass('mandje_niet_gevuld');
            }

            // indicatie geven dat er iets is gebeurd
            melding
                .hide()
                .appendTo('body')
                .slideDown(750, function(){
                    melding.slideUp(1000, function(){
                        melding.remove();
                    });
                });

            // klaar
            knop.attr('src', knop_start_src).attr('disabled', false);
        });

    // formulier niet indienen
    return false;
}


/* **** */
// Ten behoeve van iPads, deze snappen het niet wanneer een <label> die zich
// buiten het formulier bevindt waar de knop in staat waarnaar verwezen wordt
// via het for-attribuut niet
// De desktop versie van Safari heeft overigens geen last van dit probleem/
function initNepKnoppen()
{
    $('label.nepknop').click(klikNepKnop);
}

function klikNepKnop()
{
    var label_is_voor = $(this).attr('for'),
        echte_knop = $('#'+label_is_voor);

    // oeps, echte knop lijkt niet te bestaan
    if (echte_knop.length != 1) return false;

    // sluis klik door naar de echte knop
    echte_knop.click();

    // stop verdere afhandeling van klik door browser
    return false;
}


/* **** */
function initBanier()
{
    // http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
    $('#banier2 marquee')
        .marquee()
        .mouseover(function(){ $(this).trigger('stop'); })
        .mouseout(function(){ $(this).trigger('start'); })
        .mousemove(function(event){
            if ($(this).data('drag') == true)
            {
                this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
            }
        })
        .mousedown(function(event){
            $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
        })
        .mouseup(function(){ $(this).data('drag', false); });
}


/* CATEGORIE VOUWERS */
// categorieen.php
/*
pijl optie 1
var openstaande_cat = '&darr;',
    gesloten_cat = '&rarr;';

pijl optie 2
var openstaande_cat = '!“',
    gesloten_cat = '!’';

pijl optie 3
*/
var openstaande_cat = '%¼',
    gesloten_cat = '%º';

function initCatVouwers()
{
    // bij openen alle vouwers verbergen
    $('#categorieen div.foldee').hide();
    // $('#categorieen div.folder').append('<span>'+gesloten_cat+'</span>');


    // eventuele huidige weer openen
    // $('#categorieen div.folder.huidige_categorie span').html(openstaande_cat);
    $('#categorieen div.foldee.huidige_categorie').show();
    $('#categorieen div.foldee:has(a.huidige_categorie)').show();

    /* hoofdcategorie gaat nu naar een eigen pagina, interactief openklappen is niet meer nuttig
    // bij openen alle vouwers verbergen
    $('#categorieen div.foldee').hide();

    // vouwers activeren
    $('#categorieen div.folder')
        .append('<span>'+gesloten_cat+'</span>')
        .click(function(){
            var x = this.id.split('_'),
                foldee_id = 'foldee_'+x[1],
                foldee_was_hidden = $('div#'+foldee_id).is(':hidden');

            // alle vouwers eerst sluiten
            $('#categorieen div.folder span').html(gesloten_cat);
            $('#categorieen div.foldee').hide();

            // geklikte vouwer openen (of gesloten laten)
            if (foldee_was_hidden)
            {
                $('span', this).html(openstaande_cat);
                $('div#'+foldee_id).show();
            }
        });

    // eventuele huidige weer openen
    $('#categorieen div.folder.huidige_categorie span').html(openstaande_cat);
    $('#categorieen div.folder.huidige_categorie').click();
    $('#categorieen div.foldee:has(a.huidige_categorie)').show();
    */
}


/* LOGIN */
// inloggen.php
function initLogin()
{
    /* #login_pop pas verbergen met JS zorgt in IE (verrassing!) voor nogal wat
     * geflikker, dus deze wordt in CSS al verborgen met een display:none;
     */

    ///////////////////////////////////////////////////////////////////////////
    /* voor als #login_pop NIET in CSS wordt verborgen
    if ($('#login_pop').hasClass('open') == false)
    {   // als de pop-up NIET open moet staan bij het laden van de pagina dan...
        $('#login_pop').hide(); // direct verbergen, niet met fadeOut()
    }
    */

    ///////////////////////////////////////////////////////////////////////////
    /* voor als #login_pop in CSS wordt verborgen
    */
    if ($('#login_pop').hasClass('open'))
    {   // als de pop-up WEL open moet staan bij het laden van de pagina dan...
        openLogin();
    }

    // IE8 accepteert geen submit via de enter-toets wanneer een formulier verborgen is door CSS
    $('form#login_form').handle_enter_keypress_for_ie8();
    ///////////////////////////////////////////////////////////////////////////

    // "knoppen" activeren
    $('#login_status').click(openLogin); // inloggen.php
    $('#mandje_login_status').click(openLogin); // mandje.php
    $('.niet_ingelogd').click(openLogin); // artikel.php

    // sluitknop
    $('<span id="login_sluit">&times;</span>')
        .click(sluitLogin)
        .appendTo('#login_pop');

    ////
    $('#login_pop input:submit').click(sluitLogin);
}

function openLogin()
{
    $('#login_pop').fadeIn();
    $('#login_form').focus(); // voor de tabindex, anders springt de cursor na
                              // een tab naar zoeken ipv. wachtwoord
    $('#login_gebruikersnaam').select();
}

function sluitLogin()
{
    $('#login_pop').fadeOut();
}


/* ZOEK */
var zoek_veld;
// zie zoek.php voor l_zoek_plaatshouder

function initZoek()
{
    zoek_veld = $('#zoek input:text');

    zoek_veld
        .focus(zoekPlaatshouderIn)
        .blur(zoekPlaatshouderUit)
        .blur();

    $('#zoek form').submit(controleerPlaatshouder);
}

function zoekPlaatshouderIn()
{
    zoek_veld.removeClass('plaatshouder');

    if (zoek_veld.val() == l_zoek_plaatshouder)
    {
        zoek_veld.val('');
    }
}

function zoekPlaatshouderUit()
{
    if (zoek_veld.val() == '' || zoek_veld.val() == l_zoek_plaatshouder)
    {
        zoek_veld.val(l_zoek_plaatshouder);
        zoek_veld.addClass('plaatshouder');
    }
}

function controleerPlaatshouder()
{
    if (zoek_veld.val() == l_zoek_plaatshouder)
    {
        zoek_veld.focus();
        return false;
    }
}

/* ARTIKELLIJST (OOK IN "ZIEOOK", ONDERAAN ARTIKELDETAILS) - HOVER DETAILS */
var hover_marge_boven  = -20,
    hover_marge_onder  = 0,
    hover_marge_links  = 5,
    hover_marge_rechts = 5;

function initArtikelLijst()
{
    if ($('#inhoud .artikel_lijst').length == 0
        && $('#inhoud .zieook').length == 0)
    {
        return;
    }

    if (typeof(hover_details) == 'undefined') return;

    ////
    $('#inhoud .artikel_lijst > div').hover(artikelIn, artikelUit);
    $('#inhoud .zieook > div').hover(artikelIn, artikelUit);
}

function artikelIn()
{
    var artikel_id = this.id.replace('a_', ''),
        plaats = $(this).offset(),
        afmeting = { w: $(this).outerWidth(), h: $(this).outerHeight() },
        venster_afmeting = { w: $(window).width(), h: $(window).height() },
        hover_omvat = $('<div class="artikel_hover"></div>').appendTo('body'),
        hover_afmeting = { w: hover_omvat.outerWidth(), h: hover_omvat.outerHeight() },
        hover_plaats = { top: 0, left: 0 }; // straks vullen

    ////
    if (typeof(hover_details[artikel_id]) == 'undefined')
    {
        hover_omvat.remove();
        return;
    }

    ////
    /* optie 1: hover standaard rechts van het artikel, behalve als dat niet past, dan links ervan
    hover_plaats.left = plaats.left + afmeting.w + hover_marge_links;
    hover_plaats.top = plaats.top + hover_marge_boven;

    if ((venster_afmeting.w - hover_plaats.left) < hover_afmeting.w)
    {
        hover_plaats.left = plaats.left - hover_afmeting.w - hover_marge_rechts;
    }
    */

    /* optie 2: hover altijd links van het artikel
    */
    hover_plaats.left = plaats.left - hover_afmeting.w - hover_marge_rechts;
    hover_plaats.top = plaats.top + hover_marge_boven;

    ////
    // afmetingen zijn te bepalen via stylesheet (css/opmaak.css)
    hover_omvat.css({ left: hover_plaats.left, top: hover_plaats.top });

    ////
    hover_omvat.html(
        '<img class="afbeelding" src="'+hover_details[artikel_id]['afbeelding']+'" />'
        +'<span class="titel">'+hover_details[artikel_id]['titel']+'</span>'
        +'<span class="omschrijving">'+hover_details[artikel_id]['omschrijving']+'</span>'
        +'<span class="eigenschappen">'+hover_details[artikel_id]['eigenschappen']+'</span>'
        +'<span class="prijs">'+hover_details[artikel_id]['prijs']+'</span>'
        +'<span class="btw">'+hover_details[artikel_id]['btw']+'</span>'
        +'<span class="beeld_en_geluid">'+hover_details[artikel_id]['beeld_en_geluid']+'</span>'
        +'<span class="datumtoegevoegd">'+hover_details[artikel_id]['datumtoegevoegd']+'</span>'
        );

}

function artikelUit()
{
    // allemaal verwijderen
    $('div.artikel_hover').remove();
}


/* SNELBESTELLIJST - HOVER DETAILS */
var sb_hover_marge_boven  = -5,
    sb_hover_marge_onder  = 0,
    sb_hover_marge_links  = 5,
    sb_hover_marge_rechts = 5;

function initSbArtikelLijst()
{
    if ($('#inhoud #snelbestel_artikelen').length == 0) return;
    if (typeof(hover_details) == 'undefined') return;

    ////
    $('#inhoud #snelbestel_artikelen img.hover_details').hover(sbArtikelIn, sbArtikelUit);
}

function sbArtikelIn()
{
    var artikel_id = this.id.replace('a_', ''),
        plaats = $(this).offset(),
        afmeting = { w: $(this).outerWidth(), h: $(this).outerHeight() },
        venster_afmeting = { w: $(window).width(), h: $(window).height() },
        hover_omvat = $('<div class="artikel_hover snelbestel"></div>').appendTo('body'),
        hover_afmeting = { w: hover_omvat.outerWidth(), h: hover_omvat.outerHeight() },
        hover_plaats = { top: 0, left: 0 }; // straks vullen

    ////
    if (typeof(hover_details[artikel_id]) == 'undefined')
    {
        hover_omvat.remove();
        return;
    }

    ////
    hover_plaats.left = plaats.left + afmeting.w + sb_hover_marge_links;
    hover_plaats.top = plaats.top + sb_hover_marge_boven;

    ////
    // afmetingen zijn te bepalen via stylesheet (css/opmaak.css)
    hover_omvat.css({ left: hover_plaats.left, top: hover_plaats.top });

    ////
    hover_omvat.html(
        '<img class="afbeelding" src="'+hover_details[artikel_id]['afbeelding']+'" />'
        +'<span class="titel">'+hover_details[artikel_id]['titel']+'</span>'
        +'<span class="omschrijving">'+hover_details[artikel_id]['omschrijving']+'</span>'
        +'<span class="eigenschappen">'+hover_details[artikel_id]['eigenschappen']+'</span>'
        +'<span class="prijs">'+hover_details[artikel_id]['prijs']+'</span>'
        +'<span class="btw">'+hover_details[artikel_id]['btw']+'</span>'
        +'<span class="datumtoegevoegd">'+hover_details[artikel_id]['datumtoegevoegd']+'</span>'
        );
}

function sbArtikelUit()
{
    // allemaal verwijderen
    $('div.artikel_hover').remove();
}


/* **** */
function initSchermbreedte()
{   // stuur huidige schermbreedte naar server tbv. aantal te tonen artikelen in lijst
    // $('#zoek form input:text').val($(window).width()+30); // XXX test
    $.post('schermbreedte.php', { w: $(window).width() } );
}

function initSchermhoogte()
{
    $('#cats_omvat')
        .height($(window).height()
                // verticale margin, padding en border van doel element
                - ($('#cats_omvat').outerHeight(true) - $('#cats_omvat').height())
                // padding van omvatter
                - ($('#omvat').outerHeight(true) - $('#omvat').height())
                );

    $('#inhoud')
        .height($(window).height()
                // verticale margin, padding en border van doel element
                - ($('#inhoud').outerHeight(true) - $('#inhoud').height())
                // padding van omvatter
                - ($('#omvat').outerHeight(true) - $('#omvat').height())
                );
}

/* **** */
// Hoogte van div#inhoud aanpassen zodat deze ten minste zo hoog is als
// div#cats_omvat.
function initInhoudHoogte()
{
    if ($('div#voorpagina').length == 1) return;

    ////
    var minimale_hoogte = $('div#cats_omvat').height();

    minimale_hoogte += 20;   // beetje extra ruimte geven
    minimale_hoogte += 'px'; // css-waarde van maken

    ////
    $('div#inhoud').css('min-height', minimale_hoogte);



    /* XXX oud, Categoriemenu wordt op nu correcte hoogte gehouden (door het
                aantal categorieen handmatig te beperken in admin) om niet
                hoger dan de achtergrondafbeelding van de voorpagina uit te
                komen. Dus we houden gewoon de hoogte aan van de afbeelding,
                via CSS (div#voorpagina in css/site.css).

    var minimale_hoogte = $('div#cats_omvat').height();

    minimale_hoogte += 20;   // beetje extra ruimte geven
    minimale_hoogte += 'px'; // css-waarde van maken

    ////
    $('div#inhoud').css('min-height', minimale_hoogte);

    // de omvatter van de voorpagina ook aanpassen
    $('div#voorpagina').css('height', minimale_hoogte);
    */
}


/* MANDJE */
var mandje_venster = false;

function openMandje(basis_dir)
{
    if (mandje_venster == false
        || mandje_venster.closed
        || mandje_venster.name == 'undefined')
    {
        mandje_venster = window.open(basis_dir+'/afhandeling-1.php','afhandeling','width=800,height=700,scrollbars=yes,toolbar=no,location=no');
    }
    else
    {
        mandje_venster.focus();
        mandje_venster.location.href = basis_dir+'/afhandeling-1.php';
    }
}

/* HULPFUNCTIES VOOR FORMULIER VALIDATIE */
function haalWaarde(elid)
{
    return $('#'+elid).val();
}

function isLeeg(elid)
{
    return (jQuery.trim($('#'+elid).val()) == '');
}

function zetFout(elid)
{
    $('#'+elid).addClass('formfout');
}

function wisFouten()
{
    $('.formfout').removeClass('formfout');
}

function telFouten()
{
    return $('.formfout').length;
}

function isFoutAlsLeeg(elid)
{   // snel-functie, combineert controle en foutmelding zetten in één
    if (isLeeg(elid))
    {
        zetFout(elid);
        return 1; // om bijvoorbeeld een foutteller op te hogen
    }
    else
    {
        return 0;
    }
}